一些 JS 數組精簡技巧,要記好筆記了

做者:Duomly
譯者:前端小智
來源:dev.to

我的專欄 ES6 深刻淺出已上線,深刻ES6 ,經過案例學習掌握 ES6 中新特性一些使用技巧及原理,持續更新中,←點擊可訂閱。javascript

點贊再看,養成習慣

本文 GitHub https://github.com/qq44924588... 上已經收錄,更多往期高贊文章的分類,也整理了不少個人文檔,和教程資料。歡迎Star和完善,你們面試能夠參照考點複習,但願咱們一塊兒有點東西。html


數組是 JS 最多見的一種數據結構,我們在開發中也常常用到,在這篇文章中,提供一些小技巧,幫助我們提升開發效率。前端

1. 刪除數組的重複項

圖片描述

2. 替換數組中的特定值

有時在建立代碼時須要替換數組中的特定值,有一種很好的簡短方法能夠作到這一點,我們可使用.splice(start、value to remove、valueToAdd),這些參數指定我們但願從哪裏開始修改、修改多少個值和替換新值。java

圖片描述

3. Array.from 達到 .map 的效果

我們都知道 .map() 方法,.from() 方法也能夠用來得到相似的效果且代碼也很簡潔。git

圖片描述

4.置空數組

有時候咱們須要清空數組,一個快捷的方法就是直接讓數組的 length 屬性爲 0,就能夠清空數組了。github

圖片描述

5. 將數組轉換爲對象

有時候,出於某種目的,須要將數組轉化成對象,一個簡單快速的方法是就使用展開運算符號(...):面試

圖片描述

6. 用數據填充數組

在某些狀況下,當我們建立一個數組並但願用一些數據來填充它,這時 .fill()方法能夠幫助我們。segmentfault

圖片描述

7. 數組合並

使用展開操做符,也能夠將多個數組合並起來。數組

圖片描述

8.求兩個數組的交集

求兩個數組的交集在面試中也是有必定難度的正點,爲了找到兩個數組的交集,首先使用上面的方法確保所檢查數組中的值不重複,接着使用.filter 方法和.includes方法。以下所示:微信

圖片描述

9.從數組中刪除虛值

在 JS 中,虛值有 false, 0''null, NaN, undefined。我們能夠 .filter() 方法來過濾這些虛值。

圖片描述

10. 從數組中獲取隨機值

有時咱們須要從數組中隨機選擇一個值。一種方便的方法是能夠根據數組長度得到一個隨機索引,以下所示:

圖片描述

11.反轉數組

如今,我們須要反轉數組時,沒有必要經過複雜的循環和函數來建立它,數組的 reverse 方法就能夠作了:

圖片描述

12 lastIndexOf() 方法

圖片描述

13.對數組中的全部值求和

JS 面試中也常常用 reduce 方法來巧妙的解決問題

圖片描述

總結

在本文中,介紹了13個技巧,但願它們能夠幫助編寫簡潔代碼,若是你還有更好的辦法,歡迎留言討論。

代碼部署後可能存在的BUG無法實時知道,過後爲了解決這些BUG,花了大量的時間進行log 調試,這邊順便給你們推薦一個好用的BUG監控工具 Fundebug

原文:
https://dev.to/duomly/13-usef...

交流

阿里雲最近在作活動,低至2折,有興趣能夠看看:https://promotion.aliyun.com/...

乾貨系列文章彙總以下,以爲不錯點個Star,歡迎 加羣 互相學習。

https://github.com/qq449245884/xiaozhi

由於篇幅的限制,今天的分享只到這裏。若是你們想了解更多的內容的話,能夠去掃一掃每篇文章最下面的二維碼,而後關注我們的微信公衆號,瞭解更多的資訊和有價值的內容。

clipboard.png

每次整理文章,通常都到2點才睡覺,一週4次左右,挺苦的,還望支持,給點鼓勵

相關文章
相關標籤/搜索