ES6+ Object.values()

1. 前言

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

2. 方法詳情

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

2.1 語法使用

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ù)會被類型轉(zhuǎn)換為對象，數(shù)值對象沒有可遍歷的對象，所有返回一個(gè)空數(shù)組。同樣，Object.values() 和 Object.keys() 一樣都會進(jìn)行類型轉(zhuǎn)換，所以傳入的是數(shù)字或布爾值時(shí)，則返回一個(gè)空數(shù)組

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

3.2 鍵排序問題

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

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

3.3 參數(shù)為字符串

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

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

4. 小結(jié)

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