ES6的rest参数和扩展运算符

ccj659 发布于2019-08-20 18:05 / 1200人阅读

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

rest参数和扩展运算符都是ES6新增的特性。
rest参数的形式为：...变量名；扩展运算符是三个点（...）。

rest参数

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

function add(...values) {
  let sum = 0;
  for (var val of values) {
    sum += val;
  }
  return sum;
}

add(1, 2, 3) // 6

传递给 add 函数的一组参数值，被整合成了数组 values。

下面是一个 rest 参数代替arguments变量的例子。

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

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

rest参数和arguments对象的区别

rest参数只包含那些没有对应形参的实参；而 arguments 对象包含了传给函数的所有实参。

arguments 对象不是一个真实的数组；而rest参数是真实的 Array 实例，也就是说你能够在它上面直接使用所有的数组方法。

arguments 对象对象还有一些附加的属性 (比如callee属性)。

另外，使用rest参数时应注意一下两点：

rest 参数之后不能再有其他参数（即只能是最后一个参数），否则会报错。

function f(a, ...b, c) { ... } // 报错

函数的length属性，不包括 rest 参数。

(function(a) {}).length  // 1
(function(...a) {}).length  // 0
(function(a, ...b) {}).length  // 1

扩展运算符

扩展运算符可以看做是 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。

console.log(...[1, 2, 3]) // 1 2 3

console.log(1, ...[2, 3, 4], 5) //1 2 3 4 5

扩展运算符的应用 普通的函数调用

function push(array, ...items) {
  array.push(...items);
}

function add(x, y) {
  return x + y;
}

var numbers = [4, 38];
add(...numbers) // 42

上面代码中，array.push(...items)和add(...numbers)这两行，都是函数的调用，它们的都使用了扩展运算符。该运算符将一个数组，变为参数序列。

替代 apply 方法调用函数

// ES5 的写法
Math.max.apply(null, [14, 3, 77])

// ES6 的写法
Math.max(...[14, 3, 77])

// 等同于
Math.max(14, 3, 77);

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

// ES6 的写法
var arr1 = [0, 1, 2];
var arr2 = [3, 4, 5];
arr1.push(...arr2);

合并数组

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" ]

与解构赋值结合

const [first, ...rest] = [1, 2, 3, 4, 5];
first // 1
rest  // [2, 3, 4, 5]

const [first, ...rest] = [];
first // undefined
rest  // []

const [first, ...rest] = ["foo"];
first  // "foo"
rest   // []

如果将扩展运算符用于数组赋值，只能放在参数的最后一位，否则会报错。

const [...butLast, last] = [1, 2, 3, 4, 5];  // 报错

const [first, ...middle, last] = [1, 2, 3, 4, 5];  // 报错

将字符串转为数组

var str = "hello";

// ES5  
var arr1 = str.split("");  // [ "h", "e", "l", "l", "o" ] 

// ES6  
var arr2 = [...str];  // [ "h", "e", "l", "l", "o" ]

实现了 Iterator 接口的对象

任何 Iterator 接口的对象，都可以用扩展运算符转为真正的数组。

var nodeList = document.querySelectorAll("div");
var array = [...nodeList];

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

总结

从上面的例子可以看出，rest参数使用场景应该稍少一些，主要是处理不定数量参数，可以避免arguments对象的使用。而扩展运算符的应用就比较广了，在实际项目中灵活应用，能写出更精简的代码。

私有云专线服务 es6字符串扩展 Rest参数 GPU 云运算参数 FPGA云运算主机参数

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

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

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

摘要：扩展运算符简介扩展运算符是三个点，可以将一个数组转为用逗号分隔的参数序列。在实际项目中灵活应用扩展运算符运算符，能写出更精简易读性高的代码。 1、扩展运算符简介扩展运算符（ spread ）是三个点（...），可以将一个数组转为用逗号分隔的参数序列。说的通俗易懂点，有点像化骨绵掌，把一个大元素给打散成一个个单独的小元素。 showImg(https://segmentfault.c...

Amio 2019-08-23 17:21 评论0 收藏0
ES6 ...操作符

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

MorePainMoreGain 2019-08-23 12:12 评论0 收藏0
es6的解构赋值、扩展运算符、rest参数使用

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

xuweijian 2019-08-21 16:47 评论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 -- 默认参数Default，不定参数Rest，扩展运算符Spread详解

摘要：将数组中的每个元素展开为函数参数扩展运算符取代方法的一个实际的例子，应用方法，简化求出一个数组最大元素的写法。欢迎访问我的个人博客：http://www.xiaolongwu.cn 前言记录一下在实际开发中，很有用的三个es6的新方法用法详解默认参数 function f(x, y=13) { // 如果没有传入y或传入了undefined，y的默认值为13 retur...

Betta 2019-08-23 15:20 评论0 收藏0