Mutator methods

mutate
【自動】
変化する、突然変異する、変身する
【他動】
変化させる、突然変異させる、変身させる

破壊的メソッド

以下のメソッドは対象の配列に直接変更を加える

• push/pop
• splice
• reverse
• shift/unshift
• sort

var arr = ["Hello","Pixel", "Grid", "!!"];

arr.reverse();

console.log(arr);
/*
["!!", "Grid", "Pixel", "Hello"] 
*/
console.log(arr.pop())
/*
Hello
*/
console.log(arr.shift())
/*
!!
*/
console.log(arr);
/*
["!!", "Grid", "Pixel"]
*/

Accecor methods

access
【他動】
《コ》〔記憶装置やデータなどに〕アクセスする、接続する、読み書きする

非破壊的メソッド

以下のメソッドは配列を操作した結果を返す

• concat
• join
• slice
• indexOf/lastIndexOf
• toString

var arr = ["Hello","Pixel", "Grid", "!!"];

console.log(arr.join(''));
/*
HelloPixelGrid!!
*/
console.log(arr);
/*
["Hello","Pixel", "Grid", "!!"]
*/
var pg = arr.slice(1,3);
console.log(pg);
/*
["Pixel", "Grid"]
*/
console.log(arr);
/*
["Hello","Pixel", "Grid", "!!"]
*/

Iteration methods

繰り返しメソッド

iterate
【自動】
繰り返し適用される
【他動】
～を繰り返して言う
～を反復する

配列の要素に対して繰り返し同じ処理を行う

• map
• forEach
• filter
• every
• some
• reduce/reduceRight

メソッドによって返すものが異なる

forEach

各要素に対してコールバックを実行する

var arr = ["Hello","Pixel", "Grid", "!!"];

arr.forEach(function(value, index) {
  console.log(index, value);
  /*
  0 "Hello"
  1 "Pixel"
  2 "Grid"
  3 "!!" 
  */
});

何も返さない

map

各要素に実行したコールバックの結果を配列で返す

var arr = ["Hello", "Pixel", "Grid", "!!"];

var upper = arr.map(function(value, index) {
    return value.toUpperCase() + "~";
  });

console.log(upper);
/*
["HELLO~", "PIXEL~", "GRID~", "!!~"] 
*/

filter

コールバックで真(true)となる値を返した値からなる配列を返す

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

var odd = arr.filter(function(value, index) {
    return value % 2;
  });

console.log(odd);
/*
[1, 3, 5, 7, 9] 
*/

every

コールバックで偽(false)な値が返されるまでコールバックを実行する。全て真となる値を返した場合にtrueを、偽となる値が返された瞬間falseを返す

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

var every1 = arr1.every(function(value, index) {
    return value < 6;
  });

console.log(every1);
/*
true
*/

var every2 = arr2.every(function(value, index) {
    return value < 6;
  });

console.log(every2);
/*
false
*/

some

コールバックで１つでも真となる値を返した場合にtrueを、全て偽の場合にfalseを返す

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

var some1 = arr1.some(function(value, index) {
    return value < 6;
  });

console.log(some1);
/*
true
*/

var some2 = arr2.some(function(value, index) {
    return value < 6;
  });

console.log(some2);
/*
true
*/

everyがand(&&)でsomeがor(||)

reduce

隣り合う２つの要素に対してコールバックを実行していく。左から

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduce(function(prev, current) {
  console.log(prev, current);
  /*
  1  2
  3  3
  6  4
  10 5
  */
  return prev + current;
});

console.log(sum);
/*
15
*/

初期値を与えることもできる

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduce(function(prev, current) {
  console.log(prev, current);
  /*
  10  1
  11  2
  13  3
  16  4
  20  5
  */
  return prev + current;
}, 10); // 初期値に10

console.log(sum);
/*
25
*/

初期値に10を与える

reduceRight

reduceの逆。右から

var arr = [1, 2, 3, 4, 5];

var sum = arr.reduceRight(function(prev, current) {
  console.log(prev, current);
  /*
  5  4
  9  3
  12 2
  14 1
  */
  return prev + current;
});

console.log(sum);
/*
15
*/

※配列にしか使えない

var arr = [1, 2, 3, 4, 5];
var obj = {
  "a": "aaa",
  "b": "bbb",
  "c": "ccc"
};

[].forEach.call(Object.keys(obj), function(key, index) {
  console.log(key, obj[key]);
});

/*
a aaa
b bbb
c ccc
*/

こんな書き方でオブジェクトに対して使えなくもない