Array.from()#

配列ライクなオブジェクトやイテラブルなオブジェクトを、実際の配列に変換します。

変換可能なカテゴリ#

DOMコレクション#

let ps = document.querySelectAll("p"); //通过Array.from 转换后可以使用forEach方法
Array.from(ps).forEach(function (p, index) {
  "use strict";
  console.log(p, index);
});

argumentsオブジェクト#

function foo() {
  "use strict";
  var args = Array.from(arguments); //可以替代以前下面这种方式来转换
  var argvs = Array.prototype.slice.call(arguments);
  console.log(argvs, args);
}
foo(1, 2, 3, 4); //[ 1, 2, 3, 4 ] [ 1, 2, 3, 4 ]

lengthプロパティを持つオブジェクト#

var obj = {
  0: "a",
  1: "b",
  2: "c",
  length: 3,
};
var obj1 = {
  0: "a",
  1: "b",
  2: "c",
};
console.log(Array.from(obj)); //['a','b','c']
console.log(Array.from(obj1)); //[] 没有length属性，无法转换

注意点として、オブジェクトのプロパティ値は数値である必要があります。そうでない場合、変換された配列の内容はすべてundefinedになります。

let obj2 = {
  a: 1,
  b: 2,
  c: 3,
  length: 3,
};
console.log(Array.from(obj2)); //[ undefined, undefined, undefined ]

また、Array.from()は2番目の引数を受け入れ、mapメソッドと同様の働きをします#

console.log(Array.from(obj, (x) => x + "1")); //[ 'a1', 'b1', 'c1' ]  类似于map方法

Array.of()#

一連の値を配列に変換できます。

Array.of(3, 12, 2, 3, 24, 2); //[ 3, 12, 2, 3, 24, 2 ]    将一组值转换为数组
Array.of(3, "12", [2], 3, 24, 2); //[ 3, '12', [ 2 ], 3, 24, 2 ]

このメソッドの目的は、Array()コンストラクターの欠点を補うことです。なぜなら、引数の数が異なる場合、異なる結果を生み出すからです。

Array(8); // [ , , , , , , ,  ]
Array(3, 11); // [3, 11]

find()と findIndex()#

配列インスタンスのfindメソッドは、条件に合致する最初の配列メンバーを見つけるために使用されます。その引数はコールバック関数であり、すべての配列メンバーが順番にこのコールバック関数を実行し、trueを返す最初のメンバーが見つかるまで続きます。そして、そのメンバーが返されます。条件に合致するメンバーが見つからない場合は、undefinedが返されます。

var found = [1, 2, 3, 4, -1].find((n) => n < 0); //find 找出第一个返回值为true的成员
var founded = [1, 2, 3, 4, -1].find(function (b) {
  return b > 3;
});
console.log("result:", found, founded); //result: -1 4

findIndexは、条件に合致する最初の値のindexを返します。見つからない場合は-1を返します。

var foundIndex = [1, 2, 324, 5, 34].findIndex(function (value, index, arr) {
  "use strict";
  return value > 100;
});
console.log(foundIndex); //2

これらの2つのメソッドはどちらもNaNを発見できますが、indexOfは発見できません。

console.log([2, 3, 4, NaN].indexOf(NaN)); //-1
console.log([1, 2, NaN].find((value) => Object.is(NaN, value))); //NaN
console.log([1, 2, 3, 4, NaN].findIndex((value) => Object.is(NaN, value))); //4

Array.fill()#

指定された値で配列を埋めます。

[1, 2, 3, 4].fill("a"); //[ 'a', 'a', 'a', 'a' ]
new Array(6).fill(3); //[ 3, 3, 3, 3, 3, 3 ]

fill()は、2番目と3番目の引数を受け入れることもでき、これらは埋める開始位置と終了位置を指定するために使用されます。

[1, 2, 3, 4]
  .fill(8, 1, 2) //[1,8,3,4]
  [(1, 2, 3, 4)].fill(8, 1, 3); //[ 1, 8, 8, 4 ]

entries()、keys()、values()#

これら3つのメソッドはすべて配列を反復処理するために使用され、for...ofで反復処理できます。keys()はキー名を反復処理し、values()は値を反復処理し、entries()はキーと値のペアを反復処理します。

for (let index of ["a", "b"].keys()) {
  console.log(index);
}
// 0
// 1

for (let elem of ["a", "b"].values()) {
  console.log(elem);
}
// 'a'
// 'b'

for (let [index, elem] of ["a", "b"].entries()) {
  console.log(index, elem);
}
// 0 "a"
// 1 "b"

個人的にはあまり意味がないと感じています。以前のforEachと同じ機能ですが、for...ofで反復処理しない場合、nextを使って手動で反復処理できる点が異なります。

let word = ["h", "e", "l", "l", "o"];
let entries = word.entries();
console.log(entries.next().value);
[0, "h"];
console.log(entries.next().value);
[1, "e"];

その他のメソッド#

これらはすべてES7で実装される内容です。

include#

配列が指定された値を含んでいるかどうかを判断し、真偽値を返します。

配列内包表記#

ここがPythonにますます似てきているように感じます。

var a1 = [1, 2, 3, 4];
var a2 = [for (i of a1) i * 2];
a2 // [2, 4, 6, 8]

for...ofの後にはif文を追加することもでき、ループの制限条件を設定するために使用されます。

var years = [ 1954, 1974, 1990, 2006, 2010, 2014 ];

[for (year of years) if (year > 2000) year];
// [ 2006, 2010, 2014 ]

[for (year of years) if (year > 2000) if(year < 2010) year];
// [ 2006]

[for (year of years) if (year > 2000 && year < 2010) year];
// [ 2006]

Array.observe()、Array.unobserve()#

配列の変化を監視し、コールバック関数を定義するために使用されます。 このメソッドにはかなり期待しており、その影響は大きいでしょう。

版権#

記事内のすべてのコードは以下から引用または派生しています：

阮一峰-ECMAScript 6 入门, 本記事も同様に表示-非営利ライセンスに従います。