JavaScript の便利な配列トリック 12 選

アレイ重複排除

1. from() を新しい Set() メソッドに重ねる

文字列または数値配列から重複を削除するには、from メソッドを直接使用できます。

var plants = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
var uniquePlants = Array.from(new Set(plants)); 
console.log(uniquePlants); // [ '土星', '地球', '天王星', '水星', '金星', '火星', '木星' ]

2. スプレッド演算子 (…)

スプレッド演算子は ES6 の主要な革新であり、多くの強力な機能を備えています。

var plants = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
var uniquePlants = [...新しいSet(plants)]; 
console.log(uniquePlants); // [ '土星', '地球', '天王星', '水星', '金星', '火星', '木星' ]

配列内の特定の値を置き換える

splice() メソッドは、配列に項目を追加または配列から項目を削除し、削除された項目を返します。このメソッドは元の配列を変更します。値を挿入する場所に特に注意してください。

// arrayObject.splice(インデックス、数、項目1、.....、項目X)

var plants = ['土星', '天王星', '水星', '金星', '地球', '火星', '木星'];
var result = plants.splice(2, 1, 'www.shanzhonglei.com')
console.log(plants); // ['土星','天王星','www.shanzhonglei.com','水星','金星','地球','火星','木星']
console.log(結果); // ['Mercury']

map() を使わずに配列をマッピングする

まずはマップ方式を紹介しましょう。 map() メソッドは新しい配列を返します。配列内の要素は、関数を呼び出した後の元の配列要素の値です。元の配列要素の順序で要素を処理します。注意: map() は元の配列を変更せず、空の配列の検出も実行しません。

マップなしで配列マッピングを実装してみましょう。

// 配列.map(function(currentValue,index,arr), thisValue)

var 植物 = [
    { 名前: "土星" },
    { 名前: "天王星" },
    { 名前: "水星" },
    { 名前: "金星" },
]
var plantsName = Array.from(plants, ({ name }) => name);
console.log(plantsName); // [ '土星', '天王星', '水星', '金星' ]

空の配列

配列をクリアしたい場合は、配列の長さを 0 に設定するだけです。これは少し単純です。

var plants = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
植物の長さ = 0;
console.log(植物); // []

配列をオブジェクトに変換する

配列をオブジェクトに変換する場合、最も速い方法はスプレッド演算子 (...) を使用することです。

var plants = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
var plantsObj = { ... 植物 }
console.log(plantsObj); // {'0': '土星','1': '地球', '2': '天王星','3': '水星','4': '金星','5': '地球','6': '火星','7': '木星'}

配列にデータを入力する

配列に何らかのデータを入力する必要がある場合、または同じ値のデータが必要な場合は、fill() メソッドを使用できます。

var plants = new Array(8).fill('8');
console.log(植物); // ['8', '8', '8', '8', '8', '8', '8', '8', '8']

配列の結合

もちろん、concat() メソッドを思い浮かべるでしょうが、スプレッド演算子 (...) も非常に便利です。これは、スプレッド演算子の別の応用です。

var plants1 = ['土星', '地球', '天王星', '水星'];
var plants2 = ['金星', '地球', '火星', '木星'];
console.log([...plants1, ...plants2]); // ['土星', '地球','天王星', '水星', '金星', '地球','火星', '木星']

2つの配列の交差

2 つの配列の交差部分を見つけるには、まず配列に重複がないことを確認し、次に filter() メソッドと include() メソッドを使用します。

var plants1 = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
var plants2 = ['土星', '地球', '天王星'];
var alonePlants = [...new Set(plants1)].filter(item => plants2.includes(item));
console.log(alonePlants); // [ '土星', '地球', '天王星' ]

配列から偽の値を削除する

データを処理するときに誤った値を削除する必要があることがよくあります。 JavaScript では、偽の値は false、0、" "、null、NaN、undefined です。

var plants = ['土星', '地球', null, undefined, false, "", NaN, '天王星', '水星', '金星', '地球', '火星', '木星'];
var trueArr = plants.filter(ブール値);
console.log(trueArr); // ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星']

配列からランダムな値を取得する

配列の長さに基づいてランダムなインデックス番号を取得できます。

var plants = ['土星', '地球', '天王星', '水星', '金星', '地球', '火星', '木星'];
console.log(plants[Math.floor(Math.random() * (plants.length + 1))])

lastIndexOf() メソッド

lastIndexOf() は、要素が最後に出現したインデックスを見つけるのに役立ちます。

// 配列.reduce(関数(合計、現在の値、現在のインデックス、arr)、初期値)

var 数値 = [1, 2, 3, 4, 5];
var sum = nums.reduce((x, y) => x + y);
console.log(合計); // 15

配列内のすべての値を追加する

Reduce() メソッドは関数を累積器として受け取り、配列内の各値 (左から右へ) が単一の値に減らされます。

// 配列.reduce(関数(合計、現在の値、現在のインデックス、arr)、初期値)

var 数値 = [1, 2, 3, 4, 5];
var sum = nums.reduce((x, y) => x + y);
console.log(合計); // 15

これで、JavaScript の便利な配列テクニック 12 個に関するこの記事は終了です。JavaScript 配列に関するより関連性の高いコンテンツについては、123WORDPRESS.COM で以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: