《JS 对象基本用法》

227 阅读3分钟

简单总结JS对象基本用法。 参考来源:JavaScript教程以及饥人谷方老师ppt。

对象是JS七种数据类型之一,对象是无序的数据集合,是键值对(key-value)的集合。

声明对象的两种语法

let obj = {name : 'Tom', age : 18}
let obj = new Object({'name' : 'Frank', 'age' : 20 })

注意:

  • 键名是字符串,可包含任意字符,引号可省略(不考虑符号symbol情况下)
  • 如果键名是数值,会被自动转为字符串
var obj = {
  1: 'a',
  3.2: 'b',
  1e2: true,
  1e-2: true,
  .234: true,
  0xFF: true
};

obj
// Object {
//   1: "a",
//   3.2: "b",
//   100: true,
//   0.01: true,
//   0.234: true,
//   255: true
// }

obj['100'] // true
  • 如果键名不符合标识符的条件(比如第一个字符为数字,或者含有空格或运算符),且也不是数字,则必须加上引号,否则会报错
// 报错
var obj = {
  1p: 'Hello World'
};

// 不报错
var obj = {
  '1p': 'Hello World',
  'h w': 'Hello World',
  'p+q': 'Hello World'
};

对象的属性

键名(key)是对象的属性名,键值(value)是对象的属性值。

除了常量(字符串)可以作属性名,‘变量+[ ]’也可以作属性名。

对比:

  • 不加[ ]的属性名会自动变成字符串
  • 加了[ ]会先求变量(或表达式)的值,然后转成字符串

删除对象属性

delete obj.xxxdelete obj['xxx']

需要注意的是,delete命令只能删除对象本身的属性,无法删除共有属性。

删除一个不存在的属性,delete不报错,而且返回true。

查看对象属性

查看一个对象本身的所有属性,可以使用Object.keys方法。

var obj = {
  key1: 1,
  key2: 2
};

Object.keys(obj);
// ['key1', 'key2']

查看一个对象自身属性+共有属性,可以使用console.dir(obj)

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

按照修改自身、共有和原型属性分为3种情况:

修改自身属性:

  • 直接赋值:
let obj = {name : 'frank'}
obj.name = 'good'
obj['name'] = 'good'
obj['na'+'me'] = 'good'
obj[name] = 'good'//错误,name是变量,值不确定
  • 批量赋值
Object.assign(obj,{age : 18, gender : male})

修改共有属性:

Object.prototype.toString = 'xxx'//一般不要修改原型 

修改原型链

不推荐用赋值的方法修改原型,推荐在创建对象之初赋予原型。

let common = {gender : 'male'}
let person = Object.create(common)

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

in运算符用于检查对象是否包含某个属性(注意,检查的是键名,不是键值),如果包含就返回true,否则返回false。它的左边是一个字符串,表示属性名,右边是一个对象。

var obj = { p: 1 };
'p' in obj // true
'toString' in obj // true

in运算符的一个问题是,它不能识别哪些属性是对象自身的,哪些属性是共有的。就像上面代码中,对象obj本身并没有toString属性,但是in运算符会返回true,因为这个属性是共有的。

这时,可以使用对象的hasOwnProperty方法,判断一下是否为对象自身的属性。

var obj = {};
if ('toString' in obj) {
  console.log(obj.hasOwnProperty('toString')) // false
}

所以,hasOwnProperty方法用来判断某个属性是否为对象自身的属性,是返回true,否则返回false。而in运算符用于检查对象是否包含某个属性。