延展操作符(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. JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇

    JVM学习第二篇思考:一个Java代码是怎么运行起来的-下篇 在上一篇<JVM学习第一篇思考:一个Java代码是怎么运行起来的-上篇>中咱们知道类一个Java类的生命周期需要经历以下七个阶 ...

  2. 15 Python模块

    本篇是 Python 系列教程第 15 篇,更多内容敬请访问我的 Python 合集 一个模块其实就是一个文件(以.py结尾).使用模块的好处是便于维护和重用代码. 要创建一个模块,只需编写一个新的文 ...

  3. 如何在 Web 前端做 3D 音效处理

    ​ 一.背景 在社交元宇宙.大逃杀等类型的游戏场景下,用户在通过简单语音交流外,结合场景也需要一些立体声效果来让用户感知游戏角色周围其他用户的存在及其对应的距离和方位,提高语音互动的趣味性. 为了满足 ...

  4. A4纸尺寸

    A4纸尺寸 A4纸尺寸:210×297: A3纸尺寸:297×420: A2纸尺寸:420×594: A1纸尺寸:594×841: A0纸尺寸:841×1189: 备注:长(mm)×宽(mm) 单位: ...

  5. Go runtime 调度器精讲(十):异步抢占

    原创文章,欢迎转载,转载请注明出处,谢谢. 0. 前言 前面介绍了运行时间过长和系统调用引起的抢占,它们都属于协作式抢占.本讲会介绍基于信号的真抢占式调度. 在介绍真抢占式调度之前看下 Go 的两种抢 ...

  6. Clickhouse-insert 数据写入不成功问题

    [应用场景] 对副本表进行 alter delete 数据后,同样的数据再进行 insert into 操作. [问题复现] [问题解释] 对副本表 insert 语句的数据会划分为数据块. 每个数据 ...

  7. LNMP 和 LAMP 对比 (仅供参考)

    Nginx 性能稳定.功能丰富.运维简单.处理静态文件速度快且消耗系统资源极少. Apache 是 LAMP 架构最核心的 Web Server,开源.稳定.模块丰富是 Apache 的优势.但 Ap ...

  8. Git常用命令,分支合并与管理

    Git 自我感觉最大的优点是对版本库和分支的管理 各自的电脑都对项目保存一份版本,分支合并也极其方便. 而且Git的目录操作命令跟Linux一样,使用起来还是非常顺手的. Git详解 Git 常用命令 ...

  9. GPT-SoVITS语音合成模型实践

    1.概述 GPT-SoVITS是一款开源的语音合成模型,结合了深度学习和声学技术,能够实现高质量的语音生成.其独特之处在于支持使用参考音频进行零样本语音合成,即使没有直接的训练数据,模型仍能生成相似风 ...

  10. 进程管理中的active_mm是做什么的?

    在Linux内核中,进程管理涉及到许多复杂的数据结构和机制,其中active_mm是与内存管理相关的一个关键概念.理解active_mm需要先了解与之相关的一些基本内核结构和概念. 基本概念 mm_s ...