延展操作符(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#项目—模拟考试

    C#模拟考试软件 开发了一个<模拟考试>的小软件,此小软件练习的目的主要是为了体会编程思想,深度理解高内聚.低耦合,掌握编程思维逻辑的大招,告别垃圾代码,重点体会编程之美,练习时长30分钟 ...

  2. drawable xx should not reference itself

    背景: 在Android中新增一个xx.xml,在layer-list 的item中设定引入的drawable后,报这个提示(xx不能引用自身) 原因: 这个错误其实很离谱,但是还是有必要记一下,万一 ...

  3. 扩展KMP (ex_KMP)

    一些约定: 字符串下标从1开始 s[1,i]表示S的第一个到第i个字符组成的字符串 解决的题型: 给你两个字符串A,B(A.size()=n,B.size()=m),求p数组 p[i]表示最大的len ...

  4. 在 SQLAlchemy 中对数据异步处理的时候,获得关联集合的处理方式

    我们在定义SQLAlchemy对象模型的关系的时候,用到了relationship 来标识关系,其中 lazy 的参数有多种不同的加载策略,本篇随笔介绍它们之间的关系,以及在异步处理中的一些代码案例. ...

  5. 合合信息智能文字识别产品通过中国信通院“可信AI—OCR智能化服务”评估

    近年来,我国对数据的重视程度不断加强.2022年1月,国务院印发的<"十四五"数字经济发展规划>进一步提出,到2025年要初步建立数据要素市场体系,并对充分发挥数据要素 ...

  6. Brainstorm 了道题但是不会做

    题 因为没想出来暂时没定数据范围,不过应该会在 \(n^{2}\) 到 \(n^{3}\) 级别 我的一个思路是先对合法的方案连并查集,然后并查集内判重,但是不会算方案数,因为假如找到重的了不能直接看 ...

  7. Python 潮流周刊#71:PyPI 应该摆脱掉它的赞助依赖(摘要)

    本周刊由 Python猫 出品,精心筛选国内外的 250+ 信息源,为你挑选最值得分享的文章.教程.开源项目.软件工具.播客和视频.热门话题等内容.愿景:帮助所有读者精进 Python 技术,并增长职 ...

  8. 智慧高校IT智能运维方案

    当前高校网络已成为每个学校必备的信息基础设施,也成了学校提高教学.科研及管理水平的重要途径和手段.随着信息化发展,高校网络建设逐步走向数字化.智慧化,传统的人力巡检.运维逐渐难以支撑高校校园稳定运行. ...

  9. mysql-存储过程(1) mysql循环语句

    mysql循环语句: 本文总结了mysql常见的三种循环方式:while.repeat和loop循环.还有一种goto,不推荐使用. 一.while循环 delimiter // #定义标识符为双斜杠 ...

  10. MyBatis的常见面试题

    MyBatis 1.什么是MyBatis MyBatis是一款优秀的半自动化的持久层框架.支持自定义 SQL.存储过程以及高级映射. 2.MyBatis的特点? 简单.灵活.解耦.丰富的标签 3.My ...