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

この記事では主に、JS を非配列オブジェクトから配列に変換するいくつかのメソッド、つまり Array.prototype.slice.call(obj)、Array.from(obj)、[...obj]、および Object.values( obj) などのメソッドを使用すれば、困っている友人がそれを参照できます。

前書き

この記事は主に、JS を非配列オブジェクトから配列に変換するいくつかの方法を要約し、参考と学習のために共有します。以下では多くを説明しません。導入。

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)の簡潔な記述<code>[].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-同様のオブジェクトは上で説明しました。反復可能なオブジェクトとは何ですか?

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

• 🎜entries()🎜
• 🎜values() 🎜
• 🎜keys()🎜

🎜これらのメソッドを使用すると、関連する配列を返すことができます 🎜🎜長さの値を持つオブジェクト、Object.values(obj) オブジェクト自体の列挙可能な属性値のコレクションを返します🎜rrreee🎜🎜文字列と配列の関係🎜🎜🎜範囲が広く、文字列は文字列配列と見なすことができます🎜🎜両方の長さ属性があります 🎜🎜 と concat() / indexOf() / includes があります() / slice() メソッド🎜🎜 ただし、文字列には、独自のコンテンツをその場で変更できるメソッドが存在しないことに注意してください。これらはすべて新しい文字列🎜🎜文字列を返します。 . 指定した数の String コピーを作成する repeat() メソッドもあります🎜🎜 以上が皆さんの参考になれば幸いです。 🎜🎜関連記事: 🎜🎜🎜JavaScript、Ajax、jQueryの予備理解と3つの関係の比較🎜🎜🎜🎜jqueryとphpを組み合わせてAJAXロングポーリングを実装🎜🎜🎜🎜Jqueryの具体例でAJAXを使用するタイミングを紹介、および AJAX を使用する場所 使用する場所 🎜🎜

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