延展操作符(Spread operator)

延展操作符 = ...可以在函数调用/数组构造时,将数组表达式或者string在语法层面展开,还可以在构造对象时,将对象表达式按key-value的方式展开。

 1 函数调用
2 function(...iterableObj)
3
4 数组构造或者字符串
5
6 [...iterableObj,'4',...'hello',6]
7
8 es2018下构造对象时,进行克隆或者属性拷贝
9
10 let objClone={...obj}

应用场景:

 1 function sum(x,y,x){
2
3 return x+y+z
4
5 }
6
7 const numbers = [1,2,3]
8
9 不使用延展操作符
10
11 sum.apply(null, numbers)
12
13 使用延展操作符
14
15 sum(...numbers)
16
17 或者在构造数组时
18
19 如果没有展开语法,只能组合使用push,splice,concat,slice
20 将已有数组元素变为新数组的一部分
21
22 const people=['jan','tom']
23 const person = ['ali',...people,'alliance','ketty']
24 console.log(person)//Ali,jan,tom,alliance,ketty
25
26 另外,还有一个例子
27
28 var arr =[1,2,3]
29 var arr2=[...arr]
30 arr2.push(4)
31 console.log(arr2)//1,2,3,4

展开语法与Obj.assign()行为一致,都是执行浅拷贝,也就是只遍历一层,不会遍历父对象相关的数据

1 var arr1=[0,1,2]
2 var arr2=[3,4,5]
3 var arr3=[...arr1,...arr2] 等同于var arr4 = arr1.concat(arr2)

es2018中增加了对对象的支持

1 var obj1 = {foo:1,foo2:2}
2 var obj2={foo3:12,foo4:30}
3
4 var clonedObj={...obj1}
5 var mergedObj={...obj1,...obj2}

ES6 延展操作符的更多相关文章

  1. 谈谈ES6箭头操作符

    如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=& ...

  2. JavaScript易错知识点整理

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  3. JavaScript易错点

    JavaScript知识点1.变量作用域   var a = 1;function test() {    var a = 2;     console.log(a); // 2} test();   ...

  4. JavaScript 易错知识点整理

    本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...

  5. JavaScript易错点转载

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  6. JavaScript易错知识点整理[转]

    前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...

  7. JS易错知识点

    JAVASCRIPT易错知识点整理 前言 本文是学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由 ...

  8. js常见易错点

    原文:http://www.jianshu.com/p/1c77853d4f01 前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函 ...

  9. es6,es7,es8

    概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...

  10. ES6的一些知识学习

    一.基础 ES6 - 类: class A{ constructor(name,color){ this.name = name; this.color = color; } toString(){ ...

随机推荐

  1. Docker 发布镜像

    发布镜像 在 Docker Hub 发布镜像 登陆到 Docker Hub docker login 标记镜像并推送到 Docker Hub docker tag <image>:< ...

  2. uni-app 商场样式

    基于ColorUI-UniApp css样式开发的商城基础模 模板基础功能实现 1.首页今日推荐 点击 会商品加一 2.分类 页面 左右列表联动 3.购物车 商品加减 4.我的 订单管理  账号密码登 ...

  3. 《linux实用指令积累》持续更新。。。

    一.远程服务器文件拷贝 1.1.scp scp /home/a.txt root@127.0.0.1:/home/ 1.2.sshpass(适用于脚本调用,直接指定密码) 1.2.1.安装sshpas ...

  4. 技术教程 —— 如何利用 SEI 实现音画同步?

    ​  摘要:利用 SEI 解决数据流录制回放过程中的音画不同步问题. 文|即构 Web SDK 开发团队 今年 6 月, ZEGO 即构科技推出了行业内首套数据流录制 PaaS 方案,打破传统录制服务 ...

  5. Angular 18+ 高级教程 – Component 组件 の 生命周期钩子 (Lifecycle Hooks)

    前言 之前在 Component 组件 の Angular Component vs Custom Elements 文章中,我们有学习过几个基础的 Lifecycle Hooks. 比如 OnCha ...

  6. Angular 16+ 高级教程 – 谈谈 ASP.NET Core & Angular & React 在业务开发上各自的优势和体验

    前言 日常, 我的开发都围绕着 ASP.NET Core 和 Angular. 这篇想聊聊它们各自的特点和解决问题的方式. 以及最重要的, 我们该在什么时候采用何种方案更为妥当. 浅谈项目分类 我一般 ...

  7. 系统编程-操作系统概论PART2

    <1> 操作系统提供的服务   <2> 现代操作系统的特征 2.1 微内核(英文中常译作µ-kernel或者micro kernel) 这是一种能够提供必要服务的操作系统内核: ...

  8. postgre基于行数的外连接及python连接postgre数据库

    外连接 左外/右外连接 左外连接:左表全部出现在结果集中,若右表无对应记录,则相应字段为NULL left join ... on 条件 右外连接:右表全部出现在结果集中,若左表无对应记录,则相应字段 ...

  9. 暑集假训SCP提高拟模21

    \[だから妄想感傷代償連盟 \] \[愛を懐いて理想を叫んだ \] \[行き場のない愚者のメロディー \] \[再挑戦•転生•テレポーテーション \] \[何回だって 重ねて逝くんだ \] \[終わり ...

  10. 暑假集训PVZ提高模拟9

    没关 exe 让这货挂了一天 UPD:又挂了一晚上,现在被我正义制裁了 A.大众点评 交互红题啊,交互会写,但是忘记判 \(n=1\) 了 这个题交互库函数实现起来还是挺简单的,我 Windows 不 ...