好看的电视剧,盗墓笔记第二季,穿越小说完本

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案

Emoji 表情還能這樣玩？

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

沛縣ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場景，ssl證書未來市場廣闊！成為成都創(chuàng)新互聯(lián)公司的ssl證書銷售渠道，可以享受市場價格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：13518219792（備注：SSL證書合作）期待與您的合作！

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

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

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

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

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

1. map 方法

map 方法用于創(chuàng)建一個新數(shù)組，其結(jié)果是該數(shù)組中的每個元素是調(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)建一個新的數(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ù)組形式返回被修改的內(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 方法返回一個從開始到結(jié)束(不包括結(jié)束)選擇的數(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ù)組元素進(jìn)行排序，并返回這個數(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)行分隔放入一個字符串，返回生成的字符串。

 
 
 
   
  
  
  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ù)組中從起始索引到終止索引內(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 方法用于從一個類數(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ù)組方法示例圖：

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

分享題目：Emoji 表情還能這樣玩？
本文鏈接：http://fisionsoft.com.cn/article/dhioepi.html