es6加深理解

set的使用场景
以下是本人对ng-zorro-antd 的table选中状态代码注释

setOfCheckedId = new Set<string>(); // checkbox 选择ids
// 每次点击更新Set集合
 updateCheckedSet(id: string, checked: boolean): void {
    if (checked) {
      this.setOfCheckedId.add(id);
    } else {
      this.setOfCheckedId.delete(id);
    }
  }
//  改变checkbox的时候改变该值，等同于checked的值
  onItemChecked(id: string, checked: boolean): void {
    this.updateCheckedSet(id, checked);
    this.refreshCheckedStatus();
  }
// 全选和反选
  onAllChecked(value: boolean): void {
    this.listOfCurrentPageData.forEach(item => this.updateCheckedSet(item.id, value));
    this.refreshCheckedStatus();
  }
// 获取表单checkbo的值
  onCurrentPageDataChange($event: any[]): void {
    this.listOfCurrentPageData = $event;
    this.refreshCheckedStatus();
  }
// 每次选择后都会刷新这里的值，重新渲染一遍
  refreshCheckedStatus(): void {
  // 过滤所有值的选择状态
    this.checked = this.listOfCurrentPageData.every(item => this.setOfCheckedId.has(item.id));
    // 没选中的值
    this.indeterminate = this.listOfCurrentPageData.some(item => this.setOfCheckedId.has(item.id)) && !this.checked;
  }

正题

1. 解构默认值

需要注意的是undefined和null的区别。

let [a,b="张三"]=['李四',undefined];
console.log(a+b); //控制台显示“技术胖张三”

undefined相当于什么都没有，b是默认值。

let [a,b="张三"]=['王五',null];
console.log(a+b); //控制台显示“王五null”

null相当于有值，但值为null。所以b并没有取默认值，而是解构成了null。

2. 圆括号的使用

如果在解构之前就定义了变量，这时候你再解构会出现问题。下面是错误的代码，编译会报错。

let foo;
{foo} ={foo:'张三'};
console.log(foo);

要解决报错，使程序正常，我们这时候只要在解构的语句外边加一个圆括号就可以了。

let foo;
({foo} ={foo:'张三'});
console.log(foo); //控制台输出张三

3. 查找是否存在:

先来看一下ES5的写法，其实这种方法并不实用，给我们的索引位置，我们自己还要确定位置。

let name='张三';
let blog = 'hello world';
document.write(blog.indexOf(name));

这是网页中输出了20，我们还要自己判断。

ES6直接用includes就可以判断，不再返回索引值，这样的结果我们更喜欢，更直接。

let name='技术胖';
let blog = 'hello world';
document.write(blog.includes(name));

Array.of() 代替eval()：

它负责把一堆文本或者变量转换成数组。在开发中我们经常拿到了一个类似数组的字符串，需要使用eval来进行转换，如果你一个老手程序员都知道eval的效率是很低的，它会拖慢我们的程序。这时候我们就可以使用Array.of方法。我们看下边的代码把一堆数字转换成数组并打印在控制台上：

let arr =Array.of(3,4,5,6);
console.log(arr);

当然它不仅可以转换数字，字符串也是可以转换的，看下边的代码：

let arr =Array.of('大帝','张飞','表妹');
console.log(arr);

严格模式的问题

有默认处理，会导致冲突，将b的默认值去除即可

function add(a,b=1){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add(1));

获得需要传递的参数个数

function add(a,b){
    'use strict'
    if(a == 0){
        throw new Error('This is error');
    }
     return a+b;
}

console.log(add.length);

严格模式下是2，普通模式下是1

Object.is

区分=== 和 is方法的区别是什么，看下面的代码输出结果。

console.log(+0 === -0);  //true
console.log(NaN === NaN ); //false
console.log(Object.is(+0,-0)); //false
console.log(Object.is(NaN,NaN)); //true

===为同值相等，is()为严格相等。

Symbol对象元素的保护作用

现在我不想别人知道我的年龄，这时候我就可以使用Symbol来进行循环保护。

let obj={name:'张三',skill:'web'};
let age=Symbol();
obj[age]=18;
for (let item in obj){
    console.log(obj[item]);
} 
console.log(obj);

Set 和 WeakSet 数据结构

Set 不是数据类型，而是数据结构

Set

传入的是数组

Set和Array 的区别是Set不允许内部有重复的值，如果有只显示一个，相当于去重。虽然Set很像数组，但是他不是数组。

add, delete, has, clear, for…of, size

WeakSet

传入的是对象

Map

** Json和map格式的对比 **，个人觉得类似redis的操作

map的效率和灵活性更好

键可以是对象，数组等

set, get, delete, size, has, clear

Proxy

我们用new的方法对Proxy进行声明。可以看一下声明Proxy的基本形式。

new Proxy（{},{}）;

需要注意的是这里是两个花括号，第一个花括号就相当于我们方法的主体，后边的花括号就是Proxy代理处理区域，相当于我们写钩子函数的地方。

现在把上边的obj对象改成我们的Proxy形式。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am 张三'
}, {
        get:function(target,key,property){
            console.log('come in Get');
            return target[key];
        }
    });

console.log(pro.name);

可以在控制台看到结果，先输出了come in Get。相当于在方法调用前的钩子函数。

get属性

get属性是在你得到某对象属性值时预处理的方法，他接受三个参数

• target：得到的目标值
• key：目标的key值，相当于对象的属性
• property：这个不太常用，用法还在研究中，还请大神指教。

set属性

set属性是值你要改变Proxy属性值时，进行的预先处理。它接收四个参数。

• target:目标值。
• key：目标的Key值。
• value：要改变的值。
• receiver：改变前的原始值。

var pro = new Proxy({
    add: function (val) {
        return val + 10;
    },
    name: 'I am 张三'
}, {
        get:function(target,key){
            console.log('come in Get');
            return target[key];
        },
        set:function(target,key,value,receiver){
            console.log(`    setting ${key} = ${value}`);
            return target[key] = value;
        }

    });

console.log(pro.name);
pro.name='李四';
console.log(pro.name);

apply的使用

apply的作用是调用内部的方法，它使用在方法体是一个匿名函数时。看下边的代码。

get = function () {
    return 'I am 张三';
};
var handler = {
    apply(target, ctx, args) {
        console.log('do apply');
        return Reflect.apply(...arguments);
    }
}

var pro = new Proxy(target, handler);

console.log(pro());