说说JS中的可枚举属性

在学习Typescript的过程中，接触到枚举这个类型，一开始不太理解枚举的意思，为了深入理解它，就顺带去了解了一些JS中的可枚举属性。
首先，可枚举属性是指那些内部 “可枚举” 标志设置为 true 的属性,而这个“可枚举”标志，即enumerable。
对于通过直接的赋值和属性初始化的属性，该标识值默认为即为 true，对于通过 Object.defineProperty 等定义的属性，该标识值默认为 false。
上面就是所谓的可枚举属性，可能不够直观，下面就通过一些方法，让你更深入地了解它。
首先，有这么几个方法，是跟它密切相关的，propertyIsEnumerable,for…in,Object.keys,JSON.stringify，接下来就让我们好好看一下他们是如何工作的。

1. 判断是否可枚举

propertyIsEnumerable可以判断出自身对象是否可枚举，划重点，是自身对象，不包括其原型链。

function Person() {
    this.name = "Tom";
}
Person.prototype = {
    constructor: Person,
    job: "student",
};
 
var person = new Person();
Object.defineProperty(person, "sex", {
    value: "male",
    enumerable: false
});

console.log(person.propertyIsEnumerable('name')) // true
console.log(person.propertyIsEnumerable('job'))  // false
console.log(person.propertyIsEnumerable('sex')) // false

2. 访问可枚举属性

首先，看这样一个表格

image.png

ok，这样，大家就知道3者之间的联系和区别了，for...in可以访问自身对象及原型链上的可枚举属性，而Object.keys和JSON.stringify只能访问自身对象的可枚举属性。
下面，为了让我们更形象地看出结果，让我们看一个例子

for(var p in person) {
    console.log("person." + p + " = " + person[p]);
}
/**
person.name = Tom
person.constructor = function Person() {
  this.name = "Tom";
}
person.job = student
*/

console.log(Object.keys(person)); // ["name"]
    
console.log(JSON.stringify(person)); // {"name":"Tom"}

由此，可见for...in要更为强大一点，但是，需要注意的是js中基本包装类型的原型属性是不可枚举的，如Object, Array, Number等,如果，我们像下面这么写，就没用了。

var obj = new Object();
for(var o in obj) {
    console.log("obj." + o + " = " + obj[o]);
}

你可以试一下，不会有任何输出。

ok,以上就是本篇所有的内容，如有不足，欢迎指出。