JS 数组迭代器速查表 — 第一部分
🥨 Array.prototype.forEach
🍱 Array.prototype.map
🥢 Array.prototype.filter
🧃 Array.prototype.some
数组决策图
嘿!我开始这个新系列,旨在帮助初学者理解一些关键的 JavaScript 概念。我知道,对于初学者来说,一次性消化所有信息并实现所有内容可能比较困难,所以我会尽量在每篇文章的末尾附上一个决策图。希望对你有帮助!我们开始吧。
迭代器方法很有用,但如果不了解它们之间的细微差别,也可能会令人困惑。这份速查表讨论了forEach
、map
、filter
和之间的对比差异some
。
开始之前...
“你必须忘记你所学到的东西”——尤达
以下是本文中使用的几个关键词及其含义:
🥨 Array.prototype.forEach
用法: for 的替代方案,具有作用域优势。适用于 Ajax 调用、对每个数组项执行 set/get 操作,以及在没有其他函数满足需求时使用此方法。
返回: undefined
变异(默认):不变异提供的数组。
中断循环:无法跳过循环执行。
可链接性:不可行,因为它返回 undefined
迭代时数组值的更改:
"Breath-in and breath-out before you read this" 😇
1. Any new data added to the array while the loop execution will be ignored.
2. Any data modified or deleted will be provided chainable to the forEach when forEach visits it.
3. Any modifications to the processed data will be ignored and deletion of the processed element might make the next element in the loop to be skipped due to the change of index.
空数组/元素:将被忽略。undefined
/null:将被循环执行。
异步:不支持。
🍱 Array.prototype.map
用法:当您想要转换给定数组时使用此方法。如果您的用例不返回任何内容,请使用 forEach 或 for...of
返回:如果回调未返回任何内容,则返回数组和未定义数组。
变异(默认):不变异提供的数组。
中断循环:无法跳过循环执行。
可链接性:是
迭代时数组值的更改:与 forEach 相同
空数组/元素:将被忽略。undefined
/null:将被循环执行。
🥢 Array.prototype.filter
用法:根据给定条件过滤数组。如果需要返回第一个匹配的元素,请使用 Array.prototype.find()
返回:如果未过滤任何内容或回调未返回,则返回数组和空数组。
变异(默认):不变异提供的数组。
中断循环:无法跳过循环执行。
可链接性:是。
迭代时更改数组值:与 forEach 相同。
空数组/元素:将被忽略。undefined
/null:将被循环执行。
🧃 Array.prototype.some
用法:如果回调中至少有一个元素满足提供的条件,则返回 true,否则返回 false。
返回值:布尔
值。变异(默认):不变异提供的数组。
中断循环:无法跳过循环执行。
可链接性:是。
迭代时数组值的变化:与 forEach 相同。
空数组/元素:将被忽略。undefined
/null:将被循环。
数组决策图
如果你是初学者,可能会对使用哪种迭代器方法感到困惑。我为此绘制了一个决策图。希望对你有帮助。🙏
希望你喜欢这篇文章,请在评论区或推特上告诉我你的想法。
干杯!🙌
KD
最初发表于Medium
聚苯乙烯
如果您对开源开发充满热情,并希望为激动人心的开源项目做出贡献,XenoX 团队或许正是您的理想之选。我们始终致力于打造精彩的成果,期待您的加入!快来XenoX Multiverse查看我们的成果吧!🔥
为 XenoX 写作!
XenoX 团队也期待为我们的出版物招募更多作者。如果您热爱写作,并且有一些创意想法想要分享,我们非常欢迎!💯 您的博客文章将获得更多关注。👀 您有机会赢取精美礼品。此外,您还可以获得我们专家团队的专家咨询和免费校对/编辑服务。😉😎
如果您想申请,请点击此处并输入您的详细信息:
https://forms.clickup.com/f/1rz92-3351/VMFE0Q81LI7E0A92Z0