JS对象基本用法

作者: 茜Akane | 来源:发表于2021-01-24 23:44 被阅读0次

    对象

    • 定义
    无序的数据集合
    键值对的集合
    • 写法

        let obj = { 'name': 'frank', 'age': 18 }
        let obj = new Object({'name': 'frank'})
        console.log({ 'name': 'frank, 'age': 18 })
    

    • 细节
    键名是字符串,不是标识符,可以包含任意字符
    引号可省略,省略之后就只能写标识符
    就算引号省略了,键名也还是字符串(重要)

    属性名

    每个 key 都是对象的属性名(property)

    属性值

    每个 value 都是对象的属性值

    奇怪的属性名

    • 所有属性名会自动变成字符串

        let obj = {
          1: 'a',
          3.2: 'b',
          1e2: true,
          1e-2: true,
          .234: true,
          0xFF: true
        };
        Object.keys(obj)
        => ["1", "100", "255", "3.2", "0.01", "0.234"]
    

    • 细节
    Object.keys(obj) 可以得到 obj 的所有 key

    变量做属性名

    • 如何用变量做属性名
    之前都是用常量做属性名

        let p1 = 'name'
        let obj = { p1 : 'frank'} 这样写,属性名为 'p1'
        let obj = { [p1] : 'frank' } 这样写,属性名为 'name'
    

    • 对比
    不加 [ ] 的属性名会自动变成字符串
    加了 [ ] 则会当做变量求值
    值如果不是字符串,则会自动变成字符串

    对象的隐藏属性

    • 隐藏属性
    JS 中每一个对象都有一个隐藏属性
    这个隐藏属性储存着其共有属性组成的对象的地址
    这个共有属性组成的对象叫做原型
    也就是说,隐藏属性储存着原型的地址
    • 代码示例
    var obj = {}
    obj.toString()// 居然不报错
    因为 obj 的隐藏属性对应的对象上有 toString()
    超纲知识
    • 除了字符串,symbol 也能做属性名
    let a = Symbol()
    let obj = { [a]: 'Hello' }

    增删改查

    delete obj.xxxdelete obj['xxx']
    即可删除 obj 的 xxx 属性,属性也是字符串
    请区分「属性值为 undefined」和「不含属性名」
    • 不含属性名
    'xxx' in obj === false
    • 含有属性名,但是值为 undefined
    'xxx' in obj && obj.xxx === undefined
    • 注意 obj.xxx === undefined
    不能断定 'xxx' 是否为 obj 的属性
    • 类比
    你有没有卫生纸?
    A: 没有 // 不含属性名
    B: 有,但是没带 // 含有属性名,但是值为 undefined
    注意:delete操作符用于删除对象的某个属性
    坑:已经删除的属性再次删除不会报错。

    查看所有属性(读属性)

    • 查看自身所有属性
    Object.keys(obj)
    • 查看值
    Object.values(obj)
    • 查看属性和值
    Object.entries(obj)
    • 查看自身+共有属性
    console.dir(obj)
    或者自己依次用 Object.keys 打印出 obj.proto
    • 判断一个属性是自身的还是共有的
    obj.hasOwnProperty('toString')
    注意:用'toString' in obj是true,所以区分不了是否是共有属性

    查看单个或多个属性

    • 两种方法查看属性
    中括号语法:obj['key']
    点语法:obj.key
    坑新人语法:obj[key] // 变量 key 值一般不为 'key'
    • 请优先使用中括号语法
    点语法会误导你,让你以为 key 不是字符串
    等你确定不会弄混两种语法,再改用点语法
    注意:obj[console.log('name')] > name (undefined)
    先会打印name,但是console.log的值为undefined
    注意:
    obj.name 等价于 obj['name']
    obj.name 不等价于 obj[name]
    简单来说,这里的 name 是字符串,而不是变量
    注意:
    let name = 'frank'
    obj[name] 等价于
    obj['frank']
    而不是
    obj['name'] 和 obj.name

    原型

    • 每个对象都有原型
    原型里存着对象的共有属性
    比如 obj 的原型就是一个对象
    obj.proto 存着这个对象的地址
    这个对象里有 toString / constructor / valueOf 等属性
    • 对象的原型也是对象
    所以对象的原型也有原型
    obj = {} 的原型即为所有对象的原型
    这个原型包含所有对象的共有属性,是对象的根
    这个原型也有原型,是 null
    obj.__proto__.__proto__ > null

    修改或增加属性(写属性)

    • 直接赋值

        let obj = {name: 'frank'} // name 是字符串
        obj.name = 'frank' // name 是字符串
        obj['name'] = 'frank' 
        obj[name] = 'frank' // 错,因 name 值不确定
        obj['na'+'me'] = 'frank'
        let key = 'name'; obj[key] = 'frank'
        let key = 'name'; obj.key = 'frank' // 错 undefined
    

    因为 obj.key 等价于 obj['key']
    • 批量赋值
    Object.assign(obj, {age: 18, gender: 'man'})

    修改或增加共有属性

    • 无法通过自身修改或增加共有属性
    let obj = {}, obj2 = {} // 共有 toString
    obj.toString = 'xxx'只会在改 obj 自身属性
    obj2.toString 还是在原型上
    • 我偏要修改或增加原型上的属性
    obj.\_\_proto__.toString = 'xxx'// 不推荐用 proto
    Object.prototype.toString = 'xxx'
    一般来说,不要修改原型,会引起很多问题
    修改隐藏属性
    • 不推荐使用__proto__

    let obj = {name:'frank'}
    let obj2 = {name: 'jack'}
    let common = {kind: 'human'}
    obj.__proto__ = common
    obj2.__proto__ = common
    

    原型链示意图:

        person
            |- name:xxx;
            |- __proto__:common;
                |- common
                    国籍:中国;
                    发色:黑色;
                    __proto__:#409;(toString之类的)
    

    • 推荐使用 Object.create

        let obj = Object.create(common)
        obj.name = 'frank'
        let obj2 = Object.create(common, {
          name: {value: 'fangfang'}    ←加自身属性(非隐藏属性)
        })
        obj2.name = 'jack'
    

    规范大概的意思是,要改就一开始就改,别后来再改
    注意:create函数只是用参数(对象)将原型(对象的根)包括进去。
    再另外创建一个对象,里面没有create函数已经创建的__proto__,
    而是对象最初的原型。
    也就是说create创建的原型并不通用。
    理解: 隐藏属性__proto__是每个对象都有的,初始值为原型prototype的地址。
    当我创建一个新的隐藏属性__proto__时,在内存里开辟了一块新的内存,这时对象的
    隐藏属性__proto__的地址是个新地址(≠原型地址),所以这是这个对象的自身的
    隐藏属性__proto__。又因为新隐藏属性是个对象,所以里面还有个__proto__,因为没有定义所以为初始的原型。

    相关文章

      网友评论

        本文标题:JS对象基本用法

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