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

silvertheo 发布于2019-08-22 15:09 / 662人阅读

摘要：该方法可以将类数组对象转换为数组，所谓类数组对象，就是含和索引属性的对象返回的数组长度取决于对象属性的值，且非索引属性的值，或索引大于的值都不会被返回到数组中实锤如下简洁写法该方法可以将类数组对象和可迭代对象转换为数组类数组对象上文已提及，

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

云服务器 GPU云服务器 php转对象数组对象 thinkphp对象转数组 php数组转对象 php对象转数组

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/93212.html

call、apply、bind的用法小结

摘要：新手经常犯的一个错误是将一个方法从对象中拿出来，然后再调用，希望方法中的是原来的对象。如果不做特殊处理的话，一般会丢失原来的对象。 call、apply、bind是JavaScript中Function函数自带的方法，主要用于改变this的指向区别： call（） 1.语法： fun.call(this, arg1,arg2) 2.this取值的几点说明：（1）处于非严格模式下，...

woshicixide 2019-08-26 11:36 评论0 收藏0
个人小结--javascript实用技巧和写法建议

摘要：类似的情况还有，方法和方法等。今天我说一个最简单。代码如下和也可以实现，但是生成的是一个整数，如下分割线其它类型数据转布尔数据下面的转换，大家一看就明白了，不多说。缓存变量循环缓存分割线第一段就是每一次循环的时候，都要查询一次。 1.前言从大学到现在，接触前端已经有几年了，感想方面，就是对于程序员而言，想要提高自己的技术水平和编写易于阅读和维护的代码，我觉得不能每天都是平庸的写代码，...

WilsonLiu95 2019-08-21 16:18 评论0 收藏0
多标签(组)运算

摘要：代码实现测试代码输出解析标签表达式基础的表达式解析实现了，针对我们的标签表达式多个字符组成一个标签，以及去掉，加上的逻辑，稍作修改测试代码输出后缀表达式转二叉树分析根据后缀表达式的含义，符合表示前面两个元素的运算。用户标签是个数组。一、概述标签是精细化运营必不可少的工具，常见的使用场景有标签推送，千人千面的广告展示等。在实际的业务中，标签往往是通过交并差非运算组合在一起使用，比如：...

Developer 2019-07-01 11:08 评论0 收藏0
【JS基础】类型转换知多少

摘要：正确的解释是允许在相等比较中进行强制类型转换，而不允许。参考资料小议下字符串比较大小中的强制类型转换核心概念类型转换对象和方法隐式类型转换小结开胃菜先说一个题外话，我在工作中遇到一个问题，需要比较 08:00 和 09:00 的大小，最后我找到三种方法：在两个字符串前后各拼接相同的年月日和秒，拼成完整的时间格式进行比较： var head = 2016-01-01 var fo...

AdolphLWQ 2019-08-23 17:59 评论0 收藏0
JavaScript标准库系列——三大包装对象（四）

摘要：目录导语包装对象的理解三大包装对象的知识点小结导语包装对象是为了弥补基本数据类型的非对象特性而产生的，对于基本类型值而言，本来是不存在属性和方法的，但是我们可以在使用字面量创建字符串时，调用例如的方法，那么其内在原理究竟是什么呢阅读完本篇文目录导语 1. 包装对象的理解 2. 三大包装对象的知识点 3. 小结导语包装对象是为了弥补基本数据类型的非对象特性而产生的，对于基本类型...

sean 2019-08-21 11:27 评论0 收藏0