首页 >web前端 >js教程 >非数组对象转数组步骤详解（附代码）

非数组对象转数组步骤详解（附代码）

php中世界最好的语言原创: 2018-05-03 11:20:071681浏览

这次给大家带来非数组对象转数组步骤详解（附代码），非数组对象转数组的注意事项有哪些，下面就是实战案例，一起来看一下。

前言

本文主要汇总了一些JS从非数组对象转数组的方法，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。

Array.prototype.slice.call(obj)

该方法可以将类数组对象转换为数组，所谓类数组对象，就是含 length 和索引属性的对象

返回的数组长度取决于对象 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)

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')]

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中文网其它相关文章！