用表情符号解释 JavaScript 数组方法

2025-06-04

用表情符号解释 JavaScript 数组方法

JavaScript 有很多实用的数组操作。如果你和我一样，不知道该选择哪个操作以及它们的作用是什么，那就让我们用表情符号来直观地展示这些操作，以便更好地记住它们，并在最合适的地方运用它们✅。说不定，它们还能发挥比我们预期更多的功能……

本文中的所有示例实际上都是有效的，因此请随意在浏览器控制台中尝试它们🤓

1.Array.push()

在数组末尾添加一个或多个元素。或者种植一个农场。

let livestock = ["🐷", "🐮", "🐔"];
livestock.push("🐴", "🐮");
// console.log(livestock);
// ["🐷", "🐮", "🐔", "🐴", "🐮"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

2.Array.from()

从类数组或可迭代对象创建一个新数组。或者分离一些野生动物。

const wild  = "🐻🐯🦁";
const tamed = Array.from(wild);
// console.log(tamed);
// ["🐻", "🐯", "🦁"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

3.Array.concat()

将两个或多个数组合并为一个新的数组。或者将不同的世界连接在一起。

const dogs = ["🐶", "🐶"];
const cats = ["🐱", "🐱", "🐱"];
const pets = dogs.concat(cats);
// console.log(pets);
// ["🐶", "🐶", "🐱", "🐱", "🐱"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

4.Array.every()

检查数组的所有元素是否通过测试。或者检测入侵者。

const visitors   = ["🧑", "👽", "🧑", "🧑", "🤖"];
const isHuman    = e => e === "🧑";
const onlyHumans = visitors.every(isHuman);
// console.log(onlyHumans);
// false
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

5.Array.fill()

将数组中从起始索引到结束索引的元素替换为给定值。或者生成一些树。

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"];
seeds.fill("🌳", 1, 4);
// console.log(seeds);
// ["🌱", "🌳", "🌳", "🌳", "🌱"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

6.Array.filter()

创建一个包含所有通过测试元素的新数组。或者预测你的感情状态。

const guests  = ["👩👨", "👩👩", "👨", "👩", "👨👨"];
const singles = guests.filter(g => g.length/2 === 1); // *
// console.log(singles);
// ["👨", "👩"]
Enter fullscreen mode Exit fullscreen mode

* 你可能会疑惑，为什么这里要将字符串长度除以二？因为表情符号实际上是由一对代码点（也称为代理对）表示的。请在控制台中
尝试一下"👩".length，亲眼看看。更多信息请参阅本文。

MDN上的文档

7.Array.flat()

创建一个包含所有子数组元素的新数组，直到指定深度。或者破解任何保险箱。

const savings = ["💵", ["💵", "💵"], ["💵", "💵"], [[["💰"]]]];
const loot    = savings.flat(3)
// console.log(loot);
// ["💵", "💵", "💵", "💵", "💵", "💰"];
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

8.Array.includes()

检查数组是否包含特定元素。或者找到隐藏的甜食。

const food   = ["🥦", "🥬", "🍅", "🥒", "🍩", "🥕"];
const caught = food.includes("🍩");
// console.log(caught);
// true
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

9.Array.join()

使用可选分隔符将所有数组元素连接为单个字符串。或者构建局域网。

const devices = ["💻", "🖥️", "🖥️", "💻", "🖨️"];
const network = devices.join("〰️");
// console.log(network);
// "💻〰️🖥️〰️🖥️〰️💻〰️🖨️"
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

10.Array.map()

对每个数组元素调用一个函数，并将结果作为新数组返回。或者喂饱所有饥饿的猴子。

const hungryMonkeys = ["🐒", "🦍", "🦧"];
const feededMonkeys = hungryMonkeys.map(m => m + "🍌");
// console.log(feededMonkeys);
// ["🐒🍌", "🦍🍌", "🦧🍌"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

11.Array.reverse()

反转数组中元素的顺序。或者决定比赛的结果。

let   rabbitWins   = ["🐇", "🦔"];
const hedgehogWins = rabbitWins.reverse();
// console.log(hedgehogWins);
// ["🦔", "🐇"]
Enter fullscreen mode Exit fullscreen mode

请注意，此方法是破坏性的，它会修改原始数组。因此，在本例的第 2 行之后rabbitWins，hedgehogWins和 的值均为 ["🦔", "🐇"]

MDN上的文档

12.Array.slice()

通过复制由起始和结束索引定义的数组的一部分来创建新数组。或者在考试中作弊。

const solutionsOfClassmates = ["📃", "📑", "📄", "📝"];
const myOwnSolutionReally   = solutionsOfClassmates.slice(2, 3);
// console.log(myOwnSolutionReally);
// ["📄"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

13.Array.some()

测试数组中是否至少有一个元素通过测试。或者检测会议中是否有参与者忘记静音麦克风。

const participants = ["🔇", "🔇", "🔊", "🔇", "🔊"];
const isLoud       = p => p === "🔊";
const troubles     = participants.some(isLoud);
// console.log(troubles);
// true
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

14.Array.sort()

对数组的所有元素进行排序。或者重新整理你的书架。

let books = ["📕", "📗", "📕", "📒", "📗", "📒"];
books.sort();
// console.log(books);
// ["📒", "📒", "📕", "📕", "📗", "📗"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

15.Array.splice()

删除、替换或添加数组元素。或者改变天气。

let weather = ["☁️", "🌧️", "☁️"];
weather.splice(1, 2, "☀️");
// console.log(weather);
// ["☁️", "☀️"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

16.Array.unshift()

将一个或多个元素添加到数组的开头。或者连接一个机车。

let train = ["🚃", "🚃", "🚃", "🚃"];
train.unshift("🚂");
// console.log(train);
// ["🚂", "🚃", "🚃", "🚃", "🚃"]
Enter fullscreen mode Exit fullscreen mode

MDN上的文档

总结

我们已经了解了 JavaScript 中处理和操作数组的多种可能性。请参阅 MDN 上所有数组实例方法的概述。你想添加另一个精彩的示例来解释 JavaScript 方法，或者只是想展示你最喜欢的表情符号？请在下方评论💬⬇

发布日期：2021 年 2 月 25 日
标题图片：https://codepen.io/devmount/pen/oNxGpgQ

文章来源：https://dev.to/devmount/javascript-array-methods-explained-with-emojis-2amn
Devto 翻译
PREV
使用 OneSignal 在 ReactJS 中推送通知
NEXT
如何更正 Git 提交消息