数组的扩展 · 前端笔记

[TOC] ## Array.from\(\) 将两类对象转换成真正的数组：类似数组的对象（array-like object）和可遍历（iterable）对象（包括ES6新增的数据结构Set和Map）。 ``` let arraylike = { 0: 'a', 1: 'b', 2: 'c', length:3 } // ES5写法 var arr1 = [].slice.call(arraylike) // ['a', 'b', 'c'] Array.prototype.slice.call //ES6写法 let arr2 = Array.from(arraylikje) // ['a', 'b', 'c'] ``` 实际应用常见的类数组对象是DOM操作返回的NodeList集合，以及函数内部的arguments对象。Array.from都可以将它们转化为数组。 ``` // NodeList集合 let p = document.querySelectorAll('p') Array.from(p).foEach(function (p) { cosole.log(p) }) // arguments 对象 function foo() { var args = Array.from(arguments) } ``` 扩展运算符\(...\)也可以将某些数据结构转换为数组。如果一个对象没有部署遍历器接口（Symbol.iterator）则无法转换。无法转换类数组对象。 ``` function foo() { var args = [...arguments] } [...document.querySelectorAll('p')] ``` Array.from可接受第二个参数，对每个元素进行处理，将处理后的值放入返回的数组。 ``` Array.from(arraylike, x => x * x) //等同于 Array.from(arraylike).map(x => x * x) Array.from([1, 2, 3]).map(x => x * x) // [1, 4, 9] ``` Array.from\(\)的另一个应用是将字符串转化为数组，然后返回字符串的长度。因为它能正确处理各种Unicode字符，避免将大于\uFFFF的Unicode字符算作2个字符的BUG。 ``` function contSymbols(string) { return Array.from(string).length } ``` ## Array.of\(\) 将一组数值转化为数组 ``` Array.of(3, 1, 8) // [3,1,8] Array.of(3) //[3] ``` 这个方法的主要目的是弥补数组构造函数Array\(\)的不足。因为参数个数不同会导致Array的行为有差异。 ``` Array() // [] Array(3) // [,,,] Array(3, 1, 8) // [3,1,8] ``` ## 数组实例的copyWithin\(\) 在当前数组内部将制定位置的成员复制到其他位置（会覆盖原有成员），然后返回当前数组。使用这个方法会修改当前数组。 ``` Array.prototype.copyWithin(target, start = 0, end = this.length) ``` 参数 * target\(必须\)：从该位置开始替换数据 * start（可选）：从该位置开始读取数据，默认为0 * end（可选）：到该位置前停止读取数据，默认等于数组长度。 ``` [1,2,3,4,5].copyWithin(0, 3) // [4,5,3,5,5] //将3号位置赋值到0位置 [1,2,3,4,5].copyWithin(0,3,4) ``` ## 数组实例的find\(\)和findIndex\(\) find方法用于找到第一个符合条件的数组元素。它的第一个参数是回调函数，所有数组成员一次执行该函数，直到找出第一个返回值为true的成员，然后返回该成员，否则返回undefined。 ``` // 找出第一个小于10的成员 [1,4,-5,10].find((n) => n< 0) // -5 ``` find方法的回调函数接受3个参数，依次为当前的值，当前位置和原数组。 ``` [1,5,10,15].find(function(value, index, arr) { return value > 9 }) // ``` findIndex方法用法和find类似，返回第一个符合条件的数组成员的位置，如果都不符合，返回-1。这两个方法都可接受第二个参数，用来绑定回调函数的this对象。另外这两个方法都可以发现NaN，弥补数组的IndexOf的不足。 ``` [NaN].indexOf(NaN) // -1 [NaN].findIndex(y => Object.is(NaN, y)) // 0 ``` ## 数组实例的fill\(\) 使用给定值填充数组。参数 * value\(必选\)，用来填充的值 * start（可选）：开始位置 * end（可选）：结束为止 ``` ['a','b','c'].fill(7) // [7,7,7] new Array(3).fill(7) // [7,7,7] ['a', 'b', 'c'].fill(7,1,2) // ['a'. 7 , 'c'] ``` ## 数组实例的entries\(\), keys\(\)和values\(\) 都用于遍历数组，返回一个遍历器对象，可以for...of循环遍历。 Keys是对键明的遍历，values是对键值的遍历，entries是对键值对的遍历。 ``` for(let index of ['a', 'b'].keys()) { console.log(index) } // 0 // 1 ``` ``` for(let elem of ['a', 'b'].values()) { console.log(elem) } // 'a' // 'b' ``` ``` for(let [index, elem] of ['a', 'b'].entries()) { console.log(index, elem) } // 0 'a' // 1 'b' ``` ## 数组实例的includes\(\) 返回一个布尔值，表示数组是否包含给定的值。该分的第二个参数是搜索的起始位置，默认为0。 ``` [1,2,3].includes(2) // true [1,2,3].includes(4) // false [1,2,NaN].includes(NaN) // true ``` 没有该方法时通常使用数组indexOf方法。 indexOf方法有两个缺点：一，不够语义化，要与-1比较；二，内部使用===进行判断，会对NaN误判。 ## 数组的空位数组的空位是指数组在某个位置没有值。 ``` Array(3) // [,,,] ``` 空位不是undefined。一个位置的值等于undefined依然是有值的。空位上没有任何值，in运算符可以说明。 ``` 0 in [undefined,undefined,undefined] // true 0 in [,,,] // false ``` ES5大多数情况会忽略空位。 * forEach\(\)、filter\(\)、every\(\)和some\(\)会跳过空位 * map\(\)会跳过空位，但保留这个值 * join和toString\(\)将空位视为undefined，undefined和null被处理为空字符串 ES6将空位转为undefined。 ``` Array.from(['a',,'b']) // ['a', undefined, 'b'] [...['a',,'b']] // ['a', undefined, 'b'] ``` ## 数组推导数组推导允许直接通过现有数组生成新数组。（ES7） ``` var a1 = [1,2,3,4] var a2 = [for (i in a1) i * 2] a2 // [2,4,6,8] ``` 数组推导中，for ... of总是写在最前面，返回的表达式写在最后面。 for...of后面还可以附加if语句，用于设定循环的限制条件。 ``` var years = [1954,1974,1990,2006,2010,2014] [for (year of years) if(year > 2010) year] // [2006,2010,2014] ``` 数组推导可代替map和filter方法 ``` [for (i of [1,2,3]) i*i] // 等价于 [1,2,3].map(function (i) { return i * i }) ```