14 种 JavaScript 数组方法（8 分钟内）

2025-06-08

14 种 JavaScript 数组方法（8 分钟内）

cleancodestudio 图片

清洁代码工作室

清洁代码，清洁生活〜简化

Twitter 关注

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章或发布重大项目公告时收到通知，请访问https://cleancodestudio.paperform.co/

cleancodestudio 图片

清洁代码工作室

清洁代码，清洁生活〜简化

[14 个 JS 数组方法（8 分钟内）截屏视频]


let stocks = [
   { name: 'Apple', price: 321.85 },
   { name: 'Tesla', price: 2471.04 },
   { name: 'Disney', price: 118.77 },
   { name: 'Google', price: 1434.87 },
   { name: 'Netflix', price: 425.92 }
]
Enter fullscreen mode Exit fullscreen mode

数组.过滤器

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

stocks.filter(stock => stock.price < 1000) 
/*-------------------------------------------
 | Array.filter
 *-------------------------------------------
 |  0: {name: "Apple", price: 321.85}
 |  1: {name: "Disney", price: 118.77}
 |  2: {name: "Netflix", price: 425.92}
*/
Enter fullscreen mode Exit fullscreen mode

数组.map

map() 方法创建一个新数组，其中填充了对调用数组中每个元素调用提供的函数的结果。

stocks.map(stock => [stock.name, stock.price])
/*-------------------------------------------
 | Array.map
 *-------------------------------------------
 | 0: (2) ["Apple", 321.85]
 | 1: (2) ["Tesla", 2471.04]
 | 2: (2) ["Disney", 118.77]
 | 3: (2) ["Google", 1434.87]
 | 4: (2) ["Netflix", 425.92]
 */
Enter fullscreen mode Exit fullscreen mode

数组查找

find() 方法返回数组中第一个满足指定测试函数的元素值。如果没有满足测试函数的值，则返回 undefined。

stocks.find(stock => stock.name === 'Tesla')
/*-------------------------------------------
 | Array.find
 *-------------------------------------------
 |  {name: "Tesla", price: 2471.04}
 */
Enter fullscreen mode Exit fullscreen mode

数组.some

some() 方法测试数组中是否至少有一个元素通过了所提供函数实现的测试。如果在数组中找到一个元素，且所提供函数的测试结果为 true，则返回 true；否则返回 false。该方法不会修改数组。

stocks.some(stock => stock.price < 1000)
/*-------------------------------------------
 | Array.some
 *-------------------------------------------
 | true
 */

stocks.some(stock => stock.price < 10)
/*-------------------------------------------
 | Array.some
 *-------------------------------------------
 | false
 */
Enter fullscreen mode Exit fullscreen mode

数组.every

every() 方法测试数组中的所有元素是否通过了所提供函数实现的测试。它返回一个布尔值。

stocks.every(stock => stock.price < 1000)
/*-------------------------------------------
 | Array.every
 *-------------------------------------------
 | false
 */

stocks.every(stock => stock.price < 2500)
/*-------------------------------------------
 | Array.every
 *-------------------------------------------
 | true
 */
Enter fullscreen mode Exit fullscreen mode

数组.forEach

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

stocks.forEach(stock => console.log(stock))
/*-------------------------------------------
 | Array.forEach
 *-------------------------------------------
 | Outputs each item (stock object) from the array to the console
 | returns void (aka undefined)
 */
Enter fullscreen mode Exit fullscreen mode

数组.reduce

reduce() 方法对数组的每个元素执行一个 reducer 函数（由您提供），从而生成单个输出值。

stocks.reduce((total, stock) => total + stock.price, 0)
/*-------------------------------------------
 | Array.reduce
 *-------------------------------------------
 | 4772.45
 */
Enter fullscreen mode Exit fullscreen mode 
let names = ['Apple', 'Tesla', 'Disney', 'Google', 'Netflix']
Enter fullscreen mode Exit fullscreen mode

数组.includes

includes() 方法确定数组的条目中是否包含某个值，并根据情况返回 true 或 false。

names.includes('Apple')
/*-------------------------------------------
 | Array.includes
 *-------------------------------------------
 | true
 */


names.includes('Microsoft')
/*-------------------------------------------
 | Array.includes
 *-------------------------------------------
 | false
 */
Enter fullscreen mode Exit fullscreen mode

数组.indexOf

indexOf() 方法返回数组中给定元素的第一个索引，如果不存在则返回 -1。

names.indexOf('Tesla')
/*-------------------------------------------
 | Array.indexOf
 *-------------------------------------------
 | 1
 */
Enter fullscreen mode Exit fullscreen mode 
names =  ['Apple', 'Tesla', 'Disney', 'Google', 'Netflix', 'Tesla']
Enter fullscreen mode Exit fullscreen mode

数组.lastIndexOf

lastIndexOf() 方法返回数组中指定元素的最后一个索引，如果不存在则返回 -1。数组将从 fromIndex 开始向后搜索。

names.lastIndexOf('Tesla')
/*-------------------------------------------
 | Array.lastIndexOf
 *-------------------------------------------
 | 5
 */
Enter fullscreen mode Exit fullscreen mode

数组排序

sort() 方法对数组元素进行排序并返回排序后的数组。默认排序顺序为升序，首先将元素转换为字符串，然后比较它们的 UTF-16 代码单元值序列。

由于排序取决于实现，因此无法保证其时间和空间复杂度。

names.sort()
/*-------------------------------------------
 | Array.sort
 *-------------------------------------------
 | ['Apple, 'Disney', 'Google', 'Netflix', 'Tesla', 'Tesla']
 */
Enter fullscreen mode Exit fullscreen mode

数组切片

slice() 方法将数组的一部分内容浅拷贝至一个新数组对象，该新数组对象从起始位置到结束位置（不包括结束位置），起始位置和结束位置代表数组中元素的索引。原始数组不会被修改。

names.slice(3)
/*-------------------------------------------
 | Array.slice
 *-------------------------------------------
 | ['Netflix', 'Tesla', 'Tesla']
 |
 */
Enter fullscreen mode Exit fullscreen mode

数组.join

join() 方法通过连接数组（或类数组对象）中的所有元素来创建并返回一个新字符串，这些元素之间用逗号或指定的分隔符字符串分隔。如果数组只有一个元素，则返回该元素时不使用分隔符。

 names.join()
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple,Disney,Google,Netflix,Tesla,Tesla"
 */

 names.join(' - ')
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple - Disney - Google - Netflix - Tesla - Tesla"
 */


names.join('\\')
/*-------------------------------------------
 | Array.join
 *-------------------------------------------
 | "Apple\Disney\Google\Netflix\Tesla\Tesla"
 */
Enter fullscreen mode Exit fullscreen mode

数组转字符串

toString() 方法返回表示指定数组及其元素的字符串。

names.toString()
/*-------------------------------------------
 | Array.toString
 *-------------------------------------------
 | "Apple,Disney,Google,Netflix,Tesla,Tesla"
 */


stocks = [
   { name: 'Apple', price: 321.85 },
   { name: 'Tesla', price: 2471.04 },
   { name: 'Disney', price: 118.77 },
   { name: 'Google', price: 1434.87 },
   { name: 'Netflix', price: 425.92 }
]

stocks.toString()
/*-------------------------------------------
 | Array.toString
 *-------------------------------------------
 | "[object Object],[object Object],[object Object],[object Object],[object Object]""
 */
Enter fullscreen mode Exit fullscreen mode

干净的代码
简化开发人员的生活

你知道我有一份新闻通讯吗？📬

如果您想在我发布新博客文章或发布重大项目公告时收到通知，请前往

cleancodestudio 图片

清洁代码工作室

清洁代码，清洁生活〜简化
鏂囩珷鏉ユ簮锛�https://dev.to/cleancodestudio/14-must-know-js-array-methods-in-8-minutes-38c9
Devto 翻译
PREV
Linux 终端备忘单（适合初学者）
NEXT
以软件开发人员身份创建 YouTube 频道