【ES6】扩展运算符和rest运算符

扩展运算符

扩展运算符（ spread）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。

扩展运算符是将一个整体的元素展开成单独的元素

浅拷贝

数组

const arr = [1, 2, 3]
const arr2 = [...arr]
console.log(arr2);     // [1,2,3]
console.log(arr2 === arr);     // false，浅拷贝

对象

const obj = {
    name: 'paul',
    age: 19,
    todos: {
        morning: 'study',
        afternoon: 'play'
    }
}
const obj2 = { ...obj }
console.log(obj2);     // 内容同obj
console.log(obj === obj2);     // false，浅拷贝

为什么是浅拷贝？点击站内跳转。

替代concat拼接数组

const arr1 = [1,3,5], arr2 = [2,4,6]
// const result = arr1.concat(arr2)     //利用concat拼接数组
const result = [...arr1, ...arr2]
console.log(result);        // [1, 3, 5, 2, 4, 6]

替换Object.assign合并对象

const obj1 = { name: 'paul' }
const obj2 = { age: 19 }
// const result = Object.assign(obj1,obj2)   // 利用Object.assign合并对象
const result = { ...obj1, obj2 }
console.log(result);        // {name: 'paul', age: 19}

替换Object.assign更新同名键的值

let baa = {a: 1, b: 2};
let bac = {c:3, d: 4};
let bab = {a:99, b: 100};

let bay = {...baa, ...bac};     // {a: 1, b: 2, c: 3, d: 4}
let baz = {...baa, ...bab};     // {a: 99, b: 100}

将伪数组转化为数组

任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。

具备iterator接口的数据：Array,Arguments,Set,Map,String,TypedArray,Nodelist

//伪数组转换为数组
var nodeList = document.querySelectorAll('div');
console.log([...nodeList]);  // [div, div, div ... ]

但是对于没有部署 Iterator 接口类似数组的对象，扩展运算符就会报错。

这时可以使用Array.from()

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
// let arr = [...arrayLike];   // TypeError: Cannot spread non-iterable object.
let arr = Array.from(arrayLike)
console.log(arr);   // ['a', 'b', 'c']

---

剩余参数（rest运算符）

剩余参数语法允许我们将一个不定数量的参数表示为一个数组。

剩余参数是将剩余的多个元素压缩成一个元素

函数的剩余参数rest

箭头函数中的参数中不能使用arguments，只能使用剩余参数

const fn = (a,b,...args) => { 
    console.log(a,b)
    console.log(args)
};
fn(1,2,3,4,5,6)

数组的剩余参数

const [a,b,...arr] = [1,2,3,4,5,6];
    console.log(a,b)
    console.log(arr)

对象的剩余参数

const {nickName,age,...obj} ={ nickName:'paul', age:19, hobby:'rap' };
    console.log(nickName,age)
    console.log(obj)

---

总结

• 单独使用的三个点是扩展运算符会展开，和其他参数或元素一起使用是剩余参数会分割。
• 扩展运算符和rest运算符是逆运算。扩展运算符是分割，rest运算符是整合。