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一种取同级值的方式(比如你在GridView中)
Mar 15 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
跟我学习JScript的Bug与内存管理
Nov 18 Javascript
javascript代码调试之console.log 用法图文详解
Sep 30 Javascript
微信小程序 闭包写法详细介绍
Dec 14 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
浅谈关于iview表单验证的问题
Sep 29 Javascript
vue+element实现表格新增、编辑、删除功能
May 28 Javascript
layer关闭当前窗口页面以及确认取消按钮的方法
Sep 09 Javascript
vue与iframe之间的信息交互的实现
Apr 08 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中如何将数组变量写入文件
2013/06/06 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
PHP中__autoload和Smarty冲突的简单解决方法
2016/04/08 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
Smarty模板语法详解
2019/07/20 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
JavaScript 中的replace方法说明
2007/04/13 Javascript
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
2013/01/23 Javascript
上传的js验证(图片/文件的扩展名)
2013/04/25 Javascript
详解vue过滤器在v2.0版本用法
2017/06/01 Javascript
JS实现留言板功能
2017/06/17 Javascript
不到200行 JavaScript 代码实现富文本编辑器的方法
2018/01/03 Javascript
一次记住JavaScript的6个正则表达式方法
2018/02/22 Javascript
jQuery实现的淡入淡出图片轮播效果示例
2018/08/29 jQuery
angular 用Observable实现异步调用的方法
2018/12/27 Javascript
微信小程序实现商城倒计时
2020/11/01 Javascript
VsCode里的Vue模板的实现
2020/08/12 Javascript
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
详解Python操作RabbitMQ服务器消息队列的远程结果返回
2016/06/30 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Django如何实现上传图片功能
2019/08/16 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python如何将模块打包并发布
2020/08/30 Python
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
德国高性价比网上药店:medpex
2017/07/09 全球购物
澳大利高级泳装品牌:Bondi Born
2018/05/23 全球购物
Lookfantastic美国/加拿大:英国知名美妆购物网站
2019/03/27 全球购物
CheapTickets香港机票预订网站:CheapTickets.hk
2019/06/26 全球购物
个人自我鉴定怎么写
2013/10/28 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
令人印象深刻的自荐信
2014/05/25 职场文书
党支部季度考核意见
2015/06/02 职场文书
食品安全主题班会
2015/08/13 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书