前端基础知识-ES6扩展运算符(快速实现数组添加新元素、字符串转为数组、对象添加新属性)

前言:

扩展运算符又称为Rest运算符,可以实现数组、对象、字符串在语法层面上的展开,达到简化语法的目的,使得我们提高开发效率

主要用法:

在需要解构的变量前加三个点(...xxx)

具体示例:

一、...数组

罗列指定数组的所有元素

情况1:
javascript 复制代码
let arr = ["a", "b", "c"];
console.log(...arr);
console.log(arr[0], arr[1], arr[2]);

控制台输出结果:

如上图所示,...arr输出的结果和每一项单个输出结果一样

情况2:(主要应用场景)

创建新数组,拥有旧数组元素的同时新增新元素

javascript 复制代码
let arr = ["a", "b", "c"];
let newArr = [...arr, "d", "e"];
console.log(newArr);

控制台输出结果:

如上图所示,'d'和'e'与arr数组合成了新数组

二、...字符串

罗列指定字符串的所有字符

情况1:
javascript 复制代码
      let str = "abcd";
      console.log(str.charAt(0), str.charAt(1), str.charAt(2), str.charAt(3));
      console.log(...str);

控制台输出:

情况2:(主要应用场景)

获取指定字符串的字符数组

javascript 复制代码
      let str = "abcd";
      let charArr = [...str];
      console.log(charArr);

控制台输出:

如上图所示,可以快速把一个字符串的所有字符组成一个数组

三、 ...对象

罗列指定对象的所有属性

情况1:(主要应用场景)

给对象增加属性

javascript 复制代码
      let obj = {
        id: 1,
        name: "张三",
        age: 666,
      };
      let newObj = { ...obj, gender: "男" };
      console.log(newObj);

控制台输出:

需要注意的一点:

当拓展运算符出现在函数形参部分,并且是作为该函数的最后一个形参,那么其作用是将实参存储到扩展运算符后面的变量名称数组中

javascript 复制代码
      const demo = (...test) => {
        console.log(test);
      };
      demo(1, 2, 3, 4, 5, 6);

控制台输出:

相关推荐
虚行几秒前
Python学习入门
开发语言·python·学习
南囝coding4 分钟前
《独立开发者精选工具》
前端·后端·开源
总有刁民想爱朕ha4 分钟前
Python自动化从入门到实战(23):Python打地鼠游戏开发
开发语言·python·游戏开发
曹牧5 分钟前
C#:函数默认参数
开发语言·c#
IT_陈寒8 分钟前
JavaScript 性能优化的 7 个致命陷阱:我从 P5 到 P8 的核心突破都在这里!
前端·人工智能·后端
黄焖鸡能干四碗14 分钟前
MES生产执行制造系统建设(Java+Mysql)
java·大数据·开发语言·信息可视化·需求分析
workflower17 分钟前
跨链协同制造中的服务博弈与激励机制
开发语言·软件工程·制造·需求分析·个人开发·结对编程
liulilittle22 分钟前
Y组合子剖析:C++ 中的递归魔法
开发语言·c++·编程语言·函数式编程·函数式·函数编程·y组合子
艾小码28 分钟前
告别加班!这些数组操作技巧让前端开发效率翻倍
前端·javascript
Rhys..1 小时前
ES6是什么
前端·javascript·es6