JS对象的基本用法之增删改查

概念理解

对象的定义:

  • 无序的数据集合
  • 键值对的集合

写法:

let obj = {'name':'bubu_sourire','age':18}

let obj = new Object({'name':'bubu_sourire'})

console.log({'name':'bubu_sourire','age':18})

注意:

  • 键是字符串,不是标识符,键中可以包含任意字符
  • 键的引号可以省略,省略之后只能写标识符,但即便省略引号,键也依旧是字符串

关于属性名(key/property)和属性值(value)

  • 每个key都是对象的属性名
  • 每个value都是对象的属性值

属性名示例:

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

Object.keys(obj) //可以得到obj所有的key

= ["1", "100", "255", "3.2", "0.01", "0.234"]

变量做属性名 与 常量做属性名:

let per = 'name'

let obj1 = {per:'bubu_sourire'} //此处属性名是 "per"

let obj2 = {[per]:'bubu_sourire'} //此处属性名是 "name"

注意:

  • 不加[]的属性名会自动变成字符串
  • 加了[]则会当做变量求值;值如果不是字符串,会自动变成字符串

对象的隐藏属性

公用属性与原型链

对象属性的增删改查

删除属性

  • 删除obj的xxx属性
delete obj.xxx

delete obj.['xxx']
  • 不含属性名
'xxx' in obj === false
  • 含有属性名,但是指为undefined
'xxx' in obj && obj.xxx = undefined

注意:

obj.xxx === undefined 不能断定'xxx'是否为obj的属性

查看属性

两种方法查看属性

obj.key //点语法

obj.['key'] //中括号语法


obj.[key] //这个是获取对象的变量key值,区别这种语法(!!!易踩坑,请慎重!!!)

注意:

  • obj.name 等价于 obj.['name'](字符串);
  • obj.name 不等价于 obj.[name](变量值);
  • 这里的name是字符串,不是变量。
  • let name = 'bubu_sourire'   =>  obj.[name] 等价于 obj.['frank']

对比示例

person.name

person[name]

  • 查看自身所有属性
Object.keys(obj)
  • 查看自身及共有属性
console.dir(obj)

或依次用Object.keys打印出obj.__proto__

  • 判断一个属性是自身的还是共有的
let obj = {'aaa':111}

obj.hasOwnProperty('aaa') //true
obj.hasOwnProperty('toString')  //false

修改或增加属性

直接赋值

let obj = {name:'aaa'} //name是字符串
obj.name = 'bbb' //name是字符串
obj['name'] = 'ccc'
obj['na'+'me'] = 'ddd'

obj[name] = 'eee' //!!错误!! name值不确定


let key = 'name'
obj.[key] = 'ddd' //等价于 obj['name']

obj.key = 'ddd' //!!错误!! 此处的obj.key等价于 obj.['key'] 

批量赋值

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

修改或增加共有属性

无法通过自身修改或增加共有属性,改也只是改自身的属性

可以使用 obj.__proto__.toString = 'xxx' 修改共有属性,但是不推荐

推荐使用Object.create

let obj = Object.create(common)

let obj = Object.create(common,{key1:{value:'value1'},key2:{value:'value2'}})

猜你喜欢

转载自www.cnblogs.com/BUBU-Sourire/p/11531952.html