javascript將對象轉換為數(shù)組的方法

本篇內(nèi)容主要講解“javascript將對象轉換為數(shù)組的方法”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“javascript將對象轉換為數(shù)組的方法”吧!

javascript對象轉換為數(shù)組的方法：1、通過“[].slice.call(對象)”語句；2、使用“Array.from(對象)”語句，“Array.from()”方法可把可遍歷的對象轉換成數(shù)組（包括Set和Map數(shù)據(jù)結構）。

本教程操作環(huán)境：windows7系統(tǒng)、javascript1.8.5版、Dell G3電腦。

一、把類似數(shù)組的對象轉換成數(shù)組

1、什么是類似數(shù)組的對象

比如：

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

本質是有l(wèi)ength屬性，可以類似數(shù)組的獲取元素的方式arrayLike[0]、arrayLike[1]去獲取元素，也可以通過arrayLike.length獲取偽數(shù)組的長度。

常見的偽數(shù)組有通過DOM操作獲取的NodeList集合（document.querySelectorAll('p')），以及函數(shù)形參arguments。

2、轉換方法

方法一：通過[].slice.call(arrayLike)

//獲取當前dom的span組成的偽數(shù)組
let spanDomArr = document.querySelectorAll('span');
 
//通過數(shù)組的方法forEach遍歷spanDomArr
let arr = [].slice.call(spanDomArr);
 
//因為spanDomArr是偽數(shù)組，不支持數(shù)組的forEach，所以需要先轉換成數(shù)組
arr.forEach(function(span){
    console.log(span)
});

方法二：通過Array.from(arrayLike)

//獲取當前dom的span組成的偽數(shù)組
let spanDomArr = document.querySelectorAll('span');
 
//通過數(shù)組的方法forEach遍歷spanDomArr
//因為spanDomArr是偽數(shù)組，不支持數(shù)組的forEach，所以需要先轉換成數(shù)組
Array.from(spanDomArr).forEach(function(span){
    console.log(span)
});

二、延伸-Array.from（）

1、作用：

1-可以將類似數(shù)組的對象轉換成數(shù)組；

2-可以把可遍歷的對象轉換成數(shù)組（包括ES6新增的數(shù)據(jù)結構Set和Map）；

2、實際應用：

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

/*
 *  方法名：objectToArray
 *  功能介紹：把類似數(shù)組的對象、可遍歷的對象轉換成數(shù)組
 *  參數(shù)：obj-需要轉換的對象
 */
var objectToArray = function(obj){
   return Array.from ? Array.from(obj) : [].slice.call(obj);
};

2-如果參數(shù)是數(shù)組，則會返回一個一模一樣的數(shù)組

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

3-僅有l(wèi)ength屬性的對象，無法通過array.from轉換

4-Array.from第二個參數(shù)：用來對每個元素進行處理，將處理后的值放入數(shù)組返回。

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將對象轉換為數(shù)組的方法”有了更深的了解，不妨來實際操作一番吧！這里是億速云網(wǎng)站，更多相關內(nèi)容可以進入相關頻道進行查詢，關注我們，繼續(xù)學習！