剩余参数与扩展运算符“...”

685 阅读1分钟

剩余参数

const sum1= (first, ...arg)=>{
console.log(first);//1
  console.log(arg);//[2,3]
}
sum1(1, 2, 3);


const sum2 = (...args) => {
  let sum = 0;
  args.forEach((value) => (sum += value));
  return sum;
};
console.log(sum2(1, 2, 3, 4, 5));

当实参个数大于形参个数时,我们使用...来接收剩余的参数,并且形式是数组的格式

剩余参数与解构配合使用

let students = ["wangwu", "zhangsan", "lisi"];
let [s1, ...s2] = students;
console.log(s1); //'wangwu '
console.log(s2); // ['zhangsan' ,'lisi']

扩展运算符

扩展运算符可以将数组拆分成以逗号分隔的参数序列

let arr = [1, 2, 3];
//...arr就是1,2,3
console.log(...arr);// 1 2 3

由于console.log()会将逗号作为参数分隔符,因此在console.log()打印出的...arr没有逗号分隔

数组的合并

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

arr1.push(...arr2);
console.log(arr1);//[1, 2, 3, 4,5, 6, 7, 8]

利用扩展运算符将伪数组转换为数组

<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>
    var divs = document.querySelectorAll("div");
    divs = [...divs];
</script>