扩展运算符

---

前言

扩展运算符——三个点（…）
接下来为大家介绍两种：数组和对象。

---

一、数组扩展运算符

在数组中可以使用扩展运算符。

var arr = [10,20,30,40];

1.遍历数组

console.log(...arr)

2.当做数组的元素

console.log("哈哈",10,20,30,40,true)
console.log("哈哈",...arr,true)

3.用于深拷贝

var arrNew = [];
// arrNew = [...arr];
[...arrNew] = arr;
console.log(arrNew);
arr.push(50);
console.log(arr);
console.log(arrNew);

4.用于函数的调用

function demo1(x, y, z, m) {
    console.log(x + y + z + m);
}
demo1(arrNew[0], arrNew[1], arrNew[2], arrNew[3]);
demo1(...arrNew);

5.与解构赋值结合

var [a, ...arr1] = arrNew;
// console.log(a, b, c, d);
console.log(a, ...arr1);

6.转化成真正的数组

var str = "hello";
var arrStr = Array.from(str);
console.log(arrStr);
console.log(...str);
console.log([...str]);

二、对象扩展运算符

要想理解对象的扩展运算符，只需要记住一句话：对象中的扩展运算符(…)用于取出参数对象中的所有可遍历属性，拷贝到当前对象之中

1.遍历对象

var obj = {
	name: 'name',
	age: 18,
	sex: '男'
}
console.log(obj.name = 'zs');
console.log({ ...obj, name: 'zs', age: 20 });

2.合并对象

var obj_1 = {
	a: 1,
	b: 2
}
var obj_2 = {
	b: 3,
	...obj_1,
}
console.log(obj_2);

3.向对象添加属性

const user = {
  firstname: 'Chris',
  lastname: 'Bongers'
};
const output = {...user, age: 31};

4.解构对象

//创建一个对象
const user = {
  firstname: 'Chris',
  lastname: 'Bongers',
  age: 31
};
//使用扩展运算符将其分解为单个变量
const {firstname, ...rest} = user;
console.log(firstname);
console.log(rest);
// 'Chris'
// { lastname: 'Bongers', age: 31 }

---

总结

以上就是今天要讲的内容。