はじめに
最近JavaScriptを書くことが増えた。個人的に使ったものを整理する。
随時更新予定。
forEach
配列の取り出し。
indexとarrayは省略可能。
.js
const lang = ['JavaScript', 'Python', 'Ruby']
lang.forEach((item, index, array) => {
console.log(item, index)
// JavaScript 0
// Python 1
// Ruby 2
})
filter
条件にあうもの抽出して新しい配列を作成。
.js
const number = [10, 20, 30, 40, 50]
cont new_number = number.filter((item, index, array) => {
return item > 30
})
console.log(new_number)
// [40, 50]
map
処理をして新しい配列を作成。
.js
const number = [10, 20, 30, 40, 50]
const new_number = number.map((item, index, array) => {
return item + 1
})
console.log(new_number)
// [11, 21, 31, 41, 51]
reduce
元となる配列の累積した単一の値を返す。
.js
const number = [1, 2, 3, 4, 5]
const result = number.reduce((previous, current, index, array) {
return previous + current
})
console.log(result)
// 15
// 1回目
// previous = 1, current = 2
// 累積値: 3
// 2回目
// previous = 3（累積値）, current = 3
// 累積値: 6
// 3回目
// previous = 6（累積値）, current = 4
// 累積値: 10
// 4回目
// previous = 10（累積値）, current = 5
// 累積値: 15
少々癖のある挙動をするが最大値を取得する時等に便利。
.js
const number = [1, 2, 3, 4, 5]
const maxNumber = number.reduce((a, b) => {
return a > b ? a : b
})
console.log(maxNumber)
// 5
slice
第一引数に指定してたインデックスの位置から、第二引数に指定したインデックスの直前までの要素を取り出して、取り出した要素を配列として返す。
.js
const number = [1, 2, 3, 4, 5]
new_number = number.slice(1, 4)
console.log(new_number)
// [2, 3, 4]
// 2番目から5番目未満の要素を取り出す
console.log(number)
[1, 2, 3, 4, 5]
// 元の配列は変化しない
new_number2 = number.slice()
console.log(new_number2)
// [1, 2, 3, 4, 5]
// 元の配列は変化しないので配列のコピーにも使える
splice
配列の任意の場所の要素を削除して、削除された要素を取りだす。
.js
const number = [1, 2, 3, 4, 5]
const new_number = number.splice(3)
console.log(new_number)
// [4, 5]
// 4番目から最後までの要素を削除
console.log(number)
// [1, 2, 3]
// 元の配列自身も変化する
const number2 = [1, 2, 3, 4, 5]
const new_number2 = number2.splice(1, 3)
console.log(new_number2)
// [2, 3, 4]
// 2番目から3つの要素を削除
console.log(number2)
// [1, 5]
const number3 = [1, 2, 3, 4, 5]
cosnt new_number3 = number3.splice(2, 2, 6)
console.log(new_number3)
// [3 ,4]
// 3番目から2つの要素を削除
console.log(number3)
// [1, 2, 6, 5]
find
指定した関数を満たす、配列中の要素の値を返す。当てはまらない場合はundefinedを返す。
.js
const cityList = [
{ name: '東京', value: 1 },
{ name: '神奈川', value: 2 },
{ name: '群馬', value: 3 },
{ name: '埼玉', value: 4 }
]
const targetCity = cityList.find(city => {
return city.name === '群馬'
})
console.log(targetCity)
// { name: '群馬', value: 3 }
const targetCity2 = cityList.find(city => {
return city.value > 0
})
console.log(targetCity2)
// { name: '東京', value: 1 }
// 関数を満たす要素が複数ある場合は、最初に合致した要素を返す。
findIndex
指定した関数を満たす、配列中の要素のインデックスを返す。当てはまらない場合は-1を返す。
.js
const number = [1, 2, 3, 4, 5]
new_number = number.findIndex((item, index, array) => {
return item * 3 > 9
})
console.log(new_number)
// 3
shift
配列の先頭の要素を削除する。
.js
const words = ['a', 'b', 'c']
new_words = words.shift()
console.log(new_words)
// a
console.log(words)
// ['b', 'c']
unshift
配列の先頭に要素を追加する。
.js
const words = ['a', 'b', 'c']
new_words = words.unShift('d')
console.log(new_words)
// 4
console.log(words)
// ['d', 'a', 'b', 'c']
every
全ての条件を満たすか判定する。
.js
const number = [1, 2, 3, 4, 5]
const judgment = number.every((item, index, array) => {
return item > 3
})
console.log(judgment)
// false
some
一つでも条件を満たすものがあるか判定する。
.js
const number = [1, 2, 3, 4, 5]
const judgment = number.some((item, index, array) => {
return item >= 5
})
console.log(judgment)
// true
sort
引数の関数に基づいた並び順で配列をソートする。引数に何も指定しない場合はアルファベット順にソートする。
.js
const number = [3, 4, 2, 5,1]
const asc = number.sort((a, b) => {
return a - b
})
console.log(asc)
// [1, 2, 3, 4, 5] （昇順）
const desc = number.sort((a, b) => {
return b - a
})
// [5, 4, 3, 2, 1] （降順）
indexOf
前方方向から一致する要素のインデックスを検索する。一致するものがない場合は-1を返す。
.js
const number = [1, 2, 3, 4, 5]
const target = number.indexOf(4)
console.log(target)
// 3
console.log(number)
const target2 = number.indexOf(5, 2)
console.log(target2)
// 4
// 3番目以降で5と一致するものを検索