Emoji 表情還能這樣玩？

作者：阿寶哥 2021-09-05 07:55:37

對于前端工程師來說，在日常工作中，我們經(jīng)常要跟數(shù)組打交道。利用數(shù)組對象上提供的一些方法，我們可以方便地實(shí)現(xiàn)對數(shù)組進(jìn)行各種操作。

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

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

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

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

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

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

1. map 方法

map 方法用于創(chuàng)建一個(gè)新數(shù)組，其結(jié)果是該數(shù)組中的每個(gè)元素是調(diào)用一次提供的函數(shù)后的返回值。

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 方法會創(chuàng)建一個(gè)新的數(shù)組，新數(shù)組中的元素是通過檢查指定數(shù)組中符合條件的所有元素。

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 方法用于測試數(shù)組中是不是至少有 1 個(gè)元素通過了被提供的函數(shù)測試。

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 方法用于檢測數(shù)組所有元素是否都符合函數(shù)定義的條件。

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 方法用于向數(shù)組的末尾添加一個(gè)或多個(gè)元素，并返回新的長度。

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

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

6. concat 方法

concat 方法用于合并兩個(gè)或多個(gè)數(shù)組，返回一個(gè)新數(shù)組。

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 方法用于向數(shù)組的開頭添加一個(gè)或更多元素，并返回新的長度。

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

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

8. splice 方法

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

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 方法返回一個(gè)從開始到結(jié)束(不包括結(jié)束)選擇的數(shù)組的一部分淺拷貝到一個(gè)新數(shù)組對象。

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 方法將數(shù)組中元素的位置顛倒，并返回該數(shù)組。

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 方法用于對數(shù)組元素進(jìn)行排序，并返回這個(gè)數(shù)組。

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

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

12. join 方法

join 方法用于把數(shù)組中的所有元素通過指定的分隔符進(jìn)行分隔放入一個(gè)字符串，返回生成的字符串。

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 方法用來判斷一個(gè)數(shù)組是否包含一個(gè)指定的值，根據(jù)情況，如果包含則返回 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 方法用于拍平嵌套數(shù)組對象。

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 方法用一個(gè)固定值填充一個(gè)數(shù)組中從起始索引到終止索引內(nèi)的全部元素，不包括終止索引。

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 方法用于從一個(gè)類數(shù)組或可迭代對象創(chuàng)建一個(gè)新的淺拷貝的數(shù)組實(shí)例。

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 個(gè)方法，是不是有點(diǎn)意猶未盡。最后阿寶哥再分享一張?jiān)?Promise 竟被他玩出了四十八種花樣文章中使用的數(shù)組方法示例圖：

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

責(zé)任編輯：武曉燕來源：全棧修仙之路

前端 Emoji 表情