Object.keys()的用法示例詳解
Object.keys()的用法
Object.keys()的用法
作用：遍歷對(duì)象
返回結(jié)果：返回對(duì)象中每一項(xiàng)key的數(shù)組
例子1：
// 1. 定義一個(gè)對(duì)象
var obj = { 0:'熊大',1:'熊二',2:'光頭強(qiáng)' }
// 2. 使用Object.keys()方法
var keyValue = Object.keys(obj)
// 3. 打印結(jié)果
console.log(keyValue) // 得到是：["0","1","2"]例子2：
var obj2 = {'name':'a','list':{'a':'value1','b':'value2'},'num':13}
var keyValue2 = Object.keys(obj2)
console.log(keyValue2) // 得到是：["name","list","num"]也可以結(jié)合forEach來使用Object.keys(要遍歷的對(duì)象).forEach((v,i) => {})例子3：
Object.keys(obj2).forEach(function(key){
console.log(key, obj2[key]);
})
// 得到的是：name---a
// list---{a:"value",b:"value"}
// num----13 Object.keys()方法詳解
一、官方解釋
Object.keys() 方法會(huì)返回一個(gè)由一個(gè)給定對(duì)象的自身可枚舉屬性組成的數(shù)組，數(shù)組中屬性名的排列順序和使用 for…in 循環(huán)遍歷該對(duì)象時(shí)返回的順序一致 。如果對(duì)象的鍵-值都不可枚舉，那么將返回由鍵組成的數(shù)組。
二、語法
Object.keys(obj)參數(shù)：要返回其枚舉自身屬性的對(duì)象返回值：一個(gè)表示給定對(duì)象的所有可枚舉屬性的字符串?dāng)?shù)組
三、處理對(duì)象，返回可枚舉的屬性數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理對(duì)象，返回可枚舉的屬性數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:20,
eat:function(){}
}
console.log(Object.keys(person));// ['name','age','eat']
</script>
</body>
</html>
四、處理數(shù)組，返回索引值數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理數(shù)組，返回索引值數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let arr=[1,2,3,4,5];
console.log(Object.keys(arr));//['0','1','2','3','4','5']
</script>
</body>
</html>
五、處理字符串，返回索引值數(shù)組
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Object.keys()處理字符串，返回索引值數(shù)組</title>
</head>
<body>
<script type="text/javascript">
let str='hello';
console.log(Object.keys(str));//['0','1','2','3','4']
</script>
</body>
</html>
六、實(shí)用技巧
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
let person={
name:'一只流浪的kk',
age:18,
eat:function(){
}
}
Object.keys(person).map((key)=>{
person[key];//獲得屬性對(duì)應(yīng)的值，可以進(jìn)行其它處理
})
</script>
</body>
</html>七、Object.values()和Object.keys()是相反的操作，把一個(gè)對(duì)象的值轉(zhuǎn)換為數(shù)組
注意：在ES5里，如果此方法的參數(shù)不是對(duì)象（而是一個(gè)原始值），那么它會(huì)拋出 TypeError。在ES2015中，非對(duì)象的參數(shù)將被強(qiáng)制轉(zhuǎn)換為一個(gè)對(duì)象
Object.keys("foo");
// TypeError: "foo" is not an object (ES5 code)
Object.keys("foo");
// ["0", "1", "2"] (ES2015 code)到此這篇關(guān)于Object.keys()的用法的文章就介紹到這了,更多相關(guān)Object.keys()用法內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
本文主要介紹了Next.js腳手架完整搭建封裝的方法步驟，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
下面小編就為大家?guī)硪黄猨s控制li的隱藏和顯示實(shí)例代碼。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-10-10
Bootstrap每天必學(xué)之柵格系統(tǒng)（布局）
Bootstrap每天必學(xué)之柵格系統(tǒng)，小編對(duì)Bootstrap柵格系統(tǒng)（布局）也很陌生，特分享整理這篇文章，感興趣的小伙伴們可以參考一下2015-11-11
js prototype和__proto__的關(guān)系是什么
這篇文章主要介紹了js prototype和__proto__的關(guān)系是什么，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
js倒計(jì)時(shí)代碼，可以精確到天和精確到秒2013-11-11
typescript中 declare global 關(guān)鍵字用法示例小結(jié)
在TypeScript中,declare global 用于在模塊內(nèi)部擴(kuò)展全局作用域,本文重點(diǎn)介紹typescript中 declare global 關(guān)鍵字用法示例小結(jié),感興趣的朋友跟隨小編一起看看吧2024-04-04
JavaScript事件概念詳解(區(qū)分靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè))
這篇文章主要介紹了JavaScript事件(區(qū)分靜態(tài)注冊(cè)和動(dòng)態(tài)注冊(cè))的相關(guān)資料，幫助大家更好的理解和學(xué)習(xí)使用JavaScript，感興趣的朋友可以了解下2021-02-02
本文主要通過幾個(gè)實(shí)例對(duì)js中作用域進(jìn)行詳細(xì)解析，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
淺談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛
下面小編就為大家?guī)硪黄獪\談JS 數(shù)字和字符串之間相互轉(zhuǎn)化的糾紛。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10
jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框
為了滿足用戶體驗(yàn)度，使用SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框效果非常好，下面通過這篇文章給大家介紹jquery SweetAlert插件實(shí)現(xiàn)響應(yīng)式提示框，需要的朋友可以參考下2015-08-08