JavaScript数组使用总结

桃扇骨 2022-05-19 03:05 231阅读 0赞

### 定义 ###

数组是一种类列表对象，它的原型中提供了遍历和修改元素的相关操作。JavaScript 数组的长度和元素类型都是非固定的。因为数组的长度可随时改变，并且其数据在内存中也可以不连续，所以 JavaScript 数组不一定是密集型的，这取决于它的使用方式。一般来说，数组的这些特性会给使用带来方便，但如果这些特性不适用于你的特定使用场景的话，可以考虑使用类型数组 [`TypedArray`][TypedArray]。

只能用整数作为数组元素的索引，而不能用字符串。后者称为[关联数组][Link 1]。使用非整数并通过[方括号][Link 2]或[点号][Link 3]来访问或设置数组元素时，所操作的并不是数组列表中的元素，而是数组对象的[属性集合][Link 4]上的变量。数组对象的属性和数组元素列表是分开存储的，并且数组的遍历和修改操作也不能作用于这些命名属性。

### 创建数组的3种方式 ###

>     var arr1 = [element0, element1, ..., elementN]
>     var arr2 = new Array(element0, element1[, ...[, elementN]])
>     var arr3 = new Array(arrayLength)   //当你只传入一个值的时候就会被当作数组长度，慎用！

`elementN`

`Array` 构造器会根据给定的元素创建一个 JavaScript 数组，但是当仅有一个参数且为数字时除外（详见下面的 `arrayLength` 参数）。注意，后面这种情况仅适用于用 `Array` 构造器创建数组，而不适用于用方括号创建的数组字面量。

`arrayLength`

一个范围在 0 到 232-1 之间的整数，此时将返回一个 `length` 的值等于 `arrayLength` 的数组对象（言外之意就是该数组此时并没有包含任何实际的元素，不能理所当然地认为它包含 `arrayLength` 个值为 `undefined` 的元素）。如果传入的参数不是有效值，则会抛出 [`RangeError`][RangeError] 异常。

# 数组方法 #

**改变原数组**

reverse,sort,push,pop, unshift, shift, splice

**不改变原数组**

forEach filter map reduce reduceRight slice concat,join—>split,toString

### 修改器方法 ###

下面的这些方法会改变调用它们的对象自身的值：

[`Array.prototype.pop()`][Array.prototype.pop]

删除数组的最后一个元素，并返回这个元素。

[`Array.prototype.push()`][Array.prototype.push]

在数组的末尾增加一个或多个元素，并返回数组的新长度。

[`Array.prototype.reverse()`][Array.prototype.reverse]

颠倒数组中元素的排列顺序，即原先的第一个变为最后一个，原先的最后一个变为第一个。

[`Array.prototype.shift()`][Array.prototype.shift]

删除数组的第一个元素，并返回这个元素。

[`Array.prototype.sort()`][Array.prototype.sort]

对数组元素进行排序，并返回当前数组。

[`Array.prototype.splice()`][Array.prototype.splice]

在任意的位置给数组添加或删除任意个元素。

[`Array.prototype.unshift()`][Array.prototype.unshift]

在数组的开头增加一个或多个元素，并返回数组的新长度。

[`Array.prototype.copyWithin()`][Array.prototype.copyWithin]

copyWithin() 方法浅复制数组的一部分到同一数组中的另一个位置，并返回它，而不修改其大小。

[`Array.prototype.fill()`][Array.prototype.fill]

将数组中指定区间的所有元素的值，都替换成某个固定的值。

### 访问方法 ###

下面的这些方法绝对**不会改变调用它们的对象的值**，只会返回一个新的数组或者返回一个其它的期望值。

[`Array.prototype.join()`][Array.prototype.join]

连接所有数组元素组成一个字符串。

[`Array.prototype.slice()`][Array.prototype.slice]

抽取当前数组中的一段元素组合成一个新数组。

[`Array.prototype.concat()`][Array.prototype.concat]

返回一个由当前数组和其它若干个数组或者若干个非数组值组合而成的新数组。

[`Array.prototype.includes()`][Array.prototype.includes]

判断当前数组是否包含某指定的值，如果是返回 `true`，否则返回 `false`。

[`Array.prototype.toSource()`][Array.prototype.toSource]

返回一个表示当前数组字面量的字符串。遮蔽了原型链上的 [`Object.prototype.toSource()`][Object.prototype.toSource] 方法。

[`Array.prototype.toString()`][Array.prototype.toString]

返回一个由所有数组元素组合而成的字符串。遮蔽了原型链上的 [`Object.prototype.toString()`][Object.prototype.toString] 方法。

[`Array.prototype.toLocaleString()`][Array.prototype.toLocaleString]

返回一个由所有数组元素组合而成的本地化后的字符串。遮蔽了原型链上的 [`Object.prototype.toLocaleString()`][Object.prototype.toLocaleString] 方法。

[`Array.prototype.indexOf()`][Array.prototype.indexOf]

返回数组中第一个与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

[`Array.prototype.lastIndexOf()`][Array.prototype.lastIndexOf]

返回数组中最后一个（从右边数第一个）与指定值相等的元素的索引，如果找不到这样的元素，则返回 -1。

### 迭代方法 ###

在下面的众多遍历方法中，有很多方法都需要指定一个回调函数作为参数。在每一个数组元素都分别执行完回调函数之前，数组的length属性会被缓存在某个地方，所以，如果你在回调函数中为当前数组添加了新的元素，那么那些新添加的元素是不会被遍历到的。此外，如果在回调函数中对当前数组进行了其它修改，比如改变某个元素的值或者删掉某个元素，那么随后的遍历操作可能会受到未预期的影响。总之，不要尝试在遍历过程中对原数组进行任何修改，虽然规范对这样的操作进行了详细的定义，但为了可读性和可维护性，请不要这样做。

[`Array.prototype.forEach()`][Array.prototype.forEach]

为数组中的每个元素执行一次回调函数。

[`Array.prototype.entries()`][Array.prototype.entries]

返回一个数组迭代器对象，该迭代器会包含所有数组元素的键值对。

[`Array.prototype.every()`][Array.prototype.every]

如果数组中的每个元素都满足测试函数，则返回 `true`，否则返回 `false。`

[`Array.prototype.some()`][Array.prototype.some]

如果数组中至少有一个元素满足测试函数，则返回 true，否则返回 false。

[`Array.prototype.filter()`][Array.prototype.filter]

将所有在过滤函数中返回 `true` 的数组元素放进一个新数组中并返回。

[`Array.prototype.find()`][Array.prototype.find]

找到第一个满足测试函数的元素并返回那个元素的值，如果找不到，则返回 `undefined`。

[`Array.prototype.findIndex()`][Array.prototype.findIndex]

找到第一个满足测试函数的元素并返回那个元素的索引，如果找不到，则返回 `-1`。

[`Array.prototype.keys()`][Array.prototype.keys]

返回一个数组迭代器对象，该迭代器会包含所有数组元素的键。

[`Array.prototype.map()`][Array.prototype.map]

返回一个由回调函数的返回值组成的新数组。

[`Array.prototype.reduce()`][Array.prototype.reduce]

从左到右为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

[`Array.prototype.reduceRight()`][Array.prototype.reduceRight]

从右到左为每个数组元素执行一次回调函数，并把上次回调函数的返回值放在一个暂存器中传给下次回调函数，并返回最后一次回调函数的返回值。

[`Array.prototype.values()`][Array.prototype.values]

返回一个数组迭代器对象，该迭代器会包含所有数组元素的值。

[`Array.prototype[@@iterator]()`][Array.prototype_iterator]

和上面的 `values() 方法是同一个函数。`

**[`Array.from()`][Array.from]**

从类数组对象或者可迭代对象中创建一个新的数组实例。

Array.from(arrayLike[, mapFn[, thisArg]])
    
    arrayLike
        想要转换成数组的伪数组对象或可迭代对象。
    mapFn (可选参数)
        如果指定了该参数，新数组中的每个元素会执行该回调函数。
    thisArg (可选参数)
        可选参数，执行回调函数 mapFn 时 this 对象。
    
    
    console.log(Array.from('foo'));
    // expected output: Array ["f", "o", "o"]
    
    console.log(Array.from([1, 2, 3], x => x + x));
    // expected output: Array [2, 4, 6]

**[`Array.isArray()`][Array.isArray]**

用来判断某个变量是否是一个数组对象。

Array.isArray([1, 2, 3]);  
    // true
    Array.isArray({foo: 123}); 
    // false
    Array.isArray("foobar");   
    // false

**[`Array.of()`][Array.of]**

根据一组参数来创建新的数组实例，支持任意的参数数量和类型。

`Array.of()` 和 `Array` 构造函数之间的区别在于处理整数参数：`Array.of(7)`** **创建一个具有单个元素 **7** 的数组，而 **`Array(7)` **创建一个长度为7的空数组（**注意：**这是指一个有7个空位的数组，而不是由7个`undefined`组成的数组）。

Array.of(7);       // [7] 
    Array.of(1, 2, 3); // [1, 2, 3]
    
    Array(7);          // [ , , , , , , ]
    Array(1, 2, 3);    // [1, 2, 3]

以上内容参考MDN：[ Array][Array]

## ##

### 类数组 ###

1.可以利用属性名模拟数组的特性

2.可以动态的增长length属性

3.如果强行让类数组调用push方法，则会根据length属性值的位置进行属性的扩充。

[TypedArray]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/TypedArray
[Link 1]: https://en.wikipedia.org/wiki/Associative_array
[Link 2]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Guide/Working_with_Objects#Objects_and_properties
[Link 3]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/Property_Accessors
[Link 4]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Data_structures#Properties
[RangeError]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/RangeError
[Array.prototype.pop]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/pop
[Array.prototype.push]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push
[Array.prototype.reverse]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse
[Array.prototype.shift]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/shift
[Array.prototype.sort]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
[Array.prototype.splice]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice
[Array.prototype.unshift]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
[Array.prototype.copyWithin]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/copyWithin
[Array.prototype.fill]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill
[Array.prototype.join]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join
[Array.prototype.slice]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice
[Array.prototype.concat]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat
[Array.prototype.includes]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes
[Array.prototype.toSource]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toSource
[Object.prototype.toSource]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toSource
[Array.prototype.toString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toString
[Object.prototype.toString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
[Array.prototype.toLocaleString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/toLocaleString
[Object.prototype.toLocaleString]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/toLocaleString
[Array.prototype.indexOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/indexOf
[Array.prototype.lastIndexOf]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/lastIndexOf
[Array.prototype.forEach]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach
[Array.prototype.entries]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/entries
[Array.prototype.every]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every
[Array.prototype.some]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some
[Array.prototype.filter]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter
[Array.prototype.find]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find
[Array.prototype.findIndex]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex
[Array.prototype.keys]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/keys
[Array.prototype.map]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map
[Array.prototype.reduce]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce
[Array.prototype.reduceRight]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight
[Array.prototype.values]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/values
[Array.prototype_iterator]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/@@iterator
[Array.from]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from
[Array.isArray]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/isArray
[Array.of]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/of
[Array]: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array