配列の便利メソッド(forEach, map, filter, find, everyとsome)
配列の便利メソッド
JavaScriptでの配列で有名メソッド。
forEach map filter find every some reduce
従来の配列でのコードの書き方
var colors = ["red", "blue"] for( var i = 0; i < colors.length; i++) { console.log( colors[i]); }
forEach
forEachでかくとこんな感じ
colors.forEach(function(color) { console.log(color); });
colors配列の要素を一つずつコールバック関数に渡して処理している。
コールバック関数とは? -> 他の関数に引数として渡す関数のこと。
forEachを利用する利用は? -> ロジックの量が少ないすっきりとコードをかける為。
例)
// 数字の配列を用意する var numbers = [1, 2, 3, 4]; // 合計を保持する変数を良いする var sum = 0; // 配列の一つ一つの数字を合計にたす numbers.forEach( function(number) { sum += number }); // 合計を表示 sum
map
var numbers = [1,2,3]; var doubleNumbers = []; for (var i= 0; i < numbers.length; i++) { doubleNumbers.push(numbers[i] * 2); } ■ mapで書き直す ↓ var doubled = numbers.map(function(number) { return number * 2 }); doubled -> [2,4,6]
mapの時はreturnを書くことを忘れないように注意
var cars = [ { type: '車', price: '早い' }, { type: '自転車', price: '遅い' } ] var prices = cars.map(function(car) { return car.type; }); prices -> ["車","自転車"]
filter
forで書く方法
var products = [ { name: 'きゅうり', type: '野菜' }, { name: 'バナナ', type: 'フルーツ' }, { name: 'セロリ', type: '野菜' }, { name: 'オレンジ', type: 'フルーツ' }, ] var filterProducts = [] for( var i = 0; i < products.length; i++) { if (products[i].type === 'フルーツ' ) { filterProducts.push(products[i]); } } filterProducts -> [{"name":"バナナ","type":"フルーツ"},{"name":"オレンジ","type":"フルーツ"}]
filterをリファクタリングした場合
var products = [ { name: 'きゅうり', type: '野菜' }, { name: 'バナナ', type: 'フルーツ' }, { name: 'セロリ', type: '野菜' }, { name: 'オレンジ', type: 'フルーツ' }, ] products.filter(function(product) { return product.type === 'フルーツ' ; });
find
var users = [ { name: '太郎' }, { name: '二郎' }, { name: '五郎' }, ] var user; for( var i = 0; i < users.length; i++) { if(users[i].name == '二郎' ) { user = users[i]; break; } }; user
findで書き直すと ↓
var users = [ { name: '太郎' }, { name: '二郎' }, { name: '五郎' }, ] var user; users.find(function(user) { return user.name === '二郎' ; }); user -> {"name":"二郎"}
findでは一番最初に見つかった値を返却します。
everyとsome
var computers = [ { name: 'apple', ram: 24 }, { name: 'Compaq', ram: 4 }, { name: 'Acer', ram: 32 } ] // 16GB ramが必要なソフト // 全てで動かせるフラグ var allComputersCanRun = true; // どれかでは動かせるフラグ var someComputersCanRun = true; for (var i =0; i < computers.length; i++) { var computer = computers[i]; if (computer.ram < 16) { allComputersCanRun = false; } else { someComputersCanRun = true; } } allComputersCanRunはfalse someComputersCanRunはtrue
なんか描きにくいコードやね。 そこでeveryを利用 ↓
computers.every(function(computer) { return computer.ram >= 16; }); --> False
everyの場合は論理積なので全部true出ないとfalseになる。
一つでもtrueならOKの場合はsomeを利用する。
computers.some(function(computer) { return computer.ram >= 16; }); -> true