论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别

前不久，一朋友求助，让我给解释一波Object.keys(), Object.getOwnPropertyNames(), for in的区别，面试中好几次呗问了。所以，抽了点时间看了看，大概把我看的过程中做的demo记录一下。
看了网上一些关于介绍Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()的区别，都介绍得不是很详细，不容易理解，今天抽空来说说这三者的区别。
废话不多说，直接上代码。

defineProperty() => 给对象添加单个属性及属性值的，并规定该属性是否可枚举，默认是不可枚举的；所以正常情况下，我们给对象添加单个属性时，只需要用.操作即可。亦，obj.e = 2。这种方式添加的属性默认是可枚举的。
我们通过设置 enumerable 的值来设置属性是否可枚举。
来，下面demo运行起来。

var obj = { a: "1", b: "2"};
Object.prototype.protoName = "proto foobar";
var foo = Symbol("foo");
// 给obj 添加了一个键名为 c, foo 变量值
Object.defineProperty(obj, "c", {
    value: "3", 
    enumerable: false  // 定义是否可枚举，默认 false
})
Object.defineProperty(obj, "d", {
    value: "4", 
    enumerable: true  // 定义是否可枚举
})
Object.defineProperty(obj, foo, {
    value: "foobar",
    enumerable:false
});

打印的结果为：

{a: "1", b: "2", d: "4", c: "3", Symbol(foo): "foobar"}

OK，接下来我们，我们输出日志看看...

for (var i in obj) {
    console.log(" for in : ", i); // 输出 a b d protoName
    if (obj.hasOwnProperty(i)) {
        console.log("obj.hasOwnProperty(i): ", i); // a b d
    }
}
console.log("Object.keys(obj): ", Object.keys(obj));  // ["a", "b", "d"]
console.log("Object.getOwnPropertyNames(obj): ", Object.getOwnPropertyNames(obj));  // ["a", "b", "c", "d"]
console.log("Object.getOwnPropertySymbols(obj): ", Object.getOwnPropertySymbols(obj)); // [Symbol(foo)]
// JSON.stringify(obj) 只能将自身的属性转化成字符串
console.log("JSON.stringify(obj): ", JSON.stringify(obj));  // {"a": "1", "b": "2", "d": "4"}

就上面demo，简单总结一下：

keys() => 输出为一个数组，取到的是 obj 的所有的自身可枚举属性。其功能和for in + hasOwnProperty（）功能是一致的
getOwnPropertyNames() => 输出为一个数组，取到的是 obj 的所有自身属性。（可枚举、不可枚举，但不包括symbol类型的属性）
getOwnPropertySymbol() => 输出为一个数组，取到的是 obj 的所有自身的Symbol属性
for in => 遍历 obj 的所有属性，包括自身属性和原型上的所有可枚举的属性
JSON.stringify() => 只能将自身的可枚举的属性转化成字符串

OK, 运行完上面demo后发现，问题是不是轻轻松松地解决了喂，然而，并没有。仔细对比一下上面的日志，然后，来，接着往下走。
for in obj => 能遍历obj的所有属性，包括原型上的属性。（包括原型上的可枚举的属性和方法），有点蒙比了？
如果确实蒙比了，我们接着往下敲代码

Object.defineProperty(obj, "func1", {
    value: function() {console.log("func1")}
})
Object.defineProperty(obj, "func2", {
    value: function() {
        console.log("func2")
    },
    enumerable: true
})

// 来，我们在在原型上添加一个方法
Object.prototype.func3 = function() {
    console.log("func3")
}

for (var i in obj) {
    console.log(" for in : ", i); // 输出 a b d protoName func2 func3
    if (obj.hasOwnProperty(i)) {
        console.log("obj.hasOwnProperty(i): ", i); // a b d func2
    }
}
console.log("Object.keys(obj): ", Object.keys(obj));  // ["a", "b", "d", "func2"]
console.log("Object.getOwnPropertyNames(obj): ", Object.getOwnPropertyNames(obj));  // ["a", "b", "c", "d", "func1", "func2"]
console.log("Object.getOwnPropertySymbols(obj): ", Object.getOwnPropertySymbols(obj)); // [Symbol(foo)]
console.log("JSON.stringify(obj): ", JSON.stringify(obj));  //  {"a":"1","b":"2","d":"4"}
console.log("obj:  ", obj); // {a: "1", b : "2", d : "4", func2 : ƒ (), c : "3", func1 : ƒ (), Symbol(foo) : "foobar"}

对比上面输出日志，我不难发现：

defineProperty() 和 prototype 添加的属性默认是不可枚举的。
defineProperty() 添加的属性时属于自身属性。

哈哈哈，能读到这儿，我想未来的我，可能没有晕吧。
管他呢，简单提个醒吧，方便以后自己更快速地懂这些东西；

for in 没有 func1，是因为defineProperty()定义的是自身属性，且默认不可枚举。protoName 是在原型 prototype 上，所以会有。
hasOwnProperty() 是只取自身属性，所以原型上的 protoName， func3 都没有。
keys() 所有的自身可枚举属性，所以 protoName 和 func3 首先排除了。c 和 func2 是不可枚举。
getOwnPropertyNames() 所有自身属性。所以原型上的protoName 和 func3 都被排除了。
JSON.stringify() 只要自身的，且可枚举的属性。认真看看，转字符串和直接输出的 obj 有多大区别。

所以，网上关于深度克隆一个对象的方式 ---- JSON.parse(JSON.stringify(obj))，严格来说，是不正确的。
然而此时，我就有问题要讲啦。
实际项目中我们应该怎么选，如何规避上述的问题呢？
还待高人指点迷津，
抑或，以后自己去发现。

今天被同事骗了，说 撒拉黑 是 你好 的意思。来了一个男同事，我就对他说了：
-- 撒拉黑
-- 滚犊子
啊，留我一人在风中凌乱...

   .>|=|<.

论Object.keys(), Object.getOwnPropertyNames(), for in, Object.getOwnPropertySymbol()区别

猜你喜欢