本节所要介绍的是关于 ES6 一些拓展性的内容 ES6 干货指南 （下）
- ES6 新入门的伙伴可以先侃侃 ES6 基础部分的内容 ES6 干货指南 （上）
- ES6 基础语法熟悉的可以侃侃 ES6 进阶部分的内容 ES6 干货指南 （中）
一、集合
1）Set 集合
-
Set 用于存放无序不重复的多个
value集合体，返回Set()对象let setArr = new Set([1,1,2,4,5,2,3,4,5,6,7,8,9,1,23,4,5,6]); console.log(setArr); // Set(10) {1, 2, 4, 5, 3, …} let setStr = new Set("lasdkjflksdjflksdjf") console.log(setStr); // Set(7) {"l", "a", "s", "d", "k", …} -
Set 集合原型方法（实例方法）
add()添加const set = new Set([1,2,3]); set.add("a"); set.add("b"); console.log(set); // Set(5) {1, 2, 3, "a", "b"}has()返回是否存在const set = new Set([1,2,3]); console.log(set.has(1)); // true console.log(set.has(10)); // falssetdelete()返回是否删除成功const set = new Set([1,2,3]); console.log(set.delete(1)); // true console.log(set.delete(10)); // falseclear()初始化const set = new Set([1,2,3]); console.log(set.clear()); // Set(0) {}size属性，只能读，不能改const set = new Set([1,2,3]); console.log(set.size); // 3Set集合 重写了 forEach() 方法const set = new Set([1,3,5]); set.forEach((item,index) => console.log(item,index)); // 1 1 3 3 5 5 // index 不是下标，set集合没有下标 // 第一个参数的值和第二个参数的值是相同的，都表示set中的每一项 -
Set 集合转数组
使用 Set 集合去重后的数组转回数组
const setArr = [1,1,2,2,3,4,5,5,5,2,6,7]; const arr = [...new Set(setArr)]; console.log(arr); // (7) [1, 2, 3, 4, 5, 6, 7]使用 Set 集合去重后的字符串转回数组
const setStr = "aabbccdddddeffg"; const str= [...new Set(setStr )].join(""); console.log(str); // abcdefg
2）Map 集合
-
Map 用于存放无序的 Key 不重复的多个
key，value集合体，返回Map()对象参数需为二维数组，数组的子数组里面只能有两项，第一项为键，第二项为值
/* 对象存储的问题 - 键名只能是字符串 - 获取数据的数量的时候不方便 - 键名容易和原型上的名称发生冲突 */ const map = new Map([ ["a",123], ["b",456], ["c",456], ["a",312] ]); console.log(map); // Map(3) {"a" => 312, "b" => 456, "c" => 456} -
Map集合 原型方法（实例方法）
set()传递的是键值对，两个参数，键是可以为任意类型的，键不存在，则添加一项，键存在，则修改const map = new Map([["a",123],["b",456],["c",789]]); map.set("d","123"); console.log(map); // Map(4) {"a" => 123, "b" => 456, "c" => 789, "d" => "123"}get()根据键名取值const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.get("a")); // 123has()返回是否存在const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.has("a")); // true console.log(map.has("123")); // falsedelete()返回是否删除成功const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.delete("a")); // true console.log(map.delete("456")); // falseclear()初始化const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.clear()); // Map(0) {}size属性，只能读，不能改const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.size); // 3
二、属性描述对象
-
每个属性都有自己对应的属性描述对象，保存该属性的一些元信息
value :属性值
writable :是否可以重新赋值
enumerable :是否可以枚举
configurable :表示可配置性
get :取值函数（getter），默认为undefined
set :存值函数（setter），默认为undefined -
Object.getOwnPropertyDescriptor()该方法可以获取属性描述对象const obj = { username: "Json", age: 24 }; console.log(Object.getOwnPropertyDescriptor(obj,"username")); // {value: "Json", writable: true, enumerable: true, configurable: true} -
Object.create()指定原型对象的属性，返回一个新的对象let obj = Object.create(obj,{ sex: { value: "man", // 默认 undefined writable: true, // 默认 false => 不可更改 value configurable: true, // 默认 false => 不可配置(删除等) enumerable: true // 默认 false => 不可枚举描述属性 } }); console.log(obj); // {sex: "man"} -
Object.defineProperty()允许通过属性描述对象，定义或修改一个属性，然后返回修改后的对象let obj = {}; Object.defineProperty(obj,"tmp",{ value : 10, // 默认值 undefined writable : true , // 默认值 false configurable : true, // 默认值 false enumerable : true // 默认值 false })
三、存储器属性
- 和 class 里面
getter和setter一样，存的时候会去调用setter取得时候会去调用getterconst obj = {} Object.defineProperty(obj,"tmp",{ get(){ console.log('get a', obj.tmpVal); return obj.tmpVal; }, set(val){ console.log('set a',val); obj.tmpVal = val } }); obj.tmp = 10; console.log(obj.tmp); console.log(obj) ;
四、Reflect 反射
- 内置的js对象，提供了一些方法，可以让开发者调用，访问js的底层功能
- 作用：属性的取值，赋值，普通函数，构造函数的调用，判断对象属性，删除对象的属性…
- JavaScript的编程思想：
- 面向对象的思想
- 函数式编程的思想
- 反射就是把以前的 new delete 等等变成了一系列的方法(API), 封装到了Reflect中
- 对象属性赋值
Reflect.set(target,protertyKey,value)目标对象，赋值的属性，值 - 对象属性取值
Reflect.get(target,protertyKey)目标对象，取值的属性 - 调用一个函数
Reflect.apply(target,this,arguments)目标函数，this指向，参数列表 - 对象属性删除
Reflect.deleteProperty(target,protertyKey)目标对象, 删除的属性 - 创建一个对象
Reflect.construct(target,arguments)构造函数，参数列表 - 判断属性存在
Reflect.has(target,protertyKey) - 对象属性配置
Reflect.defineProperty(target,protertyKey,attr)
- 对象属性赋值
五、Proxy 代理
- 有一个对象不去直接修改它 而是通过另外一个对象进行修改
- 提供了修改底层实现的方式
- new Proxy(target,handler)
- target 目标对象
- handler 是一个普通对象，可以重写底层方法
- 返回一个代理对象
const obj = { a : 1,b : 2 };
const proxy = new Proxy(obj,{
set(target,protertyKey,value){
console.log(target,protertyKey,value)
Reflect.set(target,protertyKey,value);
},
get(target,protertyKey){
console.log(target,protertyKey)
return Reflect.get(target,protertyKey);
}
})
proxy.c = 10;
console.log(obj.c);
console.log(proxy);
六、观察者模式
- 有一个对象，是一个观察者，观察属性值的变化，当属性值发生变化的时候，去做一些事情
<div id="container"></div> <script> function observer(target){ const div = document.getElementById("container"); const ob = {}; //创建一个新的对象，占用内存 const props = Object.keys(target); // target的索引 for(const prop of props){ // ob[prop] = target[prop]; // ${prop} Object.defineProperty 执行 target 索引数组 props 给到 ob Object.defineProperty(ob,prop,{ get(){ return target[prop]; // ${ob[prop]} get返回 target[prop] }, set(val){ // obj对象属性发生改变，自动触发set ，首先是直接更改了target原始对象值 target[prop] = val; // 原始对象target值 更改后，页面更新方法触发 render(); }, //通过存储器的属性全都会变成false enumerable: true }) } // observer(target) 运行到此执行 render(); render(); function render(){ let html = ""; for(const prop of Object.keys(ob)) html += `<p><span>${prop}:</span><span>${ob[prop]}</span></p>`; console.log(html); div.innerHTML = html; } return ob; } const target = { a : 1, b : 2 } // 原始对象 target const obj = observer(target); // 代理对象 obj </script> - Proxy 观察者模式
<div id="container"></div> <script> function observer(target){ const div = document.getElementById("container"); const proxy = new Proxy(target,{ // get(target,prop){ // // return Reflect.get(target,prop); // // return target.prop; // }, set(target,prop,value){ // Reflect.set(target,prop,value); target[prop] = value; render(); } }) render(); function render(){ let html = ""; for(const prop of Object.keys(target)) html += `<p><span>${prop}:</span><span>${target[prop]}</span></p>`; div.innerHTML = html; } return proxy; } const target = { a : 1, b : 2 }; const obj = observer(target); </script>
318
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
