他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

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

2020-7-1    seo達人

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的缺點是:


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

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

藍藍設計ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 平面設計服務


日歷

鏈接

個人資料

藍藍設計的小編 http://ssll180.com

存檔