自分で書くときはほとんどlodashを使ってしまい、JSnativeな配列関連メソッドを使わない。
サンプルコードやらを見る時に配列周りがわからん、となるのが苦しくなってきたので、復習と備忘を兼ねて整理。
とりあえず以下について記載
- for in
- for of
- map
- filter
- reduce
for in
for inループは「オブジェクトのキー」に対して処理を繰り返し行う。
const human = {name: 'john', age: '24' , hobby: 'shoplifting'};
for(let prop in human){
console.log(prop + ': ' + human[prop]);
};
結果
name: john
age: 24
hobby: shoplifting
humanオブジェクトから取り出したキーが変数propに格納され、humanオブジェクトの要素を取得したい場合はpropに格納されたキーを指定することで取得できる。
ちなみにfor in は配列に対しても実行できる。
配列に対して使用した場合は変数には添字が取得できるが、順番は保証されない。
const people = ['taro', 'hanako', 'jiro']
for(let prop in people){
console.log(`key: ${prop}`);
console.log(`value: ${people[prop]}`);
};
結果
key: 0
value: taro
key: 1
value: hanako
key: 2
value: jiro
for of
for ofループはある集合の各要素に対して、繰り返し処理を実行できる。
const people = ['taro', 'hanako', 'jiro'];
for(let prop of people){
console.log(`prop: ${prop}`);
};
結果
prop: taro
prop: hanako
prop: jiro
for ofはイテラブルなオブジェクトに対して実行可能だが、通常のオブジェクトに対しては実行できない。
const human = {name: 'john', age: '24' , hobby: 'shoplifting'};
for(let prop in human){
console.log(prop + ': ' + human[prop]);
};
for(let prop of human){
console.log(prop)
}
結果
TypeError: human is not iterable
ちなみに文字列(string)もイテラブルなオブジェクトであるため、以下のようにfor ofを使って処理を行うことができる。
const str = "仕事やめたい";
for(let prop of str) {
console.log(prop);
};
結果
仕
事
や
め
た
い
マジ切実
mapメソッド
mapメソッドは配列データに対してコールバック関数を実行することで、配列データを処理した内容を返す。
const wishList = [{name: 'iphone', price: 108000}, {name: 'energyDrink', price: 200}];
const addTax = wishList.map(x => x.price * 1.1);
console.log(addTax);
結果
[118000,220 ]
mapメソッドを使用した際には、要素の値そのもの(例では変数x)と添字も関数内で使用することができるので、
以下のように２つの配列を用いて、一つのオブジェクト要素の配列を作ることもできる。
const itemList = ['iphone', 'energyDrink'];
const priceList = ['108000', '200'];
const wishList = itemList.map((x, i) => ({name: x, price: priceList[i]}));
結果
{name: "iphone", price: "108000"}
{name: "energyDrink", price: "200"}
filterメソッド
filterメソッドは配列に対して条件を指定し、条件に合致するものを抽出 (合致しないものを除外)し、結果を新しい配列で返す。まさにフィルター
const numbers = [1,2,3,4,5,6,7,8,9,10];
const evenNumbers = numbers.filter(x => x % 2 == 0);
console.log(evenNumbers);
結果
[2, 4, 6, 8, 10]
mapとfilterを併用して使うことも可能。
const multiple = x => x*10;
const numbers = [1,2,3,4,5,6,7,8,9,10];
const multipledEvenNumbers = numbers.filter(x => x % 2 == 0).map(multiple);
console.log(multipledEvenNumbers)
結果
[20, 40, 60, 80, 100]
予め定義した関数をmapに引き渡して、処理させることも可能。
reduceメソッド
reduceメソッドはmapが配列の各要素をそれぞれ変換していたのに対して、配列から一つの値に変換することのできるメソッド
reduceでは配列の要素と配列が最終的に変換された結果を関数に渡して処理を行うことができる。
const arr = [1,2,3,4,5];
const sum = arr.reduce((accm,x) => a += x,0);
console.log(sum);
結果
15
上の例では配列を処理した結果を変数accmに格納し、結果をsumにリターンしている。
recuceの第二引数に0を指定しているが、これはリターンされる結果の初期値で任意に指定できる。
例えば
const arr = [1,2,3,4,5];
const sum = arr.reduce((accm, x) => a += x, 100);
console.log(sum);
結果
115
リターンされるaccmの初期値を100にして、処理の結果が返ってくる。
配列を一つのオブジェクトにまとめたり、文字列の結合をしたりするのに使われる。
所感
配列関数を久しぶりに見ると「この変数どこから来たんだ一体。。。」みたいになるので、
真面目に調べ直してみました。
javascriptの配列はかなり強力でいろんなことができるが、よく使い方を忘れるので忘備録でした。