1.认识剩余参数

1.认识剩余参数

const add = (x,y,z,...args)=>{}

2.剩余参数的本质

const add = (x,y,...args)=>{
    console.log(x,y,args);
}
  add(); //undefined undefined Array(0)
  add(1,2); //1 2 []
  add(1,2,3,5,45);//1 2 (3) [3, 5, 45]

2.剩余参数的注意事项

2.1 箭头函数的剩余参数

箭头函数的参数部分即使只有一个剩余参数，也不能省略圆括号

const add = (...args)=>{}

2.2使用剩余参数替代 arguments 获取实际参数

const add = function(){
	console.log(arguments);
};
⬇⬇⬇⬇
⬇⬇⬇⬇
⬇⬇⬇⬇
const add = (args)=>{
    console.log(args);
}

2.3剩余参数的位置

剩余参数只能是最后一个参数，之后不能再有其他参数，否则会报错

3.认识展开运算符

Math.min(3,1,2); //1

 const Array = [1,2,3,4,5,6,7,8,9];
  console.log(...Array); //1 2 3 4 5 6 7 8 9
  console.log(Math.min(...Array),Math.max(...Array)); // 1 9

4.区别剩余参数和展开运算符

4.1根本区别

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

//剩余参数
// 3,1,2-->[3,1,2]

5.数组展开运算符的应用

5.1复制数组

const a = [1,2];
const b = a;
a[0] = 3;
console.log(b); // [3,2] 数组b只是数组a的引用，并不是一个新的数组，a数组的值发生变化，b数组的值也会跟着一起变化
// 复制数组
const c = [...a];

5.2 合并数组

const a = [1,2];
const b = [3];
cosnt c = [4,5];
console.log([...a,...b,...c]); //[1,2,3,4,5]

5.3 字符串转为数组

//字符串可以按照数组的形式展开console.log(...'LiHao') //L i H a oconsole.log([...'LiHao']); //['L','i','H','a','o']

5.4 常见的类数组转为数组

arguments

function func(){    console.log(arguments);   // 转为类数组    console.log([...arguments]);// [1,2] }func(1,2)

NodeList

console.log([...document.querySelectorAll('p')]);

6.对象展开运算符用法

6.1展开对象

对象不能直接展开，必须在{}中展开

const apple = {    color:'红色',    shape:'球形',    taste:'甜'};//形成一个新的对象console.log({...apple}); //{color: "红色", shape: "球形", taste: "甜"}console.log({...apple}) === apple //false// 对象的展开：把属性罗列出来，用逗号隔开，放到一个{}中，构成一个新的对象

6.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: "甜"}