JavaScript 自學筆記15

1. for...in 循環

(1). 格式：

• for (const propertyName in object) { //statement; };

如：let animal = {

name: 'duck',

age: 3

};

for (let prop in animal) {

console.log(prop + ' : ' + animal[prop]);

}; // name: cat age: 3

(2). for...in 循環既會遍歷本對象的屬性，同時也會遍歷已繼承的父對象的屬性。

如：let animals = {mammals：‘carnivora’};

let cat = Object.create(animals);

cat.name = 'cat';

for (const prop in cat){

console.log(prop);

}; // name mammals

• 如果不想同時遍歷父對象的屬性，可以使用hasOwnProperty()方法。hasOwnProperty()方法只會將屬於自己對象的屬性返回為真，父對象的屬性則返回為假。

如：for (const prop in cat){

if (cat.hasOwnProperty(prop))

console.log(prop);

}; // name

console.log(cat.hasOwnProperty('mammals')); // false

(3). for..in 循環在數組中的應用

注意事項：

• 遍歷順序有可能不是按照實際數組的内部順序。所以，如果對遍歷結果的順序有要求的話，不要使用for..in循環。
• 索引（即，key）為字符串型的數字，并不能直接進行幾何運算。

2. Object.values()方法

ES2017引入了Object.values()方法來遍歷屬性的值，並將所有屬性的值返回到一個數組中。

(1). Object.values()的語法：

• Object.values(obj)

如：let duck = {

name: 'Sweetie',

age:3

};

console.log(Object.values(duck)); // [''Sweetie'', 3]

(2). 與for...in循環相比Object.values()的好處在於它只會返回本對象的屬性值。而for...in循環不僅會遍歷本對象的屬性，還會遍歷父對象的屬性。