首頁  >  文章  >  web前端  >  javascript怎麼將物件轉換為陣列

javascript怎麼將物件轉換為陣列

青灯夜游
青灯夜游原創
2021-06-22 17:44:3223458瀏覽

javascript物件轉換為陣列的方法:1、透過“[].slice.call(物件)”語句;2、使用“Array.from(物件)”語句,“Array.from()”方法可把可遍歷的物件轉換成陣列(包括Set和Map資料結構)。

javascript怎麼將物件轉換為陣列

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

一、把類似陣列的物件轉換成陣列

#1、什麼是類似陣列的物件

例如:

let arrayLike = {
    '0':"z",
    '1':"y",
    '2':"k",
    length:3
};

本質是有length屬性,可以類似陣列的取得元素的方式arrayLike[0]、arrayLike[1]去取得元素,也可以透過arrayLike.length來取得偽數組的長度。

常見的偽數組有透過DOM運算取得的NodeList集合(document.querySelectorAll('p')),以及函數形參arguments。

2、轉換方法

#方法一:透過[].slice.call(arrayLike)

//获取当前dom的span组成的伪数组
let spanDomArr = document.querySelectorAll('span');
 
//通过数组的方法forEach遍历spanDomArr
let arr = [].slice.call(spanDomArr);
 
//因为spanDomArr是伪数组,不支持数组的forEach,所以需要先转换成数组
arr.forEach(function(span){
    console.log(span)
});

方法二:透過Array.from(arrayLike)

//获取当前dom的span组成的伪数组
let spanDomArr = document.querySelectorAll('span');
 
//通过数组的方法forEach遍历spanDomArr
//因为spanDomArr是伪数组,不支持数组的forEach,所以需要先转换成数组
Array.from(spanDomArr).forEach(function(span){
    console.log(span)
});

二、延伸-Array.from( )

1、作用:

1-可以將類似陣列的物件轉換成陣列;

2-可以把可遍歷的物件轉換成陣列(包括ES6新增的資料結構Set和Map);

2、實際應用:

1-如果目前瀏覽器未部署此方法,可以使用Array.prototype.slice方法替代

/*
 *  方法名:objectToArray
 *  功能介绍:把类似数组的对象、可遍历的对象转换成数组
 *  参数:obj-需要转换的对象
 */
var objectToArray = function(obj){
   return Array.from ? Array.from(obj) : [].slice.call(obj);
};

2-如果參數是數組,則會傳回一個一模一樣的數組

Array.from(["z","y","k"]);
//打印:["z","y","k"]

3-僅有length屬性的對象,無法通過array.from轉換

4-Array.from第二個參數:用來對每個元素進行處理,將處理後的值放入數組返回。

let arrayLike = {
    "0" : "z",
    "1" : "y",
    "2" : "k",
    "length":3
};
Array.from(arrayLike,x=>x+'1');
//等同于
Array.from(arrayLike).map(x=>x+'1');

//打印:["z1","y1","k1"]

【相關推薦:javascript學習教學

以上是javascript怎麼將物件轉換為陣列的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn