1、扩展运算符[...]
扩展运算符（spread）是三个点（...）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列。
function push(array, ...items) {
array.push(...items);
}
function add(x, y) {
return x + y;
}
const numbers = [4, 38];
add(...numbers) // 42
上面的代码中 扩展运算符 分别把原本的数组参数给分解成了多个参数并按下标顺序传入到函数中。
合理使用可以大大的简化传参的复杂性。
特性应用
-
数组克隆
数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组。const a1 = [1, 2]; const a2 = a1;// 只是传递了引用，并没有在内存中新生成一个数组 a2[0] = 2; a1 // [2, 2]使用
...可以很好的解决这个问题const a1 = [1,2] const a2 = [...a1] // 在内存中完全克隆一个新的数组 -
数组合并
const arr1 = ['a', 'b']; const arr2 = ['c']; const arr3 = ['d', 'e']; // ES5 的合并数组 arr1.concat(arr2, arr3); // [ 'a', 'b', 'c', 'd', 'e' ] // ES6 的合并数组 [...arr1, ...arr2, ...arr3] // [ 'a', 'b', 'c', 'd', 'e' ]这两种方法都是
浅拷贝，对于参与合并数组中元素的改动会影响合并后的数组。 -
将字符串转换成数组
[...'hello'] // [ "h", "e", "l", "l", "o" ]在能使用
ES6的前提下，更推荐使用这种方式来判断字符串的长，因为可以正确的识别Unicode字符。'x\uD83D\uDE80y'.length // 4 [...'x\uD83D\uDE80y'].length // 3
所以在ES6前提下关于Unicode字符的问题，都应该使用...来进行操作，保证正确性。
2、Array.find()与Array.findIndex()
-
Array.find()
数组实例的find方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。
接收三个参数 [当前值，下标，原数组][1,2,3,-1,-10].find((value, index, arr) => n < 0) // -1 -
Array.findIndex()
与find()使用方式相同，但是返回的是第一个符合条件的对象的下标，如果没有符合条件的返回-1[1, 5, 10, 15].findIndex((value, index, arr) => value > 9) // 2 -
Array.includes()
Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值，与字符串的includes方法类似。ES2016 引入了该方法。
接收两个参数[需要判断的元素,起始位置][1, 2, 3].includes(2) // true [1, 2, 3].includes(4) // false [1, 2, NaN].includes(NaN) // true [1, 2, 3].includes(3, 3); // false在可以使用
ES6的前提下，应使用此方法判断数组中是否包含某元素，而不是使用ES5中的indexof判断是否>-1
网友评论