配列の操作 (Array)
参考:
JavaScript の配列の使い方まとめ。要素の追加, 結合, 取得, 削除。- Qiita
ES6 でよく使う、配列の中身を操作・検索する関数 – Qiita
JavaScript の Array (配列) について | 酒と涙とRubyとRailsと
JavaScript の Array の機能が思ったよりたくさんあった件について – Qiita
初期化
参考:
連結
push
関数が複数の要素を引数に取れることから、スプレッド演算子を使って配列を連結できる。
array1.push(...array2)
参考:
配列の連結 (concat vs Array.prototype.push.apply) – Qiita
concat
参考:
JavaScript で concat はもう使うべきではないのかもしれない | Kanasansoft Web Lab.
Array.prototype.concat() | MDN
length
length プロパティは配列の要素数を設定、または取得する。値は符号なし 32bit の整数で、常に配列内インデックスの最大値よりも大きな数値となっている。
[1, 2, 3].length // => 3
参考:
length プロパティ | JavaScript 入門 (www.ajaxtower.jp)
forEach
配列の要素、添え字、配列自身を引数として取るコールバック関数で繰り返し処理を行う。
arr.forEach(function callback (currentValue[, index[, array]]) { // your iterator }[, thisArg])
thisArg
:callback
内で this
として使用するオブジェクト
参考:
JavaScript の色々な for 文 for・for-each・for-in・for-of | いつ俺 (www.ituore.com)
JavaScript で配列やオブジェクトをループする良い方法を真剣に検討してみた – Qiita
JavaScript で forEach を使うのは最終手段 – Qiita
JavaScript の Array.forEach を break、continue、return させたい | Deep Rain
javascript の forEach 内で処理を止めるには? break の代わりになるコード | PisukeCode
Array.prototype.forEach() | MDN
for … of 文
for
文の ()
内で let ... of ...
もしくは const ... of ...
が使える。
const array = [10, 20, 30] for (let item of array) { console.log(item) }
参考:
push
const array1 = [1, 2, 3] const array2 = [4, 5, 6] array1.push(...array2)
参考:
.push() | JavaScript 日本語リファレンス (js STUDIO)
JavaScript で配列に要素を追加する方法 | SYNCER
pop / shift
参考:
shift()とpop() | uyan39’s diary
unshift, shift, pop, push が混乱するので、絵で整理した | maeharin の日記
配列から特定の要素を取り出す (splice, findIndex, pop, shift) | Web 備忘録
.pop() | JavaScript 日本語リファレンス (js STUDIO)
.shift() | JavaScript 日本語リファレンス (js STUDIO)
to remove first and last element in array – Stack Overflow
for Loop vs. Array shift – Stack Overflow
slice
配列の一部を取り出して新しい配列を返します。
arr.slice([begin[, end]])
begin: どこから取り出すかを示す 0 から始まる添字。
end: どこまで取り出すかを示す 0 から始まる添字。slice は end 自体は含めず、その直前まで取り出します。
end は負の値を使って、配列の終わりからのオフセットとして指定することもできます。end に -1 を指定すると、最後から 2 番目の要素まで取り出します。
end が省略された場合、slice は配列の最後 (arr.length) までを取り出します。
参考:
splice
参考:
Array.prototype.splice() | MDN
join
join() メソッドは、配列のすべての要素を繋いで文字列にします。
str = arr.join([separator = ','])
参考:
map
map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。
var new_array = arr.map(function callback(currentValue[, index[, array]]) { // 新しい配列の要素を返す }[, thisArg])
参考:
JavaScript で forEach, filter, map, reduce とか – Qiita
reduce
参考:
JavaScript で forEach, filter, map, reduce とか – Qiita
配列 (Array) の合計値, 平均値, 中央値をモダンに求める – Qiita
reduce 関数を使用して合計を求める | MSeeeeN
.reduce() | JavaScript 日本語リファレンス | js STUDIO
Array.prototype.reduce() | MDN
filter
参考:
Array.prototype.filter() | MDN
.filter() | JavaScript 日本語リファレンス | js STUDIO
Javascript で filter の書き方のメモ | 牌語備忘録 pygo
要素の削除
filter を使って新しい配列を作成する
const newArray = array.filter(val => val != 'hoge')
参考:
Javascript で指定した配列の要素を削除する – Qiita
find / findIndex
参考:
配列から条件に合うものは find() で見つけよう。| Ginpen.com
Array.prototype.findIndex() | MDN
includes
参考:
JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い – Qiita
Array.prototype.includes() | MDN
some / every
参考:
JavaScript の some と every がすごく便利 – Qiita
JavaScript の Array.some と Array.includes の使い分け、値・参照型の動作の違い – Qiita
Array.forEach で break 出来ないぐぬぬってなったら Array.some – Qiita
スプレッド演算子/スプレッド構文 (…)
参考:
分割代入
参考:
最小値/最大値
参考:
Math.max で配列中の最大値を取得する – Qiita
javascript で、配列の最大値のキーを取得するコードの書き方を教… – 人力検索はてな
配列の中の最大値を取得する (NaN, null 対応) – Qiita
配列の値の中から、最大値、最小値を求める (配列を引数に展開する) | at softelメモ
Smallest number in array and it position – Stack Overflow
Return index of greatest value in an array – Stack Overflow
Get max and min value from array in JavaScript – Stack Overflow
Find the min/max element of an Array in JavaScript – Stack Overflow
indexOf
参考:
Array.prototype.indexOf() | MDN
範囲を指定して配列を作成する
指定した長さを持つ 0 から始まる配列を作成する。
([...Array(5).keys()]) // => [ 0, 1, 2, 3, 4 ]
指定した回数コールバックを呼んで配列を作成する。
([...Array(5)]).map((_, i) => create_an_element(i))
Underscore.js の range
関数を使う。
_.range(1, 6) // => [ 1, 2, 3, 4, 5 ]
参考:
Javascript で Ruby の Range#to_a のような配列を返す方法 | rochefort’s blog
配列を判定する
Array.isArray()
を使う。
array = [1, 2, 3] Array.isArray(array) // => true
参考:
JavaScript で配列を判定する正しいやり方 – Qiita
つい忘れてしまう、配列かオブジェクトかの判定方法 – Qiita
Javascript で Array と Object をきちんと判定する – Qiita
配列の一致を判定する
参考:
配列の比較を行う方法 (equals 相当/Array 型の等価判定) | MaryCore
配列をコピーする
コピーされない方法 (参照)
const array = [1, 2, 3] const ref = array
シャローコピー (浅いコピー)
const array = [1, 2, 3] const shallow = Array.form(array)
ディープコピー (深いコピー/完全なコピー)
const array = [{ a: 1, b: 2 }, { c: 3, d: 4 }] const deep = JSON.parse(JSON.stringify(array))
参考:
javascript での配列のコピーの方法 – Qiita
JavaScript で配列のコピー (値渡し) – Qiita
JavaScript で配列をコピーする “本当に” 正しい方法 | PisukeCode
JavaScript でディープコピーを実現するための最もシンプルな方法 | Deep Rain
ES6 Way To Clone An Array | SamanthaMing.com
How to clone an array in JavaScript | freeCodeCamp
JavaScript Clone Array | David Walsh Blog
Fastest way to duplicate an array in JavaScript – slice vs. ‘for’ loop – Stack Overflow