扩展运算符的各种使用场景

扩展运算符

扩展运算符一次只能展开一层数组

const numbers = [2, 3, [1, 2], 4];
console.log(...numbers); // 2  3  [1, 2]  4

跟函数参数结合

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];
// 等价于 console.log(sum(1,2,3))
console.log(sum(...numbers));

function fn(...data) {
  console.log(data); //[1, 2, 3, 4]
}
// 传递任意个参数，统一都交给了 data 作为一个数组
fn(1, 2, 3, 4);

跟数组的结合

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
let arr3 = [...arr1, ...arr2, 6];
console.log(arr3); //  [0, 1, 2, 3, 4, 5, 6]

// 剩余参数
let arr3 = [1, 2, 3];
let [a, ...b] = arr3;
console.log(a, b); // 1   [2,3]

扩展运算符在对象中的使用

let obj1 = { foo: "bar", x: 42 };
let obj2 = { foo: "baz", y: 13 };
// 其实这也是一种深拷贝的方式
let clonedObj = { ...obj1 };
console.log(clonedObj); // {foo: "bar", x: 42}
// 这也是一种对象合并的方式, 同 key 那么后面的会覆盖前面的
let mergedObj = { ...obj1, ...obj2 };
console.log(mergedObj); // { foo: "baz", x: 42, y: 13 }

let obj = {
  a: 1,
  b: 2,
};
let obj2 = {
  ...obj,
  c: 3,
  d: 4,
};
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4}

getter、setter

let obj1 = {
  foo: "bar",
  x: 42,
  _y: 0,
  set y(v) {
    console.log("set y ...");
    _y = v;
  },
  get y() {
    console.log("get y ...");
    return _y;
  },
};

/* 对象的合并，注意会触发 setter*/
Object.assign(obj1, { a: 3 }, { y: 4 });
console.log(obj1);

/* 对象的合并，注意会触发 getter*/
let newObj = { ...obj1, ...{ x: 2, y: 3 } };
console.log(newObj);

// 其实代码解释起来比较容易， assign 是重写了 y 属性，所以触发了 setter
// 扩展运算符是打开了 对象，在重新组合，肯定取出了 y 属性的值 ， 所以触发了 getter