JS 对象基本用法

Annabelle134
90 阅读3分钟

JS七种数据类型：数字number、布尔bool、符号symbol、字符串string、对象object、null、undifined、，其中对象object是复杂类型

一、声明对象

1、定义
  • 无序的数据集合
  • 键值对的集合
2、声明对象的写法
  • 常见写法，其中name和age是键（key），anna和18是值（value）;name和anna是一个键值对
let obj = { 'name':'anna','age':'18' }
  • 正规写法：
let obj = new Object ({'name':'anna','age':'18'})
3、声明注意
  • 键名key是字符串，可以包含任意字符，注意不是标识符
  • 上述写法中name和age的单引号可以省略，但省略后key还是字符串
4、奇怪的属性名
let obj ={
    1:'a',      //1:"a"
    1.2:'b',    //1.2:"b"
    1e2:'c',    //100:"c"
    1e-2:'d',   //0.01: "d"
    .234:'e',   //0.234: "e"
    0xFF:'f'    //255: "f"
    '0xFF':'e'  //0xFF: "e"
}
    Object.keys(obj)

上述所有的数字都会转化成十进制，然后是字符串的形式; 如果想把0xFF直接表现出来：'0xFFx':'f'

5、变量作属性名：加[]
  • 举例
let a = 'name'             
let obj ={a:'jane'}      //此时a是字符串，obj的属性名为'a'
let obj ={[a]:'jane'}    //属性名为'name'

二、对象的隐藏属性

  • JS每个对象都有一个隐藏属性
  • 这个隐藏属性存储着共有属性组成的对象的地址
  • 这个共有属性组成的对象叫原型
  • 也就是说，隐藏属性里面存着原型的地址
原型简单介绍
  • 每个对象都有原型
    1. 原型中存着对象的共有属性
    2. 例如obj.__proto__ 存着obj这个对象的地址
  • 对象的原型也是对象
    1. 所以对象的原型也有原型
    2. obj={}的原型即为所有对象的原型
    3. 这个原型包含所有对象的共有属性，是对象的根
    4. 这个原型也有原型，为空null

三、如何查看对象的属性

  1. 查看自身所有属性名:Object.keys(obj)

  2. 查看属性值：Object.values(obj)，

  3. 查看自身属性＋共有属性：

    • console.dir(obj)
    • Object.keys() 依次打出 obj.__proto__

  4. 查看属性名和属性值：

    • 直接obj
    • Object.entries(obj)

  5. 如何判断一个属性是对象自身属性还是共有属性：obj.hasOwnPoperty(toString/valueOf...)，值为false说明该属性不是自身的属性

  6. 查看某个特定属性：

    • obj['key'] //key是字符串，优先使用
    • obj.key //key也是字符串
    • obj[key] //key是变量
    • 注意：obj.name = obj['name']是字符串；obj[name]是变量
    • let name = 'jane';obj[name] = obj['jane'],这里的name是变量

四、如何删除对象的属性

  1. 删除方法：
    • delete.obj.name
    • delete obj ['name']
  2. 把属性变成undefined并不是删除属性；举例： var obj ={'name'='jane','age':'18'} obj.name=undifined; //name为undifined但是依然存在name属性
  3. 'name' in obj === false 说明name不是obj的属性名，值为true则是obj的属性名
  4. 注意：obj.name===undefined不能断定name是否为obj的属性,如下图所示

1.png

五、如何修改或增加对象的属性

1、直接赋值
  • 语法：如下例所示：obj.name ='J' ; obj['name'] = 'J'
    let obj = {'name':'jane'}    //name是字符串
    obj.name = 'J'    //把名字改成J
    obj['name']='A'    //把名字改成A
    obj['na'+'me']='N'
    //下面错误示范：
    ①obj[name]='J'    //这里的name是变量
2、批量赋值
  • 语法：Object.assion (obj,{age:'18',gender:'男'})
3、增加/更改共有属性
  1. 无法通过自身修改、增加共有属性.
    如下例子，只修改了obj的toString，obj2的toString还是之前的不变

2.png

2. 非要修改原型上的属性：需要在创建的时候就直接修改
  • obj.__proto__.toString = 'xxx' 不推荐使用__proto__的方法
  • Object.prototype.toString = 'xxx'推荐使用

1.png

4、改原型
  • 用Object.create；一般来讲不要改原型，会有很多问题
  • 如图例所示，原型已经变成common

1.png

六、'name' in obj和obj.hasOwnProperty('name') 的区别

  • 'name' in obj 判断name属性是不是在这个对象中，无论是不是在原型里
  • obj.hasOwnProperty('name')判断属性是否在对象自身，而不是在原型中
avatar
文章
阅读
粉丝