扩展运算符(常用)

---

1.扩展运算符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开；还可以在构造对象时, 将对象表达式按key-value的方式展开。

• 函数调用

function fn (...args) {
    console.log(args);  // [ 1, 2, 3, 4, 5 ]  这里体现一个 收 的特性
}
fn(1,2,3,4,5)
// 由 1,2,3,4,5 => [1,2,3,4,5]

• 数组构造

let arr = [1,2,3,4];
let newArr = [...arr , 5,6];
console.log(newArr);  // [ 1, 2, 3, 4, 5, 6 ]

// 代替 concat 合并数组

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

• 字符串构造

let str = 'hello';

let arr = [...str];

console.log(arr);  // [ 'h', 'e', 'l', 'l', 'o' ]

• 对象中使用

let obj = {
    a:1,
    b:2,
    c:3
}

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

2.使用场景

• 函数

function sum(x, y, z) {
  return x + y + z;
}
const numbers = [1, 2, 3];

//不使用延展操作符
console.log(sum.apply(null, numbers));

//使用延展操作符
console.log(sum(...numbers));// 6

• 数组

可多次使用

const stuendts = ['Jine','Tom']; 
const person = ['Tony',... stuendts,'Aaron','Anna'];
conslog.log(person)// ["Tony", "Jine", "Tom", "Aaron", "Anna"]


// 浅拷贝和Object.assign类似

var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
var arr3 = [...arr1, ...arr2];// 将 arr2 中所有元素附加到 arr1 后面并返回
//等同于
var arr4 = arr1.concat(arr2);

• 对象

var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// 克隆后的对象: { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// 合并后的对象: { foo: "baz", x: 42, y: 13 }