前置知识：

对象的定义

  • 无序的数据集合
  • 键值对的集合
    • 属性名：每个key都是对象的属性名（property）——键
    • 属性值：每个value都是对象的属性值——值

原型

  • 每个对象都有原型
    • 原型里存着对象的共有属性
      • 比如obj的原型就是一个对象
        • obj.proto存着这个对象的地址，这个对象里有toString/constructor/valueOf等属性
  • 对象的原型也是对象
    • 所有对象的原型也有原型
    • 原型的原型是对象的根，内容为null（存在原型但内容空）

声明对象的两种语法

  1. // 简写
  2. let obj = {
  3.     'name' : 'npc',
  4.     'age' : '22'
  5. };
  7. // 正式
  8. let obj2 = new Object({
  9.     'name' : 'npc',
  10.     'age' : '22'
  11. })

注意：
键名（属性名）是字符串，可以包含任意字符
引号一般可以省略，但实质上还是字符串，后台会将其自动变成字符串
加引号是最安全的键值写法
Object.key(obj)可以得到obj的所有key

特殊属性名：

  • 变量的值作为属性名
    • 之前都是用常量作为属性名
    • 写法： ```javascript let p1 = ‘name’ //先声明一个变量 let obj = { p1:’npc’ } //这样写，属性名为’p1’ let obj = {

} //这样写，属性名为’name’

  2.       - 不加[]的属性名会自动变成字符串
  3.       - 加了[]则会当做变量求值，再将值作为属性名，如果值非字符串，则会自动变成字符串
  5.    - 隐藏的属性：
  6.       - JS中每个对象都有一个隐藏属性（即每个对象都有原型，而且原型本身也是一个对象）
  7.       - 这个隐藏属性储存着其共有属性组成的对象的地址
  8.       - 这个共有属性组成的对象称为“原型”——隐藏属性指向的对象
  9.       - 也就是说，隐藏属性储存着原型的地址
  10.       - 代码示例:
  11. ```javascript
  12. var obj = {}
  13. obj.toString()  //不报错，因为obj的隐藏属性 对应的对象 上有toString()
  • 超纲知识：symbol也能作为属性名：（目前不用）

let a = Symbol()
let obj = { [a]: 'hi' }

对象之——CRUD（即增删改查）

查（读）

查看一个对象自身的所有属性：

  • 先声明一个对象：

let obj = {name:'npc', age:18}

  • 查属性名：
    • Object.keys(obj)
  • 查属性值：
    • Object.values(obj)
  • 查所有的key和值：
    • 直接obj回车即可
    • Object.entries(obj)

  • 查看自身属性+共有属性（隐藏属性）：

    • console.dir(obj)

      ‘name’ in obj和obj.hasOwnProperty(‘name’) 的区别：

  • 判断一个属性是否在对象内：

    • 'toString' in obj
  • 判断一个属性是自身的还是共有的：
    • obj.hasOwnProperty('toString') //ture则为自身属性

查看一个对象自身的一个属性：

  • 先声明一个对象：

let obj = {name:'npc', age:18}

  • 查其中的一个属性值：
    • 中括号语法（新人常用）：obj['name']
    • 点语法：obj.name===obj.['name']（容易误用，误以为name是变量）
    • 坑语法：obj[name]（此处name为变量，不为属性、字符串）
  • 避坑
    • 对象中的任何属性都为字符串类型，有些看上去不像，但本质仍是字符串，在读取的时候需要使用obj['xxx'] ```javascript const data = [ {name:’npc1’,2011:2,2012:3}, {name:’npc2’,2011:1,2012:4}, {name:’npc3’,2011:21,2012:44}, ] //读 const nameArr = data.map( i => i.name )等同于 const nameArr = data.map( i => i[‘name’])

const numArr = data.map( i => i[2011])等同于 const numArr = data.map( i => i[‘2011’])

  2. <a name="E7UIb"></a>
  3. ## 删
  5. - 删 属性名和属性值：
  6.    - 用delete语句，示例：
  7. ```javascript
  8. delete obj.name
  10. // or
  11. delete obj['name']
  • 删属性值：
    • 将属性值改为underfined，示例：

obj.xxx = undefined

增&改

已有属性则改，没有属性则增
js的脆弱之处——可以随时修改js中所有对象

直接赋值

  1. obj.name = 'npc'
  3. // or 
  5. obj['name'] = 'npc'

如原对象obj中无name，则添加；如有，则改写

批量赋值

  • Object.assign
  • Object.assign(变量名,{键值对,键值对})
    • 注意键值对用逗号隔开
      1. Object.assign(obj,{
      2. age:18,
      3. gender:'man'
      4. })

增|改 共有属性（涉及原型）：

  • 无法通过自身修改或增加共有属性（原型）

    • 其自身修改或增加的属性只能存在于其自身
    • 一般来说不要修改原型，否则会引起很多问题

  • 硬干利用prototype而不是proto：（举例）

    • Object.prototype.toString = 'xxx'

  • 推荐使用Object.create来 整原型

    • 先声明一个原型common
      • let common = {'国籍':‘中国’,hairColor:'black'}
    • 再创建一个以common为原型的对象person
      • let person = Object.create(common)
    • 此时person自身没有属性，需要在声明变量捆绑原型后再添加自身属性
    • 即在创建对象的时候就捆绑原型，避免过后再改导致性能低下