JS配列のいくつかの開発テクニック(脱重、フィルタリング、ランダム配列、並べ替え)
22665 ワード
1、ランダム配列
2.一意の値
開発者では、重複する値をフィルタする必要があります.ここでは、配列の重複値をフィルタする方法をいくつか提供します.
Setオブジェクトの使用
Arrayを使うfilter
loadshを使用したlodashメソッド
3.属性別
JS配列中の
比較関数では、次の条件に従って値を返します.
1.0:A未満Bより前2.0:Bより大きいAより前3.等しい0:AとBは互いに変わらない
4.配列を指定記号で区切られた文字列に変換
JSでは,配列中の
5.配列から要素を選択
このタスクについては、
1.
この問題を解決するために、
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;
}
})
}
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'}