JavaScript對象轉(zhuǎn)數(shù)組的三種簡單方法

家好！今天我們要聊的是JavaScript中一個非常實用的技巧——將對象轉(zhuǎn)換為數(shù)組。

方法1：使用Object.keys()和Array.map()

首先介紹一種基礎(chǔ)但非常實用的方法，就是通過Object.keys()獲取對象的鍵，然后用Array.map()把這些鍵對應(yīng)的值提取出來。

const student={ name: '小明', age: 18, city: '北京' };

const arr=Object.keys(student).map(key=> student[key]);

console.log(arr);
// 輸出: ['小明', 18, '北京']

在這個例子中，Object.keys(student)會返回一個包含對象所有鍵的數(shù)組（['name', 'age', 'city']）。接著，Array.map()會遍歷這個數(shù)組，每次迭代時，使用當(dāng)前的鍵去獲取對象中的對應(yīng)值。最終返回一個包含所有值的數(shù)組。

方法2：使用Object.entries()

接下來介紹的是Object.entries()方法，這是在ES6中引入的新方法。它直接返回一個包含對象鍵值對的數(shù)組。

const student={ name: '小明', age: 18, city: '北京' };

const arr=Object.entries(student);

console.log(arr);
// 輸出: [['name', '小明'], ['age', 18], ['city', '北京']]

在這個例子中，Object.entries(student)直接返回一個數(shù)組，其中每個內(nèi)部數(shù)組表示對象的一個鍵值對。這個方法的優(yōu)勢在于它能直接獲取鍵值對，對于一些需要處理鍵值對的場景特別有用。

方法3：使用Object.values()

最后一個方法是使用Object.values()，它和Object.keys()類似，但它只返回對象的值。這種方法特別適合當(dāng)我們只關(guān)心對象的值而不需要鍵的時候。

const student={ name: '小明', age: 18, city: '北京' };

const arr=Object.values(student);

console.log(arr);
// 輸出: ['小明', 18, '北京']

在這個例子中，Object.values(student)直接返回一個包含對象所有值的數(shù)組。這個方法的優(yōu)勢在于操作簡單，直接獲取所有值，不需要關(guān)心鍵。

小結(jié)

通過以上三種方法，我們可以輕松地將對象轉(zhuǎn)換為數(shù)組。無論是使用Object.keys()和Array.map()，Object.entries()，還是Object.values()，都各有優(yōu)勢，大家可以根據(jù)具體需求選擇合適的方法。

如果你只需要對象的值，Object.values()是最簡潔的方法。
如果你需要對象的鍵值對，Object.entries()是最佳選擇。
如果你需要對鍵值進(jìn)行一些處理，Object.keys()加上Array.map()會非常靈活。

家好，我是前端西瓜哥，今天說一下 JS 的類數(shù)組對象是什么，以及如何將類數(shù)組對象轉(zhuǎn)為數(shù)組。

類數(shù)組對象是什么？

類數(shù)組對象，就是含有 length 屬性的對象，但這個對象不是數(shù)組。

通常來說還會有 0 ～ length-1 的屬性，結(jié)構(gòu)表現(xiàn)上非常像一個數(shù)組。

const arrlike = {1:'a', 4: 'd', length: 9};
Array.isArray(arrlike) // false

從底層上來看，這個對象的原型鏈上沒有 Array.prototype，所以我們不能用 Array.prototype 上的 forEach、map 等數(shù)組特有的方法。

關(guān)于原型鏈，可以看我的這篇文章：《如何用原型鏈的方式實現(xiàn)一個 JS 繼承？》

如果強(qiáng)行給一個類數(shù)組對象使用 forEach 方法，會得到一個類型錯誤。

function f(a, b) {
  arguments.forEach(item => console.log(item));
}
// Uncaught TypeError: arguments.forEach is not a function

除了手動創(chuàng)造的類數(shù)組對象，還有以下常見的類數(shù)組對象：

普通數(shù)組中的 argument 對象。需要注意的是，箭頭函數(shù)中不存在這個對象。
一些獲取 Dom 集合的方法，如 document.querySelectorAll()、 document.getElementsByClassName、document.getElementsByTagName() 也會返回類數(shù)組對象

下面看看我們有哪些將類數(shù)組轉(zhuǎn)換為數(shù)組的方法。

Array.prototyle.slice.call()

我們可以用 Array.prototyle.slice 內(nèi)置方法。

Array.prototype.slice.call(obj);
[].slice.call(obj);

[] 空數(shù)組效果同 Array.prototype，因為空數(shù)組本身沒有 slice 方法，會走原型鏈拿到 Array.prototype 的方法。空數(shù)組寫法除了短一點沒有任何優(yōu)點。

然后 call 來自 Function.prototype，可以使用一個指定的 this 值來調(diào)用一個函數(shù)，這里是 Array.prototype.slice。我們不給 slice 方法傳開始和結(jié)束位置參數(shù)，這樣就會默認(rèn)取整個范圍。

slice 的迭代時會跳過不存在的索引屬性，所以你會看到 empty 的特殊值，和 undefined 還有點不同，你可以認(rèn)為表示未被初始化。forEach、map 這些內(nèi)置方法是會跳過它們不執(zhí)行傳入的回調(diào)函數(shù)的。

一個例子：

const arrlike = {1:'a', 4: 'd', length: 9};
const arr = Array.prototype.slice.call(arrlike);
console.log(arr);

什么原理？

因為 slice 用于拷貝返回一個新的子數(shù)組，且只需要被操作的目標(biāo)有 length 屬性就行了。

下面是 Array.prototype.slice 的核心實現(xiàn)，默認(rèn) start 和 end 都在 length 范圍內(nèi)。

Array.prototype.mySlice = function(start, end) {
  if (start == undefined) start = 0;
  if (end == undefined) end = this.length;
  const cloned = new Array(end - start);
  for (let i = 0; i < cloned.length; i++) {
    // 為了確保不存在的索引保持為 empty 值
    if (i in this) {
      cloned[i] = this[start + i];
    }
  }
  return cloned;
}

你會發(fā)現(xiàn)，類數(shù)組對象替換掉這里的 this 后，能拷貝出一個真正數(shù)組。

Array.from()

ES6 新出的方法，可以將類數(shù)組對象或者是可迭代對象轉(zhuǎn)換為數(shù)組。

const arrlike = {1:'a', 4: 'd', length: 9};
arr = Array.from(arrlike);
console.log(arr);

和 Array.prototyle.slice.call() 有點不同，不存在的索引的值被設(shè)置了 undefined。

如果一個對象，既是類數(shù)組對象，又是可迭代對象，Array.from() 方法會使用該對象的迭代器方法。

一般來說，調(diào)用 JS 的內(nèi)置方法返回類數(shù)組對象同時是可迭代對象，我們通常喜歡用擴(kuò)展運(yùn)算符（...），更優(yōu)雅。

const elCollection = document.getElementsByTagName('div');
const elArray = [...elCollection];

結(jié)尾

一般來說，我們在開發(fā)中遇到的類數(shù)組對象都是 JS 內(nèi)置方法返回的，同時也是可迭代對象，我們一般都是用 [...arrlik] 擴(kuò)展運(yùn)算符，咻咻咻搞定。

如果類數(shù)組對象不是可迭代對象，可以使用 Array.prototyle.slice.call() 和 Array.from()。

前者會對不存在的索引維持為 empty，后者則是 undefined。我們可以認(rèn)為基本差別不大，建議用 Array.from()，語義化更好些。

們在項目開發(fā)的時候，有時需要將js對象轉(zhuǎn)換為數(shù)組，下面小編給大家具體演示一下怎么轉(zhuǎn)換，主要是介紹一些常用、簡潔的轉(zhuǎn)換方法。

比如JavaScript對象如下：

let obj={

  'name': '前端',

  'url': 'https://www.webadkf.com',

  'des': '專注web前端開發(fā)',

};

這里只需要它的值，我們需要轉(zhuǎn)換的數(shù)組形式如：

['前端', 'https://www.webqdkf.com', '專注web前端開發(fā)']

方式一：Object.values

Object.values()方法返回一個給定對象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用for...in循環(huán)的順序相同 ( 區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性 )。

let arr=Object.values(obj); //對象轉(zhuǎn)化為數(shù)組

ps：如果只需要返回鍵作為數(shù)組，可以使用Object.keys()的方式,所以結(jié)合Map，也可以實現(xiàn)：

let arr=Object.keys(obj).map(function(i){return obj[i]}); //對象轉(zhuǎn)化為數(shù)組

方式二：循環(huán)

可以直接利用循環(huán)，如for in或者forEach()等：

var arr=[]; //定義數(shù)組
for (var i in obj) {
    arr.push(obj[i]); 
}

方式三：Array.from

Array.from() 方法對一個類似數(shù)組或可迭代對象創(chuàng)建一個新的，淺拷貝的數(shù)組實例。

var arr=Array.from(Object.values(obj),x=>x);

在線咨詢

上一篇：JavaScript入門
下一篇：真的更安全？QQ同步助手網(wǎng)頁版改掃碼登錄

您的項目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商