8
8

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 5 years have passed since last update.

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

Last updated at Posted at 2017-04-18

なんとなく使っていた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());//["治", "治", "漱石", "潤一郎", "由紀夫", "龍之介"]

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

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

8
8
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
8
8

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?