美文网首页
JS 对象基本用法

JS 对象基本用法

作者: 饥人谷_折纸大师 | 来源:发表于2022-07-15 12:45 被阅读0次

我们已经知道JS的七种数据类型分别是:number数字、'字符串'、布尔bool、符号symbol、空undefined、空null以及对象object。今天来总结一下有关对象object的基本用法。

对象object

对象是JS七种数据类型中唯一一种复杂的数据类型。

定义

对象是无序数据或者键值对的集合。

写法

声明方法如下:

let obj = { 'name': 'Peter', 'age': 18 }//第一种写法
let obj2 = new Object({ 'name': 'Peter' })//第二种写法
console.log({ 'name': 'Peter', 'age': 18 })//第三种写法

小细节

  • 键名必须是字符串,不是标识符,可以包含任意字符
  • 引号可以省略,但省略了就只能写标识符
  • 即使引号省略了,键名也是字符串
  • 每个key都是对象的属性名
  • 每个value都是对象的属性值
  • 所有属性名都会自动变成字符串
    如果想用变量作为属性名,则
let a = 'xxx'
var obj = {
[a]: 22222
}
  • 不加[ ]的属性名会自动变成字符串
  • 加了[ ]则会当成变量求值
  • 值如果不是字符串,则会自动变成字符

原型

JS中的每一个对象都有隐藏属性,这个隐藏属性存储着其共有属性组成的对象的地址,这个共有属性组成的对象叫原型。即隐藏属性,存储着原型的地址

每个对象都有原型

  • 原型里存储着对象的共有属性
  • obj的原型是一个对象,obj.__proto__存储着这个对象的地址,这个对象有toString/constructor/valueOf等属性
  • 因为原型也是对象,所以原型也有原型。obj={}的原型为所有对象的原型,这个原型包含所有对象的共有属性,是对象的根,这个原型的原型为null。

对象属性的增删改查

删除属性

写法如下

let obj = { 'name': 'frank', 'age': 18 }
delete obj.name//写法一
delete obj['name']//写法二 他们都是删除了name属性,既删除属性名又删除属性值
不含属性名

‘xxx’ in obj===false

含属性名但是值为undefined

‘xxx’ in obj && obj.xxx===undefined
注意:obj.xxx===undefined不能判断‘xxx’是否为obj的属性

读属性
查看自身所有属性

Object.keys(obj)查看所有属性名
Object.values(obj)查看所有属性值
Object.entries(obj)生成两个数组,分别是属性名和属性值

查看自身以及共有属性

console.dir(obj)以目录的形式打印出来obj的所有属性
或者自己依次用Object.keys打印出obj.__proto__(这种并不推荐 )

判断属性是否存在,但不区分共有属性还是自身属性

'xxx' in obj

判断一个属性是自身的还是共有的

obj.hasOwnProperty('toString')
返回true则是自身属性,反之则是共有属性

查看单一属性
  • 中括号语法
    obj['key']
  • 点语法
    obj.key
    (优先使用中括号语法)
  • 查看变量语法
    obj[key]变量key值一般不为key
    obj.name等价于obj['name']这里的name是字符串而不是变量,obj[name]中的name是变量。
写属性(修改或增加属性)
直接赋值
let obj = { 'name': 'Peter' }//name是字符串
obj.name = 'Tommy'//name依然是字符 等价于下面一行
obj['name'] = 'Tommy'//也等价于下面一行
obj['na' + 'me'] = 'Tommy'

或者

let key = 'name’; key[name] = 'Peter'//或者声明一个变量,让key等于变量的值再进行赋值
批量赋值

批量赋值是ES6新增的一个语法
Object.assign(obj, { age: 18, gender: ‘man' })一个赋值API,先写给谁赋值,然后写赋值内容

修改或增加共有属性

一般来说,无法通过自身修改或增加来改变共有属性。
如果硬要修改,则有以下办法

obj.__proto__.toString = 'xxx'//这种不推荐
Object.prototype.toString = 'xxx'

一般来说,不要修改原型,会引发很多问题
修改隐藏属性,推荐用Object.create()
在创建之初,就声明好原型

let common = { 'kind': 'human' }
let obj = Object.create(common)//指定以common为原型
obj.name = 'Peter'
let obj2 = Object.create(common)
obj2.name = 'Tommy'

最后解答一个问题:'name' in objobj.hasOwnProperty('name') 的区别

  • 'name' in obj只能得知'name'这个属性是否存在于对象之中,但我们无法得知它是对象自身的属性还是它的共有属性。
  • obj.hasOwnProperty('name') 我们不仅可以得知'name'属性是否在这个对象里面,还可以得知'name'是该对象自身的属性还是它的共有属性。

相关文章

  • js对象及其方法

    1.对象MDN文档2.JS基础--JS对象及其基本用法3.JavaScript 对象所有API解析

  • JS 对象基本用法

    1.声明对象的两种语法 ES6新增了两种声明对象的方法,分别是let和const。 2.如何删除对象的属性 del...

  • JS 对象基本用法

    一、声明对象的两种语法 let obj = { 'name' : 'frank' , 'age' : 18} le...

  • js对象基本用法

    1.声明对象 定义:无序的数据集合、键值对的集合 写法 属性名:每个key都是对象的属性名(property) 属...

  • JS 对象基本用法

    1 声明对象的两种语法 2 如何删除对象的属性 3 如何查看对象的属性 Object.keys(obj) 查...

  • JS 对象基本用法

    对象的定义 对象是无序的数值集合或者键值对的集合 声明对象的语法 let object = { 'name' : ...

  • JS对象基本用法

    一、声明对象的两种方法(对象:无序的数据集合&键值对的集合) ·简易声明:let obj = { 'name' :...

  • JS对象基本用法

    与JS相关的七种数据类型以及五个falsy值 七种数据类型 : number、string、bool、symbol...

  • JS对象基本用法

    声明对象的两种语法 如何删除对象属性 如何查看对象的属性 查看自身所有属性 查看自身+共有属性 判断一个属性是自身...

  • JS 对象基本用法

    6种基本数据类型 null undefined string number boolean symobl 5种fa...

网友评论

      本文标题:JS 对象基本用法

      本文链接:https://www.haomeiwen.com/subject/raiqirtx.html