JavaScript 数组方法(全)

106 阅读7分钟

JavaScript 数组方法

在 JavaScript 中,数组是一种非常重要的数据类型。它们可以存储任意数量的元素,并提供了许多有用的方法来对这些元素进行操作。

下面是一些常见的 JavaScript 数组方法:

push()

push() 方法向数组的末尾添加一个或多个元素,并返回新数组的长度。

js复制代码
const arr = [1, 2, 3];
const length = arr.push(4, 5);
console.log(length); // 输出 5
console.log(arr); // 输出 [1, 2, 3, 4, 5]

pop()

pop() 方法从数组的末尾删除一个元素,并返回该元素的值。

js复制代码
const arr = [1, 2, 3];
const lastItem = arr.pop();
console.log(lastItem); // 输出 3
console.log(arr); // 输出 [1, 2]

shift()

shift() 方法从数组的开头删除一个元素,并返回该元素的值。

js复制代码
const arr = [1, 2, 3];
const firstItem = arr.shift();
console.log(firstItem); // 输出 1
console.log(arr); // 输出 [2, 3]

unshift()

unshift() 方法向数组的开头添加一个或多个元素,并返回新数组的长度。

js复制代码
const arr = [1, 2, 3];
const length = arr.unshift(-1, 0);
console.log(length); // 输出 5
console.log(arr); // 输出 [-1, 0, 1, 2, 3]

splice()

splice() 方法用于添加或删除数组中的元素。

js复制代码
const arr = [1, 2, 3];
arr.splice(1, 0, 4); // 在索引 1 处插入 4
console.log(arr); // 输出 [1, 4, 2, 3]

arr.splice(2, 1); // 删除索引 2 处的元素
console.log(arr); // 输出 [1, 4, 3]

slice()

slice() 方法返回从原始数组中选定的元素。

js复制代码
const arr = [1, 2, 3, 4, 5];
const slicedArr = arr.slice(1, 4);
console.log(slicedArr); // 输出 [2, 3, 4]

以上是 JavaScript 数组的一些常见方法。还有许多其他的方法,可以根据实际需求选择使用。## concat()

concat() 方法用于将两个或多个数组合并成一个新的数组。

js复制代码
const arr1 = [1, 2];
const arr2 = [3, 4];
const newArr = arr1.concat(arr2);
console.log(newArr); // 输出 [1, 2, 3, 4]

indexOf() 和 lastIndexOf()

indexOf() 方法返回指定元素在数组中第一次出现的位置,如果没有找到则返回 -1。而 lastIndexOf() 方法返回指定元素在数组中最后一次出现的位置,如果没有找到则返回 -1。

js复制代码
const arr = [1, 2, 3, 2];
console.log(arr.indexOf(2)); // 输出 1
console.log(arr.lastIndexOf(2)); // 输出 3
console.log(arr.indexOf(4)); // 输出 -1

forEach()

forEach() 方法对数组中的每个元素执行一次提供的函数。

js复制代码
const arr = [1, 2, 3];
arr.forEach(item => {
  console.log(item);
});
// 输出
// 1
// 2
// 3

map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。

js复制代码
const arr = [1, 2, 3];
const mappedArr = arr.map(item => item * 2);
console.log(mappedArr); // 输出 [2, 4, 6]

filter()

filter() 方法创建一个新数组,其中包含所有通过所提供函数的测试的元素。

js复制代码
const arr = [1, 2, 3, 4, 5];
const filteredArr = arr.filter(item => item % 2 === 0);
console.log(filteredArr); // 输出 [2, 4]

reduce()

reduce() 方法对数组中的所有元素累积器应用一个函数,返回一个值。

js复制代码
const arr = [1, 2, 3, 4, 5];
const reducedValue = arr.reduce((accumulator, currentValue) => accumulator + currentValue);
console.log(reducedValue); // 输出 15

以上是一些常用的 JavaScript 数组方法,可以根据需求选择使用。## every()

every() 方法返回一个布尔值,表示数组中的所有元素是否都满足指定的条件。

js复制代码
const arr = [1, 2, 3, 4, 5];
const isAllEven = arr.every(item => item % 2 === 0);
console.log(isAllEven); // 输出 false

some()

some() 方法返回一个布尔值,表示数组中是否至少有一个元素满足指定的条件。

js复制代码
const arr = [1, 2, 3, 4, 5];
const hasEven = arr.some(item => item % 2 === 0);
console.log(hasEven); // 输出 true

find() 和 findIndex()

find() 方法返回数组中第一个满足所提供函数的测试的元素的值。而 findIndex() 方法返回数组中第一个满足所提供函数的测试的元素的索引。

js复制代码
const arr = [1, 2, 3, 4, 5];
const evenValue = arr.find(item => item % 2 === 0);
console.log(evenValue); // 输出 2

const evenIndex = arr.findIndex(item => item % 2 === 0);
console.log(evenIndex); // 输出 1

includes()

includes() 方法用来判断一个数组是否包含某个指定的值,如果包含则返回 true,否则返回 false

js复制代码
const arr = [1, 2, 3, 4, 5];
const hasTwo = arr.includes(2);
console.log(hasTwo); // 输出 true

const hasSix = arr.includes(6);
console.log(hasSix); // 输出 false

以上是 JavaScript 数组的一些常见方法,可以帮助开发者轻松地对数组进行操作和处理。需要注意的是,有些方法会改变原始数组,而有些方法则不会改变原始数组,而是返回一个新的数组作为结果。在使用时要注意区分。## sort()

sort() 方法用于对数组进行排序,默认情况下按照字母顺序排序。但是如果需要按照数字大小排序,需要传入一个比较函数。

js复制代码
const arr = [3, 2, 1];
arr.sort(); // 默认排序方式,结果为 [1, 2, 3]
console.log(arr);

const arr2 = [3, 2, 1];
arr2.sort((a, b) => a - b); // 按照数字大小排序,结果为 [1, 2, 3]
console.log(arr2);

reverse()

reverse() 方法用于将数组中的元素顺序颠倒。

js复制代码
const arr = [1, 2, 3];
arr.reverse();
console.log(arr); // 输出 [3, 2, 1]

toString()

toString() 方法将数组转化为字符串,并返回该字符串。

js复制代码
const arr = [1, 2, 3];
const str = arr.toString();
console.log(str); // 输出 "1,2,3"

join()

join() 方法将数组中的所有元素放入一个字符串中,并返回该字符串。可以指定连接符号。

js复制代码
const arr = [1, 2, 3];
const joinedStr = arr.join('-');
console.log(joinedStr); // 输出 "1-2-3"

以上是 JavaScript 数组的一些常见方法,可以方便地对数组进行操作和处理。需要注意的是,有些方法会改变原始数组,而有些方法则不会改变原始数组,而是返回一个新的数组作为结果。在使用时要注意区分。## fill()

fill() 方法用于将数组中的所有元素替换为一个静态值。

js复制代码
const arr = [1, 2, 3];
arr.fill(0);
console.log(arr); // 输出 [0, 0, 0]

也可以指定开始和结束位置。

js复制代码
const arr = [1, 2, 3];
arr.fill(0, 1, 2);
console.log(arr); // 输出 [1, 0, 3]

flat() 和 flatMap()

flat() 方法将多维数组扁平化成一维数组。

js复制代码
const arr = [1, [2, 3], [4, [5]]];
const flattenedArr = arr.flat();
console.log(flattenedArr); // 输出 [1, 2, 3, 4, [5]]

flatMap() 方法先使用映射函数映射每个元素,然后将结果压缩成一个新数组。

js复制代码
const arr = [1, 2, 3];
const mappedArr = arr.flatMap(item => [item * 2]);
console.log(mappedArr); // 输出 [2, 4, 6]

from()

from() 方法从一个类似数组或可迭代对象中创建一个新的数组实例。

js复制代码
const str = 'hello';
const arr = Array.from(str);
console.log(arr); // 输出 ["h", "e", "l", "l", "o"]

isArray()

isArray() 方法判断一个变量是否是数组,返回一个布尔值。

js复制代码
console.log(Array.isArray([])); // true
console.log(Array.isArray({})); // false

以上是 JavaScript 数组的一些常见方法,可以方便地对数组进行操作和处理。需要注意的是,有些方法会改变原始数组,而有些方法则不会改变原始数组,而是返回一个新的数组作为结果。在使用时要注意区分。## Array.of()

Array.of() 方法创建一个包含任意数量参数的数组。

js复制代码
const arr = Array.of(1, 2, 3);
console.log(arr); // 输出 [1, 2, 3]

copyWithin()

copyWithin() 方法用于将数组中某个位置的元素拷贝到另一个位置。

js复制代码
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3); // 将索引为 3 的元素拷贝到索引为 0 的位置
console.log(arr); // 输出 [4, 5, 3, 4, 5]

也可以指定开始和结束位置。

js复制代码
const arr = [1, 2, 3, 4, 5];
arr.copyWithin(0, 3, 4); // 将索引为 3 的元素拷贝到索引为 0 的位置,只拷贝一个元素
console.log(arr); // 输出 [4, 2, 3, 4, 5]

entries()、keys() 和 values()

entries() 方法返回一个键值对的迭代器,其中包含数组中每个元素的索引和值。而 keys() 方法返回一个包含数组中每个索引的迭代器。values() 方法返回一个包含数组中每个值的迭代器。

js复制代码
const arr = ['a', 'b', 'c'];

for (const entry of arr.entries()) {
  console.log(entry);
}
// 输出
// [0, "a"]
// [1, "b"]
// [2, "c"]

for (const key of arr.keys()) {
  console.log(key);
}
// 输出
// 0
// 1
// 2

for (const value of arr.values()) {
  console.log(value);
}
// 输出
// "a"
// "b"
// "c"

Symbol.iterator

除了上述方法,JavaScript 数组还支持 Symbol.iterator 迭代器,可以使用 for...of 循环来遍历数组中的元素。

js复制代码
const arr = ['a', 'b', 'c'];

for (const item of arr) {
  console.log(item);
}
// 输出
// "a"
// "b"
// "c"

以上是 JavaScript 数组的一些常见方法和特性,可以帮助开发者更方便地对数组进行操作和处理。需要注意的是,有些方法会改变原始数组,而有些方法则不会改变原始数组,而是返回一个新的数组作为结果。在使用时要注意区分。