对象

作者: 懂会悟 | 来源:发表于2020-09-07 08:16 被阅读0次

    1、delete()

    delete方法的作用

    • 删除对象属性
    • 删除数组某一元素

    删除成功返回true, 删除失败返回false,直接使用delete删除变量返回false.
    delete 删除数组元素后,被删除元素替换为undefined,数组长度不变

    // 不能删除变量
    var a = 1
    console.log(delete a)
    // false
    let b = 2
    console.log(delete b)
    // false
    const c = 3
    console.log(delete c)
    // false
    
    // 删除数组元素
    let array = [1,2,3,4,5,6]
    console.log(array.length)
    // 6
    delete array[2]
    console.log(array.length)
    // 6
    console.log(array)
    // [ 1, 2, <1 empty item>, 4, 5, 6 ]
    console.log(array[2])
    // undefined
    
    // 删除对象属性
    const info = { name: 'Tom', age: 18 }
    const res = delete info.name
    console.log(res)
    console.log(info)
    

    2、增加/修改属性

    给对象增加一个属性或者修改属性,直接给对象属性名赋值即可,值得注意的是:当使用变量作为key是需要加上[]

    // 变量作为key
    let key = 'name'
    const info = {}
    info[key] = 'Tom'
    console.log(info)
    // { name: 'Tom' }
    
    // 批量增加属性
    const obj1 = { name: 'Tom' }
    const obj2 = { age: 18 }
    const result = Object.assign(obj1, obj2)
    console.log(result)
    

    3、删除属性

    如上所述删除对象上的某一属性可以使用deletejike


    4、查看属性

    查看属性有两种方法obj. 或者obj[]

    判断对象是否包含某一属性
    • in 查看对象本身以及对象原型上是否有此属性,返回true/false
    • hasOwnProperty:只能查看自身可枚举属性
    // in
    // getPrototypeOf:获取原型
    const info = { name: 'Tom', age: 18 }
    const res = 'toString' in info
    const resProp = 'toString' in Object.getPrototypeOf(info)
    console.log(res)
    // true
    console.log(resProp)
    // true
    
    // hasOwnProperty
    const info = { name: 'Tom', age: 18 }
    const res = info.hasOwnProperty('toString')
    const resProp = Object.getPrototypeOf(info).hasOwnProperty('toString')
    console.log(res)
    // false
    console.log(resProp)
    // true
    

    5、判断对象是否为空

    • 转为字符串
    • for in循环
    • getOwnPropertyNames
    • Object.keys()
    // 转为字符串
    const info = { name: 'Tom', age: 18 }
    const string = JSON.stringify(info)
    if (string === '{}') {
      return false
    }
    
    // for in循环
    const info = { name: 'Tom', age: 18 }
    function isEmpty() {
      for (const key in info) {
        return false
      }
      return true
    }
    console.log(isEmpty())
    
    // getOwnPropertyNames
    const info = { name: 'Tom', age: 18 }
    const arr = Object.getOwnPropertyNames(info)
    console.log(arr.length)
    
    // Object.keys()
    const info = { name: 'Tom', age: 18 }
    const arr = Object.keys(info)
    console.log(arr.length)
    

    6、对象常用方法

    1、Object.assign()

    Object.assign():用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。返回目标对象

    let target = { name: 'Tom', age: 20 }
    let source = { work: 'engineer' }
    let result = Object.assign(target, source)
    
    console.log(target)
    // { name: 'Tom', age: 20, work: 'engineer' }
    console.log(source)
    // { work: 'engineer' }
    console.log(result)
    // { name: 'Tom', age: 20, work: 'engineer' }
    

    2、Object.is()

    Object.is():用于判断两个值是否相等,包含number、string、Object.返回布尔值

    let target = { name: 'Tom', age: 20 }
    let source = { work: 'engineer' }
    let result = Object.assign(target, source)
    console.log(Object.is(target, result))
    // true
    

    3、Object.keys()、Object.values()、Object.entries()
    • Object.keys():返回一个给定对象的自身可枚举属性key组成的数组
    • Object.values():返回一个给定对象自身所有可枚举属性value的数组
    • Object.entries():返回一个给定对象自身可枚举属性的键值对数组
    let info = { name: 'Tom', age: 18 }
    console.log(Object.keys(info))
    // [ 'name', 'age' ]
    console.log(Object.values(info))
    // [ 'Tom', 18 ]
    console.log(Object.entries(info))
    // [ [ 'name', 'Tom' ], [ 'age', 18 ] ]
    
    

    4、Object.defineProperty()

    给对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象

    let obj = {}
    let value = 'old'
    
    const res = Object.defineProperty(obj, "attr", {
      get : () => {
        return value
      },
      set : (newValue) => {
        value = newValue
      },
      enumerable : true,
      configurable : true
    })
    
    console.log(obj.attr)
    obj.attr = 'set new value'
    
    

    5、Object.defineProperties()

    给对象上定义多个新属性,或者修改对象的现有属性, 并返回这个对象

    let obj = {}
    Object.defineProperties(obj, {
      'property1': {
        value: true,
        writable: true
      },
      'property2': {
        value: 'Hello',
        writable: false
      }
    })
    console.log(obj.property1)
    console.log(obj.property2)
    

    7、属性描述符

    属性描述符:描述属性特征的特性。属性描述符的值true/false, 根据特性的不同,可以把属性分成两种类型:数据属性和访问器属性。

    常见的属性描述符

    • Configurable: 表示能否通过delete删除属性从而重新定义属性
    • Writable: 表示属性的值能否修改
    • Enumerable:表示属性能否被枚举即通过for-in循环是否能返回属性
    • Value: 包含这个属性的数据值。读取属性值的时候,从这个位置读;写入属性值的时候,把新值保存在这个位置。这个特性的默认值为undefined
    • set: 在写入属性时调用的函数。默认值为undefined。
    • get: 在读取属性时调用的函数。默认值为undefined。

    要想修改对象的属性必须通过defineProperty、defineProperties

    // defineProperty
    let person = {}
    Object.defineProperty(person, "birth", {
      configurable: false,
      enumerable: false,
      writable: false,
      value: 2000
    })
    console.log(person.birth)
    // 2000
    person.birth = 1999
    console.log(person.birth)
    // 2000
    

    8、和对象属性相关的方法

    属性描述符:描述属性特征的特性

    1. getOwnPropertyDescriptor: 返回属性描述
    2. getOwnPropertyNames:返回属性名构成的数组
    3. getPrototypeOf: 返回对象原型
    // getOwnPropertyDescriptor
    let info = {
      a: 2
    }
    const res = Object.getOwnPropertyDescriptor( info, "a" )
    console.log(res)
    // { value: 2, writable: true, enumerable: true, configurable: true }
    
    // getOwnPropertyNames
    let info = {
      a: 2
    }
    const res = Object.getOwnPropertyNames(info)
    console.log(res)
    
    // [ 'a' ]
    // getPrototypeOf
    let info = {
      a: 2
    }
    const res = Object.getPrototypeOf(info)
    console.log(res)
    

    相关文章

      网友评论

          本文标题:对象

          本文链接:https://www.haomeiwen.com/subject/hvnwsktx.html