5 個 JS 數組技巧可提升你的開發技能

做者：Ghazi Khan
譯者：前端小智
來源：codewithghazi

點贊再看，微信搜索 【大遷世界】 關注這個沒有大廠背景，但有着一股向上積極心態人。本文 GitHub https://github.com/qq44924588... 上已經收錄，文章的已分類，也整理了不少個人文檔，和教程資料。

在前端開發中，數組是常常會被用到的數組結構，今天，介紹 5 個處理數組技巧，但願能帶給大家一些 啓發和幫助。廢話很少說，讓咱們開始吧。

1. 隨機排列

在開發者，有時候咱們須要對數組的順序進行從新的洗牌。 在 JS 中並無提供數組隨機排序的方法，這裏提供一個隨機排序的方法：

function shuffle(arr) {
  var i, j, temp;
  for (i = arr.length - 1; i > 0; i--) {
    j = Math.floor(Math.random() * (i + 1));
    temp = arr[i];
    arr[i] = arr[j];
    arr[j] = temp;
  }
  return arr;
}

2. 惟一值

在開發者，咱們常常須要過濾重複的值，這裏提供幾種方式來過濾數組的重複值。

使用 Set 對象

使用 Set() 函數，此函數可與單個值數組一塊兒使用。對於數組中嵌套的對象值而言，不是一個好的選擇。

const numArray = [1,2,3,4,2,3,4,5,1,1,2,3,3,4,5,6,7,8,2,4,6];

// 使用 Array.from 方法
Array.from(new Set(numArray));

// 使用展開方式
[...new Set(numArray)]

使用 Array.filter

使用 filter 方法，咱們能夠對元素是對象的進行過濾。

const data = [
  {id: 1, name: 'Lemon'},
  {id: 2, name: 'Mint'},
  {id: 3, name: 'Mango'},
  {id: 4, name: 'Apple'},
  {id: 5, name: 'Lemon'},
  {id: 6, name: 'Mint'},
  {id: 7, name: 'Mango'},
  {id: 8, name: 'Apple'},
]

function findUnique(data) {
  return data.filter((value, index, array) => {
    if (array.findIndex(item => item.name === value.name) === index) {
      return value;
    }
  })
}

3. 使用 loadsh 的 lodash 方法

import {uniqBy} from 'lodash'

const data = [ 
  {id: 1, name: 'Lemon'}, 
  {id: 2, name: 'Mint'}, 
  {id: 3, name: 'Mango'}, 
  {id: 4, name: 'Apple'}, 
  {id: 5, name: 'Lemon'}, 
  {id: 6, name: 'Mint'},
  {id: 7, name: 'Mango'}, 
  {id: 8, name: 'Apple'}, 
] 

function findUnique(data) { 
  return uniqBy(data, e => {
        return e.name
    })
}

3. 按屬性對 對象數組 進行排序

咱們知道 JS 數組中的 sort 方法是按字典順序進行排序的，因此對於字符串類， 該方法是能夠很好的正常工做，但對於數據元素是對象類型，就不太好使了，這裏咱們須要自定義一個排序方法。

在比較函數中，咱們將根據如下條件返回值：

1. 小於0：A 在 B 以前
2. 大於0 ：B 在 A 以前
3. 等於0 ：A 和 B 彼此保持不變

const data = [
  {id: 1, name: 'Lemon', type: 'fruit'},
  {id: 2, name: 'Mint', type: 'vegetable'},
  {id: 3, name: 'Mango', type: 'grain'},
  {id: 4, name: 'Apple', type: 'fruit'},
  {id: 5, name: 'Lemon', type: 'vegetable'},
  {id: 6, name: 'Mint', type: 'fruit'},
  {id: 7, name: 'Mango', type: 'fruit'},
  {id: 8, name: 'Apple', type: 'grain'},
]

function compare(a, b) {
  // Use toLowerCase() to ignore character casing
  const typeA = a.type.toLowerCase();
  const typeB = b.type.toLowerCase();

  let comparison = 0;
  if (typeA > typeB) {
    comparison = 1;
  } else if (typeA < typeB) {
    comparison = -1;
  }
  return comparison;
}

data.sort(compare)

4. 把數組轉成以指定符號分隔的字符串

JS 中有個方法能夠作到這一點，就是使用數組中的 .join() 方法，咱們能夠傳入指定的符號來作數組進行分隔。

const data = ['Mango', 'Apple', 'Banana', 'Peach']

data.join(',');
// return "Mango,Apple,Banana,Peach"

5. 從數組中選擇一個元素

對於此任務，咱們有多種方式，一種是使用 forEach 組合 if-else 的方式 ，另外一種可使用filter 方法，可是使用forEach 和filter的缺點是：

1. 在forEach中，咱們要額外的遍歷其它不須要元素，而且還要使用 if 語句來提取所需的值。
2. 在filter 方法中，咱們有一個簡單的比較操做，可是它將返回的是一個數組，而是咱們想要是根據給定條件從數組中得到單個對象。

爲了解決這個問題，咱們可使用 find函數從數組中找到確切的元素並返回該對象，這裏咱們不須要使用if-else語句來檢查元素是否知足條件。

const data = [ 
  {id: 1, name: 'Lemon'}, 
  {id: 2, name: 'Mint'}, 
  {id: 3, name: 'Mango'}, 
  {id: 4, name: 'Apple'}
] 

const value = data.find(item => item.name === 'Apple')
// value = {id: 4, name: 'Apple'}

人才們的 【三連】 就是小智不斷分享的最大動力，若是本篇博客有任何錯誤和建議，歡迎人才們留言，最後，謝謝你們的觀看。

---

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

原文：https://codewithghazi.com/jav...

---

交流

文章每週持續更新，能夠微信搜索 【大遷世界 】 第一時間閱讀，回覆 【福利】 有多份前端視頻等着你，本文 GitHub https://github.com/qq449245884/xiaozhi 已經收錄，歡迎Star。