扩展运算符(…)是ES6新增的一个运算符,下面来介绍一下它的使用场景及作用
-
作为函数的形参
let fn = function(...list){ console.log(list) } fn(1,2,3) //[1,2,3]
-
用于复制数组
const arr1 = [1, 2]; const arr2 = [...arr1]; //arr2 = [1,2]
-
用于合并数组
const arr1 = [2, 3]; const arr2 = [1, ...arr1, 4, 5]; //arr2 = [1,2,3,4,5]
-
作为函数的实参
function add(x, y) { return x + y; } const numbers = [1, 2]; add(...numbers) // 3
-
用于生成数组
const [a, ...list] = [1, 2, 3, 4, 5]; // a = 1 // list = [2,3,4,5]
扩展运算符只能放在参数的最后一位,不然会报错
-
将字符串或则特殊的对象转换成数组
//将字符串转换成数组 let stringList = [...'hello'] //stringList = [ "h", "e", "l", "l", "o" ] //将带有Iterator接口的对象转换成数组 // 这里用arguments对象举例 function fn() { let list = [...arguments]; console.log(list) } fn(1,2,3) //[1,2,3]
-
结合对象使用
//当扩展运算符结合对象使用时,用于取出参数对象中的所有可遍历属性,拷贝到当前对象之中。 let obj = { a: 1, b: 2 }; let newObj = { ...obj }; // { a: 1, b: 2 } // 注意 // 扩展运算符对对象实例的拷贝属于浅拷贝 如果拷贝过程中有同名属性会进行覆盖: let obj = {a: 1, b: 2}; let newObj = {...obj, ...{a:3, b: 4}}; // {a: 3, b: 4}