メモブログ

技術的なことを書き連ねるブログ

Arrayオブジェクトのメンバ

arr.concat(arr2)

2つの配列を結合

var arr1 = ["りんご","バナナ","みかん"];
var arr2 = [1,22,333,4444];
console.log(arr1.concat(arr2))
// ["りんご", "バナナ", "なし", 1, 22, 333, 4444]

arr.join(del)

配列内の要素を区切り文字で結合

var arr1 = ["りんご","バナナ","みかん"];
console.log(arr1.join("と"))
// りんごとバナナとみかん

arr.slice(start [,end])

start+1番目からend番目の要素で配列を作成

var arr = [11,22,33,44,55,66];
console.log(arr.slice(2,5))
// [33,44,55]

arr.splice(start,cnt [,rep,..])

start+1番目からstart+cnt+1番目の要素をrepで差し替え。
差し替えられた要素を返す、元の配列は差し替えられて変更される。

var arr = [11,22,33,44,55,66];
console.log(arr.splice(2,3,"★","▲")) // [33,44,55]
console.log(arr) // [11, 22, "★", "▲", 66]

arr.pop()

配列の最後の要素を取得して返す
その要素は元の配列からは取り除かれる。

var arr = [11,22,33,44,55,66];
console.log(arr.pop()) // 66
console.log(arr) // [11, 22, 33, 44, 55]

arr.push(data1,data2,..)

配列の最後の要素に指定した要素を追加して、配列の長さを返す。
元の配列は変更される。

var arr = [11,22,33,44];
console.log(arr.push("P","S")) // 6
console.log(arr) // [11, 22, 33, 44, "P", "S"]

arr.shift()

配列の最初の要素を取得して返す
その要素は元の配列からは取り除かれる。

var arr = [11,22,33,44,55,66];
console.log(arr.shift()) // 11
console.log(arr) // [22, 33, 44, 55, 66]

arr.unshift(data1,data2,..)

配列の最初に指定した要素を追加して、配列の長さを返す。
元の配列は変更される。

var arr = [11,22,33,44];
console.log(arr.unshift("P","S")) // 6
console.log(arr) // "P", "S", 11, 22, 33, 44]

arr.reverse()

配列の順序を逆に並べ替える。
元の配列は変更される。

var arr = [11,22,33,44];
console.log(arr.reverse()) // [44, 33, 22, 11]
console.log(arr) // [44, 33, 22, 11]

arr.sort(fnc)

配列の順序を昇順に並べ替える。
元の配列は変更される。
fncに独自の関数を定義してソートを再定義できる。
その際「引数は2つあること」、「第一引数が第二引数より小さいと負を、大きいと正を返す」、という仕様にする必要がある。

var arr = [100,55,9,404];
var arr2 = [[1,2,9],[122,2],[1,2,4,3],[100]];

console.log(arr.sort()) // [100, 404, 55, 9] 文字列としてソート
console.log(arr) // [100, 404, 55, 9]

console.log(arr.sort(
	function(x,y){
		return x-y;
	}
)) // [9, 55, 100, 404] 数字の大きさでソートする場合はこのように定義

document.writeln(
arr2.sort(
	function(x,y){
		return x.length - y.length;
	}
)
	)
console.log(arr2.sort(
	function(x,y){
		return x.length - y.length;
	}
)) // [[100],[122,2],[1,2,9],[1,2,4,3]] 配列の長さでソートする場合はこのように定義

console.log(arr2.sort(
	function(x,y){
		var x1 = 0;
		var y1 = 0;
		for(var i=0; i<x.length; i++){
			x1 +=x[i];
		}
		for(var i=0; i<y.length; i++){
			y1 +=y[i];
		}
		return x1 - y1;
	}
)) // [[1,2,4,3],[1,2,9],[100],[122,2]] 配列の中身を足したものの小さい順に並べる

arr.toString()

配列を文字列に変換

var arr = [100,55,9,404];
console.log(arr.toString()) // 100,55,9,404 配列を文字列に変換
console.log(arr) // [100, 404, 55, 9]

arr.reduce(func(prev,cur,index,array))


隣り合う2つの配列要素に対して(左から右へ)同時に関数を適用し、単一の値にする。

  • prev が一つ前に処理していた要素
  • cur が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

結構便利で、以下のように色々定義できる。
IE9からサポート

var arr = [4,3,2,1];
var arr2 = [[11,22],[33,44],[55,66]];

var sum = function(){
	return arr.reduce(function(prev,cur,index,array){
		return prev + cur;
	});
}
var max = function(){
	return arr.reduce(function(prev,cur,index,array){
		return Math.max(prev,cur);
	});
}
var min = function(){
	return arr.reduce(function(prev,cur,index,array){
		return Math.min(prev,cur);
	});
}
var con = function(){
	return arr2.reduce(function(prev,cur,index,array){
		return prev.concat(cur);
	});
}

console.log(sum()); // 10 配列内を全て足した関数
console.log(max()); // 4 配列内で一番大きいものを返す関数
console.log(min()); // 1 配列内で一番小さいものを返す関数
console.log(con()); // [11, 22, 33, 44, 55, 66] 複数の配列を一つの配列に結合して返す関数

これと似たメソッドのreduceRightは配列の右から左へ処理を行う

var arr = [1,2,3,4,5];
console.log(
	arr.reduce(function(prev,cur,index,array){
		return prev - cur;
	})
);
// -13
console.log(
	arr.reduceRight(function(prev,cur,index,array){
		return prev - cur;
	})
);
// -5


サポートしてないブラウザもこれを入れればいけるようです

※参考
Array.prototype.reduce() - JavaScript | MDN

if (!Array.prototype.reduce) {
  Array.prototype.reduce = function reduce(accumulator){
    if (this===null || this===undefined) throw new TypeError("Object is null or undefined");

    var i = 0, l = this.length >> 0, curr;

    if(typeof accumulator !== "function") // ES5 : "If IsCallable(callbackfn) is false, throw a TypeError exception."
      throw new TypeError("First argument is not callable");

    if(arguments.length < 2) {
      if (l === 0) throw new TypeError("Array length is 0 and no second argument");
      curr = this[0];
      i = 1; // start accumulating at the second element
    }
    else
      curr = arguments[1];

    while (i < l) {
      if(i in this) curr = accumulator.call(undefined, curr, this[i], i, this);
      ++i;
    }

    return curr;
  };
}

arr.map(func(val,index,array))


配列の各要素に、引数として渡された関数を適用した配列を作る。

  • val が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

IE9からサポート

var arr = [1,2,3,4,5];
console.log(
	arr.map(function(val,index,array){
		return Math.pow(val,2);
	})
)
// [1, 4, 9, 16, 25] それぞれの要素を2乗した配列を返す
console.log(arr) // [1, 2, 3, 4, 5]

arr.filter(func(val,index,array))

配列の各要素を、引数として渡した関数でフィルタリングしたもので配列を作る。

  • val が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

IE9からサポート

var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(
	arr.filter(function(val,index,array){
		return val % 2 === 0;
	})
)
// [2, 4, 6, 8, 10] 偶数のみで配列を作る
console.log(arr);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

arr.some(func(val,index,array))

配列中の処理で、引数として渡した関数でテストしたものに一つでもあえばtrueを返す。

  • val が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

IE9からサポート

var arr = [1,2,3,4,5,6,7,8,9,10];
console.log(
	arr.some(function(val,index,array){
		return val % 2 === 0;
	})
)
// true 配列の各要素で1つでも条件があうものがあればtrue

arr.every(func(val,index,array))

配列中の処理で、引数として渡した関数でテストしたものが全てあえばtrueを返す。

  • val が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

IE9からサポート

var arr = [1,2,3,4,5,6,7,8,9,10];
var arr2 = [2,4,6,8,10];
console.log(
	arr.every(function(val,index,array){
		return val % 2 === 0;
	})
)
// false 偶数と奇数があるので
console.log(
	arr2.every(function(val,index,array){
		return val % 2 === 0;
	})
)
// true 全て偶数なので

isArray(obj)

チェックするオブジェクトが配列であればtrueを、そうでなければfalseを返す。

IE9からサポート

// 以下の呼び出しはすべてtrueを返す
Array.isArray([]);
Array.isArray([1]);
Array.isArray(new Array());
// あまり知られていないもののArray.prototypeは配列:
Array.isArray(Array.prototype); 

// 以下の呼び出しはすべてfalseを返す
Array.isArray();
Array.isArray({});
Array.isArray(null);
Array.isArray(undefined);
Array.isArray(17);
Array.isArray('Array');
Array.isArray(true);
Array.isArray(false);
Array.isArray({ __proto__: Array.prototype });

IE8も以下のコードを追加することで使用が可能

if (!Array.isArray) {
	Array.isArray = function(arg) {
		return Object.prototype.toString.call(arg) === '[object Array]';
	};
}

arr.indexOf(data)

配列内に検索対象の要素があったらそのインデックスを返す。

var arr = [1,2,3,4,1,4,3,4];
console.log(
	arr.indexOf(4) // 3
);
console.log(
	arr.indexOf(4,4) // 5 5番目の要素から4を探す
);
console.log(
	arr.indexOf(-1) // -1
);
console.log(
	arr.indexOf(3,-2) // 6 後ろから
);
console.log(
	arr.indexOf(3,9)// -1 配列の長さを超えるとだめ
);

arr.lastIndexOf(data)

配列内に検索対象の要素があったらそのインデックスを返す。
後ろから前へ検索する。

var arr = [1,2,3,4,1,4,3,4];
console.log(
	arr.lastIndexOf(4) // 7
);
console.log(
	arr.lastIndexOf(4,4) // 3
);
console.log(
	arr.lastIndexOf(-1) // -1
);
console.log(
	arr.lastIndexOf(3,-2) // 6 後ろから
);
console.log(
	arr.lastIndexOf(3,9)// 6 
);

arr.forEach(func(val,index,array))

配列の各要素で処理を行う。

  • val が今処理している要素
  • index 今処理している要素のインデックス
  • array 処理している配列が入っている

IE9からサポート

var arr = [10,20,30];
arr.forEach(function(val, index, array){
		console.log(index + " is " + val)
})
// 0 is 10
// 1 is 20
// 2 is 30