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);


1425695-20200531102455648-1485065068.png

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


let arrayLike = {
            0: 'll',
            1: '60',
            2: '男',
            3: ['重庆', '四川'],
        }
        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, undefined]


看下面这个例子


let objarrLiske = {
            2: "张三",
            length: 3
}
let arr = Array.from(objarrLiske);
console.log(arr); //[undefined,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',
            asa: '60',
            bb: '男'
        }
        let newarr = [];
        for (let i in arrayLike) {
            newarr.push(arrayLike[i])
        }
        console.log(newarr); ["ll", "60", "男"]


相关文章
|
30天前
|
人工智能 前端开发 JavaScript
拿下奇怪的前端报错(一):报错信息是一个看不懂的数字数组Buffer(475) [Uint8Array],让AI大模型帮忙解析
本文介绍了前端开发中遇到的奇怪报错问题,特别是当错误信息不明确时的处理方法。作者分享了自己通过还原代码、试错等方式解决问题的经验,并以一个Vue3+TypeScript项目的构建失败为例,详细解析了如何从错误信息中定位问题,最终通过解读错误信息中的ASCII码找到了具体的错误文件。文章强调了基础知识的重要性,并鼓励读者遇到类似问题时不要慌张,耐心分析。
|
1月前
|
存储 Java
Java“(array) <X> Not Initialized” (数组未初始化)错误解决
在Java中,遇到“(array) &lt;X&gt; Not Initialized”(数组未初始化)错误时,表示数组变量已被声明但尚未初始化。解决方法是在使用数组之前,通过指定数组的大小和类型来初始化数组,例如:`int[] arr = new int[5];` 或 `String[] strArr = new String[10];`。
|
1月前
|
存储 JavaScript 前端开发
JavaScript Array(数组) 对象
JavaScript Array(数组) 对象
27 3
|
1月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
2月前
|
Go
Golang语言之数组(array)快速入门篇
这篇文章是关于Go语言中数组的详细教程,包括数组的定义、遍历、注意事项、多维数组的使用以及相关练习题。
33 5
|
3月前
|
Python
PyCharm View as Array 查看数组
PyCharm View as Array 查看数组
84 1
|
6月前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
130 3
|
6月前
|
JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(下)
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
|
6月前
|
存储 JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(上)
数组对象是使用单独的变量名来存储一系列的值。
|
4月前
|
索引

热门文章

最新文章