与剩余参数过程互逆
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: {…}}