JavaScript 中最流行的数组方法,您不想错过!

javascript 中最流行的数组方法,您不想错过!

本文将详细讲解JavaScript中一些最常用的数组方法。

方法列表:

map()filter()reduce()forEach()find()findIndex()some()every()includes()indexOf()slice()splice()sort()join()

1. map()

map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。原始数组保持不变。

立即学习“Java免费学习笔记(深入)”;

const numbers = [1, 2, 3];const doubled = numbers.map(x => x * 2);                    // [2, 4, 6]const users = [{ name: 'john' }, { name: 'jane' }];const names = users.map(user => user.name);                 // ['john', 'jane']

登录后复制

2. filter()

filter() 方法创建一个新数组, 其中包含通过提供的函数测试的所有元素。原始数组保持不变。

const nums = [1, 2, 3, 4, 5, 6];const evenNums = nums.filter(n => n % 2 === 0);            // [2, 4, 6]const products = [{ price: 10 }, { price: 20 }];const expensive = products.filter(p => p.price > 15);      // [{ price: 20 }]

登录后复制

3. reduce()

reduce() 方法对数组中的每个元素执行一个 reducer 函数,将其结果汇总为单个返回值。

const sum = [1, 2, 3].reduce((acc, curr) => acc + curr, 0);    // 6const cart = [{ price: 10 }, { price: 20 }];const total = cart.reduce((sum, item) => sum + item.price, 0); // 30

登录后复制

4. forEach()

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

[1, 2, 3].forEach(n => console.log(n));['a', 'b'].forEach((item, index) => console.log(`${index}: ${item}`));

登录后复制

5. find()

find() 方法返回数组中满足提供的测试函数的第一个元素的值。如果没有找到这样的元素,则返回 undefined。

const users2 = [{ id: 1, name: 'john' }, { id: 2, name: 'jane' }];const john = users2.find(user => user.name === 'john');    // { id: 1, name: 'john' }const nums2 = [1, 2, 3, 4];const firstEven = nums2.find(n => n % 2 === 0);           // 2

登录后复制

6. findIndex()

findIndex() 方法返回数组中满足提供的测试函数的第一个元素的索引。如果没有找到这样的元素,则返回 -1。

const fruits = ['apple', 'banana', 'cherry'];const bananaIndex = fruits.findIndex(f => f === 'banana'); // 1const userIndex = users2.findIndex(u => u.id === 2);      // 1

登录后复制

7. some()

some() 方法测试数组中的至少一个元素是否通过了提供的函数测试。

const hasEven = [1, 2, 3].some(n => n % 2 === 0);         // trueconst hasExpensive = products.some(p => p.price > 15);     // true

登录后复制

8. every()

every() 方法测试数组中的所有元素是否都通过了提供的函数测试。

const allPositive = [1, 2, 3].every(n => n > 0);          // trueconst allCheap = products.every(p => p.price < 15);       // false

登录后复制

9. includes()

includes() 方法确定数组是否包含一个特定值。

const numbers2 = [1, 2, 3];const hasTwo = numbers2.includes(2);                       // trueconst hasZero = numbers2.includes(0);                      // false

登录后复制

10. indexOf()

indexOf() 方法返回在数组中可以找到一个特定元素的第一个索引;如果找不到,则返回 -1。

const colors = ['red', 'blue', 'green'];const blueIndex = colors.indexOf('blue');                  // 1const yellowIndex = colors.indexOf('yellow');              // -1

登录后复制

11. slice()

slice() 方法返回一个新的数组对象,该对象包含从开始到结束(不包括结束)的选定元素。原始数组保持不变。

const arr = [1, 2, 3, 4, 5];const middle = arr.slice(1, 4);                           // [2, 3, 4]const last = arr.slice(-2);                               // [4, 5]

登录后复制

12. splice()

splice() 方法通过从数组中添加/删除元素来更改内容。此方法会修改原始数组。

const months = ['jan', 'march', 'april'];months.splice(1, 0, 'feb');                               // ['jan', 'feb', 'march', 'april']months.splice(2, 1);                                      // ['jan', 'feb', 'april']

登录后复制

13. sort()

sort() 方法对数组的元素进行排序,并返回数组。此方法会修改原始数组。

const unsorted = [3, 1, 4, 1, 5];unsorted.sort((a, b) => a - b);                          // [1, 1, 3, 4, 5]const names2 = ['zack', 'alice', 'bob'];names2.sort();                                           // ['alice', 'bob', 'zack']

登录后复制

14. join()

join() 方法将数组元素连接成一个字符串。

const elements = ['Fire', 'Air', 'Water'];const result = elements.join();                          // "Fire,Air,Water"const result2 = elements.join(' - ');                    // "Fire - Air - Water"

登录后复制

希望以上解释能够帮助您更好地理解和使用这些JavaScript数组方法。

以上就是JavaScript 中最流行的数组方法,您不想错过!的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2642340.html

(0)
上一篇 2025年3月7日 06:46:07
下一篇 2025年2月24日 06:21:14

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • 与软件开发联姻

    软件开发职业生涯中,您可能会经历一个阶段:任务描述模糊,与业务目标关联性弱,工作可见度低,曾经的激情与动力逐渐消退。 职业生涯初期,项目往往充满激情。“我们要开发这款应用,客户支付30万(巨款)!你将负责前端!” 那时我热血沸腾,“我一定要…

    2025年3月7日
    200
  • WebAssembly – 初学者指南

    大家好! 我已投入 WebAssembly 开发一段时间,并深深着迷于其潜力。参与了一些令人兴奋的项目后,我决定分享我的经验。 这将是一个系列博客文章,深入探讨 WebAssembly 的方方面面。目前计划至少撰写五篇文章,但数量可能还会增…

    2025年3月7日
    200
  • 5 年内为开发者提供的 AI 工具

    作为一名软件工程师,我一直在探索提升效率、编写更精简代码并减少重复性工作的方法。过去一年,我尝试并应用了多种ai工具,它们彻底改变了我的开发流程。 本文将分享我的AI工具使用心得,以及它们如何助力我的工作,并阐述为何我认为每位开发者都应将它…

    2025年3月7日
    200
  • 使用 NVM 安装和管理 Nodejs

    Node.js 依然是 2025 年 JavaScript 开发中不可或缺的工具。本指南将深入讲解如何在不同平台安装 Node.js,并详细介绍 Node Version Manager (NVM) 的高级用法,实现高效的多版本管理。 什么…

    2025年3月7日
    200
  • Travis Scott 和 Denim Tears 连帽衫背后的炒作

    街头潮流瞬息万变,联名款和限量发售是其核心驱动力。travis scott 和 denim tears 等炙手可热的品牌和系列,已成为文化符号和潮流先锋。从令人梦寐以求的 travis scott 帽衫到极具艺术气息的 denim tear…

    2025年3月7日
    200
  • YAML 与 YML:语法和易用性开发人员指南

    YAML,全称“YAML Ain’t Markup Language”(YAML不是标记语言),尽管名字诙谐,却是一种广泛应用的数据序列化格式,以其易读性和可扩展性著称。 有趣的是,.yml 只是 .yaml 的简写,两者在实际…

    2025年3月7日
    200
  • 开发日记:Word Rush

    体验终极多人文字游戏:Word Rush! 准备好挑战好友,检验你的词汇量了吗?立即加入 word rush,一款令人兴奋的实时多人文字游戏!基于 next.js 构建,word rush 提供快节奏的乐趣,适合所有年龄段的玩家。无论是词汇…

    2025年3月7日
    200
  • React 与 React 比较分析

    react 19 与 react 18 的对比:性能提升与迁移挑战 React,这个构建用户界面的热门 JavaScript 库,持续演进。React 19 在 React 18 的基础上进行了重大改进,带来了新功能和性能提升,但也带来了一…

    2025年3月7日
    200
  • 前端开发人员必备指南

    优秀的前端开发者是用户体验的守护者,他们打造的不仅仅是赏心悦目的界面,更要关注幕后技术细节。本文将分享15个前端开发人员必须掌握的关键概念,助您构建高效、稳定的网页应用。 DNS (域名系统) 您是否想过如何通过输入example.com访…

    2025年3月7日
    200
  • Typescript 设计模式的一些技巧

    参考 Vilic Vane 编著的《TypeScript 设计模式》一书,可在此处预订:https://www.php.cn/link/4adad48d42922db4295e8b7327fbbbf1 第二章:日益增长的复杂性及其挑战 本章…

    2025年3月7日
    200

发表回复

登录后才能评论