配列の操作 (Array)

参考:

JavaScript の配列の使い方まとめ。要素の追加, 結合, 取得, 削除。- Qiita

ES6 でよく使う、配列の中身を操作・検索する関数 – Qiita

配列の操作まとめ (要素の追加、削除他) | Web備忘録

JavaScript の Array (配列) について | 酒と涙とRubyとRailsと

JavaScript の Array の機能が思ったよりたくさんあった件について – Qiita

初期化

参考:

new Array() と [] の違い – Qiita

連結

push 関数が複数の要素を引数に取れることから、スプレッド演算子を使って配列を連結できる。

array1.push(...array2)

参考:

配列の連結 (concat vs Array.prototype.push.apply) – Qiita

ES6 での配列の連結 (破壊的) – Qiita

ES6 で配列同士の結合 – Qiita

concat

参考:

JavaScript で concat はもう使うべきではないのかもしれない | Kanasansoft Web Lab.

Array.prototype.concat() | MDN

length

length プロパティは配列の要素数を設定、または取得する。値は符号なし 32bit の整数で、常に配列内インデックスの最大値よりも大きな数値となっている。

[1, 2, 3].length
// => 3

参考:

Array.length | MDN

length プロパティ | JavaScript 入門 (www.ajaxtower.jp)

forEach

配列の要素、添え字、配列自身を引数として取るコールバック関数で繰り返し処理を行う。

arr.forEach(function callback (currentValue[, index[, array]]) {
  // your iterator
}[, thisArg])

thisArgcallback 内で 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)
}

参考:

for…of | MDN

push

const array1 = [1, 2, 3]
const array2 = [4, 5, 6]
array1.push(...array2)

参考:

Array.prototype.push() | MDN

.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)

Array.prototype.pop() | MDN

Array.prototype.shift() | MDN

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) までを取り出します。

参考:

Array.prototype.slice() | MDN

splice

参考:

Array.prototype.splice() | MDN

join

join() メソッドは、配列のすべての要素を繋いで文字列にします。

str = arr.join([separator = ','])

参考:

Array.prototype.join() | MDN

map

map() メソッドは、与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
  // 新しい配列の要素を返す
}[, thisArg])

参考:

Array.prototype.map() | MDN

JavaScript で forEach, filter, map, reduce とか – Qiita

reduce

参考:

reduce – Qiita

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

配列から特定の要素を削除する (訂正有り) – Qiita

find / findIndex

参考:

配列から条件に合うものは find() で見つけよう。| Ginpen.com

Array.prototype.find() | MDN

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

Array.prototype.some() | MDN

Array.prototype.every() | MDN

スプレッド演算子/スプレッド構文 (…)

参考:

スプレッド構文 | MDN

分割代入

参考:

分割代入 | MDN

最小値/最大値

参考:

Math.max で配列中の最大値を取得する – Qiita

javascript で、配列の最大値のキーを取得するコードの書き方を教… – 人力検索はてな

配列の中の最大値を取得する (NaN, null 対応) – Qiita

配列の値の中から、最大値、最小値を求める (配列を引数に展開する) | at softelメモ

Math.min() | MDN

Math.max() | MDN

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 ]

参考:

js で range 関数をつくる – Qiita

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

Clone an array | w3resource

Array.from() | MDN

Fastest way to duplicate an array in JavaScript – slice vs. ‘for’ loop – Stack Overflow

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

Protected by reCAPTCHA