JavaScriptの配列操作では便利なメソッドが多く提供されています。
例えばfor(i=0;i<arr.length;i++)
みたいなコードを今も記述していませんか?arr.forEach
などの反復処理を知っていれば、もっとスマートに記述できるようになります。
今回はJavaScriptの配列で使える便利な反復メソッドを紹介していきます。
const numList = [2, 4, 6]
numList.forEach((num) => {
console.log(num)
})
// output: 2
// output: 4
// output: 6
コールバックでtrueを返した条件の配列を抽出
const numList = [2, 4, 6, 8, 10]
const result = numList.forEach((num) => {
return num < 5
})
console.log(result)
// output: [2, 4]
コールバックの返り値を新しい配列として生成します
const numList = [
{ count 1 } ,
{ count: 2 } ,
{ count: 3 } ,
{ count: 4 } ,
{ count: 5 } ,
]
const result = numList.map((num) => {
return {
count: num.count,
date: '2020/6/16'
}
})
console.log(result)
/**
output: [
{ count 1 , date: '2020/6/16' } ,
{ count: 2, date: '2020/6/16' } ,
{ count: 3 , date: '2020/6/16' } ,
{ count: 4 , date: '2020/6/16' } ,
{ count: 5 , date: '2020/6/16' } ,
]
**/
配列を反復処理し結果を単一の値にします。
const numList = [1, 2, 3, 4];
numList.reduce((previousValue, currentValue) => {
return previousValue + currentValue
})
// 1 + 2 + 3 + 4
// output: 10
reduceRightは処理の順序が配列の末尾からになります。
const numList = [1, 2, 3, 4];
numList.reduce((previousValue, currentValue) => {
return previousValue + currentValue
})
// 5 + 4 + 3 + 2 + 1
// output: 10
条件を満たす値が全てであるか判定
const numList = [1, 2, 3, 4];
const result = numList.every((num) => {
return num <= 3
})
console.log(result)
// output: false
条件を満たす値が存在するか判定
const numList = [1, 2, 3, 4];
const result = numList.some((num) => {
return num <= 3
})
console.log(result)
// output: true
key/value ペアを含む新しい Array Iterator オブジェクトを取得
const array1 = ['Apple', 'Google', 'Microsoft'];
const iterator1 = array1.entries();
console.log(iterator1.next().value);
// expected output: Array [0, "Apple"]
console.log(iterator1.next().value);
// expected output: Array [1, "Google"]
ポイントはnext()
が呼ばれたときに次の配列値を取得します
以上が私が業務でよく使う反復メソッドになります。
他にもfind()
findIndex()
keys()
values
なども公式で紹介されていますので、興味がある方はみてみてください。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array