JS从非数组对象转数组的方法小结


Posted in Javascript onMarch 26, 2018

前言

本文主要汇总了一些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.getElementsByTagName("div") 返回的是可迭代对象但不是一个数组
    Array.isArray(document.getElementsByTagName('div')) 返回 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() 方法,创建指定数量的字符串副本

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript 篱式条件判断
Aug 22 Javascript
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
Javascript的常规数组和关联数组对比小结
May 24 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
jquery实现个人中心导航菜单效果和美观都非常不错
Sep 02 Javascript
javascript随机显示背景图片的方法
Jun 18 Javascript
Node.js的Koa框架上手及MySQL操作指南
Jun 13 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
JavaScript中数组的各种操作的总结(必看篇)
Feb 13 Javascript
VUE页面中加载外部HTML的示例代码
Sep 20 Javascript
vue elementUI 表单校验功能之数组多层嵌套
Jun 04 Javascript
解决Layui当中的导航条动态添加后渲染失败的问题
Sep 25 Javascript
深入理解Node module模块
Mar 26 #Javascript
利用Console来Debug的10个高级技巧汇总
Mar 26 #Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 #Javascript
vue中使用iview自定义验证关键词输入框问题及解决方法
Mar 26 #Javascript
Vue中v-show添加表达式的问题(判断是否显示)
Mar 26 #Javascript
使用Vue构建可重用的分页组件
Mar 26 #Javascript
基于jQuery实现Ajax验证用户名是否可用实例
Mar 25 #jQuery
You might like
PHP 5.3.0 安装分析心得
2009/08/07 PHP
PHP去掉json字符串中的反斜杠\及去掉双引号前的反斜杠
2015/09/30 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
给Javascript数组插入一条记录的代码
2007/08/30 Javascript
jquery事件机制扩展插件 jquery鼠标右键事件
2011/12/21 Javascript
jquery交替变换颜色的三种方法 实例代码
2013/11/19 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
Javascript表单验证要注意的事项
2014/09/29 Javascript
浅析JavaScript事件和方法
2015/02/28 Javascript
微信jssdk用法汇总
2016/07/16 Javascript
JavaScript实现邮箱地址自动匹配功能代码
2016/11/28 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
详解用Webpack与Babel配置ES6开发环境
2019/03/12 Javascript
JavaScript中的this基本问题实例小结
2020/03/09 Javascript
Javascript异步执行不按顺序解决方案
2020/04/30 Javascript
jQuery HTML设置内容和属性操作实例分析
2020/05/20 jQuery
javascript实现放大镜功能
2020/12/09 Javascript
[49:08]Secret vs VP 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Python的time模块中的常用方法整理
2015/06/18 Python
linux下python使用sendmail发送邮件
2018/05/22 Python
对numpy中数组转置的求解以及向量内积计算方法
2018/10/31 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
python 实现两个npy档案合并
2020/07/01 Python
浅析Python 多行匹配模式
2020/07/24 Python
Python操作Word批量生成合同的实现示例
2020/08/28 Python
详解pytorch tensor和ndarray转换相关总结
2020/09/03 Python
Python Pandas数据分析工具用法实例
2020/11/05 Python
美国指甲油品牌:Deco Miami
2017/01/30 全球购物
联想瑞士官方网站:Lenovo Switzerland
2017/11/19 全球购物
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
英文版银行求职信
2013/10/09 职场文书
超市开业庆典策划方案
2014/05/14 职场文书
先进个人推荐材料
2014/12/29 职场文书
结婚保证书(卖身契)
2015/02/26 职场文书
总经理司机岗位职责
2015/04/10 职场文书
公司保密管理制度
2015/08/04 职场文书