ES6: 对象简写/symbol()/ Iterator/set/map/await.......

对象简写

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第1张图片

 对象名字为变量ES6: 对象简写/symbol()/ Iterator/set/map/await......._第2张图片

 复制对象/还有个assign方法ES6: 对象简写/symbol()/ Iterator/set/map/await......._第3张图片

 symbol()

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第4张图片

 这种写法用户怎么添加属性都ok

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第5张图片

 获取属性,这个方法获取symbol属性ES6: 对象简写/symbol()/ Iterator/set/map/await......._第6张图片

 获取属性,这个方法获取symbol和普通属性ES6: 对象简写/symbol()/ Iterator/set/map/await......._第7张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第8张图片

 Iterator

 比较复杂,可以看视频

有迭代器的可用for..of循环

  012-ES6-Iterator_哔哩哔哩_bilibili

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第9张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第10张图片

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第11张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第12张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第13张图片

Set

它的键值都是一个

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第14张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第15张图片

 遍历数组带索引

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第16张图片

 解构

 数组内有不同类型数据去重

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第17张图片

 MAP

比Object好用,键不止可以为字符串

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第18张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第19张图片

 使用...转为数组,...转数组原理为迭代器

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第20张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第21张图片

 Proxy

es6之前实现拦截的方法,vue3更新之后就从这种方法换成了proxy

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第22张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第23张图片

 proxy和之前区别是可以一次拦截所有属性

没办法直接影响obj

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第24张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第25张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第26张图片

 Reflect

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第27张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第28张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第29张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第30张图片

 配合proxy使用ES6: 对象简写/symbol()/ Iterator/set/map/await......._第31张图片

 构造函数/类

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第32张图片

 上面的这种方式用着麻烦,出现了class,语法糖

替代写法

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第33张图片

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第34张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第35张图片

 Persiion.name可以直接访问属性,但是实例化后一个persion1后就不行了

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第36张图片

 ES6: 对象简写/symbol()/ Iterator/set/map/await......._第37张图片

继承

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第38张图片

注意此处会报错

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第39张图片

 creatbox构造器会直接执行this.render()方法,而createImgBox中此时还没有imgurl属性,会报错,解决方法:构造器中不要写方法

ES6: 对象简写/symbol()/ Iterator/set/map/await......._第40张图片

你可能感兴趣的:(es6,前端,javascript)