Javascriptの配列の解釈 配列メソッド_基礎知識

前回の記事「JavaScript配列Array基礎入門」に引き続き、Arrayの全メソッドを詳しく紹介する記事です。

すべての配列メソッドは Array.prototype で定義されており、Array.prototype 自体も配列です。

array.concat()

現在の配列の浅いコピーを作成し、受け取ったパラメーターを新しい配列の末尾に追加します。元の配列は変更されません。

文法

array.concat(value1, value2, ..., valueN)
パラメータはマージする必要がある配列または非配列値です

var arr1 = [1, 2, 3];
var obj = {animal : 'monkey'};
var arr2 = arr1.concat([4, 5, 6], obj, [7, 8, 9]);
// arr1 [1, 2, 3]
// arr2 [1, 2, 3, 4, 5, 6, {animal : 'monkey'}, 7, 8, 9]

obj.animal = 'tiger';
// [1, 2, 3, 4, 5, 6, {animal : 'tiger'}, 7, 8, 9]

配列値または配列以外の値を組み合わせることができますが、オブジェクトを含めた場合、そのオブジェクトは引き続き元のオブジェクトを参照することに注意してください。

array.join()

区切り文字を使用して配列のすべての要素を連結した文字列を返します。デフォルトの区切り文字はカンマです。

文法

array.join(セパレータ)
パラメータは区切り文字

です

var arr1 = [1, 2, 3];
var str = arr1.join(); // 1,2,3
str = arr1.join('#'); // 1#2#3

多数の文字列フラグメントを組み立てる場合、結合メソッドは +要素演算子よりも高速です。

new Array(3) を使用すると、長さ 3 の空の配列が生成され、join() メソッドと組み合わせることで、特定の文字列を繰り返すことができます。

var str = new Array(3).join('-+'); // -+-+

文字列が区切り文字であるため、繰り返しの数は配列の長さから 1 を引いたものになります。

配列自体はオブジェクトであるため、配列を文字列に結合するためにも使用できる toString() メソッドがありますが、区切り文字にはカンマのみを使用できます。

var arr1 = [1, 2, 3];
arr1.toString(); // 1,2,3

実際には、最初に各要素の toString() メソッドを呼び出します。

array.push()

配列の末尾に 1 つ以上のパラメーターを追加し、配列の長さを返します。配列自体を変更します。

文法

array.push(value1, value2, ..., valueN);
例

var arr1 = [1, 2, 3];
var len = arr1.push(4, 5);

console.log(len); // 5
console.log(arr1); // [1, 2, 3, 4, 5]

配列の末尾に値を挿入する別のメソッドも実装できます。

arr1[arr1.length] = 6; // [1, 2, 3, 4, 5, 6]  
array.pop()

配列内の最後の項目を削除し、削除された項目を返します。配列自体を変更します。

var arr1 = [1, 2, 3];
arr.pop(); // [1, 2] 返回 3

配列が空の場合は、未定義を返します。

array.unshift()

配列の先頭に 1 つ以上のパラメーターを挿入し、配列の長さを返します。配列自体を変更します。

var arr1 = [1, 2, 3];
var len = arr1.unshift(4, 5);

console.log(len); // 5
console.log(arr1); // [4, 5, 1, 2, 3]

array.shift()

配列の最初の項目を削除し、削除された項目を返します。配列自体を変更します。

var arr1 = [1, 2, 3];
arr.shift(); // [2, 3] 返回 1

配列が空の場合は、未定義を返します。

array.sort()

このメソッドは各要素の toString() メソッドが返した値に従ってソートするため、通常は期待した結果が得られません。

var arr1 = [1, 2, 3, 14, 24];
arr1.sort(); // [1, 14, 2, 24, 3]

ただし、sort() メソッドは比較のためにカスタム関数を受け取ることができます。比較関数は 2 つのパラメータ、特にデフォルトで昇順に設定される sort() を受け入れます。そのため、最初のパラメータを 2 番目のパラメータの前に置きたい場合は、負の数を返し、等しい場合は 0 を返し、等しい場合は 0 を返す必要があります。後ろの場合は、正の数を返します。

var compare = function(a, b){
  return a - b;
}

var arr2 = [1, 12, 2, 23, 3 , 5, 4];
arr2.sort(compare); // [1, 2, 3, 4, 5, 12, 23]

文字列の比較は、string.localeCompare() メソッドと組み合わせて使用​​できます。

var arr3 = ['F', 'e', 'f', 'E'];
arr3.sort(function(a, b){
  return a.localeCompare(b);
});
// ['e', 'E', 'f', 'F'] 

array.reverse()

配列要素の順序を逆にして、配列自体を返します。

var arr1 = [1, 4, 3, 2];
arr1.reverse(); // [2, 3, 4, 1]

array.slice()

配列自体を変更せずに、配列のセクションを浅くコピーします。

array.slice(開始、終了);
このメソッドは 2 つのパラメータを受け入れます。最後のパラメータは省略でき、デフォルトは配列自体の長さです。

var arr1 = [1, 2, 3, 4, 5, 6];

arr1.slice(4); // [5, 6]
arr1.slice(2, 4); // [3, 4]
arr1.slice(-3); // [4, 5, 6]

負の数値が渡された場合、配列の長さは自動的に追加され、負でない数値になるように試行されます。
絶対値が配列の長さより小さい値を渡すということは、負の絶対値要素の数を後ろから前に取得することを意味します。たとえば、この例では最後の 3 つの要素が取り上げられています。

array.splice()

これは、配列で最も強力で一般的に使用されるメソッドで、削除、挿入、置換を実行できます。

文法

array.slice(start, count, item);
このメソッドは、1 つ以上の要素を削除し、新しい要素に置き換えます。 start は開始位置、count は削除の数、item は新しく追加された要素 (項目は複数あり、省略可能)、削除された要素は配列の形式で返されます。

var arr1 = [1, 2, 3, 4, 5];
//删除
arr1.splice(2, 1); // [1, 2, 4, 5] 返回 [3]
//插入
arr1.splice(3, 0, 6, 7); // [1, 2, 4, 6, 7, 5]
//替换
arr1.splice(1, 2, 8, 9); // [1, 8, 9, 6, 7, 5] 返回[2, 4]

以下では、主に ie8 がサポートしていない ECMAScript5 の新しいメソッドをいくつか紹介します。

indexOf() および lastIndexOf()

配列内の対応する項目のインデックス位置を検索します。2 番目のパラメーターは、対応する検索方向の開始位置を示します。見つからない場合は、-1 を返します。
indexOf() は前から後ろに検索し、lastIndexOf() は後ろから前に検索します。

var arr1 = [1, 2, 3, 4, 3, 2, 1];
arr1.indexOf(2); // 1
arr1.indexOf(2, 3); // 5

arr1.lastIndexOf(3); // 4
arr1.lastIndexOf(3, 4) // 2

反復法

次のメソッドは 2 つのパラメータを受け入れます。1 つ目は各項目に対して実行する関数で、2 つ目は関数が実行されるスコープです。
実行中の関数には、現在の項目、位置、配列自体の 3 つのパラメーターがあります。

array.every()

指定された関数を実行し、反復の各項目が true を返した場合、最終的に true を返します。

var arr1 = [1, 2, 3, 4, 5];
arr1.every(function(item, index, array){
  return item > 3;
});
// false

array.some()

运行给定函数，如果迭代中有一项返回true,则最终返回true。

arr1.some(function(item, index, array){
  return item > 3;
});
// true

array.map()

运行给定函数，将迭代中返回的值组成数组，返回该数组。

arr1.map(function(item, index, array){
  return item * 2;
});
// [2, 4, 6, 8, 10]

array.filter()

运行给定函数，将迭代中返回true的元素以数组形式返回

arr1.filter(function(item, index, array){
  return item > 3;
});
// [4, 5]

array.forEach()

运行给定函数，不返回任何值。类似于普通的for循环的功能。

归并方法

函数接受两个参数，第一个参数是每一个运行的自定义函数，第二项是作为归并基础的初始值。
自定义函数接受四个参数，分别是前一项，当前项，位置，数组。

array.reduce() 与 array.reduceRight()
var splitstr = function(prev, item, index, array){
  return prev + '#' + item;
}

var arr1 = [1, 2, 3, 4, 5];
arr1.reduce(splitstr, 8); // 8#1#2#3#4#5
arr1.reduceRight(splitstr, 8); // 8#5#4#3#2#1

小结

这一篇介绍了数组方法的种种细节和注意问题，下一篇将会介绍数组更高级的用法。本篇后续会添加ECMAScript6 新增加的数组方法的介绍。