今回は、配列以外のオブジェクトを配列に変換する手順を詳しく説明します (コード付き)。 配列以外のオブジェクトを配列に変換する場合の 注意事項 は何ですか?実際のケースを見てみましょう。
前書き
この記事は主に、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)の簡潔な記述<p style="text-align: left;"><code>[].slice.call(obj)
Array.from(obj)
该方法可以将类数组对象和可迭代对象转换为数组
类数组对象上文已提及，何为可迭代对象？
Array、Set、Map 和字符串都是可迭代对象（WeakMap/WeakSet 并不是可迭代对象）
字符串变成了可迭代对象，解决了编码的问题
这些对象都有默认的迭代器，即具有 Symbol.iterator 属性
可以用 for of 循环
所有通过生成器创建的迭代器都是可迭代对象
document.<a href="http://www.php.cn/code/8145.html" target="_blank">getElementsByTagName</a>("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')]
Array.from(obj)このメソッドは、配列のようなオブジェクトと反復可能なオブジェクトを配列に変換できます
Array-同様のオブジェクトは上で説明しました。反復可能なオブジェクトとは何ですか?
Array、Set、Map、Stringはすべて反復可能なオブジェクトです(WeakMap/WeakSetは反復可能なオブジェクトではありません)
Stringは反復可能なオブジェクトになり、エンコーディングの問題を解決します
これらのオブジェクトにはデフォルトの反復子があります。これらには Symbol.iterator プロパティがあり、for of ループを使用できます。document.getElementsByTagName
Array.isArray(document.getElementsByTagName('p')) falseを返しますジェネレーターを通じて反復可能なオブジェクトを作成します🎜let obj = {
'0': 3,
'1': 13,
'2': 23,
'3': 33
}
let arr = Object.values(obj) // [3, 13, 23, 33]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'] 戻り値 ["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() 方法，创建指定数量的字符串副本
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
以上が非配列オブジェクトを配列に変換する手順の詳細な説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
