ECMAScript5の配列のメソッド

| Comments

ECMAScript5で追加されたらしい配列のメソッド群のまとめ

メソッド群

  • indexOf
  • lastIndexOf
  • forEach
  • map
  • filter
  • every
  • some
  • reduce
  • reduceRight

indexOf

第一引数と等しい配列要素のうち、最初の要素番号を返す。

1
2
3
4
5
6
7

(function(){
    var arr = ['a', 'b', 'c', 'a', 'd'];
    console.log(arr.indexOf('a')); // 0
    console.log(arr.indexOf('b')); // 1
    console.log(arr.indexOf('z')); // -1
    console.log(arr.indexOf('a', 1)); // 3
})();

lastIndexOf

第一引数と等しい配列要素のうち、最後の要素を番号返す。

1
2
3
4
5
6
7

(function(){
    var arr = ['a', 'b', 'c', 'a', 'd'];
    console.log(arr.lastIndexOf('a')); // 3
    console.log(arr.lastIndexOf('b')); // 1
    console.log(arr.lastIndexOf('z')); // -1
    console.log(arr.lastIndexOf('a', 2)); // 0
})();

forEach

配列の要素に対してコールバック関数を実行する。

1
2
3
4
5
6
7
8
9

(function(){
    var arr = ['a', 'b', 'c'];
    arr.forEach(function(element, index, array){
        console.log('arr[' + index + '] = ' + element);
    });
    // arr[0] = a
    // arr[1] = b
    // arr[2] = c
})();

map

配列の要素に対してコールバック関数を実行した配列を生成する。

1
2
3
4
5
6
7

(function(){
    var arr = [2, 4, 6, 8, 10];
    var result = arr.map(function(element, index, array){
        return elem * 2;
    });
    console.log(result); // [4, 8, 12, 16, 20]
})();

filter

配列の要素に対してコールバック関数を実行しtrueを返した要素で構成された新しい配列を生成する。

1
2
3
4
5
6
7

(function(){
    var arr = [1, 2, 3, 4, 5];
    var result = arr.filter(function(elem){
        return elem % 2 === 0;
    });
    console.log(result); // [2, 4]
})();

every

配列の要素に対してコールバック関数を実行し、全ての要素でtrueを返すか判定する。（and）

1
2
3
4
5
6
7
8
9

(function(){
    var test = function(arr) {
        return arr.every(function(elem) {
            return elem % 2 === 0;
        });
    };
    console.log(test([1, 2, 3, 4])); // false
    console.log(test([2, 4])); // true
})();

some

配列の要素に対してコールバック関数を実行し、ひとつでもtrueを返すか判定する。（or）

1
2
3
4
5
6
7
8

(function(){
    var test = function(arr) {
        return arr.some(function(elem) {
            return elem % 2 === 0;
        });
    };
    console.log(test([1, 2, 3, 4])); // true
})();

reduce

隣り合う2つの要素に対して左から右へコールバック関数を実行する。

初期値を指定すると、初めの要素のpreviewがそれになる。

1
2
3
4
5
6
7
8
9
10
11
12

(function(){
    var result = [1, 2, 3, 4].reduce(function(previous, current, index, array){
        return previous + current;
    });
    console.log(result); // 10 (=1 + 2 + 3 + 4)

    // 初期値を指定
    var result = [1, 2, 3, 4].reduce(function(previous, current, index, array){
        return previous + current;
    }, 100);
    console.log(result); // 110 (=110 + 1 + 2 + 3 + 4)
})();

reduceRight

隣り合う2つの要素に対して右から左へコールバック関数を実行する。

1
2
3
4
5
6
7
8
9
10
11
12

(function(){
    var result = [4, 6, 100].reduceRight(function(previous, current, index, array){
        return previous - current;
    });
    console.log(result); // 90 (= 100 - 6 - 4)

    // 初期値を指定
    var result = [4, 6, 100].reduce(function(previous, current, index, array){
        return previous - current;
    }, 300);
    console.log(result); // 190 (=300  - 100 - 6 - 4)
})();

Comments