JavaScript-对象遍历
在 JavaScript 中对象和数组一样是可以遍历的
什么是对象的遍历
对象的遍历就是依次取出对象中所有的属性和方法。
如何遍历一个对象
在 JS 中可以通过 高级 for 循环来遍历对象，如下有一段示例代码，以下代码的含义：将指定对象中所有的属性和方法的名称取出来了依次的赋值给 key 这个变量：
for(let key in obj){}
添加如下 JS 代码然后利用高级 for 来进行遍历通过 ES6 定义的类创建出来的对象：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
class Person {
constructor(myName, myAge) {
this.name = myName;
this.age = myAge;
}
say() {
console.log(this.name, this.age);
}
}
let p = new Person("BNTang", 34);
for (let key in p) {
console.log(p[key]);
}
</script>
</head>
<body>
</body>
</html>
运行结果如下所示：
通过运行的结果发现，我们定义的 say 方法是没有取出来的这是为什么呢，原因就在于 ES6 定义类的格式, 会将方法默认放到原型对象中，我们把它改造为通过 ES5 的方式进行定义在来查看效果代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
this.say = function () {
console.log(this.name, this.age);
}
}
let p = new Person("BNTang", 34);
for (let key in p) {
console.log(p[key]);
}
</script>
</head>
<body>
</body>
</html>
运行结果如下图所示：
再次通过运行结果发现它将 say 函数直接打印出来了，那么如果我们想如果是函数的话不对其进行操作该怎么办呢，进行改造一下通过高级 for 遍历的代码，改造之后的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script>
function Person(myName, myAge) {
this.name = myName;
this.age = myAge;
this.say = function () {
console.log(this.name, this.age);
}
}
let p = new Person("BNTang", 34);
for (let key in p) {
if (p[key] instanceof Function) {
continue;
}
// console.log(key); // name / age / say
// 注意点: 以下代码的含义取出p对象中名称叫做当前遍历到的名称的属性或者方法的取值
// p["name"] / p["age"] / p["say"]
console.log(p[key]);
// 注意点: 以下代码的含义取出p对象中名称叫做key的属性的取值
// console.log(p.key); // undefined
}
</script>
</head>
<body>
</body>
</html>
运行结果如下：
