技術ブログ

(技術系中心)基本自分用備忘録なので、あくまで参考程度でお願いします。

配列の便利メソッド(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を書くことを忘れないように注意 f:id:lhiroki1205:20200222144737p:plain

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 === 'フルーツ' ;
});

f:id:lhiroki1205:20200222194309p:plain

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

f:id:lhiroki1205:20200222202433p:plain

everyの場合は論理積なので全部true出ないとfalseになる。

一つでもtrueならOKの場合はsomeを利用する。

computers.some(function(computer) {
  return computer.ram >= 16;
});
-> true

f:id:lhiroki1205:20200222202848p:plain