ES6扩展运算符

ES6扩展运算符

●扩展运算符也是ES6 的新语法，主要有两个功能
●展开和合并
●该语法主要操作的是数组和对象
●语法：...

展开
●可以 展开对象, 或者 展开数组
○如果是展开对象, 就是去掉对象的 {}
○果是展开数组, 就是去掉数组的 []

展开数组

<script>
    const a1 = [100, 200, 300, 400]
    // 如果我想在控制台打印 100 200 300 400
    console.log(100, 200, 300, 400) //100 200 300 400
    console.log(...a1) //100 200 300 400
    const a2 = [...a1, 500, 600, 700]
    console.log(a2) //Array(7)
    const res = Math.max(...a1)
    console.log(res) //400
</script>


复制代码

展开对象

<script>
    // 展开对象
    const o1 = {
        name: 'Jack',
        age: 18
    }
    console.log(o1); //{name: 'Jack', age: 18}
    const o2 = {
        gender: '男',
        ...o1
    }
    console.log(o2); //{gender: '男', name: 'Jack', age: 18}
    const o3 = {
        ...o2,
        love: '玩耍'
    }
    console.log(o3); //{gender: '男', name: 'Jack', age: 18, love: '玩耍'}
</script>


复制代码

合并
●当这个符号书写在函数的形参位置的时候, 叫做合并运算
●从当前形参位置开始获取实参, 直到末尾
●注意: 合并运算符一定要写在最后一位

<script>
    // 会把第一个实参赋值给 a
    // 会把第二个参数给了c
    // 从第三个开始到最后的所有实参, 全部放在一个数组里面, 给到 b
    const fn = (a, c, ...b) => {
        console.log("我是 fn 函数")
        console.log(a) //100
        console.log(b); // [300, 400, 500, 600, 700]
        console.log(c); //200
    }
    fn(100, 200, 300, 400, 500, 600, 700)
</script>


复制代码

<script>
    // 会直接报错 Uncaught SyntaxError: Rest parameter must be last formal parameter
    //未捕获SyntaxError:Rest参数必须是最后一个形式参数
    //也就是说在合并的时候，合并运算符一定要写到最后
    const fn = (a, ...b, c) => {
        console.log("我是 fn 函数")
        console.log(a)
        console.log(b);
        console.log(c);
    }
    fn(100, 200, 300, 400, 500, 600, 700)
</script>