【W(wǎng)eb技術】1075- Emoji 表情還能這樣玩？
「繪文字（日語：絵文字/えもじ emoji）」 是日本在無線通信中所使用的視覺情感符號，繪指圖畫，文字指的則是字符，可用來代表多種表情，如笑臉表示笑、蛋糕表示食物等。在平時的工作和生活中，我們也經(jīng)常使用到 Emoji 表情。相信大家對以下這些 Emoji 表情都不會陌生：
利用 Emoji 表情不僅可以增加聊天的樂趣性，而且還可以玩出一些 “花樣”。比如在地址欄上實現(xiàn) url 動畫：
在以上動圖中，最下方 Tab 頁顯示的是 「音/視頻播放器的播放進度條」。不僅如此，我們還可以利用 Emoji 表情實現(xiàn)圖形動畫：
看完以上的動圖，有沒有覺得挺驚訝的 —— “Emoji 竟然還能這樣玩”。
對于前端工程師來說，在日常工作中，我們經(jīng)常要跟數(shù)組打交道。利用數(shù)組對象上提供的一些方法，我們可以方便地實現(xiàn)對數(shù)組進行各種操作。這里我們對 JavaScript 數(shù)組方法進行了簡單的分類和匯總，具體如下圖所示：
上圖中列出的大部分方法，相信你平時的工作中也會有用到。接下來，阿寶哥將使用 Emoji 來幫助大家更好地理解 JavaScript 數(shù)組常見的 「16」 個方法。
1. map 方法
map 方法用于創(chuàng)建一個新數(shù)組，其結果是該數(shù)組中的每個元素是調用一次提供的函數(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)建一個新的數(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 個元素通過了被提供的函數(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ù)組的末尾添加一個或多個元素，并返回新的長度。
const animals = ["??", "??", "??"];
animals.push("??", "??");
console.log(animals);
// [ '??', '??', '??', '??', '??' ]
?使用文檔：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/push
?
6. concat 方法
concat 方法用于合并兩個或多個數(shù)組，返回一個新數(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ù)組的開頭添加一個或更多元素，并返回新的長度。
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ù)組形式返回被修改的內容。
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 方法返回一個從開始到結束（不包括結束）選擇的數(shù)組的一部分淺拷貝到一個新數(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ù)組元素進行排序，并返回這個數(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ù)組中的所有元素通過指定的分隔符進行分隔放入一個字符串，返回生成的字符串。
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 方法用來判斷一個數(shù)組是否包含一個指定的值，根據(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 方法用一個固定值填充一個數(shù)組中從起始索引到終止索引內的全部元素，不包括終止索引。
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 方法用于從一個類數(shù)組或可迭代對象創(chuàng)建一個新的淺拷貝的數(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 個方法，是不是有點意猶未盡。最后阿寶哥再分享一張在 Promise 竟被他玩出了四十八種花樣 文章中使用的數(shù)組方法示例圖：
好的，關于 Emoji 的一些好玩、有趣、有用的東西，就介紹到這里。如果你知道 Emoji 其他好玩的事情，可以給阿寶哥留言。另外，如果你對 「JS 數(shù)組方法匯總.xmind」 或文中示例代碼感興趣的話，可以私聊阿寶哥喲。為了方便大家學習，阿寶哥也準備了相應的視頻??。
覺得不錯的話，可以關注 「“阿寶哥學技術”」 視頻號，后續(xù)會持續(xù)分享很多與技術有關有用、有趣的視頻。
參考資源
js 數(shù)組詳細操作方法及解析合集
javascript-array-methods-explained-with-emojis