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

时间: 2018-03-08阅读: 885标签: Array

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() 方法,创建指定数量的字符串副本

来源:https://segmentfault.com/a/1190000013579180


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/480

Js Array对象常用方法

不改变原数组:concat();join();slice();toString(),改变原数组:pop();push();reverse();shift();unshift();sort();splice(),array.concat(array)连接两个或多个数组,返回被连接数组的一个副本

Array.slice 8种不同用法

在深入研究一些更高级的用法之前,让我们看一下slice方法的基础知识。如MDN文档,slice 是数组上的一个方法,它最多有两个参数,从该索引处开始提取原数组中的元素,如果该参数为负数,则表示从原数组中的倒数第几个元素开始提取

es6中 Array.from()函数的用法

ES6为Array增加了from函数用来将其他对象转换成数组,Array.from可以接受三个参数,我们看定义:Array.from(arrayLike [, mapFn [, thisArg]])。arrayLike:被转换的的对象。 mapFn:map函数。 thisArg:map函数中this指向的对象。

js中split()和join() 的使用_数组对象和字符串的相互转换

在前端开发中,相信大家都遇到过数组和字符串相互转换的情况 ,JavaScript提供了split()和join()这2个函数来进行转换,下面就介绍数组对象和字符串的相互转换。

Array数组相关方法

push向数组末尾添加元素;unshift向数组开头增加元素;pop删除数组末尾一项;shift删除数组的第一项;join为数组添加指定的分隔符;slice找某一区域内的项,返回成新数组形式

原生js获取数组中的最大值max和最小值min的方法总结

JavaScript获取数组中的最大值和最小值:方法一:传统循环遍历,方法二:利用Math.max和Math.min,方式三.利用sort排序...

js数组的迭代

js数组的迭代:forEach() 方法对数组的每个元素执行一次提供的函数。map() 方法创建一个新数组,其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。filter() 方法创建一个新数组, 其包含通过所提供函数实现的测试的所有元素。

Array.prototype.slice.call()

MDN中对于Array.prototype.slice.()的介绍中,提到了类数组对象。以下是原文:slice 方法可以用来将一个类数组(Array-like)对象/集合转换成一个新数组。你只需将该方法绑定到这个对象上。 一个函数中的 arguments 就是一个类数组对象的例子。

es6之Array.of()和Array.from()

es6新增了二种方法:Array.of()和Array.from(),它们有什么用途呢?在平时的开发中能给我们带来什么方便呢?本篇将从一个创建数组的小问题开始,逐步揭开它们的面纱。

如何在 JavaScript 中更好地使用数组

在过去的数个月里,我注意到在我审阅的 pull request 中有四个(关于数组使用的)错误经常出现。同时,我自己也会犯这些错误,因此有了这篇文章。让我们一起学习,以确保以后能正确地使用数组方法!

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广