データを配列に変更するいくつかの方法

データを配列に変更するいくつかの方法

---

id	方法	使用するシーン
1	Array.from()	1.配列のようなオブジェクト2.トラバース可能なオブジェクト
2	スプレッド演算子...	1.関数のargumentsパラメータオブジェクトを取得します。2。Dom操作によって取得されたNodeList
3	split('')	1.文字列を配列に分割します
4	Array.of()	1.値のセットを配列に変換します

1. Array.from（）メソッド（es6のメソッド）

• 使用シナリオ：このメソッドは、配列のようなオブジェクトとトラバース可能なオブジェクトのみを配列に変換できます。
• 例1：配列のようなオブジェクト（関数内の引数オブ​​ジェクトとDomによって返されるNodeListを含む）

//  这里的对象得有伪索引,数组长度
let arr = {
    
    
  0: 'a',
  1: 'b',
  length: 2
}

a = Array.from(arr)
console.log(a) // [ 'a', 'b' ]

• eg2：トラバース可能なオブジェクト

//  字符串部署了Iterator接口,可遍历
let arr = Array.from('hello')
console.log(arr)// [ 'h', 'e', 'l', 'l', 'o' ]

2.スプレッド演算子...

• 使用シナリオ：1）Dom操作によって返されるNodeList。2）関数の引数オブ​​ジェクト。
• 例1：ドム操作

//  获取所有的P标签
let a = document.querySelectorAll('p');
//  将p标签转换成数组,并过滤到p中文字长度小于等于100的标签
a = Array.from(a).filter(n => n.textContent.length > 100) // (4) [p, p, p, p]

-eg2：関数の引数オブ​​ジェクト

//  
function foo() {
    
    
  return [...arguments]
}
console.log(foo(1, 2, 3, 4, 5, 6)) //[ 1, 2, 3, 4, 5, 6 ]

3. Split（ ''）メソッド

• 使用シナリオ：文字列を配列に変換する
• 例1：

let arr = Array.from('hello')
console.log(arr) // [ 'h', 'e', 'l', 'l', 'o' ]

4. Array.of（）メソッド（es6）

• 使用シナリオ：値のセットを配列に変換します
• このメソッドは、Array（）の欠点を補うためのものです。Array（）のパラメーターの長さが2を超える場合にのみ配列を返し、それ以外の場合は配列の長さのみを指定するためです。
• 例1：

//  只有一个参数时也会返回新的数组,Array()不会.
let arr = Array.of(1)
console.log(arr);

//  返回新的数组
let arr = Array.of(1, 2, 3, 4, 5)
console.log(arr);// [ 1, 2, 3, 4, 5 ]