ES6 延展操作符
延展操作符(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 延展操作符的更多相关文章
- 谈谈ES6箭头操作符
如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙.它简化了函数的书写.操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=& ...
- JavaScript易错知识点整理
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JavaScript易错点
JavaScript知识点1.变量作用域 var a = 1;function test() { var a = 2; console.log(a); // 2} test(); ...
- JavaScript 易错知识点整理
本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一些ES ...
- JavaScript易错点转载
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JavaScript易错知识点整理[转]
前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由浅入深的介绍和讲解,其中也涉及了一 ...
- JS易错知识点
JAVASCRIPT易错知识点整理 前言 本文是学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函数参数,闭包问题及对象拷贝与赋值这6个方面进行由 ...
- js常见易错点
原文:http://www.jianshu.com/p/1c77853d4f01 前言 本文是我学习JavaScript过程中收集与整理的一些易错知识点,将分别从变量作用域,类型比较,this指向,函 ...
- es6,es7,es8
概述 ES全称ECMAScript,ECMAScript是ECMA制定的标准化脚本语言.目前JavaScript使用的ECMAScript版本为ECMAScript-262. ECMAScript 标 ...
- ES6的一些知识学习
一.基础 ES6 - 类: class A{ constructor(name,color){ this.name = name; this.color = color; } toString(){ ...
随机推荐
- Visual Studio Code 重置“不再询问”选项
有一次使用 VS Code 重命名一个 Python 文件时,VS Code 询问"扩展'Python'希望通过移动此文件来进行重构更改".当时没有多想,选中"不再提问& ...
- LaTeX 插入代码
LaTeX 插入代码可以使用的宏包有 verbatim.fancyvrb.listings 以及 minted.个人最推荐使用 minted. verbatim verbatim 没有语法高亮功能,只 ...
- Android : Found byte-order-mark in the middle of a file
1. 首先,打包App,然后打包报错, views里提示,要加上 android { lintOptions { checkReleaseBuilds false //不检查发布版中的错误 abort ...
- electron修改vue项目打包后的exe图标
vue用electron打包点击这里 安装electron-icon-builder 添加图标生成器:npm i electron-icon-builder 生成图标 1.在package.json的 ...
- 关于 Splay 树
前置芝士 $\LARGE {关于二叉搜索树及平衡树无聊的一大串子定义}$ 二叉搜索树(BST树) 定义 二叉搜索树是一种二叉树的树形数据结构,其定义如下: 空树是二叉搜索树. 若二叉搜索树的左子树不为 ...
- Angular Material 18+ 高级教程 – CDK Observers
前言 Observers 是 Angular Material 对游览器原生 MutationObserver 的上层封装.主要用于监听 add/remove Node. 不熟悉的朋友可以先看这篇 D ...
- MQ核心作用异步&削峰&解耦使用场景详解
说在前面 在如今的高并发互联网应用中,如何确保系统在巨大的流量冲击下还能稳稳当当运转,是每个技术团队都会遇到的挑战.说到这,消息队列(MQ) 就是背后的"大功臣"了. 无论是异步处 ...
- composer 执行脚本时报错:Error: You made a reference to a non-existent script @php artisan package:discover
composer 执行脚本时报错:Error: You made a reference to a non-existent script @php artisan package:discover. ...
- uniapp电子签名盖章实现详解
项目开发中用到了电子签名.签好名的图片需要手动实现横竖屏旋转.并将绘制的签名图片放到pdf转换后的base64的图片上,可以手动拖动签名到合适的位置,最后合成签名和合同图片并导出.和以往一样,先发一下 ...
- 树形结构数据 数组对象 按照 sort 字段排序
export function sortTreeData (data, flag) { let arr = [] if (flag === 1) { arr = data[0].children } ...