延展操作符(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. C语言:应用程序增加库函数rand的步骤

    rand函数用来生成随机数,函数原型为int rand( void ); 返回值为生成的随机数,范围0~32767.在调用rand之前可以用srand函数初始化随机数发生器来生成更随机的数. 可以通过 ...

  2. 【YashanDB知识库】YashanDB的JDBC/OCI驱动如何设置字符编码

    问题现象 Oracle.Mysql数据库链接串,JDBC驱动连接串可以指定客户端的编码格式: jdbc:mysql://hostname:port/database_name?useUnicode=t ...

  3. 深入理解Argo CD工作原理

    1. ArgoCD 的架构 ArgoCD 是一个 Kubernetes 原生的持续交付工具,它通过监控 Git 仓库中的应用定义来自动部署应用到 Kubernetes 集群.其核心架构由以下几个关键组 ...

  4. Linq操作XML生成XML,实体生成XML和互转

    开发接口中难免会遇到一些数据对接需要转换城xml,看到很多之前的代码都使用很传统的方法循环集合并定义xml后一一生成的,代码之封锁 特此使用了简单易用linq操作分享给大家,希望可以帮到需要的同学 今 ...

  5. Angular 18+ 高级教程 – 学以致用

    前言 读这么多原理,到底为了什么?真实项目中真的会用得到吗? 你正在疑惑 "知识的力量" 吗? 本篇会给一个非常非常好的案例,让你感悟 -- 知识如何用于实战. 记住,我的目的是让 ...

  6. 二叉树的 Morris 中序遍历——O(1)空间复杂度

    回顾 问题陈述: 给定一棵二叉树,实现中序遍历并返回包含其中序序列的数组 例如给定下列二叉树: 我们按照左.根.右的顺序递归遍历二叉树,得到以下遍历: 最终中序遍历结果可以输出为: [3, 1, 9, ...

  7. element plus 2.3.14(完成 指南 部分)

    https://element-plus.org/zh-CN/guide/design.html 设计 控制反馈: 通过界面样式和交互动效让用户可以清晰的感知自己的操作: 页面反馈: 操作后,通过页面 ...

  8. C++ STL deque容器

    deque 容器 deque (读作deck)是"doble-ended-queue"的缩写,和vector一样都是STL的容器 deque是双端数组,而vector是单端 单端与 ...

  9. Spring —— bean实例化

    bean 实例化 bean本质上就是对象,创建bean使用构造方法完成(反射)      构造方法(常用)        静态工厂*        实例工厂*        FactoryBean(实 ...

  10. Kubernetes Deployment控制器(二十)

    前面我们学习了 ReplicaSet 控制器,了解到该控制器是用来维护集群中运行的 Pod 数量的,但是往往在实际操作的时候,我们反而不会去直接使用 RS,而是会使用更上层的控制器,比如我们今天要学习 ...