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
写完了感觉这个知识点还是有点模糊,以后开发中多用吧,有了新的理解再来补充!