for-in和Object.keys对比

2022-10-21  本文已影响0人  未路过
  1. for-in会遍历原型链上的属性,而且是可枚举的属性。
  2. Object.keys只会遍历自身的属性,而且是可枚举的属性。
  var sourceObj = {
        name: 'haha',
        age: 18,
        job: 'web',
        friends: ['f1', 'f2']
      }
      sourceObj.__proto__.test = 'test'

      Object.defineProperty(sourceObj, 'age', {
        enumerable: false
      })

      function cloneObj(sourceObj) {
        var targetObj = {}
        for (var prop in sourceObj) {
          targetObj[prop] = sourceObj[prop]
        }
        return targetObj
      }

      const newObj = cloneObj(sourceObj)
      console.log(newObj)//{name: 'haha', job: 'web', friends: Array(2), test: 'test'}

3.只遍历对象自身的属性,而不遍历继承于原型链上的属性,使用hasOwnProperty 方法过滤一下。

   var sourceObj = {
        name: 'haha',
        age: 18,
        job: 'web',
        friends: ['f1', 'f2']
      }
      sourceObj.__proto__.test = 'test'

      Object.defineProperty(sourceObj, 'age', {
        enumerable: false
      })

      function cloneObj(sourceObj) {
        var targetObj = {}
        for (var prop in sourceObj) {
          console.log(prop)
          if (sourceObj.hasOwnProperty(prop)) {
            targetObj[prop] = sourceObj[prop]
          }
        }
        return targetObj
      }

      const newObj = cloneObj(sourceObj)
      console.log(newObj)//{name: 'haha', job: 'web', friends: Array(2)}

Object.keys

      function clone2Obj(sourceObj) {
        var targetObj = {}
        Object.keys(sourceObj).forEach((item) => {
          console.log(item)
          targetObj[item] = sourceObj[item]
        })
        return targetObj
      }
      const newObj2 = clone2Obj(sourceObj)
      console.log(newObj2)
      //{name: 'haha', job: 'web', friends: Array(2)}

!!!浅拷贝不会拷贝enumerable为false的属性。

上一篇 下一篇

猜你喜欢

热点阅读