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