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", "男"]


相关文章
|
5小时前
|
Python
使用array()函数创建数组
使用array()函数创建数组。
18 3
|
5小时前
|
JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(下)
一个数组的元素可以是另外一个数组,这样就构成了多维数组(Multi-dimensional Array)。
|
5小时前
|
存储 JavaScript 前端开发
总结TypeScript 的一些知识点:TypeScript Array(数组)(上)
数组对象是使用单独的变量名来存储一系列的值。
|
5小时前
|
JavaScript 前端开发 API
【JavaScript】<JS内建对象>JavaScript内建对象-Array对象
【1月更文挑战第17天】【JavaScript】<JS内建对象>JavaScript内建对象-Array对象
|
5小时前
|
存储 安全 Swift
在Swift中,数组(Array)
在Swift中,数组(Array)
31 3
|
5小时前
|
Ruby
|
5小时前
|
存储 索引 Python
多数pythoneer只知有列表list却不知道python也有array数组
多数pythoneer只知有列表list却不知道python也有array数组
26 0
|
5小时前
|
JavaScript
js Array map映射对象多个属性
js Array map映射对象多个属性
5 0
|
5小时前
|
JavaScript 前端开发 索引
在JavaScript中,可以使用数组字面量或Array构造函数来创建一个数组对象
【4月更文挑战第16天】在JavaScript中,可以使用数组字面量或Array构造函数来创建一个数组对象
23 4
|
5小时前
|
存储 缓存 安全
【C/C++ 基础 数组容器比较】深入探究C++容器:数组、vector与array之间的异同
【C/C++ 基础 数组容器比较】深入探究C++容器:数组、vector与array之间的异同
18 0