本节所要介绍的是关于 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)); // falsset
delete()
返回是否删除成功const set = new Set([1,2,3]); console.log(set.delete(1)); // true console.log(set.delete(10)); // false
clear()
初始化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); // 3
Set
集合 重写了 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")); // 123
has()
返回是否存在const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.has("a")); // true console.log(map.has("123")); // false
delete()
返回是否删除成功const map = new Map([["a",123],["b",456],["c",789]]); console.log(map.delete("a")); // true console.log(map.delete("456")); // false
clear()
初始化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
取得时候会去调用getter
const 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>