前端面试自测知识点---对象和对象相关的知识点、手写深拷贝

川长思鸟来 2022-09-10 02:18 151阅读 0赞

### 对象 ###

### 整体结构 ###

*   *   *  对象
         *   *  属性的简洁表达法
             *  属性名表达式
             *  对象里的方法不能使用箭头函数
             *  ES6提供的对象中函数的简洁写法：
             *  Object.is()
             *  \`...\`
             *  Object.assign
             *  对象的遍历方式
             *  深拷贝和浅拷贝

#### 属性的简洁表达法 ####

let name = "Lucy"
    let age = 16
    let s = "school"
    
    let obj = { 
      name,
      age,
      s:"PKU"
    }
    console.log(obj) // 输出{name: "Lucy", age: 16, s: "PKU"}

#### 属性名表达式 ####

let name = "Lucy"
    let age = 16
    let s = "school"
    
    let obj = { 
      name,
      age,
      [s]:"PKU"
    }
    console.log(obj) // 输出{name: "Lucy", age: 16, school: "PKU"}

#### 对象里的方法不能使用箭头函数 ####

let name = "Lucy"
    let age = 16
    let s = "school"
    
    let obj = { 
      name,
      age,
      [s]:"PKU",
      study:function(){ 
        console.log(this.name+'正在学习')
      }
    }
    obj.study() // 输出Lucy正在学习

若将上述study改成箭头函数： `study:() => {console.log(this.name+'正在学习')}`会报错，因为这里箭头函数里的this指向了window，而window上没有name属性

#### ES6提供的对象中函数的简洁写法： ####

let name = "Lucy"
    let age = 16
    let s = "school"
    
    let obj = { 
      name,
      age,
      [s]:"PKU",
      study(){ 
        console.log(this.name+'正在学习')
      }
    }
    obj.study() // 输出Lucy正在学习

#### Object.is() ####

*  判断两个值是否**严格相等**，类似 ===
    
        console.log(Object.is(2, '2')) // 输出 false
    
        console.log(Object.is(NaN, NaN)) // 输出 true
    
        console.log(Object.is(+0, -0)) // 输出 false
    
        let obj1 = { 
          name:'Lucy',
          age:16
        }
        
        let obj2 = { 
          name:'Lucy',
          age:16
        }
        
        console.log(obj1 == obj2) // 输出 false
        console.log(Object.is(obj1,obj2)) // false
        
        let obj2 = obj1 // 指向同一块地址
        console.log(Object.is(obj1,obj2)) //true
    
    原因：对象和数组存的是地址而不是值，真正的内容存在**堆内存**

#### `...` ####

let x = { 
      a: 3,
      b: 4
    }
    
    let y = { 
      ...x // 扩展运算符
    }
    console.log(y) // {a: 3, b: 4}

#### Object.assign ####

let x = { 
      a: 3,
      b: 4
    }
    let y = { }
    Object.assign(y,x)
    console.log(y) // {a: 3, b: 4}

*  利用 `...`和`Object.assign`来复制或合并对象
    
        let x = { 
          a: 3,
          b: 4
        }
        // let y = { 
        // ...x
        // }
        let y = { }
        Object.assign(y,x)
        console.log(y)
 *  利用`Object.assign（）`合并时，后面的值会覆盖前面的值
 *  如果目的对象不是对象，则会自动转换成对象
    
        let t = Object.assign(2) // Number {2}
        
        let s = Object.assign(2,{ a:2}) // Number {2, a: 2}
 *  `Object.assign（）`对于引用数据类型属于浅拷贝

#### 对象的遍历方式 ####

*      let obj = { 
          name:'Lucy',
          age:16,
          school:'PKU'
        }
 *  for … in 不能够用于遍历Array，被设计来遍历对象
    
        for(let key in obj){ 
          console.log(key,obj[key])
        }
 *  Object.keys()用于返回对象所有key组成的数组
    
        Object.keys(obj).forEach(key => { 
           console.log(key, obj[key])
         })
 *  Object.getOwnPropertyNames()用于返回对象所有key组成的数组
    
        Object.getOwnPropertyNames(obj).forEach(key => { 
          console.log(key, obj[key])
        })
 *  Reflect.ownKeys()用于返回对象所有key组成的数组
    
        Reflect.ownKeys(obj).forEach(key => { 
          console.log(key, obj[key])
        })

#### 深拷贝和浅拷贝 ####

*  对象的浅拷贝：浅拷贝是对象共用的一个内存地址，对象的变化相互影响
 *  对象的深拷贝：简单理解深拷贝是将对象放到新的内存中，两个对象的改变不会互相影响
 *  浅拷贝：
    
        let obj1 = { 
          name:'Lucy',
          age:16
        }
        let obj2 = obj1
        obj1.age = 18
        console.log(obj1) // {name: "Lucy", age: 18}
        console.log(obj2) // {name: "Lucy", age: 18}
 *  深拷贝：
    
    思路：
    
     *  1 ：检查target类型，如果是数组or对象那么进入第二步，否则直接返回值
     *  2 ：遍历数组or对象的每一项，判断类型，如果是数组or对象，那就把这个值进行1、2步操作，否则直接返回值
    
        // 检查数据类型的方法
        let checkType = data => { 
          return Object.prototype.toString.call(data).slice(8, -1)
        }
        
        // console.log(checkType(88)) // Number
        // 深拷贝方法
        let deepCopy = target => { 
          let targetType = checkType(target)
          let result
          if (targetType == 'Object') { 
            result = { }
          } else if (targetType == 'Array') { 
            result = []
          } else { 
            return target // 如果第一层就是简单类型，那就直接返回
          }
          // 对Object or Array 进行处理
          for (let i in target) { 
            let value = target[i]
            let valueType = checkType(value)
            if (valueType === 'Object' || valueType === 'Array') {  // 如果当前的value还是一个对象or数组，那么还要对这个value进行深拷贝
              result[i] = deepCopy(value)
            } else { 
              result[i] = value
            }
          }
          return result
        }
    
    大招JSON.parse(JSON.stringify())
    
    局限性：
    
     *  会忽略undefined
     *  不能序列化函数
     *  不能解决循环引用的对象