延展操作符(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. 【Jenkins】之自动化测试持续集成

    一.创建jenkins项目 选择节点 创建指定名称的目录名: 写命令,执行shell: 命令填写: # 引入电脑配置文件 #. ~/.bash_profile cd Python_Interface ...

  2. vue3+ts Axios封装与使用

    创建完vue3 项目后 新版本:动态控制是否显示加载动画.是否需要判断重复请求.https://www.cnblogs.com/lovejielive/p/17676856.html 一,安装Axio ...

  3. 在.net core使用Serilog,只要简单的三步

    第一步:在项目上用nuget安装 Serilog.AspNetCore 最新的稳定版即可 ,安装这个会把其他需要的包都给包含着 第二步:修改 Program.cs 的 CreateHostBuilde ...

  4. HashMap深入讲解

    HashMap是Java中最常用的集合类框架,也是Java语言中非常典型的数据结构, 而HashSet和HashMap者在Java里有着相同的实现,前者仅仅是对后者做了一层包装,也就是说HashSet ...

  5. 外挂级OCR神器:免费文档解析、表格识别、手写识别、古籍识别、PDF转Word

    TextIn Tools是一款免费的在线OCR工具,支持快速准确的文字和表格识别,手写.古籍识别,提供PDF转Markdown大模型辅助工具,同时支持PDF.WORD.EXCEL.JPG.PPT等各类 ...

  6. Angular 17+ 高级教程 – Routing 路由 (功能篇)

    前言 这篇只讲功能不讲原理.没有循序渐进,没有由浅入深,一个主题讲到底. Route 目录 上一篇 Angular 17+ 高级教程 – Routing 路由 (原理篇) 下一篇 Angular 17 ...

  7. HTML – script async defer

    参考 Youtube – #3 JavaScript Loading Strategies (async and defer) | JavaScript Full Tutorial no async ...

  8. SpringMVC —— 请求参数(传递json数据)

    接收请求中的json数据             注解       json格式(POJO)    json数组(POJO)    @RequestBody与@RequestParam区别   

  9. 还在苦于密码太弱?教你3招用Linux生成高强度密码

    各位好啊,我是会编程的蜗牛,作为java开发者,我们平常肯定会接触Linux操作系统,其实除了一般的部署应用外,它还可以帮助我们生成密码.解决我们平常自己想各种复杂密码的烦恼,以后我会讲一讲如何安全地 ...

  10. iframe嵌套登录页-页面无法加载

    背景 活动页面和登录页跨域,过去都是跳转到登录页登录之后再跳转回来,体验不好. 现在需要将登录模块嵌入到活动页,因为懒,不想开发重复的模块,首先我想到的是iframe 刚开始还能正常使用,一段时间后安 ...