JavaScript之Array方法属性

本文最后更新于 2025年7月30日 下午

参考：

  1. https://juejin.cn/post/6844903614918459406 。
  2. https://juejin.cn/post/6844903945173729288 。
  3. https://juejin.cn/post/6945996368880091173 。
  4. https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array 。

数组方法

1
2
3
4
5
6
Array();
// ES5：
Array.isArray();
// ES6：
Array.of();
Array.from();

Array() 数组构造器

Array() 用于创建数组对象，返回新创建的数组。

接收参数：

  • elementN。数组构造器会根据给定的元素创建一个数组，但是当仅有一个参数且为数字时除外（详见下面的 arrayLength 参数）。注意，后者仅适用于用数组构造器创建数组，而不适用于用方括号创建的数组字面量。
  • arrayLength。如果传递给数组构造器的唯一参数是 0 到 232 - 1（包括）之间的整数，这将返回一个新数组，新数组 length 属性设置为 arrayLength（注意：这意味着一个 arrayLength 空槽数组，而不是具有实际 undefined 值的槽（稀疏数组））。

注意，Array() 可以调用或不调用 new。两者都会创建一个新的数组实例。

1
2
3
4
5
6
7
8
9
Array(7); // [empty × 7]
Array(1, 2, 3); // [1, 2, 3]
Array("aa", "bb", "cc"); // ['aa', 'bb', 'cc']

new Array(7); // [empty × 7]
new Array(1, 2, 3); // [1, 2, 3]
new Array("aa", "bb", "cc"); // ['aa', 'bb', 'cc']

[7]; // [7]

Array.isArray() 是否是数组

Array.isArray() 方法用于确定一个值是否为数组，不管该值是在哪个全局执行上下文中创建的，返回布尔值。

Array.of() 创建数组

Array.of() 方法用于将任意数量的参数转换为数组，返回新创建的数组。

接收参数：

  • 要组成数组的参数。可以是任意数量。

Array.of() 和 Array() 构造函数之间的区别在于处理整数参数：Array.of(7) 创建一个具有单个元素 7 的数组，Array(7) 创建一个长度为 7 的空数组（这里是指有 7 个空位的数组，而不是 7 个 undefined 组成的数组）。
Array.of() 和 方括号的数组字面量的规则一样。

1
2
3
4
5
6
7
Array.of(1, 2, 3, 4); // [1, 2, 3, 4]
Array.of(undefined); // [undefined]
Array.of(7); // [7]

[1, 2, 3, 4]; // [1, 2, 3, 4]
[undefined]; // [undefined]
[7]; // [7]

Array.from() 创建数组

Array.from() 方法用于将一个可迭代对象或伪数组对象转换为数组，返回新创建的数组。

接收三个参数：

  • arrayLike（必需）。任何可迭代对象或类数组对象。
  • mapFn（可选）。arrayLike 的每个元素会执行该回调函数。这个函数可以直接增强新数组的值，类似 Array.prototype.map() 方法，对元素进行处理，将处理后的值放入新创建的数组。
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
3
4
5
6
7
const obj0 = { 0: "a", 1: "b", 2: "c" },
  obj1 = { 0: "a", 1: "b", 2: "c", length: 3 },
  arr = [1, 2, 3, 4];
Array.from(obj0); // []
Array.from(obj1); // ['a', 'b', 'c']
Array.from(arr, (x) => x ** 2); // [1, 4, 9, 16]
Array.from("Matt"); // ["M", "a", "t", "t"]

数组实例属性

1
Array.prototype.length;

length 数组长度

length 属性用于返回或设置数组的元素个数（数组的长度），可以设置该属性来改变数组的元素个数。

1
2
3
4
5
6
const arr = [1, 2, 3, 4, 5];
arr.length; // 5
arr.length = 2;
arr; // [1, 2]
arr.length = 10;
arr; // [1, 2, empty × 8]

数组实例方法

操作改变数组

1
2
3
4
5
6
7
8
9
10
11
12
// 操作改变数组
// ES5：
Array.prototype.pop();
Array.prototype.shift();
Array.prototype.push();
Array.prototype.unshift();
Array.prototype.splice();
Array.prototype.sort();
Array.prototype.reverse();
// ES6：
Array.prototype.fill();
Array.prototype.copyWithin();

pop() 末尾删除

pop() 方法用于删除数组中的最后一个元素，返回被删除的元素。

1
2
3
const arr = [1, 2, 3];
arr.pop(); // 3
console.log(arr); // [1, 2]

shift() 开头删除

shift() 方法用于删除数组中的第一个元素，返回被删除的元素。

1
2
3
const arr = [1, 2, 3];
arr.shift(); // 1
console.log(arr); // [2, 3]

push() 末尾添加

push() 方法用于向数组的末尾添加一个或多个元素，返回添加元素后数组的元素个数。

1
2
3
const arr = [1, 2, 3];
arr.push("456", "789"); // 5
console.log(arr); //  [1, 2, 3, "456", "789"]

unshift() 开头添加

unshift() 方法用于向数组的开头添加一个或多个元素，返回添加元素后数组的元素个数。

1
2
3
const arr = [1, 2, 3];
arr.unshift("000", "111"); // 5
console.log(arr); //  ["000", "111", 1, 2, 3]

fill() 填充替换

fill() 方法用于给数组填充一个给定的值，返回填充替换后的数组。

接收三个参数：

  • value（必需）。用来填充的值。
  • start（可选）。替换的起始位置，替换含该位置。默认值为 0，接收负数。
  • end（可选）。替换的结束位置，替换不含该位置。默认值为数组的长度，接收负数。
1
2
3
4
5
const a = [1, 2, 3],
  b = [4, 5, 6, 7, 8, 9];
a.fill("000"); // ["000", "000", "000"]
b.fill("000", -2, -1); // [4, 5, 6, 7, '000', 9]
b.fill("666", 3, 5); // [4, 5, 6, '666', '666', 9]

copyWithin() 复制替换

copyWithin() 方法用于浅复制数组的一部分到同一数组中的其他位置，返回复制替换后的数组。

接收三个参数：

  • target（必需）。替换的起始位置。接收负数。
  • start（可选）。浅复制元素的起始位置，复制含该位置。默认值为 0，接收负数。
  • end（可选）。浅复制元素的结束位置，复制不含该位置。默认值为数组的长度，接收负数。
1
2
3
4
const a = [1, 2, 3, 4, 5],
  b = ["O1", "K1", "O2", "K2", "O3", "K3"];
a.copyWithin(0, -2, -1); // [4, 2, 3, 4, 5]
b.copyWithin(2, 3, 5); // ["O1", "K1", "K2", "O3", "O3", "K3"]

splice() 修改

splice() 方法通过删除或替换现有元素或原地添加新的元素的方式来修改数组，返回被删除的元素。
（以数组的方式返回，没有元素被删除则返回空数组）

接收参数：

  • start（必需）。修改的开始位置。如果超出数组的长度，则从数组末尾开始修改可接受负数。
  • deleteCount（可选）。表示要删除的数组元素的个数。如果被省略或者大于 start 之后的元素的总数，则从 start 后面的元素都将被删除。如果为 0 则不会删除元素。
  • item1，item2，…（可选）。向数组添加的任意数量元素。
1
2
3
4
5
6
const a = [1, 2, 3, 4, 5, 6, 7],
  b = [1, 2, 3, 4, 5, 6, 7];
a.splice(0, 3); // [1, 2, 3]
console.log(a); // [4, 5, 6, 7]
b.splice(-1, 3); // [7]
console.log(b); // [1, 2, 3, 4, 5, 6]
1
2
3
4
5
6
const a = [1, 2, 3, 4, 5, 6, 7],
  b = [1, 2, 3, 4, 5, 6, 7];
a.splice(0, 3, "添加"); // [1, 2, 3]
console.log(a); // ['添加', 4, 5 ,6, 7]
b.splice(-2, 3, "添加1", "添加2"); // [6, 7]
console.log(b); // [1, 2, 3, 4, 5, '添加1', '添加2']
1
2
3
4
5
6
const a = [1, 2, 3, 4, 5, 6, 7],
  b = [1, 2, 3, 4, 5, 6, 7];
a.splice(0, 0, "添加1", "添加2"); // []
console.log(a); // ['添加1', '添加2', 1, 2, 3, 4, 5, 6, 7]
b.splice(-1, 0, "添加1", "添加2"); // []
console.log(b); // [1, 2, 3, 4, 5, 6, '添加1', '添加2', 7]

sort() 排序

sort() 方法用于对数组元素使用原地算法进行排序，返回排序后的数组。由于它取决于具体的实现，因此无法保证排序的时间复杂度和空间复杂度。

接收一个参数：

  • compareFunction（可选）。用来指定按某种顺序进行排列的函数。默认按字母升序排序，若元素不是字符串，会调用 toString() 方法将元素转化为字符串的 Unicode 位点，然后再比较。
    • firstEl：第一个用于比较的元素。
    • secondEl：第二个用于比较的元素。
1
2
3
4
5
6
const a = ["Banana", "Orange", "Apple", "Mango"],
  b = [10, 1, 3, 20, 25, 8],
  c = [10, 1, 3, 20, 25, 8];
a.sort(); // ["Apple", "Banana", "Mango", "Orange"]
b.sort(); // [1, 10, 20, 25, 3, 8]
c.sort((n1, n2) => (n1 > n2 ? 1 : n1 < n2 ? -1 : 0)); // [1, 3, 8, 10, 20, 25]

reverse() 颠倒

reverse() 方法用于颠倒数组中的元素，返回颠倒后的数组。

1
2
const a = [1, 2, 3];
a.reverse(); // [3, 2, 1]

操作不改变数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
// 操作不改变数组
// ES5：
Array.prototype.slice();
Array.prototype.concat();
Array.prototype.indexOf();
Array.prototype.lastIndexOf();
Array.prototype.join();
Array.prototype.toString();
Array.prototype.toLocaleString();
// ES7：
Array.prototype.includes();
// ES10：
Array.prototype.flat();
Array.prototype.flatMap();
// 实验中：
Array.prototype.at();

slice() 提取

slice() 方法用于将数组的一部分提取到一个新数组，返回新数组。

接收两个参数：

  • start（可选）。从该位置开始提取原数组中的元素。默认值为 0，接受负值。
  • end（可选）。在该位置前结束提取原数组中的元素。默认值为数组的长度加 1，接受负值。
1
2
const a = ["hello", "world"];
a.slice(0, 1); // ['hello']

concat() 合并

concat() 方法用于合并任意数量的值或数组为一个新数组，返回新数组。
合并时，是对数组的浅拷贝。

接收参数：

  • valueN。可以是具体的值，也可以是数组。可以是任意多个。
1
2
3
4
5
6
7
8
9
const a = [1, 2, 3],
  b = [4, 5, 6],
  c = [7, 8, 9],
  d = [1, 2],
  f = [3, [4]];
a.concat(b); // [1, 2, 3, 4, 5, 6]
a.concat(b, c); // [1, 2, 3, 4, 5, 6, 7, 8, 9]
a.concat("添加元素", b, c); // [1, 2, 3, "添加元素", 4, 5, 6, 7, 8, 9]
d.concat(f); // [1, 2, 3, [4]]

flat() 拉平

flat() 方法用于对数组按照指定的深度递归遍历，将所有遍历到的元素合并为一个新数组并返回。

接收参数：

  • depth（可选）。指定要提取嵌套数组的结构深度，默认值为 1。使用 Infinity，可展开任意深度的嵌套数组。
1
2
3
4
5
6
7
8
9
const arr1 = [1, 2, [3, 4]],
  arr2 = [1, 2, [3, 4, [5, 6]]],
  arr3 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]],
  arr4 = [1, 2, , 4, 5];
arr1.flat(); // [1, 2, 3, 4]
arr2.flat(); // [1, 2, 3, 4, [5, 6]]
arr2.flat(2); // [1, 2, 3, 4, 5, 6]
arr3.flat(Infinity); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
arr4.flat(); // [1, 2, 4, 5]

flatMap() 调用拉平

flatMap() 方法用于对数组先进行Array.prototype.map()方法，再对返回的新数组进行 depth 为 1 的Array.prototype.flat()方法 ，返回最终拉平后返回的新数组。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
3
4
5
6
7
8
const arr1 = ["it's Sunny in", "", "China"];
arr1.map((x) => x.split(" ")); // [["it's","Sunny","in"],[""],["China"]]
arr1.flatMap((x) => x.split(" ")); // ["it's","Sunny","in", "", "China"]

const arr2 = [1, 2, 3, 4];
arr2.map((x) => [x * 2]); // [[2], [4], [6], [8]]
arr2.flatMap((x) => [x * 2]); // [2, 4, 6, 8]
arr2.flatMap((x) => [[x * 2]]); // [[2], [4], [6], [8]]

at() 由位置找元素

at() 方法用于在数组中查找给定位置对应的元素，返回该位置处的元素，找不到返回 undefined。

接收一个参数：

  • index（可选）。要查找的位置。接收负数，默认值为 0。（方括号语法只能是正整数且必须给参数）
1
2
const list = [111, 222, 333];
list.at(-1); // 333

indexOf() 由元素找位置

indexOf() 方法用于在数组中查找给定元素对应的位置，从 fromIndex 位置开始，从前向后搜索，只返回首个满足条件的元素位置，如果不存在则返回 -1。使用严格相等搜索元素。

接收两个参数：

  • searchValue（必需）：给定的要查找的元素。
  • fromIndex（可选）：起始搜索位置。接受负值，默认值为 0。
1
2
const list = [111, 222, 333];
list.indexOf(333); // 2

lastIndexOf() 由元素找位置

lastIndexOf() 方法用于在数组中查找给定元素对应的位置，从 fromIndex 位置开始，从后向前搜索，只返回首个满足条件的元素位置，如果不存在则返回 -1。使用严格相等搜索元素。

接收两个参数：

  • searchValue（必需）：给定的要查找的元素。
  • fromIndex（可选）：起始搜索位置。接受负值，默认值为 0。
1
2
const list = [111, 222, 333];
list.lastIndexOf(333); // 2

includes() 是否包含元素

includes() 方法用于在数组中查找给定元素，从 fromIndex 位置开始，从后向前搜索，返回布尔值，表示是否至少找到一个与指定元素匹配的项。使用严格相等搜索元素。

接收两个参数：

  • searchValue（必需）：给定的要查找的元素。
  • fromIndex（可选）：起始搜索位置。接受负值，默认值为 0。
1
2
const list = [111, 222, 333];
list.includes(333); // true

join() 转字符串

join() 方法用于把数组中的所有元素通过指定的分隔符连接组成一个字符串，返回值为新生成的字符串。

接收一个参数：

  • 指定的分隔符（可选）。默认使用逗号作为分隔符。
1
2
3
4
const a = ["hello", "world"];
a.join(); // 'hello,world'
a.join(""); // 'helloworld'
a.join("+"); // 'hello+world'

toString() 转字符串

toString() 方法用于把数组转换为由逗号链接起来的字符串，返回值为新生成的字符串。和 join() 方法一样，都是用于数组转字符串，但是不能自定义字符串的分隔符，不推荐使用。

toLocaleString() 转字符串

toString() 方法用于将数组中每个元素的 toLocaleString() 返回值经调用 join() 方法连接（由逗号隔开）组成。

1
2
const a = [{ name: "OBKoro1" }, 23, "abcd", new Date()];
a.toLocaleString(); // "[object Object], 23, abcd, 2021/9/2 下午4:32:53"

回调函数遍历数组

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 操作不改变数组
// ES5：
Array.prototype.forEach();
Array.prototype.map();
Array.prototype.filter();
Array.prototype.some();
Array.prototype.every();
Array.prototype.reduce();
Array.prototype.reduceRight();
// ES6：
Array.prototype.find();
Array.prototype.findIndex();
Array.prototype.keys();
Array.prototype.values();
Array.prototype.entries();

forEach() 循环

forEach() 方法用于对数组每一个元素执行一次回调函数，返回值为 undefined。
类似 for 循环遍历数组，但 forEach() 除抛出异常之外，不会停止或中断循环，更不会返回值。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
const list = [111, 222, 333];
list.forEach((value, key, self) => {
  console.log(value);
  console.log(key);
  console.log(self);
  return "111222333"; // 不会停止执行
});

// 111
// 0
// [111, 222, 333]

// 222
// 1
// [111, 222, 333]

// 333
// 2
// [111, 222, 333]

// undefined

map() 调用

map() 方法用于对数组每一个元素执行一次回调函数，返回一个新的数组，新数组中的元素由调用数组中的每一个元素执行回调函数得来，相当于是对原数组进行映射。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
const list = [111, 222, 333];
list.map((value, key, self) => value * 2); // [222, 444, 666]

filter() 过滤所有

filter() 方法用于对调用数组的每一个元素执行一次回调函数，返回一个新的数组，新数组中的元素都是满足回调函数条件的调用数组元素。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
const list = [111, 222, 333];
list.filter((value) => value >= 222); // [222, 333]

some() 部分满足

some() 方法用于对调用数组的每一个元素执行一次回调函数，判断数组中是否有满足回调函数条件的元素，有一个元素满足条件返回值为 true，没有满足条件的元素返回值为 false。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
3
const list = [12, 5, 8, 130, 44];
list.some((value, key, self) => value >= 10); // true
list.some((value, key, self) => value >= 5); // true

every() 全部满足

every() 方法用于对调用数组的每一个元素执行一次回调函数，判断数组所有元素是否都符合回调函数条件，元素都满足条件返回值为 true，有一个元素不满足返回值为 false。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
3
const list = [12, 5, 8, 130, 44];
list.every((value, key, self) => value >= 10); // false
list.every((value, key, self) => value >= 5); // true

find() 查找元素

find() 方法用于对数组每一个元素执行一次回调函数，找出数组中第一个满足回调函数的元素，从数组的最小索引开始，返回第一个满足回调函数的元素值，如果没有符合的元素则返回 undefined。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
const list = [111, 222, 333];
list.find((value, index, self) => value >= 222); // 222

findIndex() 查找元素位置

findIndex() 方法用于对数组每一个元素执行一次回调函数，找出数组中第一个满足回调函数的元素，从数组的最小索引开始，返回第一个满足回调函数的元素位置，如果没有符合的元素则返回 -1。

接收两个参数：

  • callback（必需）：回调函数。
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • thisArg（可选）：执行回调函数时 this 绑定对象的值。默认值为 undefined。
1
2
const list = [111, 222, 333];
list.findIndex((value, index, self) => value >= 222); // 1

reduce() 正序累加

reduce() 方法用于对调用数组的每一个元素，从第一项开始遍历到最后一项执行回调函数作为累加器，最终合并为一个值并返回。

接收两个参数：

  • callback（必需）：回调函数。
    • previousValue（必需），初始值，或者上一次归并函数的返回值
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • initialValue（可选）：指定第一次回调的第一个参数。
1
2
3
4
5
6
7
8
const list = [111, 222, 333];
list.reduce((prev, cur) => (prev += cur), 0); // 666
list.reduce((prev, cur) => (prev += cur), 100); // 766

[
  [0, 1],
  [2, 3],
].reduce((arr1, arr2) => arr1.concat(arr2), [4]); // [4, 0, 1, 2, 3]

reduceRight() 倒序累加

reduce() 方法用于对调用数组的每一个元素，从最后一项开始遍历到第一项执行回调函数作为累加器，最终合并为一个值并返回。

接收两个参数：

  • callback（必需）：回调函数。
    • previousValue（必需），初始值，或者上一次归并函数的返回值
    • currentValue（必需），数组当前元素的值
    • index（可选），当前元素的索引值
    • arr（可选），数组对象本身
  • initialValue（可选）：指定第一次回调的第一个参数。
1
2
3
4
5
6
7
8
const list = [111, 222, 333];
list.reduceRight((prev, cur) => (prev += cur), 0); // 666
list.reduceRight((prev, cur) => (prev += cur), 100); // 766

[
  [0, 1],
  [2, 3],
].reduceRight((arr1, arr2) => arr1.concat(arr2), [4]); // [4, 2, 3, 0, 1]

keys() 遍历索引

keys() 方法返回数组索引的迭代器（Array Iterator 对象）。
使用 ES6 的解构可以非常容易地在循环中拆分键/值对。

1
2
3
4
5
6
7
8
9
10
const a = ["foo", "bar", "baz", "qux"];
Array.from(a.keys()); // [0, 1, 2, 3]

for (const index of a.keys()) {
  console.log(index);
}
// 0
// 1
// 2
// 3

values() 遍历元素

values() 方法返回数组元素的迭代器（Array Iterator 对象）。
使用 ES6 的解构可以非常容易地在循环中拆分键/值对。

1
2
3
4
5
6
7
8
9
10
const a = ["foo", "bar", "baz", "qux"];
Array.from(a.values()); // ["foo", "bar", "baz", "qux"]

for (const value of a.values()) {
  console.log(value);
}
// foo
// bar
// baz
// qux

entries() 遍历索引元素对

entries() 方法返回数组索引/值对的迭代器（Array Iterator 对象）。
使用 ES6 的解构可以非常容易地在循环中拆分键/值对。

1
2
3
4
5
6
7
8
9
10
const a = ["foo", "bar", "baz", "qux"];
Array.from(a.entries()); // [[0, "foo"], [1, "bar"], [2, "baz"], [3, "qux"]]

for (const [index, value] of a.entries()) {
  console.log(index, value);
}
// 0 foo
// 1 bar
// 2 baz
// 3 qux
编程语言 > JavaScript
#JavaScript #Array #方法属性
JavaScript之Array方法属性
https://xuekeven.github.io/2021/09/01/JavaScript之Array方法属性/
作者
Keven
发布于
2021年9月1日
更新于
2025年7月30日
许可协议