展开运算符spread

与剩余参数过程互逆
1）剩余参数
3, 1, 2 -> [3, 1, 2]

const add = (...args) => {
    console.log(args);// [3, 1, 2]
};
add(3, 1, 2);

2）展开运算符
[3, 1, 2] -> 3, 1, 2

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

数组的展开运算符

问题：求某数组的最小值
1）JS内置对象之Math

console.log(Math.min(3, 1, 2));

2）展开运算符

将数组[3, 1, 2]变为3，1，2，即函数参数格式

console.log(Math.min(...[3, 1, 2]));

将原数组在[]展开，赋值给新变量/常量，实现数组复制
将多个数组在[]展开，实现数组合并
将字符串在[]中展开，变成数组
将类数组在[]中展开，变成数组

复制数组

一般地
const b = a;直接赋值不能复制复杂类型数据

const a = [1, 2];
const b = a;
a[0] = 3;
console.log(b);//[3,2]

展开运算符
const b = […a];

const a = [1, 2];
const b = [...a];
a[0] = 3;
console.log(b);//[1,2]

合并数组

const a = [1, 2];
const b = [3];
const c = [4, 5];
//方括号中展开
console.log([...a, ...b, ...c]);//[1, 2, 3, 4, 5]
//自定义顺序
console.log([...b, ...a, ...c]);// [3, 1, 2, 4, 5]
//加入其他项
console.log([6, ...b, ...c, 7]);//[6, 3, 4, 5, 7]
console.log([6, ...b, ...c, 7]);//[6, 3, 4, 5, 7]

字符串转为数组

console.log([...'Alex']);//['A', 'l', 'e', 'x']

相当于split（）

console.log('Alex'.split('')); //['A', 'l', 'e', 'x']

类数组转为数组

arguments

function func() {
    // 报错，类数组不可用数组的方法
    console.log(argument.push);
    console.log([...arguments]);//[1,2]
}
func(1, 2);

NodeList

<p>我</p>
<p>是</p>
<p>谁</p>
<script>
    console.log([...document.querySelectorAll('p')]);//[p,p,p]
</script>

对象的展开运算符

语法：
{}中展开
本质：
属性罗列，逗号分隔，放在{}中，构成新对象
注：属性不会展开

const apple = {
    feature: {
        taste: '甜'
    }
};
const pen = {
    feature: {
        color: '黑色',
        shape: '圆柱形'
    },
    use: '写字'
};
console.log({ ...pen });
//{feature: {...},use: "写字"}
console.log({ ...apple, ...pen });
//{feature: {color: '黑色',: '圆柱形'},use: '写字'}
console.log({ ...pen, ...apple });
//{feature: {taste: '甜'},use: '写字'}

空对象展开-无任何效果

console.log({ ...{} });//{}
console.log({ ...{}, a: 1 });// { a: 1 }

非对象展开-自动转为对象，再罗列其属性

1）字符串
转为类数组的对象

console.log(...'Alex');//A l e x
console.log([...'Alex']);// ['A', 'l', 'e', 'x']
console.log({ ...'Alex' });//{0: 'A', 1: 'l', 2: 'e', 3: 'x'}

2）其他基本类型值
数字、布尔、undefined、null 转为对象
但无专属属性，故为空对象

console.log({ ...1 });//{}
console.log({ ...undefined });//{}
console.log({ ...null });//{}
console.log({ ...true });//{}

复制对象

const apple = {
    color: '红色',
    shape: '球形',
    taste: '甜'
}
const appleNew={ ...apple }
console.log(appleNew === apple);//false

合并对象

合并原则：
1.原对象全部属性都会包含
2.相同属性，后面对象的属性覆盖前面对象的属性

const apple = {
    color: '红色',
    shape: '球形',
    taste: '甜'
};
const pen = {
    color: '黑色',
    shape: '圆柱形',
    use: '写字'
};

console.log({ ...apple, ...pen });
//{color: '黑色', shape: '圆柱形', taste: '甜', use: '写字'}
console.log({ ...pen, ...apple });
//{color: '红色', shape: '球形', use: '写字', taste: '甜'}

区分：对象的嵌套

console.log({ pen, apple });//{pen: {…}, apple: {…}}