:pぴー.sendせんど(:pぴー, :pぴー)

mokoaki
mokoriso@gmail.com

2016/12/24

JavaScript ES6時代の前にES5をおさらい 組み込みオブジェクト Array

Chrome55で確認

var a1 = new Array(1, 2, 3);
var a2 = [1, 2, 3];
// こいつらは同じもん・・のはずどうやって確かめよう・・

// こんなこともできる
var a3 = new Array(3)
=> [undefined, undefined, undefined]

下記は Array.ptototypeに定義されている

// length
// 要素の長さ

[1,2,3,4].length
=> 4
// concat
// 配列の連結

a = [1, 2]

a.concat(3)
=> [1, 2, 3]

// 自己破壊はしない
a
=> [1, 2]

// この動作は把握しておくといいかも
a.concat(3, [4], [5, 6], [7, [8, 9]])
=> [1, 2, 3, 4, 5, 6, 7, [8, 9]]
// join
// 配列を連結して文字列に変換

[1,2,3,4].join("-")
=> "1-2-3-4"

// 引数を省略するとカンマで連結する 頭おかしい
[1,2,3,4].join()
=> "1,2,3,4"

// 頭おかしいので注意
[1,2,3,[4, 5]].join("-")
"1-2-3-4,5"
// pop
// 最後の要素を取り除く 自己破壊
var a = [1, 2, 3]

a.pop()
=> 3

a
=> [1, 2]
// push
// 引数を末尾に追加する もちろん自己破壊
// 戻り値は追加後の配列の長さ

var a = [1, 2, 3]

a.push(4)
=> 4

a
=> [1, 2, 3, 4]

// 複数追加できる
var a = [1, 2, 3]

a.push(4, 5)
=> 5

a
=> [1, 2, 3, 4, 5]
// reverse
// ひっくり返す 自己破壊

var a = [1, 2, 3]

a.reverse()
=> [3, 2, 1]

a
=> [3, 2, 1]
// shift
// 先頭の要素を取り除く もちろん自己破壊

var a = [1, 2, 3]

a.shift()
=> 1

a
=> [2, 3]
// slice(strt_index, end_index)
// 配列の一部を返す
// end_indexで指定した位置の文字は帰らない、取扱にちょっと違和感がある
// マイナスが指定できる事の副作用か何かと思えば許せる?

var a = ["a", "b", "c", "d", "e"]

a.slice(2, 4)
=> ["c", "d"]

a
=> ["a", "b", "c", "d", "e"]

a.slice(2)
=> ["c", "d", "e"]

a.slice(2, -1)
=> ["c", "d"]
// sort
// 自己破壊
// コールバックで手の込んだソートも可能 安全なソートに見えるけど未確認

var a = [1, 2, 3, 3, 2, 1]

a.sort()
=> [1, 1, 2, 2, 3, 3]

a
=> [1, 1, 2, 2, 3, 3]

[[1, 1], [2, 2], [3, 3], [4, 3], [5, 2], [6, 1]].sort(function(a, b){
  if (a[1] > b[1]) return 1 ;
  if (a[1] < b[1]) return -1 ;
  return 0;
})
=> [[1, 1], [6, 1], [2, 2], [5, 2], [3, 3], [4, 3]]

[[1, 1], [2, 2], [3, 3], [4, 3], [5, 2], [6, 1]].sort(function(a, b){
  return a[1] > b[1];
})
=> [[1, 1], [6, 1], [2, 2], [5, 2], [3, 3], [4, 3]]

// 安全ソートかどうかは後で調べるっす
// splice
// 配列の要素を別(の長さの要素)に置き換える もちろん自己破壊
// 戻り値は置き換えられた要素の配列

var a = [1, 2, 3, 4, 5]

a.splice(2, 2, "a", "b")
=> [3, 4]

a
=> [1, 2, "a", "b", 5]

// 要素の削除も可能ということ
var a = [1, 2, 3, 4, 5]

a.splice(2, 2)
=> [3, 4]

a
=> [1, 2, 5]

// 要素の挿入も可能ということ
var a = [1, 2, 3, 4, 5]

a.splice(2, 0, "a")
=> []

a
=> [1, 2, "a", 3, 4, 5]

unshift

// 先頭に要素を追加 もちろん自己破壊
// 戻り値は追加後の配列の長さ

var a = [1, 2, 3]

a.unshift(0)
=> 4

a
=> [0, 1, 2, 3]

// 複数追加できる
var a = [1, 2, 3]

a.unshift(-1, 0)
=> 5

a
=> [-1, 0, 1, 2, 3]

forEach (ECMA 5)

// そのまんまeach
var a = [1, 2, 3];

a.forEach(function(hoge){
  console.log(hoge);
});
=> 1
=> 2
=> 3

a.forEach((hoge) => {
  console.log(hoge);
});
=> 1
=> 2
=> 3

reduce (ECMA 5)

// 配列の要素それぞれにおいて、前回の関数の実行の戻り値を保持しつつ関数を実行し、最終的な戻り値を返す
// inject はないっぽい
// reduceRight もあるよ

[1, 2, 3].reduce(function(previousValue, currentValue, index, array){
  return previousValue + currentValue;
}, 0)
=> 6

// 初期値を与えないとpreviousValueに1つめ、currentValueに2つめが入った状態でスタートするイメージ
[1, 2, 3].reduce(function(previousValue, currentValue){
  console.log("previousValue: " + currentValue + " currentValue: " + currentValue);
  return previousValue + currentValue;
})
=> previousValue: 1 currentValue: 2
=> previousValue: 3 currentValue: 3
=> 6

// 初期値を与えたときにはpreviousValueに初期値、currentValueに1つめが入った状態でスタートするイメージ
[1, 2, 3].reduce(function(previousValue, currentValue){
  console.log("previousValue: " + previousValue + " currentValue: " + currentValue);
  return previousValue + currentValue;
}, 0) // この 0 が初期値ね
=> previousValue: 0 currentValue: 1
=> previousValue: 1 currentValue: 2
=> previousValue: 3 currentValue: 3
=> 6

// index は現在のカレントのindex を返す つまり初期値がない場合には1から始まるので注意
// array にはレシーバの配列が入る 使いたければ使えばいいんじゃないかな
[1, 2, 3].reduce(function(previousValue, currentValue, index, array){
  console.log("index: " + index + " array: " + array);
  return previousValue + currentValue;
})
=> index: 1 array: [1, 2, 3]
=> index: 2 array: [1, 2, 3]
=> 6