JS 对象基本用法

199 阅读2分钟

这篇文章,我们专门来介绍看看 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 都是对象的属性值。

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

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

let obj = {
    1: 'a',
    3.2: 'b',
    le2: true,
    le-2: true,
    .234: true,
    0xFF: true
}

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

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

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

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

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

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

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

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

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

删除属性

删除属性的语法为:delete obj.xxxdelete obj['xxx'] ,这样我们就可以删除 objxxx 属性。

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

		**区分 "属性值为undefined" 和 “不含属性名” 这两个概念**
'xxx' in obj === false // 不含属性名
'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. 直接赋值
let obj = {name: 'xxx'}
obj.name = 'yyy'
obj['name'] = 'yyy'
obj['na' + 'me'] = 'yyy'

**

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

注意:如果对象不包含 name 属性,那么就创建 name 并设置属性值,否则直接修改 name 的属性值。 ** 本次关于 JS 对象的基本用法暂时告一段落,之后会对属性的修改和新增再进行内容补充。