Skip to main content

[扩展运算符]

Example​

将 args 数组拆开成单个元素​

function addFun(x, y, z) {
  return x + y + z;
}

var args = [1, 2, 3];

addFun(...args);

数据连接​

连接数组，使用 push 将数组添加到另一个数组的尾部

var arr1 = [1, 2, 3];
var arr2 = [4, 5, 6];

// ES5处理方式
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

// ES6处理方式
arr1.push(...arr2);
console.log(arr1); // [1, 2, 3, 4, 5, 6]

数据合并​

代替 concat 方法

var arr1 = ["a", "b", "c"];
var arr2 = ["d", "e", "f"];

// ES5 合并
var es5Arr = arr1.concat(arr2);
console.log(es5Arr); // ['a', 'b', 'c', 'd', 'e', 'f']

// ES6 合并
var es6Arr = [...arr1, ...arr2];
console.log(es6Arr); // ['a', 'b', 'c', 'd', 'e', 'f']

数组拷贝​

扩展运算符拷贝是浅拷贝，只对数组或对象的第一层结构起作用

var arr1 = [1, 2, 3];
var arr2 = [...arr1];

console.log(arr1 === arr2); // false

arr2.push(4); // 修改arr2，不会影响arr1的值

console.log(arr1); // [1, 2, 3]
console.log(arr2); // [1, 2, 3, 4]

对象拷贝​

扩展运算符拷贝是浅拷贝，只对数组或对象的第一层结构起作用

var obj1 = {
  a: 1,
  b: 2,
};

var obj2 = { ...obj1 };

console.log(obj1 === obj2); // false

obj2.c = 3; // 修改obj2不会影响obj1
console.log(obj1); // {a: 1, b: 2}
console.log(obj2); // {a: 1, b: 2, c: 3}

字符串转数组​

var str = "hello";

// ES5 处理方式
var es5Arr = str.split("");
console.log(es5Arr); // ["h", "e", "l", "l", "o"]

// ES6 处理方式
var es6Arr = [...str];
console.log(es6Arr); // ["h", "e", "l", "l", "o"]

覆盖​

  • 如果⽤户⾃定义的属性，放在扩展运算符后⾯，则扩展运算符内部的同名属性会被覆盖掉。
let obj1 = { a: 2, b: 3 };
let obj2 = { ...obj1, a: "hello" };

/* obj2
{a:"hello",b:3}
*/
  • 如果把⾃定义属性放在扩展运算符前⾯，就变成了设置新对象的默认属性值。
let obj1 = { a: 2, b: 3 };
let obj2 = { a: "hello", ...obj1 };

/* obj2
{a:2,b:3}
*/

参考​