0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Javascriptの配列操作

Posted at

Javascriptの配列まわりの関数や構文を抜粋してみました。

##スプレッド構文
配列(正確にはIterableな値全般)を展開します。
単に展開したいときはもちろん、配列のコピーを作れるため配列を直接変更するメソッドも配列を変更せずに利用できます。
配列を結合するArray.prototype.concatの代わりにもなります。

const newarray = [value1, ...array, value2];
const copyarray = [...array];

##Array
コンストラクタです。特定の長さの配列が作れます。
スプレッド構文かArray.prototype.fillなどで初期化しないと、Array.prototype.mapが動かないので注意が必要です。

const newarray = Array(8);

##Array.prototype.fill
全要素を指定した値で埋めます。直接変更されます。
開始位置と終了位置は省略可能で、省略して場合は先頭から末尾までです。

const newarray = [...array].fill( value, start, end );

##Array.prototype.reverse
配列の順序を反転させます。直接変更されます。

const reversed = [...array].reverse();

##Array.prototype.find / Array.prototype.findIndex
条件を満たす要素、あるいはその要素のindexを返します。
どちらも先頭から走査して、最初に条件を満たした要素について処理します。

const value = array.find( (element, index, array) => boolean );
const index = array.findIndex( (element, index, array) => boolean );

##Array.prototype.filter
findに似ています。条件を満たす全ての要素からなる新しい配列を返します。

const newarray = array.filter( (element, index, array) => boolean );

##Array.prototype.join
String.prototype.splitと対になるようなメソッドです。
全要素を連結した1つの文字列にします。
区切り文字が指定でき、省略した場合は「,」(カンマ)になります。
空文字を指定することで区切り文字無しで連結することができます。

const text = array.join(separator);

##String.prototype.split
Array.prototype.joinと対になるようなメソッドです。
区切り文字を省略した場合、または文字列中に区切り文字が見つからなかった場合は分割せずに1要素の配列を返します。
空文字を指定した場合は1文字ずつに分割されますが、サロゲートペアも分割してしまうので、絵文字などが含まれる場合は注意が必要です。
また、分割限界数を指定することができます。省略した場合は無制限です。

const array = string.split(separator, limit);

##Array.prototype.map
全要素を変換して新しい配列を返します。

const newarray = array.map( (element, index, array) => value );

##Array.prototype.reduce
全要素を変換して新しいを返します
他のメソッドの実質的な上位互換で、なんでもできます。

const newvalue = array.reduce( (accumulator, element, index, array) => newaccumulator, initialvalue );

#おわりに
今回の投稿はreduce()の用途がわからなかったので、他のメソッドを調べて比較したのがきっかけです。
自分がよく使うものを中心にまとめたので、網羅はできてないかもしれませんが、みなさんの助けになれば幸いです。

#参考
Array - JavaScript | MDN
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array

困ったらね、MDN見たらいいんですよ。:sunglasses:

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?