JavaScriptのarray(配列)をいい感じにするメソッド

forEach

for文を簡単に書けるようになったやる

let posts = [
     { id: 23, title: 'JSニュース' },
      { id: 52, title: 'リファクター・シティ' },
      { id: 105, title: 'Rubyの良いところ' }
];


console.log(posts.forEach(post))

計算して配列に入れる

var images = [
  { height: 10, width: 30 },
  { height: 20, width: 90 },
  { height: 54, width: 32 }
];

var areas = []

images.forEach(function(image) {
	areas.push(image.height * image.width);
})


console.log(areas)

map

pushしないで格納する

オブジェクトの配列から興味のある値だけを引き抜く

var images = [
  { height: '34px', width: '39px' },
  { height: '54px', width: '19px' },
  { height: '83px', width: '75px' },
];

var heights = images.map(function(image){
	return image.height;
})

console.log(heights)

mapで演算

var trips = [
  { distance: 34, time: 10 },
  { distance: 90, time: 50 },
  { distance: 59, time: 25 }
];

var speeds = trips.map(function(trip){
	return trip.distance / trip.time;	
})

console.log(speeds)

pluckの実装

object['foo']みたいな

function pluck(array, property) {
  return array.map(function(element) {
  	return element[property];
   })
}

var colorObjects = [{ color: '赤' }, { color: '青' }, { color: '黄色' }];

var colorNames = pluck(colorObjects, 'color');


console.log(colorNames)

filter

条件でtrueだったら配列に入れる

値の条件付き絞り込み

var numbers = [15, 25, 35, 45, 55, 65, 75, 85, 95];

var filteredNumbers =  numbers.filter(function(number) {
		return number > 50;
})

console.log(filteredNumbers);

var users = [
 { id: 1, admin: true },  
 { id: 2, admin: false },
 { id: 3, admin: false },
 { id: 4, admin: false },
 { id: 5, admin: true },
];

var filteredUsers = users.filter(function(user) {
	return user.admin === true;
})

console.log(filteredUsers);

rejectを実装

falseだったら格納するようにする(それ以外を格納する)

function reject(array, iteratorFunction) {
  return array.filter((element) => {
      return !iteratorFunction(element);
  });
}

var numbers = [10, 20, 30];
var lessThanFifteen = reject(numbers, function(number){
 return number > 15; // この条件以外を格納したい
});

console.log(lessThanFifteen);

find

特定のデータを1つ見つける

注意は最初のtrueになった1件目だけを返す

真偽値がtrueのものを探す

var users = [
  { id: 1, admin: false },
  { id: 2, admin: false },
  { id: 3, admin: true }
];

var admin = users.find(function(user) {
	return user.admin
})

console.log(admin)

特定の条件のものを探す

var accounts = [
  { balance: -10 },
  { balance: 12 },
  { balance: 0 }
];

var account = accounts.find(function(account) {
	return account.balance === 12;
})

console.log(account);

findWhere関数

あるオブジェクトのプロパティがある値をもっているかどうかを探す
height: 20 を探す

function findWhere(array, criteria) {
  return array.find(function(element) {
    var property = Object.keys(criteria); // プロパティがheightであることを伝える
    console.log(element[property]) // laddesのheightの情報
    console.log(criteria[property]) // プロパティのheightのものの情報
  	return element[property] === criteria[property]
  })
}


var ladders = [
 { id: 1, height: 20 },
 { id: 3, height: 25 }
];
 
console.log(findWhere(ladders, { height: 25 }))

アンケートが全員回答済みか

var users = [
  { id: 21, hasSubmitted: true },
  { id: 62, hasSubmitted: false },
  { id: 4, hasSubmitted: true }
];

var hasSubmitted = users.every(function(user) {
	return user. hasSubmitted
})

console.log(hasSubmitted)

every

真偽値を返す
すべてのデータが条件をtrueである
フォームのバリデーションがすべてのinputで満たしてしるかなどのチェックに使える

一つでも条件を満たさないとfalseを返す

true && false && true = false 

すべて条件を満たすとtrueを返す

some

真偽値を返す
一部のデータが条件をtrueである

一つでも条件を満たすとtrueを返す

true || false || true = true

すべて条件を満たさないとfalseを返す

通信中のリクエストの確認

ひとつでも条件を満たせばtrue

var requests = [
  { url: '/photos', status: 'complete' },
  { url: '/albums', status: 'pending' },
  { url: '/users', status: 'failed' }
];

var inProgress = requests.some(function(request) {
	return request.status === 'pending'
})

console.log(inProgress)

reduce

合計を求める
第二引数に初期値を持つ

初期値が0で合計を求める

var trips = [{ distance: 34 }, { distance: 12 } , { distance: 1 }];

var totalDistance = trips.reduce(function(sum, trip) {
  return trip.distance + sum;
}, 0)

console.log(totalDistance)

初期値がオブジェクト

var desks = [
  { type: 'sitting' },
  { type: 'standing' },
  { type: 'sitting' },
  { type: 'sitting' },
  { type: 'standing' }
];

var deskTypes = desks.reduce(function(prev, desk) {
  console.log(desk.type);
	if (desk.type === "sitting") {
  	prev.sitting += 1
  }
  
  if (desk.type === 'standing') {
  	prev.standing += 1
  }

   return prev;
}, { sitting: 0, standing: 0 });

console.log(deskTypes);

unique関数のかわり

重複したデータを纏める

function unique(array) {
   return [...new Set(array)];
}


var numbers = [1, 1, 2, 3, 4, 4];

console.log(unique(numbers))