LoginSignup
8

More than 3 years have passed since last update.

posted at

updated at

JavaScript Arrayオブジェクトをまとめたよ

なんとなく使っていたArrayオブジェクトをまとめてみました。

Arrayオブジェクト

基本

メンバー 概要
1 length 配列のサイズ
2 isArray(obj) 指定したオブジェクトが配列であるか
3 toString() 「要素、要素」の形式で文字列に変換
4 toLocaleString() 配列を文字列に変換(区切り文字はロケールによって変化)
5 indexOf(elm[,index]) 指定した要素に合致した最初の要素のキーを取得(indexは検索開始位置)
6 lastIndexOf(elm[,index]) 指定した要素に合致した最後の要素のキーを取得(indexは検索開始位置)
7 Object.entries() *ES6 すべてのキー/値を取得
8 Object.keys() *ES6 すべてのキーを取得
9 Object.values() *ES6 すべての値を取得

code

script.js
var ary1 = ["夏目","太宰","三島","芥川","谷崎","太宰"];

// 1 length  配列のサイズ 
console.log(ary1.length);//5


// 2 isArray(obj) 指定したオブジェクトが配列であるか
console.log(Array.isArray(ary1));//true


// 3 toString ()  「要素、要素」の形式で文字列に変換
console.log(ary1.toString());//夏目,太宰,三島,芥川,谷崎,太宰


// 5 indexOf(elm[,index])  指定した要素に合致した最初の要素のキーを取得(indexは検索開始位置) 
console.log(ary1.indexOf('太宰'));//1


// 6 lastIndexOf(elm[,index]) 指定した要素に合致した最後の要素のキーを取得(indexは検索開始位置)
console.log(ary1.lastIndexOf('太宰'));//5


// 7 Object.entries() *ES6 すべてのキー/値を取得
console.log(Object.entries(ary1));//[Array(2), Array(2), Array(2), Array(2), Array(2), Array(2)];


// 8 Object.keys() *ES6  すべてのキーを取得
console.log(Object.keys(ary1));//["0", "1", "2", "3", "4", "5"]


// 9 Object.values() *ES6 すべての値を取得
console.log(Object.values(ary1));//["夏目", "太宰", "三島", "芥川", "谷崎", "太宰"]

*toLocaleString()は長くなるので下記リンクを参照
JavaScriptのtoLocaleStringメソッドについて調べてみた

加工

メンバー 概要
1 concat(array) 指定配列を現在の配列に連結
2 join(del) 配列内の要素を区切り文字delで連結
3 slice(start[,end]) start+1~end番目の要素の抜き出し
4 splice(start,cnt[,rep[,...]) 配列内のstart+1~start+cnt番目の要素をrepで置き換え
5 from(arrayLike[, mapFn[, thisArg]]) *ES6 配列ライクなオブジェクト、列挙可能なオブジェクトを配列に変換
6 of(e1,...) *ES6 可変長引数を配列に変換(静的メソッド) *ES6
7 copyWithin(target,start[,end]) *ES6 start+1~end番目の要素をtarget+1番目からの位置にコピー(要素数は変わらない)
8 fill(val[,start[,end]]) *ES6 配列内のstart+1~end番目の要素をvalで置き換え

code

script.js
var ary1 = ["夏目","太宰","三島","芥川","谷崎","太宰"];
var ary2 = ["漱石","","由紀夫","龍之介","潤一郎",""];

// 1 concat(array)  指定配列を現在の配列に連結 
console.log(ary1.concat(ary2));//["夏目", "太宰", "三島", "芥川", "谷崎", "太宰", "漱石", "治", "由紀夫", "龍之介", "潤一郎", "治"]


// 2 join(del) 配列内の要素を区切り文字delで連結
console.log(ary1.join('&'));//夏目&太宰&三島&芥川&谷崎&太宰


// 3 slice(start[,end]) start+1~end番目の要素の抜き出し
console.log(ary1.slice(2));//["三島", "芥川", "谷崎", "太宰"]
console.log(ary1.slice(2,3));//["三島"]


// 4 splice(start,cnt[,rep[,...])|配列内のstart+1~start+cnt番目の要素で置き換え
console.log(ary1.splice(1,2,"","川端"));//["太宰", "三島"](置き換え対象の要素を取得)
console.log(ary1));//["夏目", "森", "川端", "芥川", "谷崎", "太宰"]


// 5 from(arrayLike[, mapFn[, thisArg]]) *ES6 配列ライクなオブジェクト、列挙可能なオブジェクトを配列に変換
let args = Array.from(arguments);//argumentsオブジェクトを配列に変換


// 6 of(e1,...) *ES6 可変長引数を配列に変換(静的メソッド) *ES6
console.log(Array.of(1,3,4,6));//[1, 3, 4, 6]


// 7 copyWithin(target,start[,end]) *ES6 start+1~end番目の要素をtarget+1番目からの位置にコピー(要素数は変わらない)
console.log(ary1.copyWithin(0,3,5));//["芥川", "谷崎", "三島", "芥川", "谷崎", "太宰"](4~5番目の要素を1~2番目の要素へコピー)

// 8  fill(val[,start[,end]]) *ES6 配列内のstart+1~end番目の要素をvalで置き換え
console.log(ary2.fill("夏目",0,3));//["夏目", "夏目", "夏目", "龍之介", "潤一郎", "治"]

splice補足
spliceメソッドは配列に複数要素を置換、削除、追加することができます。

script.js
array.splice(index,many[,elem1[,elem2,...]])

array:配列オブジェクト  index:要素の抽出開始位置
many:取り出す要素数 elem1,elem2...:削除箇所に挿入する要素

script.js
var ary1 = ["夏目","太宰","三島","芥川","谷崎","太宰"];

//1 置き換え
console.log(ary1.splice(3,2,"akutagawa","tanizaki"));//["芥川", "谷崎"]
console.log(ary1);//["夏目", "太宰", "三島", "akutagawa", "tanizaki", "太宰"]

//2 削除
console.log(ary1.splice(3,2));//["akutagawa", "tanizaki"]
console.log(ary1);["夏目", "太宰", "三島", "太宰"]

//3 追加
console.log(ary1.splice(1,0,"正岡"));//[]
console.log(ary1);//["夏目", "正岡", "太宰", "三島", "太宰"]


1, 4~5番目の要素を指定要素と置き換える。置き換え前の要素と置き換え後の要素の個数は一致しなくても可
2, 置き換え後の要素(elem1[,elem2,...])を指定しない場合、
指定された範囲の要素を削除する。
3, 置き換えるべき要素数(many)が0の場合、
引数indexで指定された位置に要素を挿入する

追加/削除

メンバー 概要
1 pop() 配列末尾の要素を取得して削除
2 push(data) 配列末尾に要素を追加
3 shift() 配列先頭の要素を取得して削除
4 unshift(data1[,data2,...]) 配列先頭に指定要素を追加

code

script.js
var ary1 = ["夏目","太宰","三島","芥川","谷崎","太宰"];
var ary2 = ["漱石","","由紀夫","龍之介","潤一郎",""];

// 1 pop()  配列末尾の要素を取得して削除
console.log(ary1.pop());//太宰
console.log(ary1);//["夏目", "太宰", "三島", "芥川", "谷崎"]


// 2 push(data)  配列末尾に要素を追加
console.log(ary1.push("津島"));
console.log(ary1);//["夏目", "太宰", "三島", "芥川", "谷崎",  "津島"]


// 3 shift() 配列先頭の要素を取得して削除
console.log(ary2.shift());
console.log(ary2);//["治", "由紀夫", "龍之介", "潤一郎", "治"]


// 4 unshift(data1[,data2,...]) 配列先頭に指定要素を追加
console.log(ary2.unshift("金之助"));
console.log(ary2);//["金之助", "治", "由紀夫", "龍之介", "潤一郎", "治"]

並べ替え

メンバー 概要
1 reverse() 逆順に並び替え(反転)
2 sort() 要素を昇順に並び替え

code

script.js
var ary1 = ["夏目","太宰","三島","芥川","谷崎","太宰"];
var ary2 = ["漱石","","由紀夫","龍之介","潤一郎",""];

// 1 reverse()  逆順に並び替え(反転
console.log(ary1.reverse());//["太宰", "谷崎", "芥川", "三島", "太宰", "夏目"]

// 2 sort()|要素を昇順に並び替え
console.log(ary2.sort());//["治", "治", "漱石", "潤一郎", "由紀夫", "龍之介"]

高階関数

別記事にまとめましたので下記参照ください
高階関数

以上になります。
閲覧ありがとうございました。

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
What you can do with signing up
8