[[421754]]

「繪文字(日語：絵文字/えもじ emoji)」 是日本在無線通信中所使用的視覺情感符號，繪指圖畫，文字指的則是字符，可用來代表多種表情，如笑臉表示笑、蛋糕表示食物等。在平時的工作和生活中，我們也經常使用到 Emoji 表情。相信大家對以下這些 Emoji 表情都不會陌生：

利用 Emoji 表情不僅可以增加聊天的樂趣性，而且還可以玩出一些 “花樣”。比如在地址欄上實現 url 動畫：

在以上動圖中，最下方 Tab 頁顯示的是 「音/視頻播放器的播放進度條」。不僅如此，我們還可以利用 Emoji 表情實現圖形動畫：

看完以上的動圖，有沒有覺得挺驚訝的 —— “Emoji 竟然還能這樣玩”。

對于前端工程師來說，在日常工作中，我們經常要跟數組打交道。利用數組對象上提供的一些方法，我們可以方便地實現對數組進行各種操作。這里我們對 JavaScript 數組方法進行了簡單的分類和匯總，具體如下圖所示：

上圖中列出的大部分方法，相信你平時的工作中也會有用到。接下來，阿寶哥將使用 Emoji 來幫助大家更好地理解 JavaScript 數組常見的 「16」 個方法。

1. map 方法

map 方法用于創建一個新數組，其結果是該數組中的每個元素是調用一次提供的函數后的返回值。

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

方法使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/map

2. filter 方法

filter 方法會創建一個新的數組，新數組中的元素是通過檢查指定數組中符合條件的所有元素。

const guests = ["👩👨", "👩👩", "👨", "👩", "👨👨"]; 
const singles = guests.filter((g) => g.length / 2 === 1); 
console.log(singles); 
// [ '👨', '👩' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

3. some 方法

some 方法用于測試數組中是不是至少有 1 個元素通過了被提供的函數測試。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/some

4. every 方法

every 方法用于檢測數組所有元素是否都符合函數定義的條件。

const visitors = ["👨", "👽", "👨", "👨", "🤖"]; 
const isHuman = (e) => e === "👨"; 
const onlyHumans = visitors.every(isHuman); 
console.log(onlyHumans); // false 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/every

5. push 方法

push 方法用于向數組的末尾添加一個或多個元素，并返回新的長度。

const animals = ["🐂", "🐒", "🐔"]; 
animals.push("🐴", "🐑"); 
console.log(animals); 
// [ '🐂', '🐒', '🐔', '🐴', '🐑' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push

6. concat 方法

concat 方法用于合并兩個或多個數組，返回一個新數組。

const dogs = ["🐶", "🐶"]; 
const cats = ["🐱", "🐱", "🐱"]; 
const pets = dogs.concat(cats); 
console.log(pets); 
// [ '🐶', '🐶', '🐱', '🐱', '🐱' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/concat

7. unshift 方法

unshift 方法用于向數組的開頭添加一個或更多元素，并返回新的長度。

let train = ["🚃", "🚃", "🚃", "🚃"]; 
train.unshift("🚂"); 
console.log(train); 
// [ '🚂', '🚃', '🚃', '🚃', '🚃' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

8. splice 方法

splice 方法通過刪除或替換現有元素或者原地添加新的元素來修改數組,并以數組形式返回被修改的內容。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

9. slice 方法

slice 方法返回一個從開始到結束(不包括結束)選擇的數組的一部分淺拷貝到一個新數組對象。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/slice

10. reverse 方法

reverse 方法將數組中元素的位置顛倒，并返回該數組。

let rabbitWins = ["🐇", "🦔"]; 
const hedgehogWins = rabbitWins.reverse(); 
console.log(hedgehogWins); 
// [ '🦔', '🐇' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse

11. sort 方法

sort 方法用于對數組元素進行排序，并返回這個數組。

const books = ["📕", "📗", "📕", "📒", "📗", "📒"]; 
books.sort(); 
console.log(books); 
// [ '📒', '📒', '📕', '📕', '📗', '📗' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

12. join 方法

join 方法用于把數組中的所有元素通過指定的分隔符進行分隔放入一個字符串，返回生成的字符串。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/join

13. includes 方法

includes 方法用來判斷一個數組是否包含一個指定的值，根據情況，如果包含則返回 true，否則返回 false。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/includes

14. flat 方法

flat 方法用于拍平嵌套數組對象。

const savings = ["💵", ["💵", "💵"], [[["💰"]]]]; 
const loot = savings.flat(3); 
console.log(loot); 
// [ '💵', '💵', '💵', '💰' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/flat

15. fill 方法

fill 方法用一個固定值填充一個數組中從起始索引到終止索引內的全部元素，不包括終止索引。

let seeds = ["🌱", "🌱", "🌱", "🌱", "🌱"]; 
seeds.fill("🌳", 1, 4); 
console.log(seeds); 
// [ '🌱', '🌳', '🌳', '🌳', '🌱' ] 

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/fill

16. from 方法

from 方法用于從一個類數組或可迭代對象創建一個新的淺拷貝的數組實例。

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

使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/from

看完以上這 16 個方法，是不是有點意猶未盡。最后阿寶哥再分享一張在 Promise 竟被他玩出了四十八種花樣 文章中使用的數組方法示例圖：

 

好的，關于 Emoji 的一些好玩、有趣、有用的東西，就介紹到這里。