ES6 学习（三）-- es特性

news/2024/4/28 19:31:57/文章来源:https://blog.csdn.net/2302_79523175/article/details/137059464

文章目录

  • 1. Symbol
    • 1.1 使用Symbol 作为对象属性名
    • 1.2 使用Symbol 作为常量
  • 2. Iterator 迭代器
    • 2.1 for...of循环
    • 2.2 原生默认具备Interator 接口的对象
    • 2.3 给对象添加Iterator 迭代器
    • 2.4 ... 解构赋值
  • 3. Set 结构
    • 3.1 初识 Set
    • 3.2 Set 实例属性和方法
    • 3.3 遍历
    • 3.4 相关面试题
  • 4. Map 结构
    • 4.1 初识 Map
    • 4.2 Map 实例属性和方法
    • 4.3 遍历
  • 5. Proxy 代理
    • 5.1 Proxy 基本使用
    • 5.2 has()
    • 5.3 拦截set 结构

1. Symbol

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它属于JavaScript语言的原生数据类型之一，其他数据类型是：undefined、null、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

1.1 使用Symbol 作为对象属性名

在开发过程中设置对象属性值时可能不小心就设置了本来就存在的属性，这样就会出现将原来的属性值直接覆盖的问题。
现在我们可以使用Symbol 数据类型来避免出现这种情况。

书写格式：
let s1 = Symbol()
// 生成了一个Symbol类型数据
[s1] = 赋值

这种构造函数创建出来的Symbol 类型数据是唯一的。

Lets1=Symbol()
Let s2 =Symbol()
console.log(s1===s2)

// false

Symbol 类型数据需要注意的是：

  1. 不能进行运算；
    console.log(s1>“aaaaa”)
  2. 显示调用toString()
    console.log(s1.tostring()+“aaaa”)
  3. 隐式转换Boolean
    if(s1){
    console.log(s1);
    }

Symbol 数据类型用初体验：

// 定义自己的公共库
let keys={
name:Symbol(),
age:Symbol(),
location:Symbol(),
test:Symbol()
}
// 对属性赋值
let obj ={
[keys.name]:"kerwin",
[keys.age]:100,
[keys.location]:"dalian",
[keys.test](){
console.log("test")

Symbol 对象也可以进行传参:
在这里插入图片描述

// Object{
name:“aaaaaaa”
Symbol(age):100
Symbol(location):“dalian”
Symbol(name):“kerwin”
Symbol(test):f keys.test
}

使用for…in… 循环只能遍历之前学习的五种基本数据类型，Symbol 类型的数据不能被遍历！
对此，解决办法是：
在这里插入图片描述
两种方法结合可以得到对象的所有类型数据
！
之后我们会学习Reflect 对象，使用

Reflect.ownKeys(obj).forEach(item=>{
console.log(item,obj[item])
)

就可以遍历对象的所有数据类型的属性

1.2 使用Symbol 作为常量

const VIDEO = Symbol();
const AUDIO = Symbol();
const IMAGE = Symbol();
function play(type){
switch(type){
case VIDEO:
console.log("视频播放")
break;
case AUDIO:
console.log("音频播放")
break;
case
IMAGE:
console.1og("图片播放")
break;
plav(AUDIO);

2. Iterator 迭代器

Iterator的作用有三个：
一是为各种数据结构，提供一个统一的、简便的访问接口；
二是使得数据结构的成员能够按某种次序排列；
三是ES6创造了一种新的遍历命令for…of循环，Iterator接口主要供for…of循环

2.1 for…of循环

for…of循环使用：

Let arr ["aaaa","bbbb","cccc"]
for(let i of arr){
console.log(i)

// aaaa
// bbbb
// cccc

for…of循环能够使用的底层原理：
这些数据对象都存在一个Symbol(Symbol.iterator) 属性（接口）！
在这里插入图片描述

ES6规定，默认的Iterator接口部署在数据结构的Symbol.iterator属性，或者说，一个数据结构只要具有Symbol.iterator属性，就可以认为是“可遍历的”(iterable)。Symbol…iterator)属性本身是一个函数，就是当前数据结构默认的遍历器生成函数。执行这个函数，就会返回一个遍历器。
Iterator 遍历的底层逻辑：
在这里插入图片描述

我们定义一个两个对象：

// 定义自己的公共库
let keys={
name:Symbol(name),
age:Symbol(age),
location:Symbol(location),
test:Symbol(test)
}
// 对属性赋值
let obj ={
[keys.name]:"kerwin",
[keys.age]:100,
[keys.location]:"dalian",
[keys.test](){
console.log("test")

现在我们是不能通过obj[Symbol(age)]进行访问的，会报错；只能通过key.age找到。

2.2 原生默认具备Interator 接口的对象

在这里插入图片描述

arguments对象：
在这里插入图片描述

2.3 给对象添加Iterator 迭代器

对于大多数的对象是都不支持for…of 循环的，因为没有埋下Interator 接口，但是对象中的某个属性可能埋下了Interator 接口能够使用for…of 循环。

对象是无序列非线性的，但是我们自己学习数组的设计（使用Array.prototype[Symbol.Iterator]最为该对象的[Symbol.Iterator]，同时添加属性数作为长度），这样可以为线性对象也就添加了Iterator接口。
在这里插入图片描述
// kerwin
// teichui
// ganger

但是我们一般也不会去创建例子中的数组，因为这种书组没有太大的实际意义；下面我们就学习对无序列非线性对象添加Iterator 迭代器！

let obj2={
code:200,
name: "obj2",
list: ["kerwin","tiechui","gangdan"],
// 这种对象我们也只能取到数组这种数据，取不到code 等这种数据，因为他们非线性，无规律
// list中信息是隐私的，我们使用迭代器是取不到的
// 迭代器
[Symbol.iterator](){
let index = 0
return
// next(){
// return
// {value:list[index++],done:false}
next:()=>{
//console.log(this)
return {value:this.list[index],
done:index===this.list.length?true:false}
}
for(Let i of obj2){
console.log(i)
}

2.4 … 解构赋值

在这里插入图片描述
… 结合解构赋值可以调用迭代器将非数组元素展开到数组中去，替代了Array,from()。

3. Set 结构

Set 结构类似于数组，但成员的值都是唯一的，没有重复的值。

3.1 初识 Set

  1. 创建Set 对象时传入参数；
let s1=new Set([1,2,3,2,3,4])
console.log(s1)
console.log([...s1])
// [1,2,3,4]
console.log(Array.from(s1))
// [1,2,3,4]
  1. 创建空的Set 对象
let s2 = new Set()
s2.add(1) // 向Set 结构中添加数据
s2.add(2)
s2.add(2)
s2.add(3)
console.log(s2)
for(let i of s1){
console.log(i)
}

3.2 Set 实例属性和方法

在这里插入图片描述

  1. x.size – 返回Set 结构的长度
    在这里插入图片描述
  2. x.add()
    在这里插入图片描述
  3. x.has()在这里插入图片描述
  4. x.delete()
    在这里插入图片描述
  5. x.clear()
    在这里插入图片描述

3.3 遍历

在这里插入图片描述

for(Let i of s2){
console.log(i)
}
for(Let i of s2.keys()){
console.log(i)
}
for(Let i of s2.values()){
console.log(i)
}
for(let i of s2.entries(){
console.log(i)
}

// 11
// 22
// 33
// 11
// 22
// 33
// 11
// 22
// 33
// (2) [11,11]
// (2) [22,22]
// (2) [33,33]

对于数组来说，普通for…of 只能拿到数值，而不能拿到索引

let arr = ["aa","bb","cc"]
for(let i of arr){
console.log(i)
}

// (2) [0,‘aa’]
// (2) [y,‘bb’]
// (2) [2,‘cc’]

所以我们可以使用解构赋值和arr.entries() 同时拿到数组的索引和数值。

Let arr ["aa","bb","cc"]
for(Let [index,item]of arr.entries()){
console.log(index,item)

// 0 ‘aa’
// 1 ‘bb’
// 2 ‘cc’

  1. foreach()
s2.forEach((item,index)=>{
console.log(item,index)
})
// foreach() 只能拿到数值，不能拿到索引

// 11 11
// 22 22
// 33 33

3.4 相关面试题

对字符串 / 对象 / 数组等复杂数据去重

let list = [1,2,2,"kerwin","kerwin",[1,2],[3,4],[1,2],{name:"kerwin"}
{age:100},{name:"kerwin"}]
function uni(arr){
Let res = new Set()
return arr.filter((item)=>{
//判断has trun false
//没有return true
Let id JSON.stringify(item)
if(res.has(id)){
return false
}else{
res.add(id)
return true}
})
}
console.log(uni(list))

4. Map 结构

类似于对象，也是键值对的集合，但是“键"的范围不限于字符串，各种类型的值（包括对象）都可以当作键。

4.1 初识 Map

  1. 创建有参数的Map 结构
let m1 = new Map([
["name","kerwin"],
["age",100],
[{a:1},"大连"]])
console.log(m2)

在这里插入图片描述

  1. 创建空的Map 结构
let m2 = new Map()
m2.set("name","kerwin")// set() 添加数据
m2.set("age",100)
m2.set({a:1},"大连")
console.1og(m2)

在这里插入图片描述
证明Map 结构存在Iterator 迭代器

for(let i of m2){
console.log(i)
console.1og([...m2]

// (2)[‘name’,‘kerwin’]
// (2)[‘age’,100]
// (2)[{…},‘大连’]
// (3)[Array(2),Array(2),Array(2)]

4.2 Map 实例属性和方法

在这里插入图片描述

  1. Map.set()

  2. Map.get(key)
    如果key 为一个对象，比如{a: 1}，那么就不能通过Map.get({a: 1}) 获取相应的值，只能通过设置let o = {a: 1}；同时将o 作为key 把数据传入Map 结构中。（因为此时key 只是储存了数据地址，我们）
    在这里插入图片描述
    // 大连

  3. Map.has(key)
    在这里插入图片描述
    // true

  4. Map.size
    在这里插入图片描述

  5. Map.clear
    在这里插入图片描述

4.3 遍历

let m1 = new Map([
["name","kerwin"],
["age",100],
[{a:1},"大连"]])
for(let i of m1.values()){
console.log(i)}
for(let [index,item] of m1.entries()){
console.log(index,item)}
for(let [index,item] of m1){
console.log(index,item)}

// kerwin
// 100
// 大连
// name kerwin
// age 100
// {a:1} ‘大连’
// name kerwin
// age 100
// {a:1} ‘大连’

m1.entries() 和m1 的迭代器可能是同一个

5. Proxy 代理

Proxy如其名，它的作用是在对象和和对象的属性值之间设置一个代理，获取该对象的值或者设置该对象的值，以及实例化等等多种操作，都会被拦截住，经过这一层我们可以统一处理，我们可以认为它就是"代理器"

没有出现Proxy 代理的时候我们使用的是object.defineProperty(obj, 被修改拦截的属性, {get(){}, set(){}})。可以修改操作DOM元素。

<div id="box"></div>
<script>
Let obj = {
// console.log(box) 实际上我们可以直接通过id 直接访问到DOM 元素
// 拦截操作
object.defineProperty(obj,"data",
get(){
console.log("get")
return box.innerHTML
}
set(value){
console.log("set",value)
//设置dom
box.innerHTML = vaLue
})
console.log(obj)
</script>

但是这种方法存在漏洞：

  1. 只能拦截修改一个属性，如果想要拦截修改对象的全部属性只能通过遍历实现；
  2. 只能拦截对象

5.1 Proxy 基本使用

get() 和set() 的使用：

<div id="box"></div>
<script>
let obj = {}
let proxy = new Proxy(obj,
get(target,key){
console.log("get",target[key])
return target[key]}
// 其中target 就是指obj 
set(target,key,value){
console.log("set",target,key,value)
if(key==="data"){
box.innerHTML = value
target[key] = vaLue}
})
</script>

此时就不能再通过obj 进行访问相应属性，只能通过proxy 进行访问

5.2 has()

has() – 判断Proxy 代理对象是否含有某个属性
在这里插入图片描述
如果has() 中return 的是false ，那么访问proxy 的任何属性，has()结果都是false

has() 使用较少，仅仅知道就可以了

5.3 拦截set 结构

在这里插入图片描述
在这里插入图片描述
按照以下方式修改：
在这里插入图片描述

拦截set 结构时最容易出现的问题：
在这里插入图片描述
add() 中有this 指向，

Let s new Set()
Let proxy new Proxy(s,
get(target,key){
//判断如果key 是方法，修正this指向
Let value = target[key]
if(value instanceof Function){
//call apply bind
return value.bind(target)}
return value
},
set(){
console.log("set")
})

Proxy本质上属于元编程非破坏性数据劫持，在原对象的基础上进行了功能的衍生而又不影响原对象，符合松耦合高内聚的设计理念。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.luyixian.cn/news_show_1027300.aspx

如若内容造成侵权/违法违规/事实不符，请联系dt猫网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

代码学习记录29----贪心最后一天

代码学习记录29----贪心最后一天

随想录日记part29 t i m e &#xff1a; time&#xff1a; time&#xff1a; 2024.03.28 主要内容&#xff1a;今天是学习贪心算法最后一天&#xff0c;接下来是针对题目的讲解&#xff1a;1.单调递增的数字;2.监控二叉树; 3. 总结 738.单调递增的数字 968.监控二叉树 总结 To…
阅读更多...
【直播课】2024年PostgreSQL CM认证实战培训课程于4月27日开课！

【直播课】2024年PostgreSQL CM认证实战培训课程于4月27日开课！

课程介绍 了解关注开源技术&#xff0c;学习PG以点带面 Linux/Andriod&#xff08;操作系统&#xff09;、Apache/Tomcat&#xff08;应用服务器&#xff09;、OpenStack/KVM&#xff08;虚拟化&#xff09;、Docker/K8S&#xff08;容器化&#xff09;、Hadoop&#xff08;大…
阅读更多...
通过WSL在阿里云上部署Vue项目

通过WSL在阿里云上部署Vue项目

参考&#xff1a; 阿里云上搭建网站-CSDN博客 云服务器重装 关闭当前运行实例 更换操作系统&#xff0c;还有其他的进入方式。 选择ubuntu系统&#xff08;和WSL使用相同的系统&#xff09;。 设置用户和密码。发送短信验证码。 新系统更新。秒速干净的新系统设置完成。 这…
阅读更多...
玩电脑突然停电对电脑有影响吗

玩电脑突然停电对电脑有影响吗

在现代社会中&#xff0c;电脑已成为我们日常生活和工作中不可或缺的一部分。然而&#xff0c;当我们正在专注于工作或娱乐时&#xff0c;突然停电可能会给我们带来不小的困扰。那么&#xff0c;玩电脑时突然停电会对电脑产生哪些影响呢&#xff1f;本文将深入探讨这一问题&…
阅读更多...
踩坑uniapp中打包Andiord app，在真机调试时地图以及定位功能可以正常使用，打包成app后失效的问题

踩坑uniapp中打包Andiord app，在真机调试时地图以及定位功能可以正常使用，打包成app后失效的问题

首先看到这是uni官网提出的&#xff0c;app上建议使用高德地图。 下面就用高德地图进行配置。 步骤一&#xff1a;登陆高德地图控制台 名称和类型根据自己情况填写选择即可 步骤二&#xff1a; 添加key 步骤三&#xff1a;取到SHA1 进入uniapp开发官网 点击应用名称&#…
阅读更多...
Chrome 插件 tabs API 解析

Chrome 插件 tabs API 解析

Chrome.tabs API 解析 使用 chrome.tabs API 与浏览器的标签页系统进行交互&#xff0c;可以使用此 API 在浏览器中创建、修改和重新排列标签页 Tabs API 不仅提供操作和管理标签页的功能&#xff0c;还可以检测标签页的语言、截取屏幕截图&#xff0c;以及与标签页的内容脚本…
阅读更多...
asp.net开发中小程序端跟后端交互中的发现

asp.net开发中小程序端跟后端交互中的发现

小程序端wxml端代码示例&#xff1a; <button bind:tap"test">提交</button>小程序端js代码示例&#xff1a; test(){console.log(ok)wx.request({url: https://localhost:44375/lianxi01.aspx,})},asp.net端代码示例&#xff1a; cs端代码示例&#x…
阅读更多...
二维双指针，滑动窗口

二维双指针，滑动窗口

二维双指针 思路&#xff1a;考虑暴力做法&#xff0c;我们统计前缀和&#xff0c;然后枚举以 ( x 1 , y 1 ) (x_1,y_1) (x1​,y1​), ( x 2 , y 2 ) (x_2,y_2) (x2​,y2​)为左上&#xff0c;右下顶点的矩阵有多少是合法的&#xff0c;那么&#xff0c;这样的时间复杂度为 n 4…
阅读更多...
【python分析实战】成本：揭示电商平台月度开支与成本结构占比 - 过于详细 【收藏】

【python分析实战】成本：揭示电商平台月度开支与成本结构占比 - 过于详细 【收藏】

重点关注本文思路&#xff0c;用python分析&#xff0c;方便大家实验复现&#xff0c;代码每次都用全量的&#xff0c;其他工具自行选择。 全文3000字&#xff0c;阅读10min&#xff0c;操作1小时 企业案例实战欢迎关注专栏 每日更新&#xff1a;https://blog.csdn.net/cciehl/…
阅读更多...
【案例·增】获取当前时间、日期(含，SQL中DATE数据类型)

【案例·增】获取当前时间、日期(含，SQL中DATE数据类型)

问题描述&#xff1a; 需要使用当前时间、日期&#xff0c;可以使用 SQL 中的 CURDATE() 、NOW()、CURTIME()运算符 案例&#xff1a; INSERT INTO table_name(current_time, column_name2,...) VALUES (NOW(),, ...)规则(Date 相关函数)&#xff1a; 规则(Date数据类型)
阅读更多...
软件工程学习笔记12——运行维护篇

软件工程学习笔记12——运行维护篇

运行维护篇 一、版本发布1、关于软件版本2、版本发布前&#xff0c;做好版本发布的规划3、规范好发布流程&#xff0c;保障发布质量 二、DevOps工程师1、什么是 DevOps 三、线上故障1、遇到线上故障&#xff0c;新手和高手的差距在哪里2、大厂都是怎么处理线上故障的 四、日志管…
阅读更多...
jvm（HotSpotVM）学习记录

jvm（HotSpotVM）学习记录

1&#xff1a;当我们写的java文件经过编译器编译后生成class文件。class文件里面包含了各种java语言规范的特定语法。可以通过javap -v -private xxx.class 例如&#xff1a; javap -v -private Gas.class Classfile /D:/project/ike-springboot-carbonzero-v2/springboot-bms…
阅读更多...
业务服务：xss攻击

业务服务：xss攻击

文章目录 前言一、使用注解预防1. 添加依赖2. 自定义注解3. 自定义校验逻辑4. 使用 二、使用过滤器1. 添加配置2. 创建配置类3. 创建过滤器4. 创建过滤器类5. 使用 前言 xss攻击时安全领域中非常常见的一种方法&#xff0c;保证我们的系统安全是非常重要的 xss攻击简单来说就…
阅读更多...
【Nuxt3】环境文件.env的使用

【Nuxt3】环境文件.env的使用

简言 记录下环境文件.env的用法。 .env .env 文件指定了构建/开发时的环境变量。 在开发模式下以及运行 nuxi build 和 nuxi generate 时&#xff0c;Nuxt CLI 内置了 dotenv 支持。 除了任何进程环境变量外&#xff0c;如果你在项目根目录下有一个 .env 文件&#xff0c;…
阅读更多...
swagger/knife4j 接口文档增加图标 springboot

swagger/knife4j 接口文档增加图标 springboot

1.在资源目录下增加图标文件 2.配置/favicon.ico 资源 Configuration public class WebConfig implements WebMvcConfigurer {Overridepublic void addResourceHandlers(ResourceHandlerRegistry registry) {registry.addResourceHandler("/favicon.ico").addResour…
阅读更多...
华为云使用指南02

华为云使用指南02

5.​​使用GitLab进行团队及项目管理​​ GitLab旨在帮助团队进行项目开发协作&#xff0c;为软件开发和运营生命周期提供了一个完整的DevOps方案。GitLab功能包括&#xff1a;项目源码的管理、计划、创建、验证、集成、发布、配置、监视和保护应用程序等。该镜像基于CentOS操…
阅读更多...
编译安装飞桨fastdeploy@FreeBSD（失败）

编译安装飞桨fastdeploy@FreeBSD（失败）

FastDeploy是一款全场景、易用灵活、极致高效的AI推理部署工具&#xff0c; 支持云边端部署。提供超过 &#x1f525;160 Text&#xff0c;Vision&#xff0c; Speech和跨模态模型&#x1f4e6;开箱即用的部署体验&#xff0c;并实现&#x1f51a;端到端的推理性能优化。包括 物…
阅读更多...
samba实现linux共享文件夹

samba实现linux共享文件夹

一、samba安装 sudo apt install samba 二、配置Samba 编辑Samba配置文件sudo vi /etc/samba/smb.conf 在文件末尾添加以下内容&#xff0c;设置一个简单的共享目录&#xff08;替换path_to_share为实际的共享目录路径&#xff09;&#xff1a; [Share] path /path_to_sha…
阅读更多...
上位机图像处理和嵌入式模块部署（qmacvisual图像修复）

上位机图像处理和嵌入式模块部署（qmacvisual图像修复）

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 qmacvisual提供了一个图像修复的功能。所谓的图像修复&#xff0c;就是对图像中缺省的部分进行修补&#xff0c;它的操作&#xff0c;其实分成两个…
阅读更多...
Unity---ToLua 逻辑热更新

Unity---ToLua 逻辑热更新

13.2 逻辑热更新——Lua3-1_哔哩哔哩_bilibili ulua https://github.com/topameng/tolua
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站 广利置业