2022-04-03学習記録--JS-配列のようなオブジェクトまたは反復可能なオブジェクトを配列に変換する2つの方法(Array.from()および[...配列のようなオブジェクトまたは反復可能なオブジェクト])

1.配列のようなオブジェクトまたは反復可能なオブジェクトを配列に変換する2つの方法

配列のようなオブジェクトまたは反復可能なオブジェクトを配列に変換する2つの方法:

  • 方法1、Array.from(类数组对象或可迭代对象)
  • 方法2、[...类数组对象或可迭代对象]

ここに画像の説明を挿入

次に、配列のようなオブジェクトまたは反復可能なオブジェクトとは何ですか?

脳を愛する小さな大根は尋ねたいに違いありません:それ。配列のようなオブジェクトまたは反復可能なオブジェクトとは何ですか?

  • 配列のような/疑似配列オブジェクト(配列に似ていますが、length属性と以外索引元素の配列プロパティはありません。argumentsなど)
  • 反復可能オブジェクト(現在、すべての組み込み反復可能オブジェクトは次のとおりです:、、、、StringおよびArrayおよびそれらTypedArrayプロトタイプオブジェクトはすべてメソッド 。)MapSet@@iterator
    • 反復可能であるためには、オブジェクトは@@iteratorメソッド。これは、次の表[ MDNから参照]に示すように、オブジェクト(またはそのプロトタイプチェーン上の一部のオブジェクト)に、定数を介してアクセスできるキーを@@iterator持つであることを意味します。Symbol.iterator
属性 価値
[Symbol.iterator] 戻り値がイテレータプロトコルに準拠するオブジェクトであるパラメータなしの関数。

Set
ここに画像の説明を挿入

【補充】 ES6デフォルトのIteratorインターフェースSymbol.iterator。または、データ構造にSymbol.iteratorプロパティがある限り、「トラバース可能/反復可能」と見なすことができます(iterable)。[ ES6から参照]

3.例

1.配列のようなオブジェクト(引数)から配列を生成します

引数は、関数に渡される引数に対応する配列のようなオブジェクトです。

function fn() {
    
    
  // 方法1
  return Array.from(arguments);
  // 方法2
  return [...arguments];
}

fn(1, 2, 3); // [1,2,3]

1.文字列から配列を生成します

// 方法1
console.log(Array.from('carrot')); // ['c', 'a', 'r', 'r', 'o', 't']
// 方法2
console.log([...'carrot']); // ['c', 'a', 'r', 'r', 'o', 't']

2.セットから配列を生成します

// new Set(数组):实现数组去重
const set = new Set(['a','b','c','a','d','c']); // {'a', 'b', 'c', 'd'}
// 方法1
console.log(Array.from(set)); // ['a', 'b', 'c', 'd']
// 方法2
console.log([...set]); // ['a', 'b', 'c', 'd']

3.マップから配列を生成します

const map = new Map([[1, 2], [2, 4], [4, 8]]);
// 方法1
Array.from(map); // [[1, 2], [2, 4], [4, 8]]
// 方法2
[...map]; // [[1, 2], [2, 4], [4, 8]]

const mapper = new Map([['1', 'a'], ['2', 'b']]);
// 方法1
Array.from(mapper.values()); // ['a', 'b']
Array.from(mapper.keys()); // ['1', '2']
// 方法2
[...mapper.values()]; // ['a', 'b']
[...mapper.keys()]; // ['1', '2']

おすすめ

転載: blog.csdn.net/weixin_48850734/article/details/123937832