ES6で追加されたArray関数を✅

アルコリズム(アルコール ✖︎ アルゴリズム)の作成に苦戦しています。

今回は、アルコリズム作成に役立つかもしれないArrayメソッドを学習していきたいと思います。

特にES6から新しく追加されたArrayメソッドにフォーカスを当てながら学んでいきます。

ES6に新しく追加されたメソッド

Array.of()

引数の中身を配列に変えるメソッド。型や数に指定はない。

Array.of(1);         // [1]
Array.of(1, 2, 3);   // [1, 2, 3]
Array.of(undefined); // [undefined]

Array.prototype.copyWithin()

引数内の文字列を指定した場所にコピーする

copyWithin(target)
copyWithin(target, start)
copyWithin(target, start, end)
#(コピー先,コピー元,表示する数)

target: コピー先

start: コピー対象

end: 表示する最後の要素index

const array1 = [{}, 'b', 'c', "copy", 'e']; 

console.log(array1.copyWithin(0, 3, 4));#1

console.log(array1.copyWithin(1, 3));#2

#> Array ["copy", "b", "c", "copy", "e"]
#> Array ["copy", "copy", "e", "copy", "e"]

#1 copyを空ブラケットの中にコピーし、4番目まで表示している。

#2 3番目のcopyを1番目に上書きしている。

Array.prototype.find()

引数の中身に当てはまる最初の要素をarrayの中から取り出し、そのまま出力する。

const array1 = [5, 12, 8, 130, 44];

const found = array1.find(element => element > 10);

console.log(found);
#12

array1の中身をelementに代入し、elementが10以上の要素を0から探している。

一番最初に当てはまる12が取り出されている。

const container = [
  {name: 'glasses of beer', quantity: 2},
  {name: 'cup of highball', quantity: 1},
  {name: 'glasses of wine', quantity: 5}
];

function isWine(alcohol) {
  return alcohol.name === 'glasses of wine';
}

console.log(container.find(isWine));
# {name: 'cup of highball', quantity: 1}

引数には自分で作成した関数を入れる事ができ、変数の中身を取り出す事ができる。

Array.prototype.findIndex()

引数の中身に当てはまる最初の要素をarrayの中から取り出し、そのindexを出力する。

const array1 = [5, 12, 8, 130, 44];

const isLargeNumber = (element) => element > 13;

console.log(array1.findIndex(isLargeNumber));
# 130

13以上の値で、最初に見つけ出した130を表示している。

Array.prototype.entries()

配列内の各要素に対するキー/値のペアを含む新しい Array イテレーターオブジェクトを返す。

const alcohols = ['beer', 'highball', 'wine'];

for (const [index, element] of alcohols.entries())
  console.log(index, element);

#> 0 "beer"
#> 1 "highball"
#> 2 "wine"

元々の形が、0:" beer", 1: "highball", 2: "wine"であることを思い出すと理解がしやすい。

Array.prototype.keys()

配列内のキーインデックス数を返す。

var arr = ['酒', , '飲みたくない'];
var sparseKeys = Object.keys(arr);
var denseKeys = [...arr.keys()];
console.log(sparseKeys); # ['0', '2']
console.log(denseKeys);  # [0, 1, 2]

Array.prototype.values()

指定した配列から要素を取り出す。

const alcohols = ['highball', 'beer', 'vodka'];
const iterator = alcohols.values();

for (const value of iterator) {
  console.log(value);
}
#> "highball"
#> "beer"
#> "vodka"

Array.prototype.fill()

引数の数に応じてArrayの中身を変化させる

Array.fill(value)

Arrayの中身をvalueに入れ替える

fill(value, start)

startの位置から最後までの要素をvalueに入れ替える

fill(value, start, end)

startからendの要素をvalueに入れ替える

const array1 = ["酒", "酩酊まで", "ほろ酔い", "しらふ"];

console.log(array1.fill("飲みたい", 2, 4));
#Array ["酒", "酩酊まで", "飲みたい", "飲みたい"]

console.log(array1.fill("飲みたくない", 1));
#Array ["酒", "飲みたくない", "飲みたくない", "飲みたくない"]

console.log(array1.fill("やっぱ飲みたい"));
#Array["やっぱ飲みたい", "やっぱ飲みたい", "やっぱ飲みたい", "やっぱ飲みたい"]

Array.from()

配列のようなオブジェクトや反復可能オブジェクトから、浅くコピーされた新しい Array インスタンスを生成する。

第一引数の値を第二引数に代入する。

Array.from([1, 2, 3], x => x + x);
# [2, 4, 6]

Array.from({length: 5}, (v, i) => i);
# [0, 1, 2, 3, 4]

所感

なんとなくscript内で使っていたメソッド（Array.prototype.findとか）の意味を理解する事ができた。

引数を二つ以上取って関数を作成するとなんだかプログラミングをしている感を味わう事ができる。

いつになったらアルコリズムは完成するのやら😅