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
集合的并集,交集,差集和php里面对数组的操作差不多,渐渐向其他语言或者说语言的共性靠近,从语言本身而不是外部工具包去增强其实用性。

WeakSet

传入的是对象

Map

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

map的效率和灵活性更好

键可以是对象,数组等

set, get, delete, size, has, clear

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章