JavaScript数组的常用方法

171 阅读6分钟

1.Array.forEach()

forEach()  方法对数组的每个元素执行一次回调函数。

示例

function logArrayElements(element, index, array) {
  console.log(`a[${index}] = ${element}`);
}

// 注意索引 2 被跳过了,因为在数组的这个位置没有项
[2, 5, , 9].forEach(logArrayElements);
// logs:
// a[0] = 2
// a[1] = 5
// a[3] = 9

2.Array.filter()

filter() 方法返回一个过滤后的新数组,其包含满足条件的所有元素。

示例

// 筛选出数组中所有大于等于10的元素
let arr = [12, 5, 8, 130, 44]
let filtered = arr.filter(item=>item>=10);
// filtered 为 [12, 130, 44]

3.Array.findIndex()

findIndex() 方法返回数组中满足条件的第一个元素的索引号。若没有找到对应元素则返回-1

示例

// 查找数组中首个质数元素的索引
function isPrime(element, index, array) {
  let start = 2;
  while (start <= Math.sqrt(element)) {
    if (element % start++ < 1) {
      return false;
    }
  }
  return element > 1;
}

console.log([4, 6, 8, 12].findIndex(isPrime)); // -1
console.log([4, 6, 7, 12].findIndex(isPrime)); // 2

4.Array.some()

some()  方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

示例

// 检测在数组中是否有元素大于 10。
function isBiggerThan10(element, index, array) {
  return element > 10;
}

[2, 5, 8, 1, 4].some(isBiggerThan10);  // false
[12, 5, 8, 1, 4].some(isBiggerThan10); // true

5.Array.every()

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

示例

// 检测数组中的所有元素是否都大于 10。
function isBigEnough(element, index, array) {
  return element >= 10;
}
[12, 5, 8, 130, 44].every(isBigEnough);   // false
[12, 54, 18, 130, 44].every(isBigEnough); // true

6.Array.join()

join() 方法将一个数组的所有元素连接成一个字符串并返回这个字符串。如果数组只有一个项目,那么将返回该项目而不使用分隔符。

示例

// 使用四种不同的分隔符连接数组元素
let a = ['Wind', 'Rain', 'Fire'];
let myVar1 = a.join();      // myVar1 的值变为"Wind,Rain,Fire"
let myVar2 = a.join(', ');  // myVar2 的值变为"Wind, Rain, Fire"
let myVar3 = a.join(' + '); // myVar3 的值变为"Wind + Rain + Fire"
let myVar4 = a.join('');    // myVar4 的值变为"WindRainFire"

7.Array.map()

map() 方法创建一个新数组,这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

示例

let numbers = [1, 4, 9];
let doubles = numbers.map(function(num) {
  return num * 2;
});

// doubles 数组的值为: [2, 8, 18]
// numbers 数组未被修改: [1, 4, 9]

8.Array.concat()

concat() 方法用于合并两个或多个数组。此方法不会更改现有数组,而是返回一个新数组

示例

// 将两个数组合并为一个新数组
let alpha = ['a', 'b', 'c'];
let numeric = [1, 2, 3];
let newArr = alpha.concat(numeric);
// newArr is ['a', 'b', 'c', 1, 2, 3]

9.Array.includes()

includes() 方法用来判断一个数组是否包含一个指定的值,根据情况,如果包含则返回 true,否则返回 false。第二参数为fromIndex,查找方式为array.length + fromIndex的绝对值索引开始查找

示例

// 查询数组是否有对应的元素
[1, 2, 3].includes(2);     // true
[1, 2, 3].includes(4);     // false
[1, 2, 3].includes(3, 3);  // false
[1, 2, 3].includes(3, -1); // true
[1, 2, NaN].includes(NaN); // true

10.Array.indexOf()

indexOf()方法返回在数组中可以找到一个给定元素的第一个索引,如果不存在,则返回-1。第二个参数为要查询的下标,如果大于或者等于数组的长度,就不会查找而是会直接返回-1。

如果参数中提供的索引值是一个负值,则将其作为数组末尾的一个抵消,即 -1 表示从最后一个元素开始查找,-2 表示从倒数第二个元素开始查找 ,以此类推。

示例

// 查找对应元素的下标

let array = [2, 5, 9];
array.indexOf(2);     // 0
array.indexOf(7);     // -1
array.indexOf(9, 2);  // 2
array.indexOf(2, -1); // -1
array.indexOf(2, -3); // 0

11.Array.reduce()

reduce()  方法对数组中的每个元素按序执行一个由您提供的 reducer 函数,每一次运行 reducer 会将先前元素的计算结果作为参数传入,最后将其结果汇总为单个返回值。

第一次执行回调函数时,不存在“上一次的计算结果”。如果需要回调函数从数组索引为 0 的元素开始执行,则需要传递初始值。否则,数组索引为 0 的元素将被作为初始值 initialValue,迭代器将从第二个元素开始执行(索引为 1 而不是 0)。

示例

const array1 = [1, 2, 3, 4];

// 0 + 1 + 2 + 3 + 4
const initialValue = 0;
const sumWithInitial = array1.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);

console.log(sumWithInitial);
// expected output: 10

12.Array.push()

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

示例

// 创建了`sports`数组,包含两个元素,然后又把两个元素添加给它。
// `total`变量为数组的新长度值。

let sports = ["soccer", "baseball"];
let total = sports.push("football", "swimming");

console.log(sports);
// ["soccer", "baseball", "football", "swimming"]

console.log(total);
// 4

13.Array.splice()

splice() 方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。

示例

// 从索引2的位置还是删除0个元素,插入"drum"

let myFish = ["angel", "clown", "mandarin", "sturgeon"];
let removed = myFish.splice(2, 0, "drum");

// 运算后的 myFish: ["angel", "clown", "drum", "mandarin", "sturgeon"]
// 被删除的元素: [], 没有元素被删除

14.Array.sort()

sort() 方法用原地算法对数组的元素进行排序,并返回数组。

示例

let numbers = [4, 2, 5, 1, 3];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

也可以写成:
let numbers = [4, 2, 5, 1, 3];
numbers.sort((a, b) => a - b);
console.log(numbers);

// [1, 2, 3, 4, 5]

15.Array.slice()

slice() 方法返回一个新的数组对象,这一对象是一个由beginend决定的原数组的浅拷贝(包括begin,不包括end)。原始数组不会被改变。

提取起始处begin的索引(从 0 开始),从该索引开始提取原数组元素。如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取,slice(-2) 表示提取原数组中的倒数第二个元素到最后一个元素(包含最后一个元素)。如果省略 begin,则 slice 从索引 0 开始。如果 begin 超出原数组的索引范围,则会返回空数组。

提取终止处end的索引(从 0 开始),在该索引处结束提取原数组元素。slice 会提取原数组中索引从 begin 到 end 的所有元素(包含 begin,但不包含 end)。slice(1,4) 会提取原数组中从第二个元素开始一直到第四个元素的所有元素(索引为 1, 2, 3 的元素)。如果该参数为负数, 则它表示在原数组中的倒数第几个元素结束抽取。 slice(-2,-1) 表示抽取了原数组中的倒数第二个元素到最后一个元素(不包含最后一个元素,也就是只有倒数第二个元素)。如果 end 被省略,则 slice 会一直提取到原数组末尾。如果 end 大于数组的长度,slice 也会一直提取到原数组末尾。

示例

const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];

console.log(animals.slice(2));
// expected output: Array ["camel", "duck", "elephant"]

console.log(animals.slice(2, 4));
// expected output: Array ["camel", "duck"]

console.log(animals.slice(1, 5));
// expected output: Array ["bison", "camel", "duck", "elephant"]

console.log(animals.slice(-2));
// expected output: Array ["duck", "elephant"]

console.log(animals.slice(2, -1));
// expected output: Array ["camel", "duck"]

console.log(animals.slice());
// expected output: Array ["ant", "bison", "camel", "duck", "elephant"]