ES6之三个点（扩展运算符及rest运算符）

ES6中出现了三个点的写法，初次看到一脸懵逼，现在让我们好好来搞清楚这三个点...

首先需要了解的是在ES6中新增了扩展运算符和rest参数，而这两个都是用...三个点来表示的(麻蛋就不能用不同的表示吗!)

第二需要了解的是扩展运算符（spread）好比 rest 参数的逆运算，为啥这么说呢？

扩展运算符是将一个数组转为用逗号分隔的参数序列。

rest参数（形式为...变量名），用于获取函数的任意数目的参数。

这样说来还是有点抽象，下面看代码吧

// 扩展运算符
// 将一个数组转为用逗号分隔的参数序列。
// 示例1
console.log(1, ...[2, 3, 4], 5)    // 1 2 3 4 5// 示例2
function add(x, y) {return x + y;
}const numbers = [4, 38];
add(...numbers) // 42// 示例3
function add(...values) {let sum = 0;for (var val of values) {sum += val;}return sum;
}add([2,3,5]) // 02,3,5// rest参数
// 用于接收函数任意数目的参数
// ...values是一个数组，也叫rest参数,它接收了3个参数，将这3个参数放入数组中使用
function add(...values) {let sum = 0;for (var val of values) {sum += val;}return sum;
}add(2, 5, 3) // 10

从示例上来看，...到底是rest参数还是扩展运算符，要看...后面跟的是数组还是一个非数组变量，如果是数组，则...是扩展运算符，如果是非数组变量，则是rest参数。 (这样理解有问题)

上面的举例只是粗浅的认识，下面看下多了rest参数和扩展运算符对实际开发有什么好处呢？

// 1、数字排序// rest参数语法const sortNumber = (...values) => values.sort();console.log(sortNumber(2,6,4,7,5,1));      // [1,2,4,5,6,7]// 普通写法
// 普通写法需要先将arguments转为数组后才能使用sort排序
function sortNumbers() {return Array.prototype.slice.call(arguments).sort();
}console.log(sortNumber(2,6,4,7,5,1));      // [1,2,4,5,6,7]// 2、复制数组// 扩展运算符
let arr = [1,2];
let arr2 = [...arr];
arr2[1] = 3;
console.log(arr);     // [1,2]
console.log(arr2);    // [1,3]// 普通写法
let arr = [1,2];
let arr2 = arr.concat();
arr2[1] = 3;
console.log(arr);     // [1,2]
console.log(arr2);    // [1,3]// 3、求数组中最大值// 扩展运算符
console.log(Math.max(...[1,5,3,5,7,6]))    // 7// 普通写法
console.log(Math.max.apply(null,[1,5,3,5,7,6]))     // 7

写完了感觉这个知识点还是有点模糊，以后开发中多用吧，有了新的理解再来补充！

ES6之三个点（扩展运算符及rest运算符）相关推荐

ES6——扩展运算符/三点运算符（...）
扩展运算符(spread)是三个点(...). 数组的扩展运算符对于数组来说,它好比 rest 参数的逆运算,将一个数组转为用逗号分隔的参数序列. console.log(...[1, 2, 3]) ...
ES6基础3（扩展）-学习笔记
文章目录 ES6基础3(扩展)-学习笔记字符串扩展数值扩展函数扩展扩展运算符 ES6基础3(扩展)-学习笔记字符串扩展 //扩展//字符串扩展charAt(); //返回指定索引位置的字符 ...
ES6学习笔记（五）：轻松了解ES6的内置扩展对象
前面分享了四篇有关ES6相关的技术,如想了解更多,可以查看以下连接 <ES6学习笔记(一):轻松搞懂面向对象编程.类和对象> <ES6学习笔记(二):教你玩转类的继承和类的对象> ...
es6调用c语言sdk,ES6 关于对象的扩展-contracts-WinFrom控件库|.net开源控件库|HZHControls官网...
今天来简单说下ES6 中对象的扩展首先回顾传统的对象表示法 let person={ 'name':'zhang', 'age':'20', 'play':function(){ alert('pl ...
es6 内置对象扩展rest, Arry 扩展方法Array.from(),find(), findIndex(),includes()
1.es6内置对象扩展rest实参 2. Arry 扩展方法 (1)构造函数方法:Array.from() (2) find() (3) findIndex() (4)includ ...
阮一峰ES6入门读书笔记（七）：运算符的拓展
阮一峰ES6入门读书笔记(七):运算符的拓展 1. 指数运算符 ES6新增了一个指数运算符(**). 2 ** 2 // 4 2 ** 3 // 8 这个运算符的一个特点是右结合,而不是常见的左结合. ...
java if赋值语句_Java基础第3天+运算符（算术运算符、赋值运算符、比较运算符、逻辑运算符、位运算符、三元运算符）、Scanner键盘录入、if语句...
1:运算符(掌握) (1)算术运算符 A:+,-,*,/,%,++,-- B:+的用法 a:加法 b:正号 c:字符串连接符 C:/和%的区别数据做除法操作的时候,/取得是商,%取得是余数 D:++ ...
20181210-es6(letconst解构模版字符串原理展开运算符、剩余运算符运用深拷贝原理 reduce原理箭头函数)...
变量声明 var 特点: 1.可以重复声明 2.不能定义常量 3.不支持块级作用域复制代码 let //1.不存在预解释变量提升 //2.暂时性死区 //3.具备块级,同一块内不能重复声明;let ...

ES6之三个点（扩展运算符及rest运算符）

ES6之三个点（扩展运算符及rest运算符）相关推荐

最新文章

热门文章