es6 Array.form将类数组或者对象转化为数组

编程之家收集整理的这篇文章主要介绍了es6 Array.form将类数组或者对象转化为数组编程之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Array.from()方法就是将一个[类数组对象][或者可遍历对象]转换成一个[真正的数组]

那么什么是类数组对象呢?所谓类数组对象,最基本的要求就是具有length属性的对象。

       let arrayLike = {
            0: 'll',1: '60',2: '男',3: ['重庆','四川'],'length': 4
        }
        let arr = Array.from(arrayLike);
        console.log(arr);

===================
如果没有length:4,那么就会转成一个空数组

 let arrayLike = {
            0: 'll',}
        let arr = Array.from(arrayLike);
        console.log(arr);  返回[]

对象的属性名必须为数值型或字符串型

 let arrayLike = {
            bname: 'll',asa: '60',bb: '男',cc: ['重庆',length: 4
        }
        let arr = Array.from(arrayLike);
        console.log(arr);    [undefined,undefined,undefined]
看下面这个例子
 let objarrLiske = {
            2: "张三",length: 3
}
let arr = Array.from(objarrLiske);
console.log(arr); //[undefined,'张三'];
//  上面显示类数组的长度是3,但是只有一个值。
//  则内容没有那么长,使用undefined来填充

===============
 let arr2 = {
      2: "张三",length: 3
  };

  let arr3 = Array.prototype.slice.call(arr2);
  console.log(arr3);        console.log(arr3);//[ 2:"张三"]
  不同的浏览器显示内容还不一样
  
我忘记call这个改变this指向的方法

另外

由此可见,要将一个类数组对象转换为一个真正的数组,必须具备以下条件:

  1、该类数组对象必须具有length属性,用于指定数组的长度。如果没有length属性,那么转换后的数组是一个空数组。上面已经验证了  ok

  2、该类数组对象的属性名必须为数值型或字符串型

   3、 如果内容小于(《 )length;则使用underfined进行填充

如何使用其他的方法一个对象转为数组 for in
for in 循环空对象或者数组 是不会报错的哈

     // 将对象变为数组
        let arrayLike = {
            bname: 'll',bb: '男'
        }
        let newarr = [];
        for (let i in arrayLike) {
            newarr.push(arrayLike[i])
        }
        console.log(newarr); ["ll","60","男"]

总结

以上是编程之家为你收集整理的es6 Array.form将类数组或者对象转化为数组全部内容,希望文章能够帮你解决es6 Array.form将类数组或者对象转化为数组所遇到的程序开发问题。

如果觉得编程之家网站内容还不错,欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢寻找一群志同道合、互帮互助的学习伙伴,可以点击下方链接加入:
编程之家官方1群
编程之家官方2群
编程之家官方3群
编程之家官方4群

相关文章

猜你在找的JavaScript相关文章

点击开始按钮开始抽奖,div依次变红!下面是js代码,需要的自取   <script>
在页面中放图片并设置四个button,可以通过点击上一张下一张来切换图片(翻到最后一张自动切换到第一张).用户点击自动播放,每隔两秒自动切换(类似轮播图),点击停止播放,就终止播放,运用了定时器。先看效果图.
数字或者字母或者数字字母混合的n位验证码带随机的颜色。下面是完整的代码,需要的自取哈!
目录 弹性悬浮广告效果图 1.功能(鼠标移入移出事件、点击事件、定时器控制移动)
ECMAScript定义javascript语言的基础。 javascript由下列三个部分组成:ECMAScriptDOM(文档对象模型)BOM(浏览器对象模型)<!--script元素的type属性不是必需的,默认就是text/javascript--><script></script><script>function(){ alert("</script>");//当浏
一、为什么JavaScript是单线程?JavaScript语言的一大特点就是单线程,也就是说,同一个时间只能做一件事。那么,为什么JavaScript不能有多个线程呢?这样能提高效率啊。JavaScript的单线程,与它的用途有关。作为浏览器脚本语言,JavaScript的主要用途是与用户互动,以及操作DOM。这决定了它只能是单线程,否则会带来很复杂的同步问题。比如,假定JavaScript同时
three.js项目引入vue,因代码编写不当导致的严重影响性能的问题,卡顿掉帧严重 问题排查 使用谷歌浏览器的Performance分析页面性能 可以看到vue.js的reactiveGetter方
在LineMaterial.js基础上修改的ArrowLineMaterial.js代码: /** * @author WestLangley / http://github.com/WestLang
微信公众号搜索 “ 程序精选 ” ,选择关注!
微信公众号搜 "程序精选"关注