js对象转数组_声明一个string类型的数组

js对象转数组_声明一个string类型的数组 先给个案例体验下 对于像这样的一个对象,把它转换成一个数组,我们在开发中应该会遇到过, {‘未完成’:0,’已完成’:1,’待确认’:2,’已取消’:-1}转为[{"未完成":0},{"已完成":1},{"待确认":2},{"已取消":-1}] 我们首先想到的是把他们一个个循环遍历取出来,push到一个数组当中去letobj1={‘未完成’:0,’已完…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

  先给个案例体验下

  对于像这样的一个对象,把它转换成一个数组,我们在开发中应该会遇到过,

  {‘未完成’:0, ‘已完成’:1, ‘待确认’:2, ‘已取消’:-1}转为[{“未完成”:0},{“已完成”:1},{“待确认”:2},{“已取消”:-1}]

 我们首先想到的是把他们一个个循环遍历取出来,push到一个数组当中去

 let obj1 = { '未完成': 0, '已完成': 1, '待确认': 2, '已取消': -1 },
            arr1 = [];
        for (let i in obj1) {
            let linshiObj = {};
            console.log(obj1[i]);
            linshiObj[i] = obj1[i];
            console.log(linshiObj[i])
            arr1.push(linshiObj);
            // arr1.push(obj1[i]);
        }
        console.log(arr1);

1.对象的获取值有两种方法

 let obj2 = { name: "zjl" };
        console.log(obj2.name); //常用
        // console.log(obj1['未完成']);
        console.log(obj2['name']);

2.类数组对象:

 但是在项目开发中可能遇到的情况有很多,所以在这里就详细讲解了数组转对象的一些方法

  这里所说的对象是类数组对象,什么是类数组对象呢,下面就先描述下;

  类数组对象:

  拥有length属性,其它属性(索引)为非负整数

  不具有数组所具有的方法

  常见的类数组有arguments和NodeList,

《javascript权威指南》里面给出了一个鉴别对象是否是类数组的函数

 function isArrayLike(Ob) {
            if (Ob &&                                // o is not null, undefined, etc.
                typeofObo === 'object' &&            // o is an object
                isFinite(Ob.length) &&               // o.length is a finite number
                Ob.length >= 0 &&                    // o.length is non-negative
                Ob.length === Math.floor(Ob.length) &&  // o.length is an integer
                Ob.length < 4294967296)              // o.length < 2^32
            {
                return true;                        // Then o is array-like
            }

            else {
                return false;                      // Otherwise it is not
            }
        }

在这里解释下isFinite函数:isFinite() 函数用于检查其参数是否是无穷大。

  如果 number 是有限数字(或可转换为有限数字),那么返回 true。否则,如果 number 是 NaN(非数字),或者是正、负无穷大的数,则返回 false。

3. 下面就来介绍下这几种方法

1.Array.prototype.slice.call(obj)

这种方法是借用了数组原型中的slice方法,返回一个数组。slice方法的内部实现:

Array.prototype.slice = function (start, end) {
            let result = new Array();
            start = start || 0;
            end = end || this.length;  //使用call之后this指向了类数组对象 
            for (let i = start; i < end; i++) {
                result.push(this[i]);
            }
            return result;
        }

通用的转换函数

 var toArray = function (Ob) {
            try {
                return Array.prototype.slice.call(Ob);
            } catch (e) {
                var arr = [];
                for (var i = 0, len = s.length; i < len; i++) {
                    arr[i] = s[i];
                }
                return arr;
            }
        }
        let object1 = {
            '0': 3,
            '1': 13,
            '2': 23,
            '3': 33,
            'length': 5,
            'name': 330
        }
        console.log(toArray(object1) + '      ' + 'Array.prototype.slice.call(obj)');

2.2.Array.from()

Array.from()是ES6中新增的方法,可以将两类对象转为真正的数组:类数组对象和可遍历(iterable)对象(包括ES6新增的数据结构Set和Map);

 方法可以将类数组对象和可迭代对象转换为数组。

 类数组对象上文已提及,何为可迭代对象?

 Array、Set、Map 和字符串都是可迭代对象(WeakMap / WeakSet 并不是可迭代对象)

 字符串变成了可迭代对象,解决了编码的问题

  这些对象都有默认的迭代器,即具有 Symbol.iterator 属性

  可以用 for of 循环

 所有通过生成器创建的迭代器都是可迭代对象

  如document.getElementsByTagName(“div”) 返回的是可迭代对象但不是一个数组

 Array.isArray(document.getElementsByTagName(‘div’)) 返回 false;

 let object3 = {
            '0': 3,
            '1': 13,
            '2': 23,
            '3': 33,
        };

        function* createIterator(obj) {
            for (let value in obj) {
                yield obj[value];
            };
        };

        let iterator = createIterator(object3);  //
        console.log(iterator);
        let arr3 = Array.from(iterator);
        console.log(Array.from(object3))// [3, 13, 23, 33]

        // 默认情况下,开发者定义的对象都是不可迭代对象,但如果给 Symbol.iterator 属性添加一个生成器,则可以将其变为可迭代对象
        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'
        //把NodeList对象转换为数组,然后使用数组的forEach方法
        let ps = document.querySelectorAll('p');
        Array.from(ps).forEach(p => {
            console.log(p);
        });
        //只要是部署了Iterator接口的数据结构,Array.from都能将其转换为数组
        Array.from('zjl');

3. 扩展运算符(…)

同样是ES6中新增的内容,扩展运算符(…)也可以将某些数据结构转为数组

3.1   arguments对象的转换

 function foo() {
            var args = [...arguments];
        }

3.2  

NodeList对象的转换

[...document.querySelectorAll('p')]

4.Object.values(obj)

默认情况下,开发者定义的对象都是不可迭代对象,但提供了返回迭代器的方法

  entries()

  values()

  keys()

  通过使用这些方法,可以返回相关的数组

 与类数组对象需要对象有 length 值不同,Object.values(obj) 返回对象自身可枚举属性值的集

let object4 = {

'0': 3,

'1': 13,

'2': 23,

'3': 33

};

let array4 = Object.values(object4) // [3, 13, 23, 33]

let array41 = Object.keys(object4);//['0','1','2','3']

// let array42=Object.entries(object4);

// console.log(array4);

// console.log(array41);

// console.log(array42);

 大概就是这些了

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/194219.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 九九乘法表java编程代码,面试真题解析[通俗易懂]

    九九乘法表java编程代码,面试真题解析[通俗易懂]我听到的一些发声你们赚的钱已经可以了:我一个发小是做土木工程的,上海大学博士,参与很多著名建筑的工程,但是从薪资上看,还不如一些稍微像样的公司的6年多的高级开发。为什么?这就是行业的红利,个体是享受了这个红利。所以说我们做IT的,应该感谢马云,雷军等等他们。某转管理的程序员:有时候我也挺迷茫的,到底走技术路线还是管理路线。技术路线吧,又没有那么多时间。也许是借口,有时候有时间,但人是有惰性的,就……这个年龄确实需要些管理能力了,毕竟项目不是一个人搞定的。我们在招人时确实对他们有管理能力的考虑,

  • 更改QT程序的图标

    更改QT程序的图标

  • Myeclipse注册码_myeclipse各种版本注册码

    Myeclipse注册码_myeclipse各种版本注册码myeclipse60注册码收藏

  • linux内核 5.0,Linux Kernel 5.0 正式发布,FreeSync支持[通俗易懂]

    linux内核 5.0,Linux Kernel 5.0 正式发布,FreeSync支持[通俗易懂]LinusTorvalds已经取得了进展,刚刚发布了Linux5.0稳定内核,最初是作为Linux4.21内核周期提供主线AMDRadeonFreeSync支持,持续开发英特尔Icelake和其他新CPU功能,罗技高分辨率滚动功能,网络改进等等。在今天的LinuxKernel5.0版本中,创建者LinusTorvalds评论道,“LinuxKernel5.0发布的最后一周并不完…

  • 《数据库系统概论》第五版 +学习笔记总目录

    《数据库系统概论》第五版 +学习笔记总目录文章目录前言第1章绪论第2章关系数据库第3章关系数据库标准语言SQL第4章数据库安全性第5章数据库完整性第6章关系数据理论前言本篇文章学习书籍:《数据库系统概论》第5版王珊萨师煊编著学习软件:NavicatPremium15&&SSMS采用数据库:SQLSever说明:虽然数据库是SQLSever有些书上的语句执行不了,貌似书采用的是Oracle数据库的SQL,不过没关系,初学我们最重要的是掌握其思想,很多思想和方法语句在

  • java 实现http长轮询,Long Polling长轮询实现进阶「建议收藏」

    java 实现http长轮询,Long Polling长轮询实现进阶「建议收藏」LongPolling长轮询实现进阶简书涤生。转载请注明原创出处,谢谢!如果读完觉得有收获的话,欢迎点赞加关注。介绍由于LongPolling长轮询详解这篇文章中的code实现较为简单,尤其是服务端处理较为粗暴,有一些同学反馈希望服务端处理阻塞这块内容进行更深入讨论等等,所以这里专门补一篇实现进阶,让大家对长轮询有更加深刻的理解。疑问对上篇文章,同学反馈有两个疑问。服务端实现使用的是同…

    2022年10月10日

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号