ES6 | ES6 基础用法

1. let 和 const

在我们开发的时候，可能认为应该默认使用 let 而不是 var，这种情况下，对于需要写保护的变量要使用 const。

然而另一种做法日益普及：默认使用 const，只有当确实需要改变变量的值的时候才使用 let。这是因为大部分的变量的值在初始化后不应再改变，而预料之外的变量的修改是很多 bug 的源头。

    // 例子 1-1
    // bad 
    var foo = 'bar';
    // good
    let foo = 'bar'; 
    // better
    const foo = 'bar';

2.变量的解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。
为变量赋值，只能直接指定值。

    // 数组
    const arr = [1, 2, 3, 4]

上面代码表示，可以从数组中提取值，按照对应位置，对变量赋值

    const [a1, ...b1] = arr
    console.log(b1, 'b1')
    let [head, ...tail] = [1, 2, 3, 4]
    console.log(head, 'head') // 1
    console.log(tail, 'tail') // [2, 3, 4]

解构不仅可以用于数组，还可以用于对象

    //对象
    const obj = { name: '小明', age: 25, sex: '男' }

上面代码表示，可以从对象中提取值，按照对应位置，对变量赋值

    // const { name: name, age: age }
    const { age, name } = obj
    console.log(name, age)
    
    const { age: age1, ...opt } = obj
    console.log(opt, 'opt)

3. 默认值

注意，ES6 内部使用严格相等运算符（===），判断一个位置是否有值。所以，只有当一个数组成员 严格等于undefined，默认值才会生效

    // 默认值 undefined 才会取默认值
    const fn = ([a, b, c = 3] = []) => {
        console.log(a, b, c)
    };
    
    useEffect(() => {
        fn([1, 2])
    }, [])
    

4. 数组扁平化

数组的成员有时还是数组，Array.prototype.flat()用于将嵌套的数组“拉平”，变成一维的数组。该方法返回一个新数组，对原数据没有影响。

    const arr = [1, 2, 3, [4, [5, [6]]]]
    arr.flat()

如果不管有多少层嵌套，都要转成一维数组，可以用Infinity关键字作为参数

    const arr1 = arr.flat(Infinity)
    console.log(arr1); // [1, 2, 3, 4, 5, 6]