当前位置: 首页 > news >正文

Day02-ES6

一.proxy代理

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let obj = {name: "xiaohao",age: 18}let handler = {get: function (target, key) {console.log(key);// console.log("无权访问" + key);return target[key];},set: function (target, key, value) {console.log("设置" + key + "成功");target[key] = value;}}// 实例化代理var proxy = new Proxy(obj, handler);console.log(obj);console.log(proxy);console.log(proxy.name);        // proxy.getproxy.gender = "男";            // proxy.setconsole.log(proxy);</script></body></html>

二.reflect反射

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let obj = {name: "xiaohao",age: 18,get fun() {return this.name;}}// Reflect 反射// get console.log(Reflect.get(obj, "name"));var newObj = {name: "xiaogu",age: 20}console.log(Reflect.get(obj, "fun", newObj));Reflect.set(obj, "gender", "男");console.log(obj);</script></body></html>

三.组合使用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let obj = {name: "xiaohao",age: 18}let handler = {get: function (target, key) {// ...操作return Reflect.get(target, key);},set: function (target, key, value) {return Reflect.set(target, key, value);}}// 实例化代理对象let proxy = new Proxy(obj, handler);console.log(proxy.name);proxy.gender = "男";console.log(proxy);</script></body></html>

四.ES6字符串

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><div></div><script>let str = "hello";// 重复console.log(str.repeat(3));// 补全console.log(str.padStart(10, "o"));// 模板字符串document.querySelector("div").innerHTML = `<h1>hello</h1>`;</script></body></html>

五.ES6数值

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// 十进制let num = 10;// 二进制let num1 = 0b1001;console.log(num1);// 八进制let num2 = 0o1001;console.log(num2);// 十六进制let num3 = 0x1001;console.log(num3);// 幂运算console.log(num ** 3);// parseInt()方法补充console.log(parseInt("10"));console.log(parseInt("10", 8));let arr = ["1", "2", "3"];console.log(arr.map(parseInt));parseInt("1", 0);       // 1parseInt("2", 1);       // NaNparseInt("3", 2);       // NaN</script></body></html>

六.ES6对象

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>let name = "zhangsan";let age = 18;function sayHi() {console.log("hello");}// 对象的简写形式var obj = {name,age,sayHi}let obj2 = {gender: "男"}console.log(obj);obj.sayHi();// 扩展运算符// 扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象。let newObj = { ...obj, ...obj2 };        // 浅拷贝console.log(newObj);</script></body></html>

七.ES6数组

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><script>// Array.of() 创建数组console.log(Array.of(1, 2, 3, 4, 5, 6, 7));var map = new Map();map.set("name", "xiaohao");map.set("age", "18");console.log(Array.from(map));// arr.flat()  抚平数组let arr = [1, 2, 3, [4, [5, 6, [7, 8, 9]]]];console.log(arr);console.log(arr.flat(1));console.log(arr.flat(2));console.log(arr.flat(3));// 扩展运算符let arr2 = [1, 2, 3, 4, 5];let arr3 = [...arr2];console.log(arr3);</script></body></html>

相关文章:

Day02-ES6

一.proxy代理 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> </head>…...

2023年12月记录内容管理

文章目录 前言1.[vue构建项目](https://mp.csdn.net/mp_blog/creation/editor/134829688)2. [Nodejs后端express框架](https://mp.csdn.net/mp_blog/creation/editor/134841711)3. [前端知识点](https://mp.csdn.net/mp_blog/creation/editor/132810879)4.[前端知识点-vue篇&am…...

【测试基础】构造测试数据之 MySQL 篇

构造测试数据之 MySQL 篇 作为一名测试工程师&#xff0c;我们经常会构造测试数据进行一些功能验证。为了暴露更多的问题&#xff0c;在测试数据的构造上&#xff0c;我们应该尽可能的构造不同类型字段的数据&#xff0c;且一张表的字段最好不低于 10 10 10 个。 对于 MySQL …...

基于单片机的语音识别自动避障小车(论文+源码)

1.系统设计 此次基于单片机的语音识别自动避障小车&#xff0c;以STC89C52单片机作为系统的主控制器&#xff0c;利用超声波模块来实现小车与障碍物距离的测量并通过LCD液晶显示&#xff0c;当距离低于阈值时会通过WT588语音模块进行报警提示&#xff0c;并且小车会后退来躲避…...

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项样题卷①

2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项&#xff08;高职组&#xff09; 样题&#xff08;第1套&#xff09; 目录 2023年“中银杯”四川省职业院校技能大赛“云计算应用”赛项&#xff08;高职组&#xff09; 样题&#xff08;第1套&#xff09; 模块一…...

【信息安全原理】——入侵检测与网络欺骗(学习笔记)

&#x1f4d6; 前言&#xff1a;在网络安全防护领域&#xff0c;防火墙是保护网络安全的一种最常用的设备。网络管理员希望通过在网络边界合理使用防火墙&#xff0c;屏蔽源于外网的各类网络攻击。但是&#xff0c;防火墙由于自身的种种限制&#xff0c;并不能阻止所有攻击行为…...

JVM GC 算法原理概述

对于JVM的垃圾收集&#xff08;GC&#xff09;&#xff0c;这是一个作为Java开发者必须了解的内容&#xff0c;那么&#xff0c;我们需要去了解哪些内容呢&#xff0c;其实&#xff0c;GC主要是解决下面的三个问题&#xff1a; 哪些内存需要回收&#xff1f; 什么时候回收&…...

【数值分析】LU分解解Ax=b,matlab自己编程实现

LU分解&#xff08;直接三角分解&#xff0c;Doolittle分解&#xff09; A x b , A L U Axb \,\,,\,\, ALU Axb,ALU { L y b U x y \begin{cases} Lyb \\ Uxy \end{cases} {LybUxy​ 矩阵 L {L} L 的对角元素为 1 {1} 1 &#xff0c;矩阵 U {U} U 的第一行和 A {A} A …...

华为HCIE-Datacom课程介绍

厦门微思网络HCIE-Datacom课程介绍 一、认证简介 HCIE-Datacom&#xff08;Huawei Certified ICT Expert-Datacom&#xff09;认证是华为认证体系中的顶级认证&#xff0c;HCIE-Datacom认证定位具备坚实的企业网络跨场景融合解决方案理论知识&#xff0c;能够使用华为数通产品…...

QT(C++)-QTableWight添加行和删除空行

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1、前言2、QTableWidget的添加行3、删除行 1、前言 最近要用QT开发项目&#xff0c;对QT不是很熟&#xff0c;就根据网上的查到的知识和自己的摸索&#xff0c;将一…...

软件测试/测试开发丨Python 面向对象编程思想

面向对象是什么 Python 是一门面向对象的语言面向对象编程&#xff08;OOP&#xff09;&#xff1a;Object Oriented Programming 所谓的面向对象&#xff0c;就是在编程的时候尽可能的去模拟真实的现实世界&#xff0c;按照现实世界中的逻辑去处理问题&#xff0c;分析问题中…...

一次降低进程IO延迟的性能优化实践——基于block层bfq调度器

如果有个进程正频繁的读写文件&#xff0c;此时你vim查看一个新文件&#xff0c;将会出现明显卡顿。即便你vim查看的文件只有几十M&#xff0c;也可能会出现卡顿。相对的&#xff0c;线上经常遇到IO敏感进程偶发IO超时问题。这些进程一次读写的文件数据量很少&#xff0c;正常几…...

C语言易错知识点十(指针(the final))

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ 许久不见&#xff0c;甚是想念&#xff0c;真的是时间时间&#xff0c;你慢些吧&#xff0c;不能再让头发变秃…...

React 18 新增的钩子函数

React 18 引入了一些新的钩子函数&#xff0c;用于处理一些常见的场景和问题。以下是 React 18 中引入的一些新钩子函数以及它们的代码示例和使用场景&#xff1a; useTransition&#xff1a; 代码示例&#xff1a;import { useTransition } from react;function MyComponent()…...

安装与部署Hadoop

一、前置安装准备1、机器2、java3、创建hadoop用户 二、安装Hadoop三、环境配置1、workers2、hadoop-env.sh3、core-site.xml4、hdfs-site.xml5、linux中Hadoop环境变量 四、启动hadoop五、验证 一、前置安装准备 1、机器 主机名ip服务node1192.168.233.100NameNode、DataNod…...

MySQL 8.0 InnoDB Tablespaces之General Tablespaces(通用表空间/一般表空间)

文章目录 MySQL 8.0 InnoDB Tablespaces之General Tablespaces&#xff08;通用表空间/一般表空间&#xff09;General tablespaces&#xff08;通用表空间/一般表空间&#xff09;通用表空间的功能通用表空间的限制 创建通用表空间&#xff08;一般表空间&#xff09;创建语法…...

循环生成对抗网络(CycleGAN)

一、说明 循环生成对抗网络&#xff08;CycleGAN&#xff09;是一种训练深度卷积神经网络以执行图像到图像翻译任务的方法。网络使用不成对的数据集学习输入和输出图像之间的映射。 二、基本介绍 CycleGAN 是图像到图像的翻译模型&#xff0c;就像Pix2Pix一样。Pix2Pix模型面临…...

数组--53.最大子数组和/medium

53.最大子数组和 1、题目2、题目分析3、解题步骤4、复杂度最优解代码示例5、抽象与扩展 1、题目 给你一个整数数组 nums &#xff0c;请你找出一个具有最大和的连续子数组&#xff08;子数组最少包含一个元素&#xff09;&#xff0c;返回其最大和。 子数组 是数组中的一个连…...

centos 编译安装 python 和 openssl

安装环境&#xff1a; centos 7.9 &#xff1a; python 3.10.5 和 openssl 3.0.12 centos 6.10 &#xff1a; python 3.10.5 和 openssl 1.1.1 两个环境都能安装成功&#xff0c;可以正常使用。 安装 openssl 下载地址 下载后解压&#xff0c;进入到解压目录 执行&#xf…...

【nodejs】前后端身份认证

前后端身份认证 一、web开发模式 服务器渲染&#xff0c;前后端分离。 不同开发模式下的身份认证&#xff1a; 服务端渲染推荐使用Session认证机制前后端分离推荐使用JWT认证机制 二、session认证机制 1.HTTP协议的无状态性 了解HTTP协议的无状态性是进一步学习Session认…...

谷歌浏览器插件

项目中有时候会用到插件 sync-cookie-extension1.0.0&#xff1a;开发环境同步测试 cookie 至 localhost&#xff0c;便于本地请求服务携带 cookie 参考地址&#xff1a;https://juejin.cn/post/7139354571712757767 里面有源码下载下来&#xff0c;加在到扩展即可使用FeHelp…...

脑机新手指南(八):OpenBCI_GUI:从环境搭建到数据可视化(下)

一、数据处理与分析实战 &#xff08;一&#xff09;实时滤波与参数调整 基础滤波操作 60Hz 工频滤波&#xff1a;勾选界面右侧 “60Hz” 复选框&#xff0c;可有效抑制电网干扰&#xff08;适用于北美地区&#xff0c;欧洲用户可调整为 50Hz&#xff09;。 平滑处理&…...

在HarmonyOS ArkTS ArkUI-X 5.0及以上版本中,手势开发全攻略:

在 HarmonyOS 应用开发中&#xff0c;手势交互是连接用户与设备的核心纽带。ArkTS 框架提供了丰富的手势处理能力&#xff0c;既支持点击、长按、拖拽等基础单一手势的精细控制&#xff0c;也能通过多种绑定策略解决父子组件的手势竞争问题。本文将结合官方开发文档&#xff0c…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

渗透实战PortSwigger靶场-XSS Lab 14:大多数标签和属性被阻止

<script>标签被拦截 我们需要把全部可用的 tag 和 event 进行暴力破解 XSS cheat sheet&#xff1a; https://portswigger.net/web-security/cross-site-scripting/cheat-sheet 通过爆破发现body可以用 再把全部 events 放进去爆破 这些 event 全部可用 <body onres…...

Objective-C常用命名规范总结

【OC】常用命名规范总结 文章目录 【OC】常用命名规范总结1.类名&#xff08;Class Name)2.协议名&#xff08;Protocol Name)3.方法名&#xff08;Method Name)4.属性名&#xff08;Property Name&#xff09;5.局部变量/实例变量&#xff08;Local / Instance Variables&…...

多模态商品数据接口:融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案

JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停​​ 1. ​​安全点(Safepoint)阻塞​​ ​​现象​​:JVM暂停但无GC日志,日志显示No GCs detected。​​原因​​:JVM等待所有线程进入安全点(如…...

Kafka入门-生产者

生产者 生产者发送流程&#xff1a; 延迟时间为0ms时&#xff0c;也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于&#xff1a;异步发送不需要等待结果&#xff0c;同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...