JS 数组篇数组常用API 下_js数组ap-优快云博客

本文详细介绍了JavaScript中数组的六个核心方法：forEach()用于遍历并执行回调，map()用于创建新数组并应用函数，sort()对数组进行排序，reduce()累加或聚合数组元素，filter()筛选符合条件的元素，some()和every()则用于判断数组中是否存在特定条件。了解这些方法有助于提升数组操作效率和代码可读性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此篇主要是数组循环的一些api

forEach()

定义

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

语法

arr.forEach(callback(currentValue,index,array), thisArg)

参数

callback
为数组中每个元素执行的函数，该函数接收一至三个参数：
currentValue
数组中正在处理的当前元素。
index 可选
数组中正在处理的当前元素的索引。
array 可选
forEach() 方法正在操作的数组。
thisArg 可选
可选参数。当执行回调函数 callback 时，用作 this 的值。

注意

 除了抛出异常以外，没有办法中止或跳出 forEach() 循环。
 如果你需要中止或跳出循环，forEach() 方法不是应当使用的工具。

若你需要提前终止循环，你可以使用：

一个简单的 for 循环
for...of / for...in 循环
Array.prototype.every()
Array.prototype.some()
Array.prototype.find()
Array.prototype.findIndex()
这些数组方法则可以对数组元素判断，以便确定是否需要继续遍历：

every()
some()
find()
findIndex()
译者注：只要条件允许，也可以使用 filter() 提前过滤出需要遍历的部分，再用 forEach() 处理。

示例

//数组扁平化
function flatten(arr) {
  const result = [];
  arr.forEach((i) => {
    if (Array.isArray(i))
      result.push(...flatten(i));
    else
      result.push(i);
  })
  return result;
}
// Usage
const problem = [1, 2, 3, [4, 5, [6, 7], 8, 9]];
flatten(problem); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

map()

定义

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

语法

var new_array = arr.map(function callback(currentValue, index, array) {
 // Return element for new_array 
},thisArg)

参数

callback
	生成新数组元素的函数，使用三个参数：
currentValue
	callback 数组中正在处理的当前元素。
index可选
	callback 数组中正在处理的当前元素的索引。
array可选
	map 方法调用的数组。
thisArg可选
	执行 callback 函数时值被用作this。

返回值

一个由原数组每个元素执行回调函数的结果组成的新数组。

示例

//数组中每个元素的平方根
var numbers = [1, 4, 9];
var roots = numbers.map(Math.sqrt);
// roots的值为[1, 2, 3], numbers的值仍为[1, 4, 9]
	//格式化对象
	var kvArray = [{key: 1, value: 10}, 
	               {key: 2, value: 20}, 
	               {key: 3, value: 30}];
	
var reformattedArray = kvArray.map(function(obj) { 
   var rObj = {};
   rObj[obj.key] = obj.value;
   return rObj;
});

// reformattedArray 数组为： [{1: 10}, {2: 20}, {3: 30}], 

// kvArray 数组未被修改: 
// [{key: 1, value: 10}, 
//  {key: 2, value: 20}, 
//  {key: 3, value: 30}]

sort()

定义

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

语法
```
arr.sort([compareFunction])
```

返回值

排序后的数组。请注意，数组已原地排序，并且不进行复制

示例

var numbers = [4, 2, 5, 1, 3]; 
numbers.sort((a, b) => a - b); 
console.log(numbers);

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

reduce()

定义

reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，
将其结果汇总为单个返回值。

语法

arr.reduce(callback(accumulator, currentValue, currentIndex, array),initialValue)

参数

callback
执行数组中每个值 (如果没有提供 initialValue则第一个值除外)的函数，包含四个参数：
accumulator
累计器累计回调的返回值; 它是上一次调用回调时返回的累积值，或initialValue（见于下方）。

currentValue
数组中正在处理的元素。
index 可选
数组中正在处理的当前元素的索引。 如果提供了initialValue，则起始索引号为0，否则从索引1起始。
array可选
调用reduce()的数组

initialValue可选
作为第一次调用 callback函数时的第一个参数的值。 
如果没有提供初始值，则将使用数组中的第一个元素。 在没有初始值的空数组上调用 reduce 将报错。

返回值
```
函数累计处理的结果
```
示例

//求和
let arr = [1,2,3,4,5,6]
arr.reduce((acc,cur,index,arr)=>{return acc+cur})//21
arr.reduce((acc,cur)=>{return acc+cur},5) //26

//二维数组变成一维
var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]

filter()

定义

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

语法

var newArray = arr.filter(callback(element，index，array),thisArg)

参数

callback
用来测试数组的每个元素的函数。返回 true 表示该元素通过测试，保留该元素，false 则不保留。
它接受以下三个参数：
	element
	数组中当前正在处理的元素。
	index可选
	正在处理的元素在数组中的索引。
	array可选
	调用了 filter 的数组本身。
	
thisArg可选
执行 callback 时，用于 this 的值。

返回值

一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

示例

const fruits = ['apple', 'banana', 'grapes', 'mango', 'orange'];

/**
 * Array filters items based on search criteria (query)
 */
const filterItems = (query) => {
  return fruits.filter((el) =>
    el.toLowerCase().indexOf(query.toLowerCase()) > -1
  );
}

console.log(filterItems('ap')); // ['apple', 'grapes']
console.log(filterItems('an')); // ['banana', 'mango', 'orange']

some()

定义

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

语法

arr.some(callback(element,index,arr),thisAry)

参数

callback
用来测试每个元素的函数，接受三个参数：
element
数组中正在处理的元素。
index 可选
数组中正在处理的元素的索引值。
array可选
some()被调用的数组。
thisArg可选
执行 callback 时使用的 this 值。

返回值

数组中有至少一个元素通过回调函数的测试就会返回true；
所有元素都没有通过回调函数的测试返回值才会为false。

示例

[2, 5, 8, 1, 4].some(x => x > 10);  // false
[12, 5, 8, 1, 4].some(x => x > 10); // true

every()

定义

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。
它返回一个布尔值。
注意：若收到一个空数组，此方法在一切情况下都会返回 true。

语法

arr.some(callback(element,index,arr),thisAry)

返回值

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

示例

[12, 5, 8, 130, 44].every(x => x >= 10); // false
[12, 54, 18, 130, 44].every(x => x >= 10); // true

includes()

定义

includes() 方法用来判断一个数组是否包含一个指定的值，根据情况，
如果包含则返回 true，否则返回false。

语法
```
arr.includes(valueToFind[, fromIndex])
```

参数

valueToFind
需要查找的元素值。

Note:  使用 includes()比较字符串和字符时是区分大小写。

fromIndex 可选
从fromIndex 索引处开始查找 valueToFind。
如果为负值，则按升序从 array.length + fromIndex 的索引开始搜 
（即使从末尾开始往前跳 fromIndex 的绝对值个索引，然后往后搜寻）。默认为 0。

返回值
```
返回一个布尔值 Boolean 
```

示例

[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

//includes() 方法有意设计为通用方法。
//它不要求this值是数组对象，所以它可以被用于其他类型的对象 (比如类数组对象)。
(function() {
  console.log([].includes.call(arguments, 'a')); // true
  console.log([].includes.call(arguments, 'd')); // false
})('a','b','c');