前言:
扩展运算符又称为Rest运算符,可以实现数组、对象、字符串在语法层面上的展开,达到简化语法的目的,使得我们提高开发效率
主要用法:
在需要解构的变量前加三个点(...xxx)
具体示例:
一、...数组
罗列指定数组的所有元素
情况1:
let arr = ["a", "b", "c"];
console.log(...arr);
console.log(arr[0], arr[1], arr[2]);
控制台输出结果:
如上图所示,...arr输出的结果和每一项单个输出结果一样
情况2:(主要应用场景)
创建新数组,拥有旧数组元素的同时新增新元素
let arr = ["a", "b", "c"];
let newArr = [...arr, "d", "e"];
console.log(newArr);
控制台输出结果:
如上图所示,‘d’和‘e’与arr数组合成了新数组
二、...字符串
罗列指定字符串的所有字符
情况1:
let str = "abcd";
console.log(str.charAt(0), str.charAt(1), str.charAt(2), str.charAt(3));
console.log(...str);
控制台输出:
情况2:(主要应用场景)
获取指定字符串的字符数组
let str = "abcd";
let charArr = [...str];
console.log(charArr);
控制台输出:
如上图所示,可以快速把一个字符串的所有字符组成一个数组
三、 ...对象
罗列指定对象的所有属性
情况1:(主要应用场景)
给对象增加属性
let obj = {
id: 1,
name: "张三",
age: 666,
};
let newObj = { ...obj, gender: "男" };
console.log(newObj);
控制台输出:
需要注意的一点:
当拓展运算符出现在函数形参部分,并且是作为该函数的最后一个形参,那么其作用是将实参存储到扩展运算符后面的变量名称数组中
const demo = (...test) => {
console.log(test);
};
demo(1, 2, 3, 4, 5, 6);
控制台输出: