[JavaScript] 配列とオブジェクトを扱うメソッド

配列とオブジェクトを扱うメソッドのうち，よく扱うものについてまとめる．

#配列を扱うメソッド
##配列の要素を追加/削除するメソッド
###push / popメソッド
配列末尾の要素の追加/削除を行う．
###unshift / shiftメソッド
配列先頭の要素の追加/削除を行う．
###splice(idx,n)メソッド
配列内の指定のインデックスidxからn個の要素を削除する.

let arr1=['a', 'b', 'c']
arr1.push('d') // ['a', 'b', 'c', 'd']
arr1.pop() // ['a', 'b', 'c']

arr1.unshift('A') //['A', 'a', 'b', 'c']
arr1.shift() //['a', 'b', 'c']

arr1.splice(1, 2) ///['a']

##新しい配列を生成するメソッド群
###map()メソッド・filter()メソッド
mapメソッドは，引数で与えられた関数を全ての要素に対して呼び出し，その結果から新しい配列を生成する．

filterメソッドは，引数で与えられたテスト関数を全ての要素に対して実行し，それに合格した要素からなる新しい配列を生成する．

const arr = [1,2,3,4,5]
const arr2 = arr.map( x => x*10 )
//[10,20,30,40,50]
const arr3 = arr.filter( x => x%2 !== 0)
//[1,3,5]

###slice(begin,end)メソッド
sliceメソッドは，beginからendまで選択された配列の一部をコピーした新しい配列を返す．
※endは含まれない！

const arr = ['a','b','c','d','e']
console.log(arr.slice(2,4))
///['c','d']
console.log(arr.slice(2)
///['c','d','e']

###concat()メソッド
concatメソッドは，配列に他の配列や値をつないでできた新しい配列を返す．

const arr1 = [1,2,3]
const arr2 = [4,5,6]
const arr3 = arr1.concat(arr2)
console.log(arr3)
//[1,2,3,4,5,6]

##要素をテストするメソッド群
###includes()メソッド
includesメソッドは，引数で指定した要素が配列内に存在するかをboolean型で返す．

const arr = ['a','b','c']
console.log(arr.includes('a')) //true
console.log(arr.includes('d')) //false

###every（）メソッドとsome()メソッド
everyメソッドは，引数で渡されるテスト関数を全ての要素が満たす場合にtrueを，少なくとも一つの要素が満たさない場合にはfalseを返す．

someメソッドは，引数で渡されるテスト関数を満たす要素が少なくとも一つ存在する場合にtrueを，どれも満たさない場合にはfalseを返す．

const arr=[1,2,3,4,5]
console.log(arr.every( x => x%2===0 ))
//false
console.log(arr.some( x => x%2===0 ))
//true

##繰り返し処理するメソッド群
##forEach()メソッド
forEachメソッドは，引数に与えられた関数を各要素に対して実行する．

const arr = ['a','b','c']
arr.forEach( x => console.log(x) )
///a  b  c

###for...of文
for...of文は，配列の各要素に対して反復的な処理をするループを形成する．
※string型に対しても使用可能

const arr = ['a','b','c']
for (const i of arr) {
  console.log(i);
}
//a  b  c

const str = 'efg'
for (const i of str) {
  console.log(i);
}
//e  f  g

##要素の重複を排除するオブジェクト群
###Setオブジェクト
引数としてSetオブジェクトに配列を渡すことで，配列の重複を排除したSetオブジェクトを生成する．

const arr = [1,2,2,2,3,4,5,5]
const set = new Set(arr)
console.log(set)
//Set(5){1,2,3,4,5}

Setオブジェクトは，配列に対して利用できるメソッド群は使用できないため，利用するためには再度配列に戻す必要がある．
配列に戻す方法としてはArray.fromを利用する方法とスプレッド構文を利用する方法とがある．
スプレッド構文：...fooの形で記述され，配列やオブジェクトの要素を展開する構文．

const setToArr1 = Array.from(set)
console.log(setToArr1)
//[1,2,3,4,5]

const setToArr2 = [...set]
console.log(setToArr2)
//[1,2,3,4,5]

###Mapオブジェクトとmap()メソッド
Setオブジェクトは，distinctしたい対象がオブジェクトである場合，たとえ内容が同じであっても別物として認識されるため重複の排除を行うことができない．

そこで用いると良いのがMapオブジェクトとmapメソッドである．

const arr = [{id:1},{id:2},{id:2},{id:3}]
const map = new Map(arr.map( x => [x.id,x] ))
console.log(map)
//Map{1 => {id:1}, 2 => {id:2}, 3 => {id:3}}という形のオブジェクトで返ってくる

このとき，new Map(arr.map( x => [x.id,x] ))におけるx.idをキーに重複を排除する．
そのため下記の例のように，オブジェクトの中身が完全に一致していなくとも，キーが重複していれば排除される．

const arr2 = [
  {id:1, name:'Taro'},
  {id:2, name:'Sho'},
  {id:2, name:'Kosuke'},
  {id:3, name:'Yuki'},
]
const map2 = new Map(arr2.map( x => [x.id,x] ))
console.log(map2)
//Map{1 => {id:1}, 2 => {id:2}, 3 => {id:3}}

上記の場合にはキーに双方の文字列を連結したものを指定することで対応可能．

const map3 = new Map(arr3.map( x => [`${x.id}${x.name}`,x] ))
console.log(map3)
//Map{'1Taro' => {id:1, name:'Taro'}, '2Sho' => {id:2, name:'Sho'}, '2Kosuke' => {id:2 ,name:'Kosuke',}, '3Yuki' => {id:3,name:'Yuki'}}

Mapオブジェクトから配列への変換は以下．

Array.from(map.values())

参照：【JavaScript】Arrayの重複を排除する最もシンプルな方法

#オブジェクトを扱う文
##繰り返し処理するメソッド群
###for...in文
for...in文は，指定したオブジェクトの各プロパティに対して反復処理を実行する．

const obj = {1:'a', 2:'b', 3:'c'}
for(const i in obj) {
  console.log(`${i}:${obj[i]}`}
}
//"1:a" "2;b" "3:c"