这篇文章，我们专门来介绍看看 JS 对象的使用

对象 Object 是一个无序的数据类型集合，它是由键值对组成的集合。

语法

声明对象的语法一共有两种

  1. let obj = {'name': 'xxx', 'age': 18}
  2. let obj = new Object({'name': 'xxx'})

第一种方法实际上是第二种方法的简写，另外，我们还可以声明一个匿名对象console.log({'name':'xxx','age':18})

这里的 name 就是属性名 key ，每个 key 都是对象的属性名（property）。这里 name 对应的 'xxx'，就是对象的属性值 value，每个 value 都是对象的属性值。

这里需要注意一个细节，键名是字符串，不是标识符。引号可以省略，省略以后就只能写标识符，也可以写数字。引号省略了，键名还是一个字符串。

接下来我们来看一组奇怪的属性名：

  1. let obj = {
  2.     1: 'a',
  3.     3.2: 'b',
  4.     le2: true,
  5.     le-2: true,
  6.     .234: true,
  7.     0xFF: true
  8. }

我们先来看一下打印出来的键名：

  1. Object.keys(obj)
  2. // ['1', '100', '255', '3.2', '0.01', '0.234']

由于没有引号，JS 会先对数字进行科学运算，转换成十进制数之后，再加上引号，此时才是真正的属性名。

我们还可以用变量作属性名：

  1. let p1 = 'name'
  2. var obj = {p1: 'xxx'} // 属性名为'p1'
  3. var obj = {[p1]: 'xxx'} // 属性名为'name'

从这里我们可以看出，不加 [] 的属性名会自动转换成字符串，加了 [] 则会当作变量求值，值如果不是字符串，就会自动变成字符串。

所以我们通过这个规则可以再出一个例子：

  1. var obj = {
  2.     [1+2+3+4]: "十"
  3. }
  4. // obj{'10': "十"}

然后我们看下对象的增删改查的属性

删除属性

删除属性的语法为：delete obj.xxx 或 delete obj['xxx'] ，这样我们就可以删除 obj 的 xxx 属性。

注意：在 JS 中，删除不存在的属性，JS 不会报错。

  1.         **区分 "属性值为undefined" 和 “不含属性名” 这两个概念**
  1. 'xxx' in obj === false // 不含属性名
  2. 'xxx' in obj && obj.xxx === undefined // 含有属性名，但是属性值为 undefined

查看属性

  1. 查看自身属性 Object.Keys(obj)
  2. 查看自身 + 共有属性 console.log(obj)
  3. 判断一个属性是自身的还是共有的 obj.hasOwnProperty('toString')
  4. 查看值 Object.values(obj)
  5. 查看每一组键值 Object.entries(obj) **


注意： ‘name’ in obj 和 obj.hasOwnProperty(‘name’) 的区别。 ‘name’ in obj 不会判断属性是自身的还是共有的**

修改或增加属性

  1. 直接赋值

    1. let obj = {name: 'xxx'}
    2. obj.name = 'yyy'
    3. obj['name'] = 'yyy'
    4. obj['na' + 'me'] = 'yyy'

    **

  2. 批量赋值

    1. Object.assign(obj, {age: 18, gender: 'man'})

注意：如果对象不包含 name 属性，那么就创建 name 并设置属性值，否则直接修改 name 的属性值。

本次关于 JS 对象的基本用法暂时告一段落，之后会对属性的修改和新增再进行内容补充。**