建站
咨詢
售后
建站咨詢
新聞中心
在前端開發(fā)中，數(shù)組是經(jīng)常會被用到的數(shù)組結構，今天，介紹 5 個處理數(shù)組技巧，希望能帶給你們一些 啟發(fā)和幫助。廢話不多說，讓我們開始吧。
創(chuàng)新互聯(lián)科技有限公司專業(yè)互聯(lián)網(wǎng)基礎服務商，為您提供內(nèi)江服務器托管，高防物理服務器租用，成都IDC機房托管，成都主機托管等互聯(lián)網(wǎng)服務。
[[336166]]
1. 隨機排列
在開發(fā)者，有時候我們需要對數(shù)組的順序進行重新的洗牌。在 JS 中并沒有提供數(shù)組隨機排序的方法，這里提供一個隨機排序的方法：
- 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)常需要過濾重復的值，這里提供幾種方式來過濾數(shù)組的重復值。
使用 Set 對象
使用 Set() 函數(shù)，此函數(shù)可與單個值數(shù)組一起使用。對于數(shù)組中嵌套的對象值而言，不是一個好的選擇。
- 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. 按屬性對 對象數(shù)組 進行排序
我們知道 JS 數(shù)組中的 sort 方法是按字典順序進行排序的，所以對于字符串類， 該方法是可以很好的正常工作，但對于數(shù)據(jù)元素是對象類型，就不太好使了，這里我們需要自定義一個排序方法。
在比較函數(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ù)組轉成以指定符號分隔的字符串
JS 中有個方法可以做到這一點，就是使用數(shù)組中的 .join() 方法，我們可以傳入指定的符號來做數(shù)組進行分隔。
- const data = ['Mango', 'Apple', 'Banana', 'Peach']
- data.join(',');
- // return "Mango,Apple,Banana,Peach"
5. 從數(shù)組中選擇一個元素
對于此任務，我們有多種方式，一種是使用 forEach 組合 if-else 的方式 ，另一種可以使用filter 方法，但是使用forEach 和filter的缺點是：
- 在forEach中，我們要額外的遍歷其它不需要元素，并且還要使用 if 語句來提取所需的值。
- 在filter 方法中，我們有一個簡單的比較操作，但是它將返回的是一個數(shù)組，而是我們想要是根據(jù)給定條件從數(shù)組中獲得單個對象。
為了解決這個問題，我們可以使用 find函數(shù)從數(shù)組中找到確切的元素并返回該對象，這里我們不需要使用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/
本文轉載自微信公眾號「大遷世界」，可以通過以下二維碼關注。轉載本文請聯(lián)系大遷世界公眾號。
當前題目：5個JS數(shù)組技巧可提高你的開發(fā)技能
網(wǎng)站地址：http://m.5511xx.com/article/cddjssp.html
