JavaScript~配列の操作~その２ #JavaScript

はじめに

JavaScriptでの配列の操作
filter,map,reduce,joinについて
この4つは、全て非破壊的(元の配列は変更しない)メソッド

使用する配列

const users = [
  { name: "A", age: 23, country: "ja" },
  { name: "J", age: 27, country: "usa" },
  { name: "R", age: 64, country: "usa" },
  { name: "Y", age: 48, country: "ja" },
  { name: "B", age: 33, country: "ja" },
]

※これ以外の配列を使う場合はコード内に記載

filter (配列内から一致するものを配列で返す)

const countryFilter = users.filter(user => user.country === "usa")
console.log(countryFilter)
/*
[
  { name: 'J', age: 27, country: 'usa' },
  { name: 'R', age: 64, country: 'usa' }
]
 */


const ageFilter = users.filter((user) => {
  if (user.age > 30) {//ageが30より大きい
    return user
  }
})
console.log(ageFilter)
/*
[
  { name: 'R', age: 64, country: 'usa' },
  { name: 'Y', age: 48, country: 'ja' },
  { name: 'B', age: 33, country: 'ja' }
]
 */

第一引数に配列要素、第二引数にmapと同様にインデックスが取れる

map (元の配列から新しい配列を作ったり、変更を加えたり)

const nameMap = users.map(user => user.name)//nameだけの配列を作る
console.log(nameMap)//[ 'A', 'J', 'R', 'Y', 'B' ]

const ageMap = users.map(user => user.age)//ageだけの配列を作る
console.log(ageMap)//[ 23, 27, 64, 48, 33 ]

const countryMap = users.map(user => user.country.toUpperCase())//大文字に変換
console.log(countryMap)// [ 'JA', 'USA', 'USA', 'JA', 'JA' ]

const ageAddintion = ageMap.map(age => age + 10)//ageに10足す
console.log(ageAddintion)//[ 33, 37, 74, 58, 43 ]

//変更を加えた配列を合わせて新しい配列を作る
const nameAndAge = nameMap.map((name, i) => ({name: name, age: ageAddintion[i], country: countryMap[i]}))
console.log(nameAndAge)
/*
[
  { name: 'A', age: 33, country: 'JA' },
  { name: 'J', age: 37, country: 'USA' },
  { name: 'R', age: 74, country: 'USA' },
  { name: 'Y', age: 58, country: 'JA' },
  { name: 'B', age: 43, country: 'JA' }
]
*/
console.log(users)//元の配列はそのまま
/*
[
  { name: 'A', age: 23, country: 'ja' },
  { name: 'J', age: 27, country: 'usa' },
  { name: 'R', age: 64, country: 'usa' },
  { name: 'Y', age: 48, country: 'ja' },
  { name: 'B', age: 33, country: 'ja' }
]
*/

長さの違う配列をいれると

const test = [ 33, 37, 74, 58, 43, 21, 40 ]//21, 40を増やした

const sample1 = nameMap.map((name, i) => ({name: name, age: test[i], country: countryMap[i]}))//age部分を変える
console.log(sample1)//nameMapの長さが基準になるので増やした二つは表示されない
/*
[
  { name: 'A', age: 33, country: 'JA' },
  { name: 'J', age: 37, country: 'USA' },
  { name: 'R', age: 74, country: 'USA' },
  { name: 'Y', age: 58, country: 'JA' },
  { name: 'B', age: 43, country: 'JA' }
]
*/
//testを基準にすると
const sample2 = test.map((test, i) => ({name: nameMap[i], age: test, country: countryMap[i]}))
console.log(sample2)
/*
[
  { name: 'A', age: 33, country: 'JA' },
  { name: 'J', age: 37, country: 'USA' },
  { name: 'R', age: 74, country: 'USA' },
  { name: 'Y', age: 58, country: 'JA' },
  { name: 'B', age: 43, country: 'JA' },
  { name: undefined, age: 21, country: undefined },
  { name: undefined, age: 40, country: undefined }
]
*/
//[5][6]にname, countryの値はないのでundefinedになる

第一引数に配列要素、第二引数にインデックスが取れる、第三引数には配列そのものが入る

reduce (配列内を合計したりとか)


const numbers = [3, 7, 1, 8, 15]
const sum1 = numbers.reduce((a, num) => a + num, 0)//aの初期値は0
console.log(sum1)//34

//第一引数が初期値になりnum, 0としている部分の0がaに入る事になる
const sum2 = numbers.reduce((a, num) => a + num, 100)//aの初期値は100
console.log(sum2)//134

//初期値が0などの場合省略できる
const sum3 = numbers.reduce((a, num) => a + num)//aの初期値は配列の[0]の3になり、そこに順番に足していくイメージ
console.log(sum3)//34

const hello = ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"]//この様な文字列の配列も一つの値にできる
const world = hello.reduce((a, b) => a + b)
console.log(world)//HelloWorld

イメージとしては

let a = 0
    a += 3//0 + 3
    a += 7//3 + 7
    a += 1//10 + 1
    a += 8//11 + 8
    a += 15//19 + 15
console.log(a)//34

join (配列内の文字列を一つの文字列にまとめる)


const hello = ["H", "e", "l", "l", "o", "W", "o", "r", "l", "d"]//この様な文字列の配列も一つの値にできる
const world = hello.join()
console.log(world)//H,e,l,l,o,W,o,r,l,d

第一引数はセパレータで、デフォルトは,
文字列同士の間になにを入れるか指定できる


const world1 = hello.join("-")//-で区切る
console.log(world1)//H-e-l-l-o-W-o-r-l-d

const world2 = hello.join("")//空文字
console.log(world2)//HelloWorld

以上です！