😎
【JavaScript】よく使う配列関連の処理まとめ
はじめに
JavaScriptで個人的によく使う配列関連の処理をまとめました。
処理一覧
配列が空かどうか判定する
const judgeArrayEmpty = array => {
if (!array.length) {
console.log('empty');
} else {
console.log('not empry');
}
}
judgeArrayEmpty([]); // empty
judgeArrayEmpty([0, 1]); // not empty
結論
if (!array.length) {...}
if (array.length) {...}
参考
配列をコピーする
const array0 = [0, 1, 2];
const array1 = array0; // bad
const array2 = [...array0]; // good
console.log(array0 == array1); // true
console.log(array0.toString() == array1.toString()); // true
console.log(array0 == array2); // false
console.log(array0.toString() == array2.toString()); // true
結論
[...array]
参考
配列の重複をなくす
let array = [0, 1, 2, 0, 2, 3];
console.log(array); // [0, 1, 2, 0, 2, 3]
array = [...new Set(array)];
console.log(array); // [0, 1, 2, 3]
結論
[...new Set(array)]
参考
配列やSetに特定の要素を含むか判定する
const array = ['apple', 'banana', 'orange'];
const set = new Set(array);
console.log(array.includes('banana')); // true
console.log(array.includes('melon')); // false
console.log(set.has('banana')); // true
console.log(set.has('melon')); // false
結論
array.includes(value) // 配列
set.has(value) // Set
Tips
配列の場合、Setに変換してから判定するのもあり（重複がない配列に限る）
Setのhas()メソッド実行コスト <<< 配列のincludes()メソッド実行コスト
（Set生成コストを考慮しても使う価値あり）
new Set(array).has(value)
参考
配列から特定の要素を削除する
let array0 = ['apple', 'banana', 'orange'];
let array1 = ['apple', 'banana', 'orange'];
array0.splice(2, 1);
console.log(array0); // ['apple', 'banana']
array1.splice(0, 2);
console.log(array1); // ['orange']
結論
array.splice(index, length)
Tips
- 対象の配列自体を変えるメソッド（破壊的）なので、操作前の配列を今後も使いたい場合は
slice()やfilter()を使う -
splice()の戻り値は、第一引数と第二引数で指定した範囲の要素配列
参考
配列から特定の要素を抽出する
const array = ['apple', 'banana', 'orange', 'melon', 'peach'];
console.log(array.slice(3)); // ['melon', 'peach']
console.log(array.slice(2, 4)); // ['orange', 'melon']
console.log(array.filter(value => value.length == 5)); // ['apple, melon, peach]
結論
array.slice(start)
array.slice(start, end)
array.fliter(value => condition)
Tips
- 添え字に基づく条件の場合は
slice() - 要素値に基づく条件の場合は
filter()
参考
オブジェクト配列から特定のプロパティ値のみ（もしくはプロパティと値）を抽出する
const object = [
{ name: 'suzuki',
age: 30,
mail: 'suzuki@exsample.com' },
{ name: 'saito',
age: 25,
mail: 'saito@exsample.com' },
{ name: 'takahashi',
age: 33,
mail: 'takahashi@exsample.com' }
];
const array = object.map(element => element.name);
console.log(array); // [suzuki, saito, takahashi]
const newObject = object.map(({name, age}) => {
return {name, age};
});
console.log(newObject); // [
// { name: 'suzuki', age: 30 },
// { name: 'saito', age: 25 },
// { name: 'takahashi', age: 33 },
// ]
結論
object.map(element => element.property) // プロパティ値のみ抽出
object.map({property1, property2, ...} => { // プロパティと値を抽出
return {property1, property2, ...};
});
参考
配列をソートする
const numbers = [5, 1, 3, 4, 2];
const alphabets = ['d', 'e', 'a', 'c', 'b'];
console.log(numbers); // [5, 1, 3, 4, 2]
console.log(alphabets); // ['d', 'e', 'a', 'c', 'b']
const sortArray = (array, isAsc) => {
let direction = 1;
if (!isAsc) {
direction = direction * -1;
}
array.sort((a, b) => {
if (a > b) {
return direction * 1;
}
return direction * -1;
});
return array;
}
console.log(sortArray(numbers, true)); // [1, 2, 3, 4, 5]
console.log(sortArray(numbers, false)); // [5, 4, 3, 2, 1]
console.log(sortArray(alphabets, true)); // ['a', 'b', 'c', 'd', 'e']
console.log(sortArray(alphabets, false)); // ['e', 'd', 'c', 'b', 'a']
結論
array.sort((a, b) => {
if (a > b) {
return direction * 1; // 戻り値を逆にすると降順にソート
}
return direction * -1;
});
Tips
文字列の配列の場合、 引数なしのsort() で昇順にソートできる
sort() 後に reverse() で降順にソートすることも可能
参考
終わりに
随時更新します。
Discussion