JavaScript学习-JS对象

229 阅读3分钟

定义

JavaScript的对象是一种无序的集合数据类型,它由若干键值对组成。写法:

let obj={'name':'frank','age':18}//name 只能是字符串,age 也只能是字符串,就算你把引号删掉,它还是字符串
let obj=new Object({name':'frank'})//这是正规写法,上面那种是简单写法
console.log({'name':'frank','age':18})//这是匿名字符串

注:

1、JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

2、键名是字符串,不是标识符。键名可以省略引号,但是必须没有特殊字符,例如-。如使用标识符的规则去构建键名,在后续可以直接使用object.prop的形式去访问一个属性。

对象键值易错点

属性名始终是字符串

如果使用一些奇怪的不符合标识符的规则属性名。要始终记录键值名始终是字符串,无论是否键值名是否加了引号,都表示字符串。可以使用Object.keys(obj)可以得到 obj 的所有 key,如下

let obj={
  1:'a',
  3.2:'b',
  1e2:true,
  1e-2:true,
  .234:true,
  0xFF:true
}
Object.key(obj)//可以得到所有的键名(key)
=>["1","100","255","3.2","0.01","0.234"]

变量作属性名

如果需要使用变量做属性名,直接修改属性名为变量名字就可以了吗?答案是否定的,引擎会认为这是一个以变量名命名的键值对。如下

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

要想使用变量作属性名,需要使用[]提示引擎去变量求值。

对象属性的增删改查

删除属性

由于JavaScript的对象是动态类型,我们可以很自由地使用delete关键字删除属性。delete的基本用法是

delete obj.xxx;
delete obj['xxx'];
//删除一个不存在的属性也不会报错

通常来说delete 只能删属性,如果你要删其它的东西最好不要用 delete。 如果要检测一个对象是否存在某一属性,可以使用in操作符。如下:

var xiaoming = {
    name: '小明',
    birth: 1990,
    school: 'No.1 Middle School',
    height: 1.70,
    weight: 65,
    score: null
};
'name' in xiaoming; // true
'grade' in xiaoming; // false

注:如果in判断一个属性存在,不一定属性该对象,它可能是由该对象通过原型继承得来的。 如果要判断一个属性是否是该对象拥有,使用hasOwnProperty()方法。例如:

var xiaoming = {
    name: '小明'
};
xiaoming.hasOwnProperty('name'); // true
xiaoming.hasOwnProperty('toString'); // false

查看属性(读属性)

  • 查看对象所有属性的方法 JS常用提供的方法如下 1、查看自身所有属性 Object.keys(obj) 2、查看自身所有值: Object.values(obj) 3、查看自身所有属性和值: Object.entries(obj) 4、查看自身+共有属性 console.dir(obj)或者自己依次用 Object.keys 打印出 obj.proto

  • 查看对象单个属性的方法 1、使用类似数组访问的形式进行获取,例如obj['key']。 2、使用Object.prop的方法获取,例如obj.key。 注:当使用中括号获取单个属性的时候,一定要加单引号。例如obj[key] ,变量 key 值一般不为'key'.

修改属性(写属性)

  • 直接赋值 根据前面的查找属性,找到属性值,然后通过赋值语句直接赋值。例如:
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' // 错,因为obj.key等价于obj['key']
  • 批量修改 通过ES6新增的一个API,Obejct.assign()进行修改。例如
Object.assign(obj,{age:18,gender:'man'})