ES6常用知识点整理

==============================================================================

本文仅整理部分常用的知识点，完整请查看[阮一峰老师的文章][1]，该文章也是源于其中

==============================================================================

1、let和const

（） let声明变量，const声明常量，不允许重复声明
（2） let是块级作用域，不会挂载到window对象中
（3） let需要先声明再调用，不会存在变量提升的问题

---

2、变量的解构赋值

（1）多个变量赋值，并设置默认值

    let [a=1,b,c] = [,2,3]
    console.log(a) // 1

（2）json中提取变量
提取json中的data值，并赋值给新的变量number：

    let jsonData = {
        id: 42,
        status: "OK",
        data: [867, 5309]
    };

    let { id, status, data: number } = jsonData;
    console.log(number);// [867, 5309]

（3）交互2个变量的值

    let x = 1;
    let y = 2;

    [x, y] = [y, x];
    console.log(x) //2

3、字符串的扩展

（1）判断一个字符串是否在另一个字符串

• includes()：返回布尔值，表示是否找到了参数字符串。
• startsWith()：返回布尔值，表示参数字符串是否在原字符串的头部。
• endsWith()：返回布尔值，表示参数字符串是否在原字符串的尾部。

    let s = 'Hello world!';
    s.startsWith('Hello') // true
    s.endsWith('!') // true
    s.includes('o') // true

这三个方法都支持第二个参数，表示开始搜索的位置：

    let s = 'Hello world!';
    s.startsWith('world', 6) // true
    s.endsWith('Hello', 5) // true
    s.includes('Hello', 6) // false

上面代码表示，使用第二个参数n时，endsWith的行为与其他两个方法有所不同。它针对前n个字符，而其他两个方法针对从第n个位置直到字符串结束。
（2）repeat（）
repeat返回一个新的字符串，并将原字符串重复n次。

'hello'.repeat(2) // "hellohello"

（3）padStart()，padEnd()
自动补全字符串

    'x'.padStart(5, 'ab') // 'ababx'
    'x'.padEnd(4, 'xaba') // 'xaba'

（4）模板字符串

    let tempString = 'hello'
    console.log(`${tempString} world !`)

4、数值的扩展

• Number.parseInt(), Number.parseFloat()

ES6 将全局方法parseInt()和parseFloat()，移植到Number对象上面，行为完全保持不变，减少全局性方法，使得语言逐步模块化。。

• Number.isInteger() 判断一个数值是否为整数
• Math.trunc() 反正一个值的整数部分
• Math.sign()
  参数为正数，返回+1；
  参数为负数，返回-1；
  参数为 0，返回0；
  参数为-0，返回-0;
  其他值，返回NaN。

5、函数的扩展

• 函数参数的默认值

    function add(x=1,y) {
        console.log(x+y)
    }
    add(undefined,2) // 触发默认值x=1
    add(null,2) // 没触发默认值

参数形成单独的作用域，等到初始化结束，这个作用域就会消失：

    const x1 = 1;
    function f1(x1, y = x1) {
        console.log(y);
    }
    f1(2) // 指向参数形成的单独作用域

    const x2 = 1;
    function f2(y = x2) {
        let x2 = 2;
        console.log(y);
    }
    f2() // 在这个作用域中x2没有定义，所以指向外层的x2

• reset参数
  用于接收函数多余的参数，只能作为最后一个参数

    function push(array,...values) {
        values.map((item)=>{
            array.push(item)
        })
        console.log(array)
    }
    let arr = []
    push(arr,1,2,3,4) // [1,2,3,4]

• 箭头函数
  本节不细述，详情请看阮一峰-箭头函数
  （1）简化写法
  （2）this指向定义函数时所在的对象，而不是调用函数时的对象，并且this指向无法改变。

6、数组的扩展

• 扩展运算符
  将一个数组转为用逗号分隔的参数序列。

    //数组的深度拷贝
    const a1 = [1, 2];
    const a2 = [...a1];
    a1[0]=2
    console.log(a2) // [1,2]

    //合并数组（浅拷贝）
    const arr1 = [1,2,3]
    const arr2 = [4,5,6]
    const arr3 = [...arr1,...arr2] // [1,2,3,4,5,6]

    //将字符串转为数组（调用的是遍历器接口（Symbol.iterator），如果一个对象没有部署这个接口，就无法转换）
    const str = 'hello'
    console.log([...str]) // ["h", "e", "l", "l", "o"]

• Array.from()
  用于将两类对象转为数组

    // 1、类数组对象：任何length属性的对象
    const obj = {
        '0': 'gao',
        '1': '26',
        length:2
    }
    console.log(Array.from(obj)) // ['gao','26']

    //2、可遍历（iterable）的对象（包括 ES6 新增的数据结构 Set 和 Map）

• Array.of()
  将一组值，转换为数组，如果没有参数则返回空数组，用来替代Array()或new Array()

    Array.of(2) // [2]
    Array(2) // [,,]

• 数组实例的 find()和findIndex（）

    // find（）：返回第一个符合条件的成员，没有返回undefined
    const arrFind = [1,4,-5,10].find(value => value<0)
    console.log(arrFind) // -2


    //findIndex()：返回第一个符合条件成员的位置，没有返回-1
    const arrFindIndex = [1,4,-5,10].findIndex(function (value,index,arr) {
        return value < 0
    })
    console.log(arrFindIndex) // 2

• 数组实例的 fill（）
  替换数组中的元素

    console.log([1,2,3].fill(4)) // 【4，4，4】默认从开始到结束都替换
    console.log([1,2,3].fill(4,1,2)) // [1,4,3] 替换数组下标第1个到第2个

• 数组实例的 entries()，keys() 和 values()

for (let index of ['a', 'b'].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ['a', 'b'].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ['a', 'b'].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

• 数组实例的 includes()
  返回一个布尔值，表示某个数组是否包含给定的值，替代es6之前的indexof

[1, 2, 3].includes(2)     // true
[1, 2, 3].includes(4)     // false
[1, 2, NaN].includes(NaN) // true

• 数组实例的 flat()
  将嵌套的数组“拉平”，变成一维的数组

    //默认拉平一层
    console.log([1,2,[3,[4,5]]].flat()) // [1,2,3,[4,5]]
    //传入要拉平的层数
    console.log([1,2,[3,[4,5]]].flat(2)) // [1,2,3,4,5]
    //传入Infility，全部拉平
    console.log([1,2,[3,[4,5]]].flat(Infinity)) // [1,2,3,4,5]

7、对象的扩展

• Object.assign()
  对象的合并，将一个对象的所有可枚举属性复制到另一个对象，同名属性会直接替换。

    //浅拷贝：如果源对象某个属性的值是对象，那么目标对象拷贝得到的是这个对象的引用
    const objName = {name: {surname: 'gao'}}
    const objAge = {age:26}
    const person = Object.assign({},objName,objAge)
    objName.name.surname = 'danny'
    console.log(person.name.surname) // 'danny'

• Object.setPrototypeOf()
  设置原型对象

    // 将proto设置为obj的原型对象
    let proto = {};
    let obj6 = { x: 10 };
    Object.setPrototypeOf(obj, proto);
    proto.y = 20;
    proto.z = 40;
    obj6.x // 10
    obj6.y // 20
    obj6.z // 40

• Object.getPrototypeOf()
  读取一个对象的原型对象

    function Rectangle() {
        // ...
    }
    const rec = new Rectangle();
    Object.getPrototypeOf(rec) === Rectangle.prototype// true
    Object.setPrototypeOf(rec, Object.prototype);
    Object.getPrototypeOf(rec) === Rectangle.prototype// false

• Object.keys()，Object.values()，Object.entries()

    //Object.keys()：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键名。
    const obj6 = { foo: 'bar', baz: 42 };
    Object.keys(obj6) // ["foo", "baz"]

    //Object.values()：方法返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值。
    const obj7 = { foo: 'bar', baz: 42 };
    Object.values(obj7) // ["bar", 42]

    //Object.entries() ：返回一个数组，成员是参数对象自身的（不含继承的）所有可遍历（enumerable）属性的键值对数组。
    const obj8 = { foo: 'bar', baz: 42 };
    Object.entries(obj8) // [ ["foo", "bar"], ["baz", 42] ]

8、Symbol

• 介绍
  ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是 JavaScript 语言的第七种数据类型，前六种是：undefined、null、布尔值（Boolean）、字符串（String）、数值（Number）、对象（Object）。
  Symbol 值通过Symbol函数生成。这就是说，对象的属性名现在可以有两种类型，一种是原来就有的字符串，另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型，就都是独一无二的，可以保证不会与其他属性名产生冲突。
• 作为属性名的 Symbol

    //Symbol 值作为对象属性名时，不能用点运算符
    const mySymbol = Symbol();
    const va = {};
    va.mySymbol = 'Hello!';
    va[mySymbol] // undefined
    va['mySymbol'] // "Hello!"

• 属性名的遍历
  Symbol 作为属性名，该属性不会出现在for...in、for...of循环中，也不会被Object.keys()、Object.getOwnPropertyNames()、JSON.stringify()返回。但是，它也不是私有属性，有一个Object.getOwnPropertySymbols方法，可以获取指定对象的所有 Symbol 属性名。

    const obj = {};
    let a = Symbol('a');
    let b = Symbol('b');

    obj[a] = 'Hello';
    obj[b] = 'World';

    const objectSymbols = Object.getOwnPropertySymbols(obj);

    objectSymbols// [Symbol(a), Symbol(b)]
    
    //另一个新的 API，Reflect.ownKeys方法可以返回所有类型的键名，包括常规键名和 Symbol 键名。
    let obj = {
        [Symbol('my_key')]: 1,
        enum: 2,
        nonEnum: 3
    };

    Reflect.ownKeys(obj)//  ["enum", "nonEnum", Symbol(my_key)]

9、Set和Map数据结构

1、Set

• Set()是个构造函数，用来生成类似数组的数据结构，但是成员值都是唯一的。
• 去重

    const set  = [...new Set([1,2,3,3,4,4])] // 1,2,3,4

• Set实例的属性和方法

    const set = new Set([1,2,3])
    
    // 添加值，并返回Set结构本身
    set.add(4)
    console.log([...set]) //[1,2,3,4]

    //删除值，返回bool值表示是否成功
    set.delete(4)
    console.log(set)  //[1,2,3]

    //表示是该值是否为Set成员，返回bool值
    console.log(set.has(3))

    //清除所有成员，没有返回值
    set.clear()
    console.log([...set])  //[]

• 遍历操作

    const set2 = new Set([1,2,3])

    // keys():返回键名的遍历器
    for(let i of set2.keys()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // values():返回键值的遍历器(set结构没有键名，只有键值，所以keys和values方法一样)
    for(let i of set2.values()){
        console.log(i)
        // 1
        // 2
        // 3
    }

    // entries():返回键值对的遍历器
    for(let i of set2.entries()){
        console.log(i)
        // [1,1]
        // [2,2]
        // [3,3]
    }

    //foreach遍历器
    set2.forEach((key,value)=>{
        console.log(`${key}:${value}`)
        // 1:1
        // 2:2
        // 3:3
    })

2、Map

• Map实例的属性和方法
  和Set一致
• 遍历器

for (let item of map.entries()) {
  console.log(item[0], item[1]);
}
// "F" "no"
// "T" "yes"

// 或者
for (let [key, value] of map.entries()) {
  console.log(key, value);
}
// "F" "no"
// "T" "yes"

// 等同于使用map.entries()
for (let [key, value] of map) {
  console.log(key, value);
}