JavaScript 数组遍历

JavaScript 中一个常用操作就是遍历数组中的每一个元素，并做出相应的操作。数组迭代方法可以定义在遍历数组元素过程中要进行的操作。

JavaScript 中一个常用操作就是遍历数组中的每一个元素，并做出相应的操作。数组迭代方法可以定义在遍历数组元素过程中要进行的操作。

Array.forEach()

forEach() 方法为数组中的每一个元素都调用给定的回调函数。

forEach() 接受一个回调函数作为参数， 回调函数可以传入 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）
const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value, index, array) {
  txt += value + "<br>";
}

上面的示例仅使用 value 参数。该示例可以重写为：

const numbers = [45, 4, 9, 16, 25];
let txt = "";
numbers.forEach(myFunction);

function myFunction(value) {
  txt += value + "<br>";
}

Array.map()

map() 方法对数组中的每个元素执行一个回调函数，然后用回调函数的返回值来创建一个新数组。

map() 方法不会为没有值的数组元素执行函数。map() 方法不会更改原始数组。

map() 接受一个回调函数作为参数， 回调函数可以传入 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

此示例将数组的每个元素值乘以 2：

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value, index, array) {
  return value * 2;
}

console.log(numbers2); // 输出 [ 90, 8, 18, 32, 50 ]

当回调函数仅使用 value 参数时，可以省略索引和数组参数：

const numbers1 = [45, 4, 9, 16, 25];
const numbers2 = numbers1.map(myFunction);

function myFunction(value) {
  return value * 2;
}

console.log(numbers2); // 输出 [ 90, 8, 18, 32, 50 ]

Array.filter()

filter() 方法对每一个数组元素执行指定的测试函数，使用通过测试的数组元素创建一个新数组。

filter() 方法接受一个测试函数作为参数，测试函数需要 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

如果测试函数返回 true，则表示当前元素通过了测试，会作为新创建的数组元素返回。

此示例将大于 18 的元素过滤出来组成一个新数组：

const numbers = [45, 4, 9, 16, 25];
const over18 = numbers.filter(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

Array.reduce()

reduce() 方法在数组每一个元素上运行一个 reducer 函数，并将结果汇总为一个值返回。

reduce() 方法在数组中从左到右工作。另见 reduceRight() 。

此示例对数组中所有元素求和：

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

console.log(sum); // 输出 99

reduce() 的第一个参数是 reducer 回调函数， 回调函数可接收 4 个参数：

  • 汇总结果
  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

reduce() 的第二个参数是可选的，用以指定初始的汇总值。

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduce(myFunction, 100);

function myFunction(total, value) {
  return total + value;
}

console.log(sum); // 输出 199

Array.reduceRight()

reduceRight() 与 reduce() 方法几乎完全一样，只是 reduceRight() 运算的过程从右向左（从最后一个元素到第一个元素）汇总。

此示例对数组中所有元素求和：

const numbers = [45, 4, 9, 16, 25];
let sum = numbers.reduceRight(myFunction);

function myFunction(total, value, index, array) {
  return total + value;
}

console.log(sum); // 输出 99

Array.every()

every() 方法检查数组的所有元素是否都通过指定的测试函数的测试。如果所有的元素都通过了测试，返回 true, 否则返回 false。

every() 方法接受一个测试函数作为参数，测试函数需要 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

如果测试函数返回 true，则表示当前元素通过了测试。

此示例检查是否所有数组元素的值都大于 18：

const numbers = [45, 4, 9, 16, 25];
let allOver18 = numbers.every(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

console.log(allOver18); // 输出 false

Array.some()

some() 方法检查数组中是否有元素通过测试。只要有一个元素通过了测试，返回 true, 否则返回 false。

some() 方法与 every() 比较类似，区别在于 some() 是部分满足元素测试就为 true，而 every() 需要全部满足测试才返回 true。

some() 方法接受一个测试函数作为参数，测试函数需要 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

如果测试函数返回 true，则表示当前元素通过了测试。

此示例检查数组是否包含值都大于 18 的元素：

const numbers = [45, 4, 9, 16, 25];
let someOver18 = numbers.some(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

console.log(someOver18); // 输出 true

Array.indexOf()

indexOf() 方法在数组中搜索指定的值，如果找到返回元素对应的索引，如果找不到返回 -1。

indexOf() 只返回第一次匹配到的元素的索引位置。

语法： array.indexOf(item, start)

indexOf() 有两个参数：

  • item: 要查找的值。必须参数。
  • start: 可选参数。从此索引位置开始查找元素。

在数组中搜索第一个 “Apple”：

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let index = fruits.indexOf("Apple");
console.log(index); // 输出 0

Array.lastIndexOf()

Array.lastIndexOf() 与 相同 Array.indexOf() ，但返回指定元素最后一次出现的位置。

在数组中搜索最后一个 “Apple”：

const fruits = ["Apple", "Orange", "Apple", "Mango"];
let index = fruits.lastIndexOf("Apple");
console.log(index); // 输出 2

Array.includes()

includes() 方法用于检测数组中是否包含某个元素。

Array.includes() 方法自 ECMAScript 2016 开始引入。

const fruits = ["Banana", "Orange", "Apple", "Mango"];
let isMangoIncluded = fruits.includes("Mango");
console.log(isMangoIncluded); // 输出 2true

Internet Explorer 和 Edge 12/13 不支持 Array.includes()。

Array.find()

find() 方法返回通过测试函数的第一个数组元素的值。如果当前元素通过了测试函数（测试函数返回 true），则立刻返回当前元素。

find() 方法接受一个测试函数作为参数，测试函数需要 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

如果测试函数返回 true，则表示当前元素通过了测试。

此示例查找第一个大于 18 的元素：

const numbers = [4, 9, 16, 25, 29];
let first = numbers.find(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

console.log(first); // 输出 25

旧浏览器不支持 Array.find() 。

Array.findIndex()

findIndex() 方法返回通过测试函数的第一个数组元素的索引。如果当前元素通过了测试函数（测试函数返回 true），则立刻返回当前元素的索引。

findIndex() 方法接受一个测试函数作为参数，测试函数需要 3 个参数：

  • 元素的值
  • 元素的索引（可选参数）
  • 数组本身（可选参数）

如果测试函数返回 true，则表示当前元素通过了测试。

此示例查找第一个大于 18 的元素的索引：

const numbers = [4, 9, 16, 25, 29];
let first = numbers.findIndex(myFunction);

function myFunction(value, index, array) {
  return value > 18;
}

console.log(first); // 输出 3

旧浏览器不支持 Array.findIndex() 。

JavaScript 数组排序 JavaScript 日期