ES6—扩展运算符和rest运算符（6）

Amio 发布于2019-08-23 17:21 / 2190人阅读

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。

1、扩展运算符简介

扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。

说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个多带带的小元素。

基本用法：拆解字符串与数组

var array = [1,2,3,4];
console.log(...array);//1 2 3 4 
var str = "String";
console.log(...str);//S t r i n g

2、扩展运算符应用

2.1 某些场景可以替代apply

在使用Math.max()求数组的最大值时，ES5可以通过 apply 做到（用一种不友好且繁琐的方式）

// ES5 apply 写法
var array = [1,2,3,4,3];
var max1 = Math.max.apply(null,array);
console.log(max1);//4

幸运的是JavaScript的世界在不断改变，扩展运算符可用于数组的析构，优雅的解决了这个问题。

// ES6 扩展运算符 写法
var array = [1,2,3,4,3];
var max2 = Math.max(...array);  
console.log(max2);//4

先把 array 打散成 1 2 3 4 3，再在里面找最大的那一个，就显而易见了。

2.2 代替数组的push、concat 等方法

实现把 arr2 塞到 arr1 中

// ES5 apply 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
Array.prototype.push.apply(arr1, arr2);
//arr1     [0, 1, 2, 3, 4, 5]

扩展运算符又要施展化骨大法了

// ES6 扩展运算符 写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);
//arr1     [0, 1, 2, 3, 4, 5]

通俗的解释下，扩展运算符先把 arr2 打散成 3 4 5 ，之后再往arr1里push，就轻松多了。

同理可推，concat 合并数组的时候：

var arr1 = ["a", "b"];
var arr2 = ["c"];
var arr3 = ["d", "e"];

// ES5的合并数组
arr1.concat(arr2, arr3)  // [ "a", "b", "c", "d", "e" ]

// ES6的合并数组
[...arr1, ...arr2, ...arr3]  // [ "a", "b", "c", "d", "e" ]

ES5的合并数组写法，像是 arr1 把 arr2，arr3 给吸收了。

而ES6的合并数组写法，则是先把 arr1，arr2， arr3 拆解，之后塞到新的数组中。

2.3 拷贝数组或对象

//拷贝数组
var array0 = [1,2,3];
var array1 = [...array0];
console.log(array1);//[1, 2, 3]

//拷贝数组
var obj = {
    age:1,
    name:"lis",
    arr:{
        a1:[1,2]
    }
}
var obj2  = {...obj};
console.log(obj2);//{age: 1, name: "lis", arr: {…}}

无论是像克隆数组还是对象，先用化骨绵掌之扩展运算符，将其打散，之后再拼装的到一起就可以了，多么简单易用。

2.4 将伪数组转化为数组

//伪数组转换为数组
var nodeList = document.querySelectorAll("div");
console.log([...nodeList]);  // [div, div, div ... ]

上面代码中，querySelectorAll 方法返回的是一个 nodeList 对象。它不是数组，而是一个类似数组的对象。这时，扩展运算符可以将其转为真正的数组，原因就在于 NodeList 对象实现了 Iterator。

注意：使用扩展运算符将伪数组转换为数组有局限性，这个类数组必须得有默认的迭代器且伪可遍历的。

3、rest 运算符简介

剩余运算符（the rest operator），它的样子看起来和展开操作符一样，但是它是用于解构数组和对象。在某种程度上，剩余元素和展开元素相反，展开元素会“展开”数组变成多个元素，剩余元素会收集多个元素和“压缩”成一个单一的元素。

说的通俗点，有点像吸星大法，收集多个元素，压缩成单一的元素。

rest参数用于获取函数的多余参数，这样就不需要使用arguments对象了。rest参数搭配的变量是一个数组，该变量将多余的参数放入数组中。

例如实现计算传入所有参数的和使用arguments参数：

function sumArgu () {
     var result = 0;
     for (var i = 0; i < arguments.length; i++) {
        result += arguments[i];
    }
    return result
}
console.log(sumArgu(1,2,3));//6

使用rest参数：

function sumRest (...m) {
    var total = 0; 
    for(var i of m){
        total += i;
    }
    return total;
}
console.log(sumRest(1,2,3));//6

上面代码利用 rest 参数，可以向该函数传入任意数目的参数。传递给 sumRest 函数的一组参数值，被整合成了数组 m。

就像是吸星大法，把分散的元素收集到一起。

所以在某些场景中，无需将arguments转为真正的数组，可以直接使用rest参数代替。

4、rest 运算符应用

4.1 rest 参数代替arguments变量

// arguments变量的写法
function sortNumbers() {
  return Array.prototype.slice.call(arguments).sort();
}

// rest参数的写法
const sortNumbers = (...numbers) => numbers.sort();

上面的两种写法，比较后可以发现，rest 参数的写法更自然也更简洁。

不过，rest参数和arguments对象有一定的区别：

4.2 与解构赋值组合使用

var array = [1,2,3,4,5,6];
var [a,b,...c] = array;
console.log(a);//1
console.log(b);//2
console.log(c);//[3, 4, 5, 6]

备注：rest参数可理解为剩余的参数，所以必须在最后一位定义，如果定义在中间会报错。

var array = [1,2,3,4,5,6];
var [a,b,...c,d,e] = array;
//  Uncaught SyntaxError: Rest element must be last element

5、总结

5.1 扩展运算符和rest运算符是逆运算

扩展运算符：数组=>分割序列

rest运算符：分割序列=>数组

5.2 扩展运算符应用场景

由于其繁琐的语法，apply 方法使用起来并不是很方便。当需要拿一个数组的元素作为函数调用的参数时，扩展运算符是一个不错的选择。

扩展运算符还改善了数组字面量的操作，你可以更方便的初始化、连接、复制数组了。

使用析构赋值你可以提取数组的一部分。通过与迭代器协议的组合，你可以以一种更灵活的方式使用该表达式。

5.3 rest运算符应用场景

rest运算符主要是处理不定数量参数，rest参数使得收集参数变得非常简单。它是类数组对象arguments一个合理的替代品。

rest参数还可以与解构赋值组合使用。

在实际项目中灵活应用扩展运算符、rest运算符，能写出更精简、易读性高的代码。

GPU云服务器云服务器 java逻辑和或运算 es6字符串扩展运算符其他运算符

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104221.html

ES6的rest参数和扩展运算符

摘要：参数的形式为变量名扩展运算符是三个点。传递给函数的一组参数值，被整合成了数组。扩展运算符的应用普通的函数调用上面代码中，和这两行，都是函数的调用，它们的都使用了扩展运算符。这时，扩展运算符可以将其转为真正的数组，原因就在于对象实现了。 rest参数和扩展运算符都是ES6新增的特性。rest参数的形式为：...变量名；扩展运算符是三个点（...）。 rest参数 rest参数用于获取函数...

ccj659 2019-08-20 18:05 评论0 收藏0
es6的解构赋值、扩展运算符、rest参数使用

摘要：模板字符串甚至还能嵌套解构赋值允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构。运算符使用场景应该稍少一些，主要是处理不定数量参数，可以避免对象的使用。 es6中较为常用的书写风格为了书写的方便，es6中提出了很多比较友好的书写方式，其中最为常见的属于以下几个：字符串模板 `abcdef${test}` 解构赋值 let [a, b, c] = [1,...

xuweijian 2019-08-21 16:47 评论0 收藏0
ES6 ...操作符

摘要：在语法中，操作符有两种意义剩余语法，参数和展开语法，展开数组对象，作为函数数组对象的扩展运算符。使用和参数进行操作其余参数传给原始函数展开语法运算则可以看作是参数的逆运算。在ES6语法中，...操作符有两种意义：rest(剩余语法，rest参数) 和 spread(展开语法，展开数组/对象)，作为函数、数组、对象的扩展运算符。从某种意义上说，剩余语法与展开语法是相反的：剩余语法将多...

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0
es6学习笔记-函数扩展_v1.0_byKL

摘要：学习笔记函数扩展函数参数的默认值如果参数默认值是变量，那么参数就不是传值的，而是每次都重新计算默认值表达式的值。属性函数的属性，返回该函数的函数名。箭头函数详细链接参考引用函数扩展 es6学习笔记-函数扩展_v1.0 函数参数的默认值 function Point(x = 0, y = 0) { this.x = x; this.y = y; } var p = ne...

yuanzhanghu 2019-08-20 15:16 评论0 收藏0
如何使用ES6中的参数

摘要：我们可以利用这一点，如果参数缺失就抛出错误在中，我们可以更近一步，使用默认参数来设置强制参数对象在的时候默认参数就被加入，来代替对象，但并没有实现。随着的发布，现在官方支持了默认参数。 ECMAScript 6（或者叫 ECMAScript 2015）是 ECMAScript 的最新标准，极大的提高了 JavaScript 中处理参数的能力。现在我们可以使用 rest 参数（rest ...

Hanks10100 2019-08-20 14:50 评论0 收藏0