在前端開發(fā)中，數(shù)組是經(jīng)常會(huì)被用到的數(shù)組結(jié)構(gòu)，今天，介紹 5 個(gè)處理數(shù)組技巧，希望能帶給你們一些 啟發(fā)和幫助。廢話不多說，讓我們開始吧。

[[336166]]

1. 隨機(jī)排列

在開發(fā)者，有時(shí)候我們需要對(duì)數(shù)組的順序進(jìn)行重新的洗牌。在 JS 中并沒有提供數(shù)組隨機(jī)排序的方法，這里提供一個(gè)隨機(jī)排序的方法：

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. 唯一值

在開發(fā)者，我們經(jīng)常需要過濾重復(fù)的值，這里提供幾種方式來過濾數(shù)組的重復(fù)值。

使用 Set 對(duì)象

使用 Set() 函數(shù)，此函數(shù)可與單個(gè)值數(shù)組一起使用。對(duì)于數(shù)組中嵌套的對(duì)象值而言，不是一個(gè)好的選擇。

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 方法，我們可以對(duì)元素是對(duì)象的進(jìn)行過濾。

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. 按屬性對(duì) 對(duì)象數(shù)組 進(jìn)行排序

我們知道 JS 數(shù)組中的 sort 方法是按字典順序進(jìn)行排序的，所以對(duì)于字符串類， 該方法是可以很好的正常工作，但對(duì)于數(shù)據(jù)元素是對(duì)象類型，就不太好使了，這里我們需要自定義一個(gè)排序方法。

在比較函數(shù)中，我們將根據(jù)以下條件返回值：

小于0：A 在 B 之前

大于0 ：B 在 A 之前

等于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. 把數(shù)組轉(zhuǎn)成以指定符號(hào)分隔的字符串

JS 中有個(gè)方法可以做到這一點(diǎn)，就是使用數(shù)組中的 .join() 方法，我們可以傳入指定的符號(hào)來做數(shù)組進(jìn)行分隔。

const data = ['Mango', 'Apple', 'Banana', 'Peach'] 
 
data.join(','); 
// return "Mango,Apple,Banana,Peach" 

5. 從數(shù)組中選擇一個(gè)元素

對(duì)于此任務(wù)，我們有多種方式，一種是使用 forEach 組合 if-else 的方式 ，另一種可以使用filter 方法，但是使用forEach 和filter的缺點(diǎn)是：

1. 在forEach中，我們要額外的遍歷其它不需要元素，并且還要使用 if 語句來提取所需的值。
2. 在filter 方法中，我們有一個(gè)簡(jiǎn)單的比較操作，但是它將返回的是一個(gè)數(shù)組，而是我們想要是根據(jù)給定條件從數(shù)組中獲得單個(gè)對(duì)象。

為了解決這個(gè)問題，我們可以使用 find函數(shù)從數(shù)組中找到確切的元素并返回該對(duì)象，這里我們不需要使用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'} 

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

原文：https://codewithghazi.com/javascript-array-tricks-to-improve-your-development-skill/

本文轉(zhuǎn)載自微信公眾號(hào)「大遷世界」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請(qǐng)聯(lián)系大遷世界公眾號(hào)。