1、 扩展符 // 可以将数组转为用逗号相隔开的参数序列
1 // 2 console.log(...[1,2,3]) // 1, 2, 3 3 4 // 用于函数调用 5 function add(x, y) { 6 return x + y; 7 } 8 9 const numbers = [4, 38]; 10 add(...numbers) // 42 11 12 //
扩展符的应用
1 // (1) 复制数组 (浅复制) 2 let arr = [ 1, 2, 3, 4 ] 3 // ES5 方法 4 let arr1 = arr.concat() 5 // ES6 扩展符用法 6 let arr1 = [...arr]; 7 let [...arr1] = arr; 8 9 // (2) 合并数组 10 var arr = [1,2]; 11 var arr1 = [3,4]; 12 var arr2 = [5,6]; 13 // ES5 14 var arr3 = arr.concat(arr1,arr2) // [1, 2, 3, 4, 5, 6] 15 // ES6 16 let arr3 = [...arr1, ...arr2, ...arr] 17 18 // (3) 与解构赋值一起使用, 扩展符只能在最后使用否则报错 19 let [a, ...b] = [1, 2, 3, 4, 5] 20 a // 1 21 b // [2, 3, 4, 5] 22 23 // (4) 将字符串转换成数组, 扩展符能识别四个字符的Unicode 字符 24 [...'hello'] 25 // [ "h", "e", "l", "l", "o" ] 26 27 let str = 'xuD83DuDE80y'; 28 29 str.split('').reverse().join('') 30 // 'yuDE80uD83Dx' 31 32 [...str].reverse().join('') 33 // 'yuD83DuDE80x' 34 35 // (5)
2、Array.from() // 将类似数组的对象、伪数组和可遍历的对象转换为真正的数字
1 // 类似数组的对象
2 let likeArray = {
3 '0': 'a',
4 '1': 'b',
5 '2': 'c',
6 length: 3
7 };
8 // dom 节点
9 let nodeList = document.querySelectorAll("div")
10 // 函数中的arguments对象
11
12 // 以上都能转换成数组 只要是部署了 Iterator 接口的数据结构,Array.from
都能将其转为数组。
13 // ES5 的方法
14 Array.prototype.slice.call(likeArray)
15 // ES6 方法
16 Array.from(likeArray)
17 Array.from(nodeList)
Array.from() // 第一个参数是要转成数组的对象,第二个参数是一个函数,相当于转换成数组后进行 map遍历的函数, 第三个参数可以用来绑定this
1 Array.from(arrayLike, x => x * x); 2 // 等同于 3 Array.from(arrayLike).map(x => x * x); 4 5 Array.from([1, 2, 3], (x) => x * x) 6 7 // 此外还可以获取节点文本内容 8 let divs = document.querySelectorAll('div'); 9 10 // map() 11 let names1 = Array.from(divs, s => s.textContent);
Array.from() // 还可以将字符串转换成数组
1 let str = "abc" 2 // ES5 3 let arr = str.split(""); 4 // ES6 5 let arr1 = Array.from(str) // ["a", "b", "c"] 6 7 // Array.from()的另一个应用是,将字符串转为数组,然后返回字符串的长度。因为它能正确处理各种 Unicode 字符,可以避免 JavaScript 将大于uFFFF的 Unicode 字符,算作两个字符的 bug。
3、 Array.of() // Array.of
方法用于将一组值,转换为数组。 主要是用来弥补 Array() 方法由于参数个数不同转换成数组的形式不同
1 Array() // [] 2 Array(3) // [, , ,] 3 Array(3, 11, 8) // [3, 11, 8] 4 // Array() 方法当只有一个参数的时候视为数组的长度,而Array.of() 就解决了这个问题 5 Array.of() // [] 6 Array.of(3) // [3] 7 Array.of(3, 11, 8)// [3,11,8] 8 9 // Array.of() 方法模拟 10 function ArrayOf(){ 11 return [].slice.call(arguments); 12 }
4、copyWithin() // 将指定位置的成员复制到其他位置(会覆盖其他成员),会修改当前数组
Array.prototype.copyWithin(target, start = 0, end = this.length)
它接受三个参数(参数都应该是数值类型,不就就转换为数值)。
-
- target(必需):从该位置开始替换数据。如果为负值,表示倒数。
- start(可选):从该位置开始读取数据,默认为 0。如果为负值,表示从末尾开始计算。
- end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示从末尾开始计算。
// 将3号位复制到0号位 [1, 2, 3, 4, 5].copyWithin(0, 3, 4) // [4, 2, 3, 4, 5] // -2相当于3号位,-1相当于4号位 [1, 2, 3, 4, 5].copyWithin(0, -2, -1) // [4, 2, 3, 4, 5] // 将3号位复制到0号位 [].copyWithin.call({length: 5, 3: 1}, 0, 3) // {0: 1, 3: 1, length: 5}
5、find() 和 findIndex()
find() // 找出第一个符合条件的数组成员,找到返回true,没找到返回undefined
findIndex() // 找出第一个符合条件的数组成员位置,找到范围index,没找到返回-1
两个方法都有两个参数 第一个函数,第二个是用来绑定函数的this指向
arr.find( ( item, index, arr )=> {} )
arr.findIndex( ( item, index, arr )=> {} )
1 function f(v){ 2 return v > this.age; 3 } 4 let person = {name: 'John', age: 20}; 5 [10, 12, 26, 15].find(f, person); // 26 6 7 // 另外,这两个方法都可以发现NaN,弥补了数组的indexOf方法的不足。 8 [NaN].indexOf(NaN) 9 // -1 10 11 [NaN].findIndex(y => Object.is(NaN, y)) // Object.is() 判断两个值是否相同
6、fill() // 使用定值填充一个数组
arr.fill( "item", start, end ) , 要填充的值,起始(从1开始), 结束。 会抹去原数组成员
需要注意的是:如果填充的值是一个对象,那么只是对象的赋值,而不是深拷贝。
7、 数组实例的 entries()、 keys()、values() 由于遍历数组
1 for (let index of ['a', 'b'].keys()) { // 数组各元素键的遍历 2 console.log(index); 3 } 4 // 0 5 // 1 6 7 for (let elem of ['a', 'b'].values()) { // 数组各元素值的遍历 8 console.log(elem); 9 } 10 // 'a' 11 // 'b' 12 13 for (let [index, elem] of ['a', 'b'].entries()) { // 数组键值对的遍历 14 console.log(index, elem); 15 } 16 // 0 "a" 17 // 1 "b"
8、Array.prototype.includes(value,index) // 表示数组中是否有给定的值value, 返回布尔值;第二个参数index表示起始搜索的位置,如果是负数就表示倒数
此方法与 indexOf() 方法的区别是,indexOf 是严格的等于( === ) ; 不能判断NaN,但是 includes() 方法能够判断数组中是否包含 NaN
9、Array.prototype.flat( arg = 1 )、 Array.prototype.flatMap( function ) // 扁平化数组;
Array.prototype.flat(),将多维数组进行降维处理,默认降一层; 如果是变成一维数组可传参数 infinity ;
1 [1, 2, [3, [4, 5]]].flat(1) // [1, 2, 3, [4, 5]] 2 [1, [2, [3]]].flat(Infinity) // [1, 2, 3] 3 4 // 如果原数组有空位,flat()方法会跳过空位。 5 [1, 2, , 4, 5].flat() // [1, 2, 4, 5]
Array.prototype.flatMap() // 此方法是对数组的各个成员进行遍历(相当于map函数,函数参数同map方法参数一致),然后对换算的返回值组成的数组进行flat()方法,该方法返回一个新的数组,不改变原数组。
[1, 2, 3, 4].flatMap(x => [[x * 2]]) // [[2], [4], [6], [8]] 此方法只能降一层
10、数组的空位 // ☞ 数组的某一个位置没有值 例:Array(3) 为 [, , ,]
ES5 的方法对空位的处理并不一致,但一般会忽略空位,但是ES6 的方法一般会视为undefined的处理。由于不同方法对空位的处理非常不一致,因此尽量减少出现空位。
// ES5 对空位的处理 // forEach(), filter(), reduce(), every() 和some()都会跳过空位。 // map()会跳过空位,但会保留这个值 // join()和toString()会将空位视为undefined,而undefined和null会被处理成空字符串。 // ES6中的方法 entries()、keys()、values()、find()和findIndex()等会将空位处理成undefined。