快捷導(dǎo)航

JavaScript中Object.values()的用法舉例

更新時(shí)間：2023年09月08日 08:38:13 作者：史上最菜開發(fā)

這篇文章主要給大家介紹了關(guān)于JavaScript中Object.values()的用法舉例,Object.values()是JavaScript中一個(gè)內(nèi)置的靜態(tài)函數(shù),用于返回一個(gè)對象中所有屬性值的數(shù)組,需要的朋友可以參考下

一、官方定義

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

二、語法

Object.values(obj)

參數(shù)

obj

被返回可枚舉屬性值的對象。

返回值

一個(gè)包含對象自身的所有可枚舉屬性值的數(shù)組。

描述

Object.values() 返回一個(gè)數(shù)組，其元素是在對象上找到的可枚舉屬性值。屬性的順序與通過手動循環(huán)對象的屬性值所給出的順序相同。

三、舉例說明

例子一

var obj1 = {name: '光頭強(qiáng)', age: '18', height: '177'}
const list1 = Object.values(obj1);
console.log(list1)  // 得到：  ['光頭強(qiáng)', '18', '177']

例子二

var obj2 = {
  gtq: {name: '光頭強(qiáng)',age: '18',height: '177'},
  xd: {name: '熊大',age: '12',height: '190'},
  xe: {name: '熊二',age: '10',height: '188'}
}
const list2 = Object.values(obj2);
console.log(list2)  
// 得到： 
/**
 *  [
 *    {name: '光頭強(qiáng)', age: '18', height: '177'},
 *    {name: '熊大', age: '12', height: '190'},
 *    {name: '熊二', age: '10', height: '188'}
 *  ]
 * 
*/

例子三

// 例子三
// 也可以配合循環(huán)講相同的數(shù)組結(jié)核
var obj3 = [
  {dhp:'熊出沒',name:"光頭強(qiáng)",age:'18',tall:'170'},
  {dhp:'熊出沒',name:"熊大",age:'12',tall:'190'},
  {dhp:'熊出沒',name:"熊二",age:'10',tall:'188'},
  {dhp:'羊村記事',name:"喜洋洋",age:'8',tall:'60'},
  {dhp:'羊村記事',name:"沸羊羊",age:'9',tall:'80'},
  {dhp:'羊村記事',name:"懶洋洋",age:'10',tall:'60'},
  {dhp:'西游記',name:"孫悟空",age:'500',tall:'130'},
  {dhp:'西游記',name:"豬八戒",age:'150',tall:'140'},
  {dhp:'西游記',name:"白龍馬",age:'200',tall:'150'}
]
// 封裝一個(gè)方法
function getNewList(data) {
  let newObj = {}
  obj3.forEach((item, index) => {
  // 解構(gòu)出每一個(gè)對象里面 dhp字段的值---值值值
  let { dhp } = item
  // 如果在這個(gè)新對象里面沒有找到，則新增一個(gè)對象
  if (!newObj[dhp]) {
    // 重構(gòu)對象
    newObj[dhp] = {
      dhp,   
      children: [],
    }
  }
  // 如果在對象里面找到有相同的 dhp 字段的值，則Push進(jìn)入children里面
  newObj[dhp].children.push(item)
  })
  let newArr = Object.values(newObj)
  return newArr
}
const list3 = getNewList(obj3);
console.log(list3)

打印結(jié)果：