訪問一個對象鍵和索引從for循環中的對象

Question

我想要訪問一個對象鍵和索引從一個對象，這是做什麼最好的方法？

這是數據對象：

d={KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"} 
Object {KpiName: "KPI1", 1/1/2016: "85%", 1/2/2016: "87%"} 

這是我1st環路與輸出

for (var key in d) { console.log("d[\"key\"]: ", d[key]) } 
d["key"]: KPI1 
d["key"]: 85% 
d["key"]: 87% 

這是我想達到什麼，但我想我可以把它寫更好

2nd for loop with output

i=1; for (var key in d) { console.log("d[\"key\"]: ", d[key]); console.log("i: ", i); i++} 
d["key"]: KPI1 
i: 1 
d["key"]: 85% 
i: 2 
d["key"]: 87% 
i: 3 
3 

我以爲我可以寫在for循環這樣

for (var key, i in d){...} 

但它似乎沒有工作，也許我的2nd for循環達到我想要的東西，但我不知道這是否是最好的代碼。

Answer 1

如果你想使用for/in循環，沒有更好的方法來寫這個。您必須保留自己的循環變量來計算迭代次數。

---

您可能使用Object.keys先獲取鍵的數組，然後要麼使用for循環或使用forEach訪問他們的指數，但我不會把這個「更好」，這只是一個不同路要走一下：

var d = {KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 

 
Object.keys(d).forEach(function(key, i) { 
 
    console.log("d[\"key\"]: ", d[key]); 
 
    console.log("i: ", i); 
 
});

Answer 2

我不知道我是否正確地得到您的問題，但你可以使用Object.keys與forEach：

var d={KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 

 
Object.keys(d).forEach(function(e, i){ 
 
    console.log("the key is: " + e + ", the value is: " + d[e] + ", the index is: " + i) 
 
})

Answer 3

我已經創造了一些代碼，將很好地打印你在找什麼。訣竅是使用Object.keys，因爲它爲你傳遞索引。下面是代碼看起來像一個乾淨的片段支持你的使用情況：

var d = { KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"} 

Object.keys(d).forEach(function (key, index) { 
    if (index == 0) { 
    console.log(" ",key,"  ",d[key]) 
    console.log("------------------------") 
    } else { 
    console.log(index + ". " + key + "   "+d[key]); 
    } 
}); 

// run then open console to view output 

// KpiName  KPI1 
// ------------------------ 
// 1. 1/1/2016  85% 
// 2. 1/2/2016  87% 

我在這裏提供一個工作示例：https://jsfiddle.net/h9yw48bz/

請拍我一個+1，如果你發現這是一個有益的回答

Answer 4

有如此多的選項可以實現這一點，如下所示。

方法1：

如果你的目標只是現代的瀏覽器，而不是舊的IE瀏覽器，你可以按照以下使用Object.keys：

var d = {KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 
//var i = 0; 
 
Object.keys(d).forEach(function(key, i){ 
 
    console.log('d["' + key + '"]: ' + d[key]); 
 
    console.log('index: ' + (i++).toString()); 
 
});

方法2：

如果你的目標舊的瀏覽器，以及，你可以使用你上面有一個小的變化做了一個同樣不包括任何繼承的對象屬性：

var d = {KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 
var i = 0; 
 
for(var key in d) { 
 
    if(d.hasOwnProperty(key)){ 
 
    console.log('d["' + key + '"]: ' + d[key]); 
 
    console.log('index: ' + (i++).toString()); 
 
    } 
 
}

方法3：

使用jQuery

var d = {KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 
var i = 0; 
 
$.each(d, function(key, value) { 
 
    console.log('d["' + key + '"]: ' + value); 
 
    console.log('index: ' + (i++).toString()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

方法4：

使用AngularJS

var d = {KpiName:"KPI1", '1/1/2016':"85%", '1/2/2016':"87%"}; 
 
    var i = 0; 
 
    angular.forEach(d, function(value, key) { 
 
     console.log('d["' + key + '"]: ' + value); 
 
     console.log('index: ' + (i++).toString()); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>