声明定义

数组是对象，是引用类型（传址类型）

new Array(...args)

* 关键字 new 可省略
* 不定参数个数为 1 时，创建长度为该参数的数组

  1. var arr1 = new Array(1, 2, 3, 4, 5);
  2. var arr2 = Array(5, 4, 3, 2, 1);
  3. var arr3 = new Array(5);
  5. console.log(arr1);    // [1, 2, 3, 4, 5]
  6. console.log(arr2);    // [5, 4, 3, 2, 1]
  7. console.log(arr3);    // [undefined, undefined, undefined, undefined, undefined]

字面量 👍

  1. var arr = [1, 2, 3, 4, 5];

Array.of(...args)

* es6 新增的创建数组的方法
* 完美解决 new Array() 无法创建长度为 1 的数组

  1. var arr1 = Array.of(1, 2, 3, 4, 5);
  2. var arr2 = Array.of(5);
  4. console.log(arr1);    // [1, 2, 3, 4, 5]
  5. console.log(arr2);    // [5]

类数组

* 具有 length 属性的可迭代的对象，但不具有数组的方法
* 常见类数组

  • DOM 对象列表（NodeList）

Array.from(arrayLike)

**_desc_** 类数组转换为数组 _**params**_ { object } arrayLike 类数组 _**return**_ { array }


[].slice.call(arrayLike)

**_desc_** 类数组转换为数组 _**params**_ { object } arrayLike 类数组 _**return**_ { array }

[...arrayLike]

**_desc_** 类数组转换为数组 _**params**_ { object } arrayLike 类数组 _**return**_ { array }


长度

arr.length

_**params**_ { array } arr _**return**_ { number }

  1. var arr = [1, 2, 3, 4, 5, 6, 7];
  2. console.log(arr.length);    // 7

增删改

arr[arr.length] = el

* 会改变原数组

**_desc_** 尾部追加元素 _**params**_ { array } arr _**params**_ { any } el 追加的元素 _**return**_ { void }

  1. var arr = [1, 2, 3];
  3. arr[arr.length] = 4;
  5. console.log(arr);    // [1, 2, 3, 4]


[...args, ...arr, ...args]

**_desc_** 头部 / 尾部追加元素 _**params**_ { array } arr _**params**_ { any } args 追加的元素 _**return**_ { array }

  1. var arr = [1, 2, 3];
  3. var arr1 = [...arr, 4, 5];
  5. console.log(arr);        // [1. 2, 3]
  6. console.log(arr1);    // [1, 2, 3, 4, 5]


arr.push(...args)

* 会改变原数组

**_desc_** 尾部追加元素 _**params**_ { array } arr _**params**_ { any } args 追加的元素 _**return**_ { number } 追加后数组的长度

  1. var arr = [1, 2, 3];
  3. var length = arr.push(4, 5);
  5. console.log(length);    // 5
  6. console.log(arr);            // [1, 2, 3, 4, 5]

arr.pop()

* 会改变原数组

**_desc_** 尾部移除最后一个元素 _**params**_ { array } arr _**return**_ { any } 被移除的元素

  1. var arr = [1, 2, 3];
  3. var el = arr.pop();
  5. console.log(el);    // 3
  6. console.log(arr);    // [1, 2]

arr.unshift(...args)

* 会改变原数组

**_desc_** 头部追加元素 _**params**_ { array } arr _**params**_ { any } args 追加的元素 _**return**_ { number } 追加后数组的长度

  1. var arr = [1, 2, 3];
  3. var length = arr.unshift(4);
  5. console.log(length);    // 4
  6. console.log(arr);            // [4, 1, 2, 3]

arr.shift()

* 会改变原数组

**_desc_** 头部移除首个元素 _**params**_ { array } arr _**return**_ { any } 被移除的元素

  1. var arr = [1, 2, 3];
  3. var el = arr.shift();
  5. console.log(el);    // [1]
  6. console.log(arr);    // [2, 3]

arr.splice(startIndex, length, ...args)

* 会改变原数组
* 方法执行步骤
步骤一：根据起始位置及删除的元素数量，对数组进行删除操作

* 删除：length !== 0 && args 不存在
* 新增：length === 0 && args 存在
* 修改：length !== 0 &&

**_desc_** 数组的删除操作，可实现增删改 _**params**_ { array } arr _**params**_ { number } startIndex 删除的起始索引 _**params**_ { number } length 删除的元素数量，默认值：arr.length - 1 _**params**_ { any } args 删除操作后，在起始索引处追加的元素 _**return**_ { array } 被删除的元素组成的数组

  1. var arr1 = [1, 2, 3];
  2. var arr2 = [1, 2, 3];
  3. var arr3 = [1, 2, 3];
  4. var arr4 = [1, 2, 3];
  5. var arr5 = [1, 2, 3];
  7. var list1 = arr1.splice(0, 0, 4);                            // 新增
  8. var list2 = arr2.splice(0, 2);                                // 删除
  9. var list3 = arr3.splice(0, 2, "1", "2");            // 删除后再追加 --> 修改
  10. var list4 = arr4.splice(0, 2, "1");                        // 删除后再追加
  11. var list5 = arr5.splice(0, 2, "1", "2", "3");    // 删除后再追加
  13. console.log(arr1, list1); // [4, 1, 2, 3], []
  14. console.log(arr2, list2);    // [3], [1, 2]
  15. console.log(arr3, list3);    // ["1", "2", 3], [1, 2]
  16. console.log(arr4, list4);    // ["1", 3], [2, 3]
  17. console.log(arr5, list5);    // ["1", "2", "3", 3], [2, 3]


截取

arr.slice(startIndex, endIndex)

* 包含开始索引，但不包含结束索引

_**params**_ { array } arr _**params**_ { array } startIndex 截取的开始索引，默认值：0 _**params**_ { array } endIndex 截取的结束索引，默认值：arr.length - 1 _**return**_ { array } 截取后的新数组

  1. var arr = [1, 2, 3, 4, 5];
  3. var list1 = arr.slice();
  4. var list2 = arr.slice(1, 3);
  6. console.log(list1);    // [1, 2, 3, 4, 5]
  7. console.log(list2);    // [2, 3]

查询

arr.indexOf(el, startIndex)

_**desc**_ 从左至右查询，返回首个匹配元素的索引 _**params**_ { array } arr _**params**_ { any } el 需要寻找的元素 _**params**_ { number } startIndex 查询的起始位置，默认值：0 _**return**_ { number } 存在返回索引，不存在返回 -1

  1. var arr = [1, 2, 3, 4, 5];
  3. var index1 = arr.indexOf(3);
  4. var index2 = arr.indexOf(3, 3);
  6. console.log(index1);    // 2
  7. console.log(index2);    // -1


arr.lastIndexOf(el, startIndex)

_**desc**_ 从右至左查询，**返回首个匹配元素的索引** _**params**_ { array } arr _**params**_ { any } el 需要寻找的元素 **_params_** { number } startIndex 查询的起始位置，默认值：arr.length - 1 _**return**_ { number } 存在返回索引，不存在返回 -1

  1. var arr = [1, 2, 3, 4, 5];
  3. var index1 = arr.lastIndexOf(3);
  4. var index2 = arr.lastIndexOf(3, 1);
  6. console.log(index1);    // 2
  7. console.log(index2);    // -1


arr.includes(el, startIndex)

_**desc**_ 判断数组中是否存在该元素 _**params**_ { array } arr _**params**_ { any } el 需要寻找的元素 **_params_** { number } startIndex 查询的起始位置，默认值：0 _**return**_ { boolean }

  1. var arr = [1, 2, 3, 4, 5];
  3. var bool1 = arr.includes(3);
  4. var bool2 = arr.includes(3, 3);
  6. console.log(bool1);    // true
  7. console.log(bool2);    // false


arr.find(callback[, ctx])

* 基于迭代器方法

_**desc**_ 查询数组中第一个满足查询条件的元素 _**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 查询条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { any } 返回第一个满足查询条件的元素

  1. var min = 1;
  2. var arr = [1, 2, 3, 4, 5];
  4. var item1 = arr.find(function(value, index, array) {
  5.     return value > 3;
  6. });
  7. var item2 = arr.find(function(value, index, array) {
  8.     return value > this;    // this 指向 min 变量，即 value > 1
  9. }, min);
  11. console.log(item1);    // 4
  12. console.log(item2);    // 2


arr.findIndex(callback[, ctx])

* 基于迭代器方法

_**desc**_ 查询数组中第一个满足查询条件的元素的索引 _**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 查询条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { any } 返回第一个满足查询条件的元素的索引

  1. var arr = ["a", "b", "c"];
  3. var value = arr.find((value, index) => index === 1);
  4. var index = arr.findIndex((value, index) => value === "c");
  6. console.log(value);    // "b"
  7. console.log(index);    // 2


循环遍历

for

  1. for(let i = 0; i < 100; i++) {
  2.     console.log(i);
  3. }

for in

_**params**_ { array } arr _**params**_ { string `_return_` { void }**

  1. var arr = ["a", "b", "c"];
  3. for (let key in arr) {
  4.     console.log(key);                    //    "0" ---> "1" ---> "2"
  5.   console.log(typeof key);    // "string"
  6. }

for of

_**params**_ { array } arr _**params**_ { any `_return_` { void }**

  1. var arr = ["a", "b", "c"];
  3. for (let value of arr) {
  4.     console.log(value);    //    "a" ---> "b" ---> "c"
  5. }

arr.forEach(callback[, ctx])

* 基于迭代器方法

_**desc**_ 查询数组中第一个满足查询条件的元素的索引 _**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 查询条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { void }

  1. var _this = { name: "zhangsan" };
  2. var arr = [1, 2, 3, 4, 5];
  4. arr.forEach(function (value, index, array) {
  5.      console.log(this);    // { name: "zhangsan" }
  6.    arr[index] = value * 2;
  7. }, _this);
  9. console.log(arr);    // [2, 4, 6, 8, 10]
  11. arr.forEach((value, index, array) =>  {
  12.      console.log(this);    // window
  13. }, _this);

其他方法实现循环遍历 了解，不推荐

**arr.map((value) => {});**
**arr.filter((value) => true);**
**arr.every((value) => true);**
**arr.some((value) => true);**
**...**

映射

arr.map(callback[, ctx])

* 基于迭代器方法

_**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { any } 映射后的元素 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { array } 映射后的元素组成的数组

  1. var arr = [1, 2, 3, 4, 5];
  3. var list = arr.map((value) => value * 2);
  5. console.log(arr);        // [1, 2, 3, 4, 5]
  6. console.log(list);    // [2, 4, 6, 8, 10]


过滤

arr.filter(callback[, ctx])

* 基于迭代器方法

_**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 过滤条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { array } 满足条件的元素组成的数组

  1. var arr = [1, 2, 3, 4, 5];
  3. var list = arr.filter((value, index, array) => {
  4.       return value > 2;
  5. });
  7. console.log(list);    // [3, 4, 5]

多功能

arr.reduce(callback, initialValue)

* 基于迭代器方法

_**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } prev 上一次回调的返回值或 initialValue **_params_** { any } cur 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { any } _**params**_ { any } initialValue 初始值 _**return**_ { any }

  1. var arr = [1, 2, 3, 4, 5];
  3. var total = arr.reduce(function(pre, cur) {
  4.     return pre + cur;
  5. }, 0);
  7. console.log(total);    // 15

检测

arr.every(callback[, ctx])

* 基于迭代器方法

_**desc**_ 全局检测 _**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 检测条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { boolean } 所有元素均返回 true 时，结果才返回 true

  1. var arr = [1, 2, 3, 4, 5];
  3. var bool1 = arr.every((value) => value > 3);
  4. var bool2 = arr.every((value) => value >= 1);
  6. console.log(bool1);    // false
  7. console.log(bool2);    // true


arr.some(callback[, ctx])

* 基于迭代器方法

_**desc**_ 局部检测 _**params**_ { array } arr _**params**_ { function } callback 迭代器的回调函数 **_params_** { any } value 元素的值 **_params_** { number } index 元素的索引 **_params_** { array } array 原数组 _**return**_ { boolean } 检测条件 _**params**_ { object } ctx 回调函数中 this 指向，回调为箭头函数时该参数无效 _**return**_ { boolean } 只要任意一个元素返回 true，结果就返回 true

  1. var arr = [1, 2, 3, 4, 5];
  3. var bool1 = arr.some((value) => value > 3);
  4. var bool2 = arr.some((value) => value > 5);
  6. console.log(bool1);    // true
  7. console.log(bool2);    // false

合并

arr.join(connector)

**_desc_** 数组的元素合并成字符串 _**params**_ { array } arr _**params**_ { any } connector 连接符 _**return**_ { string }

  1. var arr = [1, 2, 3, 4, 5];
  3. var str1 = arr1.join("");
  4. var str2 = arr1.join(true);
  6. console.log(str1);    // "12345"
  7. console.log(str2);    // "1true2true3true4true5"

**arr.concat(...args)**

* args 为 Array 类型时，先展开再合并

**_desc_** 合并数组、尾部追加元素 _**params**_ { array } arr _**params**_ { any } args 合并的元素 _**return**_ { array }

  1. var arr = [1, 2, 3];
  3. var list1 = arr.concat(4, 5);
  4. var list2 = arr.concat([4, 5], true, { a: 1 });
  6. console.log(list1);    // [1, 2, 3, 4, 5]
  7. console.log(list2);    // [1, 2, 3, 4, 5, true, { a: 1 }]

排序

❓ arr.sort(sortBy)

* 会改变原数组

_**desc**_ 数组排序 _**params**_ { array } arr _**params**_ { function } sortBy 排序规则 **_params_** { any } a 左侧元素 **_params_** `_return_` { number } 两个元素的顺序 * 返回值 < 0，a 排在 b 前面 * 返回值 > 0，b 排在 a 前面 * 返回值 = 0，无变化 * 即返回 a - b 为 升序，返回 b - a 为 降序 `_return_` { array } 排序后的数组**

  1. var arr1 = [3, 1, 4, 2];
  2. var arr2 = [3, 1, 4, 2];
  4. arr1.sort((a, b) => a - b);    // 升序
  5. arr2.sort((a, b) => b - a);    // 降序
  7. console.log(arr1);    // [1, 2, 3, 4]
  8. console.log(arr2);    // [4, 3, 2, 1]


arr.reverse()

* 会改变原数组

_**desc**_ 数组倒序 _**params**_ { array } arr _**return**_ { array } 倒序后的原数组

  1. var arr = [1, 2, 3, 4];
  3. var list = arr.reverse();
  5. console.log(arr);                        // [4, 3, 2, 1]
  6. console.log(list);                    // [4, 3, 2, 1]
  7. console.log(arr === list);    // true


填充

arr.fill(el, startIndex, endIndex)

* 会改变原数组
* 包含开始索引，但不包含结束索引

_**params**_ { array } arr _**params**_ { array } el 填充的元素 _**params**_ { array } startIndex 填充的开始索引，默认值：0 _**params**_ { array } endIndex 填充的结束索引，默认值：arr.length - 1 _**return**_ { array } 填充后的原数组

  1. var arr = [1, 2, 3, 4, 5];
  3. var list1 = arr.fill("a", 1, 3);
  4. var list2 = Array(3).fill(0);
  6. console.log(list1, arr);        // [1, "a", "a", 4, 5], [1, "a", "a", 4, 5]
  7. console.log(list1 === arr);    // true
  8. console.log(list2);                    // [0, 0, 0]

Array.from(arrayLike, callback[, ctx])

_**params**_ { object } arrayLike 类数组 _**params**_ { function } callback 类数组中元素的映射方法 _**params**_ { any } value 类数组中的元素 _**params**_ { number } index 类数组中元素的索引 _**params**_ { object } 回调函数中 this 指向。可选，默认值： undefined _**return**_ { array } 填充后的数组

  1. var arrayLike = { length: 5 };
  3. var arr = Array.from(arrayLike, function(value, index) {
  4.     return index;
  5. }, this)
  7. console.log(arr);    // [0, 1, 2, 3, 4]

arr.copyWithin(index, startIndex, endIndex)

* 会改变原数组
* 包含开始索引，但不包含结束索引

**_desc_** 内部填充。复制内部元素后，替换指定位置 _**params**_ { array } arr _**params**_ { array } index 替换的开始索引，默认值：0 _**params**_ { array } startIndex 复制的开始索引，默认值：0 _**params**_ { array } endIndex 复制的结束索引，默认值：arr.length - 1 _**return**_ { array } 截取后的新数组

  1. var arr1 = [1, 2, 3, 4, 5];
  2. var arr2 = [1, 2, 3, 4, 5];
  4. var list1 = arr1.copyWithin(2);
  5. var list2 = arr2.copyWithin(2, 0, 2);
  7. console.log(list1);    // [1, 2, 1, 2, 3]
  8. console.log(list2);    // [1, 2, 1, 2, 5]

清空数组

arr = []

arr.length = 0 👍

arr.splice(0)

while(arr.length > 0) { arr.pop() }

do { arr.pop() } while(arr.length > 0)

迭代器

arr.keys()

**_desc_** 数组的元素索引迭代器 _**params**_ { array } arr _**return**_ { object } Array Iterator {}

* 可通过 .next() 获取迭代器中的值：{ value, done }
* value：元素索引
* done：是否迭代完成

  1. var arr = ["a", "b", "c"];
  3. var keys = arr.keys();
  5. console.log(keys.next());    // { value: 0, done: false }
  6. console.log(keys.next());    // { value: 1, done: false }
  7. console.log(keys.next());    // { value: 2, done: false }
  8. console.log(keys.next());    // { value: undefined, done: true }

arr.values()

**_desc_** 数组的元素值迭代器 _**params**_ { array } arr _**return**_ { object } Array Iterator {}

* 可通过 .next() 获取迭代器中的值：{ value, done }
* value：元素值
* done：是否迭代完成

  1. var arr = ["a", "b", "c"];
  3. var values = arr.values();
  5. console.log(values.next());    // { value: "a", done: false }
  6. console.log(values.next());    // { value: "b", done: false }
  7. console.log(values.next());    // { value: "c", done: false }
  8. console.log(values.next());    // { value: undefined, done: true }

arr.entries()

**_desc_** 数组的元素索引 + 元素值迭代器 _**params**_ { array } arr _**return**_ { object } Array Iterator {}

* 可通过 .next() 获取迭代器中的值：{ value, done }
* value：[ 元素索引， 元素值 ]
* done：是否迭代完成

  1. var arr = ["a", "b", "c"];
  3. var entries = arr.entries();
  5. console.log(entries.next());    // { value: [0, "a"], done: false }
  6. console.log(entries.next());    // { value: [1, "b"], done: false }
  7. console.log(entries.next());    // { value: [2, "c"], done: false }
  8. console.log(entries.next());    // { value: undefined, done: true }

扁平化

arr.flat()

* 不改变原数组

**_desc_** 数组纬度 - 1 _**params**_ { array } arr _**return**_ { array }

  1. var arr1 = [1, 2, 3];
  2. var arr2 = [1, [2, 3]];
  3. var arr3 = [1, [2, [3]]];
  5. console.log(arr1.flat());    // [1, 2, 3]
  6. console.log(arr2.flat());    // [1, 2, 3]
  7. console.log(arr3.flat());    // [1, 2, [3]]
  9. console.log(arr3);    // [1, [2, [3]]]

Proxy 代理数组 ❓

* 在访问数组前添加一层拦截，可以对访问操作进行统一的处理。类似拦截器的作用

new Proxy(target, hander)

_**params**_ { object } target 使用 Proxy 代理的目标对象 _**params**_ { object } hander 定义代理行为的对象 _**return**_ { object } 代理对象实例

  1. var arr = [1, 2, 3, 4, 5];
  3. var proxy = new Proxy(arr,  {
  4.     get(array, key) {
  5.       return array[key] * 2;
  6.   },
  7.   set(array, key, value) {
  8.       array[key] = value;
  9.   }
  10. });
  12. proxy[5] = 100;
  14. console.log(proxy[1]);    // 4
  15. console.log(arr);                // [1, 2, 3, 4, 5, 100]