怎么用JS數組技巧提高開發技能

本篇內容介紹了“怎么用JS數組技巧提高開發技能”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

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 方法是按字典順序進行排序的，所以對于字符串類，  該方法是可以很好的正常工作，但對于數據元素是對象類型，就不太好使了，這里我們需要自定義一個排序方法。

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

小于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. 把數組轉成以指定符號分隔的字符串

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

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

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

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

1. 鴻蒙官方戰略合作共建——HarmonyOS技術社區

2. 在forEach中，我們要額外的遍歷其它不需要元素，并且還要使用 if 語句來提取所需的值。

3. 在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'}

“怎么用JS數組技巧提高開發技能”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！