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 相关文章推荐
提升你网站水平的jQuery插件集合推荐
Apr 19 Javascript
利用jQuery操作对象数组的实现代码
Apr 27 Javascript
js判断手机端(Android手机还是iPhone手机)
Jul 22 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
AngularJS中$watch和$timeout的使用示例
Sep 20 Javascript
Bootstrap实现导航栏的2种方式
Nov 28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
JS实现模糊查询带下拉匹配效果
Jun 21 Javascript
详解Angular-ui-BootStrap组件的解释以及使用
Jul 13 Javascript
微信小程序Flex布局用法深入浅出分析
Apr 25 Javascript
Vue关于组件化开发知识点详解
May 13 Javascript
Element Notification通知的实现示例
Jul 27 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获取文件扩展名的方法实例总结
2017/06/10 PHP
lnmp安装多版本PHP共存的方法详解
2018/08/02 PHP
img的onload的另类用法
2008/01/10 Javascript
JSON无限折叠菜单编写实例
2013/12/16 Javascript
javascript操作css属性
2013/12/30 Javascript
一个简单的Node.js异步操作管理器分享
2014/04/29 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
2014/06/30 Javascript
node.js 使用ejs模板引擎时后缀换成.html
2015/04/22 Javascript
Bootstrap基本组件学习笔记之进度条(15)
2016/12/08 Javascript
jQuery实现腾讯信用界面(自制刻度尺)样式
2017/08/15 jQuery
C#实现将一个字符转换为整数
2017/12/12 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
Vue实现搜索结果高亮显示关键字
2019/05/28 Javascript
微信小程序渲染性能调优小结
2019/07/30 Javascript
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
python用来获得图片exif信息的库实例分析
2015/03/16 Python
插入排序_Python与PHP的实现版(推荐)
2017/05/11 Python
python利用wx实现界面按钮和按钮监听和字体改变的方法
2019/07/17 Python
简单了解Django ContentType内置组件
2019/07/23 Python
浅谈opencv自动光学检测、目标分割和检测(连通区域和findContours)
2020/06/04 Python
anaconda3安装及jupyter环境配置全教程
2020/08/24 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
新西兰杂志订阅:isubscribe
2019/08/26 全球购物
生物化学研究助理员求职信
2013/10/09 职场文书
酒店个人培训自我鉴定
2013/12/11 职场文书
秋季校运动会广播稿
2014/02/23 职场文书
《风筝》教学反思
2014/04/10 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2015年上半年物业工作总结
2015/03/30 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
搞笑结婚保证书
2015/05/08 职场文书
紫日观后感
2015/06/05 职场文书
李强为自己工作观后感
2015/06/11 职场文书
工作建议书范文
2019/07/08 职场文书
win11如何查看端口是否被占用? Win11查看端口是否占用的技巧
2022/04/05 数码科技
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript