非配列オブジェクトを配列に変換する手順の詳細な説明 (コード付き)

今回は、配列以外のオブジェクトを配列に変換する手順を詳しく説明します (コード付き)。 配列以外のオブジェクトを配列に変換する場合の 注意事項 は何ですか?実際のケースを見てみましょう。

前書き

Array.prototype.slice.call(obj)

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

Array.from(obj)

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

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

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

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

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

• 可以用 for of 循环

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

• document.<a href="//m.sbmmt.com/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

  ("p")

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

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

vue中v-if与v-show使用和区别

通过jQuery编码转换、事件响应、页面跳转实现浏览器跳转并传递参数

jQuery实现输入文字超过规定行数时自动添加省略号

以上が非配列オブジェクトを配列に変換する手順の詳細な説明 (コード付き)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。