一、基本使用

ES6中函数可以使用 rest参数 接收函数的多余参数,组成一个数组,放在形参的最后面。

let fn = (a, ...value) => {
console.log(a);
console.log(value[0], value[1]);
};
add(10, 20, 30);
//
// 20 30

数组中的扩展运算符就好比 rest参数 的逆运算,将一个数组转为用逗号分隔的参数序列(也就是展开数组),在语法上,用三个点表示(...)。

var fruits = ['apple', 'banana', 'orange'];
console.log(...fruits); // apple banana orange

二、取代apply

扩展运算符主要应用于函数的调用,比如下面这种情况给俩个数求和,在ES5中可以使用 apply 方法实现:

let add = (a, b) => a + b;
let arr = [10, 20];
let result = add.apply(null, arr);
console.log(result); //

现在不必了,直接使用扩展运算符即可:

let add = (a, b) => a + b;
let arr = [10, 20];
console.log(add(...arr)); //

而且可以放置于形参中的任意位置,这点和 rest参数 不同:

let add = (a, b, c, d) => a + b + c + d;
let arr = [20, 30];
console.log(add(10, ...arr, 40)); //

下面是俩个比较实用的取代 apply 方法例子:

// 1、取出一个数字数组中的最大值

// ES5
let arr = [10, 15, 5, 20, 10];
alert(Math.max.apply(null, arr)); // // ES6
let arr = [10, 15, 5, 20, 10];
alert(Math.max(...arr)); // ---------------------------------------------- // 2、将一个数组添加到一个数组里 // ES5
let arr1 = [10, 20];
let arr2 = [30, 40];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1); // [ 10, 20, 30, 40 ]
console.log(arr2); // [ 30, 40 ] // ES6
let arr1 = [10, 20];
let arr2 = [30, 40];
arr1.push(...arr2);
console.log(arr1); // [ 10, 20, 30, 40 ]
console.log(arr2); // [ 30, 40 ]

三、其他运用的地方

1、复制数组

在ES5中如果你这样复制数组式其实是不对的:

let arr1 = [10, 20];
let arr2 = arr1;
arr1.push(30);
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20, 30 ]

因为数组式复合类型的数据,复制的仅仅是指针,其中一个数组发生变化,另一个数组当然随之变化。

因此需要这样做:

let arr1 = [10, 20];
let arr2 = arr1.concat();
arr1.push(30);
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20 ]

现在ES6使用扩展运算符更加方便:

let arr1 = [10, 20];
let arr2 = [...arr1];
arr1.push(30);
console.log(arr1); // [ 10, 20, 30 ]
console.log(arr2); // [ 10, 20 ]

2、合并数组

ES5中合并数组可以这样做:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = arr1.concat(arr2);
arr1.push(50);
console.log(arr1); // [ 10, 20, 50 ]
console.log(arr2); // [ 30, 40 ]
console.log(arr3); // [ 10, 20, 30, 40 ]

ES6中又有了新写法:

let arr1 = [10, 20];
let arr2 = [30, 40];
let arr3 = [...arr1, ...arr2];
arr1.push(50);
console.log(arr1); // [ 10, 20, 50 ]
console.log(arr2); // [ 30, 40 ]
console.log(arr3); // [ 10, 20, 30, 40 ]

注意:

以上俩种写法都是浅拷贝,合并成员是复合类型的数据就要注意了:

let arr1 = [{user: 'tom'}];
let arr2 = [{user: 'jack'}];
let arr3 = arr1.concat(arr2);
let arr4 = [...arr1, ...arr2];
alert(arr1[0] === arr3[0]); // true
alert(arr1[0] === arr4[0]); // true

原因还是这些对象成员拷贝的是地址。

ES6数组的扩展运算符的更多相关文章

  1. 数组的复制及ES6数组的扩展

    一.数组的复制 // alert([1,2,3]==[1,2,3]); let cc = [0,1,2]; let dd = cc; alert(dd==cc);//此时改变dd会影响cc ES5 只 ...

  2. es6数组的扩展

    数组扩展运算符 ...(三个点) const demoArr=[0,1,2,3,4] console.log(...demoArr) // 0 1 2 3 4 // 他把一个数组用逗号分隔了出来 // ...

  3. ES6数组的扩展--Array.from()和Array.of()

    一. Array.from() : 将伪数组对象或可遍历对象转换为真数组 1.何为伪数组 如果一个对象的所有键名都是正整数或零,并且有length属性,那么这个对象就很像数组,语法上称为"类 ...

  4. ES6学习笔记-扩展运算符(...)

    扩展运算符的定义: es6中引入扩展运算符(...),它用于把一个数组转化为用逗号分隔的参数序列. 它常用在不定参数个数时的函数调用,数组合并等情形. 用法一:不定参数个数时的函数调用 <scr ...

  5. ES6 数组的扩展

    1. Array.from() Array.from()将类数组(array-like)对象与可遍历的对象转化为数组并返回. 下面是一个类数组 let arr = { '0':'a', '1':'b' ...

  6. es6可变参数-扩展运算符

    es5中参数不确定个数的情况下: //求参数和 function f(){ var a = Array.prototype.slice.call(arguments); var sum = 0; a. ...

  7. es6 学习小记 扩展运算符 三个点(...)

    参考: es6 扩展运算符 三个点(...) 经常回顾,方能真正掌握. 一.含义 扩展运算符( spread )是三个点(...).它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. ...

  8. (...)ES6三点扩展运算符

    扩展运算符将一个数组转为用逗号分隔的参数序列 console.log(...[a, b, c]) // a b c 用于: 1 将一个数组,变为参数序列 let add = (x, y) => ...

  9. Vue的三个点es6知识,扩展运算符

    Vue中的三个点在不同情境下的意思 操作数组 //里面放自己定义的方法 methods: { /** * 把数组中的元素孤立起来 */ iClick() { let iArray = ['1', '2 ...

随机推荐

  1. 基于Kubernetes(k8s)网络方案演进

    VIP PaaS在接近两年时间里,基于kubernetes主要经历四次网络方案的变迁: 1. kubernetes + flannel 2. 基于Docker libnetwork的网络定制 3. k ...

  2. Docker学习记录3: 搭建 Private Registry

    恩, Private Registry 特别好搭建, 只要依照官方文档, 很容易安装... https://docs.docker.com/registry/deploying/ 5000是个常用的端 ...

  3. HTML5文档的各个组成部分分类

    <!DOCTYPE html><!--声明文档结构类型--> <html lang="zh-cn"><!--声明文档文字区域--> ...

  4. 2019寒假训练营寒假作业(三) 对Sketch——CM-Sketch的理解(理论题部分)

    目录 实验题部分 基本题 1.简述sketch: 2.Count-min Sketch: 开放题部分 理论部分 1.解释为什么 sketch 可以省空间 2.用流程图描述Count-min sketc ...

  5. iOS开发Interface Builder技巧

    1.使view的Size与view中的Content相适应:选中任意的一个view,然后Editor->Size to Fit Content,或者简单的按 ⌘=接着就会按照下面的规则对选中vi ...

  6. C++并行编程1

    what is concurrency 我们可以一边看电视,一边唱歌.人并行非常容易理解,但是计算机呢?是不是我们一边编辑着word文档,一边听着歌,这样计算机就是在并行吗?不一定欧,如果你计算机是单 ...

  7. YaoLingJump开发者日志(八)V1.1版本完成

    跳跃吧瑶玲下载连接 官网下载(网站服务器不支持10M以上的文件上传-_-||) 百度网盘下载 介绍   忙里偷闲,把之前的工作整理了一下完成V1.1版本,下面是更新! (1)去掉了积分榜. (2)增加 ...

  8. 第三部分shell编程3(shell脚本2)

    7. if 判断一些特殊用法 if [ -z $a ] 这个表示当变量a的值为空时会怎么样if grep -q '123' 1.txt; then 表示如果1.txt中含有'123'的行时会怎么样if ...

  9. C# 泛型和委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. mysql 重置 root 密码

    mysqld_safe --skip-grant-tables & UPDATE mysql.user SET authentication_string=PASSWORD('mima') W ...