遍历数组的方法

方法列表

• every
• filter
• find
• findIndex
• forEach
• map
• reduce
• reduceRight
• some
• sort

every

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

如果回调函数的每一次返回都为 truthy 值，返回 true，否则返回 false。

参数说明

every 参数

every (
  callback: function,
  thisArg: ThisType,
) return boolean

callback 参数

function callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return boolean

示例

// 检测数组中的所有元素是否都大于 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
// 箭头函数为上面的检测过程提供了更简短的语法。
[12, 5, 8, 130, 44].every(x => x >= 10) // false
[12, 54, 18, 130, 44].every(x => x >= 10) // true

filter

filter 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

那些没有通过 callback 测试的元素会被跳过，不会被包含在新数组中。

filter 不会改变原数组，它返回过滤后的新数组。

参数说明

filter 参数

filter(
  callback: function,
  thisArg: ThisType,
) return boolean

callback 参数

callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return boolean

示例

// 筛选排除所有较小的值
function isBigEnough(element) {
  return element >= 10
}
var filtered = [12, 5, 8, 130, 44].filter(isBigEnough)
console.log(filtered) // [12, 130, 44]

巧用

简单 boolean 值的简写

// 如果只需要判断一些简单的boolean值 则可以直接简写为
const arr = ['filter', '', 1, 0, true, false, undefined, null]
console.log(arr.filter(Boolean))            // ['filter', 1, true]
console.log(arr.filter(element => element)) // ['filter', 1, true]

find

find 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined

find 方法对数组中的每一项元素执行一次 callback 函数，直至有一个 callback 返回 true。当找到了这样一个元素后，该方法会立即返回这个元素的值，否则返回 undefined

对于稀松数组来说，依然会遍历空项，传入的值则为 undefined

参数说明

find 参数

find (
  callback: function,
  thisArg: ThisType,
) return T | undefined

callback 参数

function callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return boolean

示例

// 用对象的属性查找数组里的对象
const inventory = [
  {name: 'apples', quantity: 2},
  {name: 'bananas', quantity: 0},
  {name: 'cherries', quantity: 5}
]
function isCherries(fruit) {
  return fruit.name === 'cherries'
}
console.log(inventory.find(isCherries)) // { name: 'cherries', quantity: 5 }
// 稀松数组
const arr = [, , , , 1]
arr.find(item => console.log(item)) // 1
/**
 * console.log(item)
 * undefined
 * undefined
 * undefined
 * undefined
 * 1
 */

findIndex

同使用方法同 find ，但返回是通过测试的下标，若没有找到对应元素则返回-1。

示例

// 查找数组中首个质数元素的索引
function isPrime(element, index, array) {
  var 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, not found
console.log([4, 6, 7, 12].findIndex(isPrime)) // 2

forEach

forEach 方法对数组的每个元素执行一次给定的函数。

forEach 方法按升序为数组中含有效值的每一项执行一次 callback 函数，那些已删除或者未初始化的项将被跳过（例如在稀疏数组上）。

参数说明

forEach 参数

forEach (
  callback: function,
  thisArg: ThisType,
) return undefined

callback 参数

function callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return undefined

示例

// 不对未初始化的值进行任何操作（稀疏数组）
const arraySparse = [1, 3, , 7]
let numCallbackRuns = 0
arraySparse.forEach(function (element) {
  console.log(element)
  numCallbackRuns++
})
console.log("numCallbackRuns: ", numCallbackRuns)
// 1
// 3
// 7
// numCallbackRuns: 3
// 如果数组在迭代时被修改了，则其他元素会被跳过。
var words = ['one', 'two', 'three', 'four']
words.forEach(function(word) {
  console.log(word)
  if (word === 'two') {
    words.shift()
  }
})
// one
// two
// four
// 如果使用 promise 或 async 函数作为 forEach() 等类似方法的 callback 参数，最好对造成的执行顺序影响多加考虑，否则容易出现错误。
let ratings = [5, 4, 5]
let sum = 0
let sumFunction = async function (a, b) {
  return a + b
}
ratings.forEach(async function (rating) {
  sum = await sumFunction(sum, rating)
})
console.log(sum) // 0

map

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

map 方法会给原数组中的每个元素都按顺序调用一次 callback 函数。callback 每次执行后的返回值（包括 undefined）组合起来形成一个新数组。 callback 函数只会在有值的索引上被调用。

参数说明

map 参数

map (
  callback: function,
  thisArg: ThisType,
) return // 修改过后的新数组

callback 参数

function callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return // 一个由原数组每个元素执行回调函数的结果组成的新数组

示例

// 求数组中每个元素的平方根
var numbers = [1, 4, 9]
var roots = numbers.map(Math.sqrt)
console.log(numbers)  // [1, 4, 9]
console.log(roots)    // [1, 2, 3]
// 当返回 undefined 或没有返回任何内容时
var numbers = [1, 2, 3, 4]
var filteredNumbers = numbers.map(function(num, index) {
  if(index < 3) {
     return num
  }
})
console.log(filteredNumbers)  // [1, 2, 3, undefined]

reduce

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

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

参数说明

reduce 参数

reduce (
  callback: function,
  thisArg: ThisType,
) return // 使用 callback 函数遍历整个数组处理后的结果

callback 参数

function callback<T>(
  previousValue: T,
  currentValue: T,
  currentIndex: number,
  array: Array<T>,
) return any // 一个由原数组每个元素执行回调函数的结果组成的新数组

示例

// 计算数组中每个元素出现的次数 (使用初始值)
let names = ['Alice', 'Bob', 'Tiff', 'Bruce', 'Alice']
let countedNames = names.reduce(function (allNames, name) {
  if (name in allNames) {
    allNames[name]++
  }
  else {
    allNames[name] = 1
  }
  return allNames
}, {})
console.log(countedNames) // { 'Alice': 2, 'Bob': 1, 'Tiff': 1, 'Bruce': 1 }
//  实现一个累加器 (不使用初始值)
let sum = [0, 1, 2, 3].reduce(function (previousValue, currentValue) {
  return previousValue + currentValue
})
console.log(sum) // 6

reduceRight

reduceRight 方法接受一个函数作为累加器（accumulator）和数组的每个值（从右到左）将其减少为单个值。

使用方法同 reduce

some

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

参数说明

some 参数

some (
  callback: function,
  thisArg: ThisType,
) return boolean

callback 参数

function callback<T>(
  element: T,
  index: number,
  array: Array<T>,
) return any // 一个由原数组每个元素执行回调函数的结果组成的新数组

示例

// 检测在数组中是否有元素大于 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

sort

sort 方法用原地算法对数组的元素进行排序，并返回数组。默认排序顺序是在将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列时构建的

注意！ 此方法会改变原数组

如果没有指明 compareFunction ，那么元素会按照转换为的字符串的诸个字符的 Unicode 位点进行排序。

如果指明了 compareFunction ，那么数组会按照调用该函数的返回值排序。即 a 和 b 是两个将要被比较的元素：

• 如果 compareFunction(a, b) 小于 0 ，那么 a 会被排列到 b 之前；
• 如果 compareFunction(a, b) 等于 0 ， a 和 b 的相对位置不变。备注： ECMAScript 标准并不保证这一行为，而且也不是所有浏览器都会遵守（例如 Mozilla 在 2003 年之前的版本）；
• 如果 compareFunction(a, b) 大于 0 ， b 会被排列到 a 之前。
• compareFunction(a, b) 必须总是对相同的输入返回相同的比较结果，否则排序的结果将是不确定的。

参数说明

some 参数

some (
  compareFunction: function | undefined,
) return array // 排序后的原数组

compareFunction 参数

function compareFunction<T>(
  firstElemebt: T,
  secondElemebt: T,
) return number

示例

// 数字数组简单排序
var numbers = [4, 2, 5, 1, 3]
numbers.sort(function(a, b) {
  return a - b
})
console.log(numbers) // [1, 2, 3, 4, 5]
// 也可以写成：
var numbers = [4, 2, 5, 1, 3]
numbers.sort((a, b) => a - b)
console.log(numbers) // [1, 2, 3, 4, 5]
// 对象数组的排序
var items = [
  { name: 'Edward', value: 21 },
  { name: 'Sharpe', value: 37 },
  { name: 'And', value: 45 },
  { name: 'The', value: -12 },
  { name: 'Magnetic', value: 0 },
  { name: 'Zeros', value: 37 }
]
items.sort(function (a, b) { // 根据 value 排序
  return (a.value - b.value) 
})
console.log(JSON.stringify(items))
/**
 * [
 *   { name: 'The', value: -12 }
 *   { name: 'Edward', value: 21 }
 *   { name: 'Sharpe', value: 37 }
 *   { name: 'And', value: 45 }
 *   { name: 'Magnetic', value: 0 }
 *   { name: 'Zeros', value: 37 }
 * ]
 */
items.sort(function (a, b) { // 根据 name 排序
  var nameA = a.name.toUpperCase() // ignore upper and lowercase
  var nameB = b.name.toUpperCase() // ignore upper and lowercase
  if (nameA < nameB) {
    return -1
  }
  if (nameA > nameB) {
    return 1
  }
  // names must be equal
  return 0
})
console.log(JSON.stringify(items))
/**
 * [
 *   { name: 'And', value: 45 }
 *   { name: 'Edward', value: 21 }
 *   { name: 'Magnetic', value: 0  }
 *   { name: 'Sharpe', value: 37 }
 *   { name: 'The', value: -12 }
 *   { name: 'Zeros', value: 37 }
 * ]
 */

巧用

// sort 也可以用来打乱数组
function radomNumber() {
  return Math.random() - 0.5
}
const arr = [1, 2, 3, 4, 5, 6, 7, 8]
arr.sort(radomNumber)
console.log(arr) // [7, 1, 5, 4, 2, 6, 8, 3] 随机数组，每次输出都不一样