快捷導(dǎo)航

js獲取數(shù)組對(duì)象中的全部key和value值

更新時(shí)間：2024年01月26日 09:01:09 作者：國服第二切圖仔

本文主要介紹了js獲取數(shù)組對(duì)象中的全部key和value值，主要使用JavaScript的?map()?函數(shù)和?values()?迭代器來實(shí)現(xiàn)取出數(shù)組對(duì)象的所有key值和value值，感興趣的可以了解下

前言

本文記錄如何使用JavaScript的 map() 函數(shù)和 values() 迭代器來實(shí)現(xiàn)取出數(shù)組對(duì)象的所有key值和value值。話不多說上示例。

一、js取出數(shù)組對(duì)象中的全部value值代碼示例：

代碼：

let array = [  
  {  
    "01-18": "51.4"  
  },  
  {  
    "01-19": "51.4"  
  },  
  {  
    "01-20": "57.1"  
  },  
  {  
    "01-21": "57.1"  
  },  
  {  
    "01-22": "51.4"  
  },  
  {  
    "01-23": "57.1"  
  },  
  {  
    "01-24": "57.1"  
  },  
  {  
    "01-25": "57.1"  
  }  
];  
  
let values = array.flatMap(item => Object.values(item));  
console.log(values);
 輸出 ["51.4", "51.4", "57.1", "57.1", "51.4", "57.1", "57.1", "57.1"]

結(jié)果：

在這個(gè)例子中，Object.values() 函數(shù)用于獲取對(duì)象的所有值，然后 flatMap() 函數(shù)用于將所有的值轉(zhuǎn)化為一個(gè)數(shù)組。

二、js取出數(shù)組對(duì)象中的全部key值：

代碼：

let array = [  
  {  
    "01-18": "51.4"  
  },  
  {  
    "01-19": "51.4"  
  },  
  {  
    "01-20": "57.1"  
  },  
  {  
    "01-21": "57.1"  
  },  
  {  
    "01-22": "51.4"  
  },  
  {  
    "01-23": "57.1"  
  },  
  {  
    "01-24": "57.1"  
  },  
  {  
    "01-25": "57.1"  
  }  
];  
  
let keys = array.flatMap(item => Object.keys(item));  
console.log(keys); 
 輸出 ["01-18", "01-19", "01-20", "01-21", "01-22", "01-23", "01-24", "01-25"]

結(jié)果展示：

在這個(gè)例子中，Object.keys() 函數(shù)用于獲取對(duì)象的所有鍵，然后 flatMap() 函數(shù)用于將所有的鍵轉(zhuǎn)化為一個(gè)數(shù)組。

到此這篇關(guān)于js取出數(shù)組對(duì)象中的全部key和value值的文章就介紹到這了,更多相關(guān)js取出數(shù)組對(duì)象中的全部key和value值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

自用js開發(fā)框架小成學(xué)習(xí)js的朋友可以看看
前段時(shí)間項(xiàng)目需要用到j(luò)s樹，找了好多都不符合項(xiàng)目需求，后來發(fā)現(xiàn)了梅花雪樹和js框架，類似C#名稱空間的用法讓我眼前一亮，遂拿來主義，讀了幾遍代碼后就開工了（我是個(gè)急性子呵呵），完成了大部分，最近才找出來測(cè)試了下。
2010-11-11
JavaScript設(shè)計(jì)模式之外觀模式實(shí)例
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之外觀模式實(shí)例,本文用一些代碼實(shí)例來講解JavaScript中的外觀模式,需要的朋友可以參考下
2014-10-10
javascript document.compatMode兼容性
文檔模式在開發(fā)中貌似很少用到，最常見的是就是在獲取頁面寬高的時(shí)候，比如文檔寬高，可見區(qū)域?qū)捀叩取?/div> 2010-02-02
Javascript中的this,bind和that使用實(shí)例
這篇文章主要介紹了Javascript中的this,bind和that使用實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-12-12
Add a Picture to a Microsoft Word Document
Add a Picture to a Microsoft Word Document...
2007-06-06
JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi))
這篇文章主要介紹了JS如何判斷是否為ie瀏覽器的方法(包括IE10、IE11在內(nèi)),需要的朋友可以參考下
2015-12-12
微信小程序仿美團(tuán)城市選擇
這篇文章主要為大家詳細(xì)介紹了微信小程序仿美團(tuán)城市選擇，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-06-06
JavaScript自定義日歷效果
這篇文章主要為大家詳細(xì)介紹了JavaScript自定義日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-11-11
JavaScript實(shí)現(xiàn)復(fù)制圖片功能的方法示例
本文主要介紹了在JavaScript中實(shí)現(xiàn)復(fù)制圖片的方法,先介紹了實(shí)現(xiàn)復(fù)制的前置知識(shí),包括傳統(tǒng)的 execCommand 方法及其優(yōu)缺點(diǎn)和 Clipboard API,然后詳細(xì)闡述了如何將不同形式的圖片轉(zhuǎn)化為blob對(duì)象并通過Clipboard API實(shí)現(xiàn)復(fù)制,還提及了兼容性問題及預(yù)覽、下載圖片的實(shí)現(xiàn)思路
2025-03-03
一起深入理解js中的事件對(duì)象
這篇文章主要給大家介紹了關(guān)于js中事件對(duì)象的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-02-02