非配列オブジェクトを配列に変換する JS メソッド

この記事では主に、JS を非配列オブジェクトから配列に変換するいくつかのメソッド、つまり Array.prototype.slice.call(obj)、Array.from(obj)、[...obj]、および Object.values( obj) 必要な友人は、他のメソッドの詳細な実装方法を参照してください。皆さんのお役に立てれば幸いです。

Array.prototype.slice.call(obj)

このメソッドは、配列のようなオブジェクトを配列に変換できます。いわゆる配列のようなオブジェクトは、長さとインデックスの属性を持つオブジェクトです。返される配列の長さは、オブジェクトの length 属性の値、およびインデックスのない属性の値、または length より大きいインデックスを持つ値によって異なります

実際の実装は次のとおりです以下

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33,
 'length': 3,
 'name': 330
}
let arr = Array.prototype.slice.call(obj)
// [3, 13, 23]

メソッドの簡潔な記述 [].slice.call(obj)

[].slice.call(obj)

Array.from(obj)

该方法可以将类数组对象和可迭代对象转换为数组

类数组对象上文已提及，何为可迭代对象？

• Array、Set、Map 和字符串都是可迭代对象（WeakMap/WeakSet 并不是可迭代对象）

• 字符串变成了可迭代对象，解决了编码的问题

• 这些对象都有默认的迭代器，即具有 Symbol.iterator 属性

• 可以用 for of 循环

• 所有通过生成器创建的迭代器都是可迭代对象

• document.getElementsByTagName("p") 返回的是可迭代对象但不是一个数组
  Array.isArray(document.getElementsByTagName('p')) 返回 false

通过生成器创建可迭代对象

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

function *createIterator(obj){
 for(let value in obj){
  yield obj[value]
 }
}

let iterator = createIterator(obj)
let arr = Array.from(iterator)
// [3, 13, 23, 33]

改造对象本身，使其成为可迭代对象

默认情况下，开发者定义的对象都是不可迭代对象，但如果给 Symbol.iterator 属性添加一个生成器，则可以将其变为可迭代对象

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}

obj[Symbol.iterator] = function* () {
 for(let value in this){
  yield this[value]
 }
}

let arr = Array.from(obj)
// [3, 13, 23, 33]

判断对象是否为可迭代对象的方法

typeof obj[Symbol.iterator] === 'function'

一点延伸 for of 与 forEach 与 for in

for of 用于循环可迭代对象，包括有 Array, Set, Map, 字符串

而 Array, Set, Map 都有 forEach 方法

另外，NodeList 不是 Array, Set, Map，但是一个可迭代对象，可以用 for of 遍历

此外，用 for of 循环对象时可以通过 break 提前终止，而 forEach 无法提前跳出循环

for in 遍历对象的可枚举属性，包括其原型链上的属性，且不保证顺序

若要遍历对象自身的可枚举属性，使用 hasOwnProperty() 方法来确定属性是否时对象自身属性

Object.getOwnPropertyNames(obj) ， 返回对象自身可枚举或不可枚举属性

反正已经扯远了，那就再扯远一点， Object.assign() 方法将所有可枚举属性的值从一个或多个源对象复制到目标对象

[…obj]

展开运算符可以将可迭代对象转换为数组

例如， [...'obj'] 返回 ["o", "b", "j"]

字符串去重

[...new Set('objobj')]

Object.values(obj)

默认情况下，开发者定义的对象都是不可迭代对象，但提供了返回迭代器的方法

• entries()

• values()

• keys()

通过使用这些方法，可以返回相关的数组

与类数组对象需要对象有 length 值不同，Object.values(obj) 返回对象自身可枚举属性值的集合

let obj = {
 '0': 3,
 '1': 13,
 '2': 23,
 '3': 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]

字符串与数组的关系

在很大程度上，可以将字符串看成字符串数组，

都有 length 属性

都有 concat() / indexOf() / includes() / slice() 方法

不过值得注意的是， string 上没有方法可以原地修改它自身的内容，都是返回新的 string

string 还有个 repeat()

Array.from(obj)

🎜このメソッドは、配列のようなオブジェクトと反復可能なオブジェクトを配列🎜🎜配列のようなオブジェクトについては上で説明しましたが、反復可能なオブジェクトとは何ですか? 🎜

• 🎜Array、Set、Map、String はすべて反復可能なオブジェクトです (WeakMap/WeakSet は反復可能なオブジェクトではありません) 🎜
• 🎜Character 文字列は次のようになります。エンコードの問題を解決する反復可能なオブジェクト🎜
• 🎜これらのオブジェクトにはデフォルトの反復子、つまり Symbol.iterator 属性があります🎜
• 🎜ループの for を使用できます🎜
• 🎜ジェネレーターを通じて作成されたすべての反復子は反復可能オブジェクトです🎜
• 🎜document.getElementsByTagName("p") は Iterable オブジェクトを返しますが、配列は返しません🎜Array.isArray(document.getElementsByTagName('p')) Return false🎜

🎜ジェネレーターを通じて反復可能なオブジェクトを作成します🎜

🎜🎜rrreee🎜を変換しますオブジェクト自体を反復可能なオブジェクトにします🎜🎜 デフォルトでは、開発者によって定義されたオブジェクトは反復不可能なオブジェクトですが、Symbol.iterator を指定すると、属性にジェネレーターを追加すると、それを反復可能なオブジェクトに変換します🎜

🎜🎜rrreee🎜オブジェクトが反復可能なオブジェクトかどうかを判断するメソッド🎜

🎜🎜rrreee🎜 for of と forEach とを少し拡張したものfor in🎜🎜for of は、Array、Set、Map、文字列などの反復可能なオブジェクトをループするために使用されます🎜🎜そして、Array、Set、Map にはすべて forEach メソッドがあります🎜🎜さらに、NodeList は Array、Set、Map ではありませんが、反復可能なオブジェクトは、for of で走査できます🎜🎜さらに、for of を使用してオブジェクトをループする場合、break によって早期に終了できますが、forEach は事前にループから抜け出すことはできません🎜🎜for in は列挙可能なプロパティを走査しますプロトタイプ チェーン上のプロパティを含む、オブジェクトの順序は保証されません🎜🎜 オブジェクト自体の列挙可能なプロパティを走査するには、 hasOwnProperty() メソッドを使用して、そのプロパティがオブジェクトのプロパティであるかどうかを判断します独自のプロパティ🎜🎜Object .getOwnPropertyNames(obj) は、オブジェクト自体の列挙可能または列挙不可能なプロパティを返します🎜🎜 とにかく、行き過ぎたので、もう少し先に進みましょう。 >Object.assign() メソッドは、すべての列挙可能なプロパティの値が 1 つ以上のソース オブジェクトからターゲット オブジェクトにコピーされます 🎜🎜🎜🎜 […obj] 🎜🎜🎜🎜🎜 スプレッド演算子は変換できます反復可能なオブジェクトを配列に変換します🎜🎜 たとえば、 [ ...'obj'] Return ["o", "b", "j"]🎜🎜String deduplication🎜🎜[...new Set( 'objobj')]🎜🎜🎜🎜Object.values(obj)🎜🎜🎜🎜🎜 デフォルトでは、開発者によって定義されたオブジェクトは反復不可能ですオブジェクトですが、反復子を返すメソッドが提供されています🎜

• 🎜entries()🎜
• 🎜values()🎜
• 🎜 key()🎜

🎜これらのメソッドを使用すると、関連する配列を返すことができます🎜🎜オブジェクトに長さの値が必要な配列のようなオブジェクトとは異なり、Object.values(obj) は、オブジェクト自体の列挙可能なプロパティ値のコレクションを返します🎜<p class="jb51code">🎜🎜rrreee🎜🎜文字列と配列の関係🎜🎜🎜🎜大部分において、文字列は文字列配列と見なされ、🎜🎜すべてに length 属性があります🎜🎜すべてに <code> concat() / indexOf() / includes() / slice()

メソッド 🎜🎜 ただし、string には独自のコンテンツをその場で変更できるメソッドが存在しないことに注意してください。これらはすべて新しい文字列を返します🎜🎜 repeat() メソッドを使用して、指定した数の文字列のコピーを作成します。 🎜🎜🎜🎜🎜

以上が非配列オブジェクトを配列に変換する JS メソッドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。