ES6+ Object.values()

1. 前言

上一節(jié) 我們學(xué)習(xí)了 Object.keys() 可以獲取對(duì)象上可枚舉屬性的 key 作為一個(gè)數(shù)組，對(duì)應(yīng)的是不是有一個(gè)讓我們獲取對(duì)象上所有屬性值的方法呢？答案是肯定的，ES6 中提供了 Object.values() 獲取可枚舉對(duì)象上屬性的值作為一個(gè)數(shù)組。

2. 方法詳情

Object.values() 方法返回一個(gè)給定對(duì)象自身的所有可枚舉屬性值的數(shù)組，值的順序與使用 for...in 循環(huán)的順序相同 (區(qū)別在于 for-in 循環(huán)枚舉原型鏈中的屬性)。與 Object.keys() 相反一個(gè)是獲取 key，一個(gè)是獲取 value，其他的使用特性基本相同。

2.1 語(yǔ)法使用

Object.values(obj);

2.2 基本使用

var obj = {a: 1, b: 2, c: 3};
Object.values(obj)     // [1, 2, 3]

3. 實(shí)例

3.1 參數(shù)是數(shù)值或布爾值

上一節(jié) 我們知道 Object.keys() 的參數(shù)會(huì)被類型轉(zhuǎn)換為對(duì)象，數(shù)值對(duì)象沒(méi)有可遍歷的對(duì)象，所有返回一個(gè)空數(shù)組。同樣，Object.values() 和 Object.keys() 一樣都會(huì)進(jìn)行類型轉(zhuǎn)換，所以傳入的是數(shù)字或布爾值時(shí)，則返回一個(gè)空數(shù)組

console.log(Object.values(123));	// []
Object.values(false)    // []

3.2 鍵排序問(wèn)題

上一節(jié) 我們學(xué)習(xí) Object.keys() 會(huì)對(duì)屬性是數(shù)值的鍵進(jìn)行排序，在這個(gè)過(guò)程中屬性對(duì)應(yīng)的值也會(huì)跟著改變位置，所有使用 Object.values() 返回的數(shù)組是按 Object.keys() 順序后的結(jié)果展示的，所以得到的值要和排序后的屬性一一對(duì)應(yīng)。

var obj = {10: 'a', 1: 'b', 7: 'c'};
Object.values(obj)    // ['b', 'c', 'a']

3.3 參數(shù)為字符串

values() 傳入的對(duì)象如果是一個(gè)字符串時(shí)，則會(huì)把字符拆成數(shù)組中的單個(gè)項(xiàng)，如下：

Object.values('abc')    // ['a', 'b', 'c']

4. 小結(jié)

本節(jié)主要講解了 ES6 提供了獲取可枚舉對(duì)象上的屬性值的方法，這個(gè)方法可以很方便地獲取對(duì)象上的屬性值用于遍歷。提高代碼的簡(jiǎn)潔性。這里需要注意的是在獲取屬性值時(shí)會(huì)對(duì)屬性為數(shù)值類型的鍵進(jìn)行排序，所以對(duì)應(yīng)的屬性值也會(huì)跟著一起被排序，所以得到的結(jié)果會(huì)有所不同。