ES6で擬似配列を配列に変換する方法

ES6 では、配列型の from() メソッドを使用して、擬似配列を配列に変換できます。このメソッドは、配列のようなオブジェクトまたはトラバース可能なオブジェクトを実際の配列に変換できます。 "Array.from(擬似配列オブジェクト).forEache(item=>console.log(item))"。

このチュートリアルの動作環境: Windows 7 システム、ECMAScript バージョン 6、Dell G3 コンピューター。

ECMAScript6 の新機能 - 擬似配列

擬似配列とは: オブジェクトのすべてのキーが正の整数またはゼロで、長さ属性がある場合、このオブジェクトは配列と同じように、擬似配列と呼ばれます。

典型的な疑似配列: 引数オブジェクト、ほとんどの DOM 要素セット、および文字列。

例

let arrayLike = {
 "0": "a",
 "1": "b",
 "2": "c",
 "length": 3
}

上記の arrayLike オブジェクトと同様に、このオブジェクトには長さ属性があり、キーも順序付けされたシーケンスです。

したがって、トラバースして長さをクエリすることができます。ただし、配列メソッドを呼び出すことはできません。プッシュ、ポップ、その他のメソッドなど。

ES6 より前には、共通の疑似配列: 引数もありました。

arguments も配列のように見えますが、配列メソッドはありません。

たとえば、arguments.push(1) では、間違いなくエラーが報告されます。

ES6 で擬似配列を配列に変換する方法

ES6 では、Array 型の from メソッドを使用して変換できます。擬似配列を配列に変換します。

Array.from() メソッドは、2 種類のオブジェクトを実際の配列に変換するために使用されます:

1. 配列のようなオブジェクトは、「疑似配列」として理解できます

2. 走査可能なオブジェクト (文字列など)

  <button name="button">测试1</button>
    <br/>
    <button name="button">测试2</button>
    <br/>
    <button name="button">测试3</button>
    <br/>
<script>
//声明变量let变量，const常量
let btns=document.getElementsByName("button");
console.log("btns",btns);//得到一个伪数组
//此处出现异常:Uncaught TypeError:btns.forEach is not a function 
btns.forEach(item=>console.log(item))
</script>
<script>
Array.from(btns).forEache(item=>console.log(item))//将伪数组转换为数组
</script>

Array.from の主な機能は、擬似配列と走査可能なオブジェクトを配列に変換することです。

「メイン関数」と言う理由は、Array.from が渡すパラメーターも 2 つ提供しているためです。これにより、さまざまな種類の小さなゲームプレイを拡張できます。

• Array.from の 2 番目のパラメーターは、マップ トラバーサル メソッドと同様の関数です。横断するために使用されます。

• Array.from の 3 番目のパラメーターは、this ポインターを変更するために使用される this オブジェクトを受け入れます。

3 番目のパラメータの使用法 (一般的には使用されません)

let helper = {
 diff: 1,
 add (value) {
  return value + this.diff; // 注意这里有个 this
 }
};

function translate () {
 return Array.from(arguments, helper.add, helper);
}

let numbers = translate(1, 2, 3);

console.log(numbers); // 2, 3, 4

知識を広げる: 文字列を配列に変換する

let msg = 'hello';
let msgArr = Array.from(msg);
console.log(msgArr);
// 输出: ["h", "e", "l", "l", "o"]

[関連する推奨事項: JavaScript ビデオ チュートリアル 、Web フロントエンド ]

以上がES6で擬似配列を配列に変換する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。