JS 对象基本用法

JS的数据类型

  • 数字(Number)
  • 字符串(String)
  • 布尔(Boolean)
  • 符号(Symbol)
  • 空(Undefined)
  • 空(Null)
  • 对象(Object)
    关于JS的数据类型,可以简写为:“四基两空一对象”。其中,前六种数据类型为简单的数据类型,Object为唯一的复杂类型。
  • 五个fasly值:undefined、null、NaN、0、''

JS对象

  1. 定义
    JS对象是无序的数据集合,也是键值对的集合。(键值对中的键(key)是指对象的属性名,值(value)指的是对象的属性值)
  2. 对象的声明
    简写,一般都用这种写法
let obj = { 'name' : 'frank' , 'age' : 18}

下面这种是正规写法但是一般不用。

let obj = new Object ({ 'name' : 'frank' , 'age' : 18})
  1. 键名是字符串,不是标识符,可以包含任意字符;
  2. 引号可以省略,但是省略之后就只能写标识符(按照标识符的要求来,第一个字符不能以数字开头)或者只使用数字;
  3. 就算引号省略了,键名也还是字符串(这是一个重点,必须要理解并记住)。
    用变量作属性名
    有些时候,我们需要用变量来做属性名:
let p1 = 'name'
let obj = { p1 : 'frank' }//这样写,对象的属性名为'p1',并不是变量。
let obj = { [p1] : 'frank' } //这样写,对象的属性名为'name'。这时,我们就以一个变量作了对象的属性名。

总结

  • 不加[]的属性名,会被自动变为字符串;
  • 加了[],则会被当作变量进行求值,然后以求得的值作为对象的属性名,- - 求得的值如果不是字符串,也会自动转变为字符串。

对象的隐藏属性

隐藏属性储存着原型的地址

  • JS中,每一个对象都有一个隐藏属性,这个隐藏属性储存着其共有属性组成的对象的地址,这个共有属性组成的对象叫做原型。
  • 每一个对象都有原型,原型中存着对象的共有属性;
  • 对象的原型也是对象,这个对象的原型也有原型,这个原型包含所有对象的共有属性,是对象的根,为null。

对象属性的增删改查

删除对象属性

delete obj.xxx或者delete obj['xxx']

通过上述两种方式,可以删除对象的xxx属性。
区分两种方式

delete obj.xxx或者delete obj['xxx']

通过这种方式,可以将对象的属性彻底删除,包括属性名以及属性值。

obj.xxx = undefined

通过这种方式,只是将对象的xxx属性的当前的属性值改为了undefined,而并非将该属性完全删除。
如何确认一个属性是否属于某个对象(只有用in操作符)

'xxx' in obj

通过上述API可以判断属性'xxx'是否属于对象obj。若得到的值为true,则表示属性'xxx'属于对象obj;若得到的值为false,则表示该属性不属于对象obj。
通过obj.xxx === undefined并不能判定属性'xxx'是否属于对象obj。

查看对象属性

  1. 查看所有自身属性
Object.keys(obj)
  1. 查看自身所有属性的属性名以及属性值,得到的是一系列的数组,每一个属性对应一个数组。
Object.entries(obj)
  1. 查看自身+共有属性
console.dir(obj)
  1. 可以判断一个属性'xxx'是否是对象的自身属性。
obj.hasOwnProperty('xxx')

当得到的值为true时,说明'xxx'属性是对象的自身属性;反之,当得到的值为false时,说明该属性有可能是对象的共有属性或者对象中并没有该属性。
'name' in obj和obj.hasOwnProperty('name') 的区别

'name' in obj

用来确定'name'属性是否属于对象obj,但是它无法判断'name'属性是obj的自身属性还是共有属性。

obj.hasOwnProperty('name')

用来确定'name'属性是否是对象obj的自身属性。

查看单个属性

中括号语法

obj['key'] //此时的key是字符串'key'

点语法

obj.key //此时的key是字符串'key'

坑新人语法

obj[key] //此时的key是变量,需要先确认key的值

建议优先使用中括号语法 这样可以保证新手在使用时,不会忘记当前的key是一个字符串,而不是一个变量。
关键知识点
obj.name等价于obj['name'],而不等价于obj[name]
简单来说,obj.name与obj['name']中的name是字符串,而不是变量。
下面是一道帮助我们理解记忆的题目,弄清楚这道题,有助于我们理解上述知识点
代码如下:
let list = ['name', 'age', 'gender'] let person = { name:'frank', age:18, gender:'man'} for(let i = 0; i < list.length; i++){ let name = list[i] console.log(???) }
问题:要使得person的所有属性都被打印出来,问号处应该怎么填写?
A.console.log(person.name)
B.console.log(person[name])
答案是选择B。
因为选项A中的name是一个字符串,所以结果会打印出三遍person的name属性的值;
选项B中的name是一个变量,通过for循环,使得name的值分别为'name'、'age'、'gender',这样就可以将person的三个属性的值都打印出来。

修改或增加对象属性(写属性)

  1. 可以通过直接赋值进行操作
let obj = {name: 'frank'}
obj.name = 'frank'
obj['name'] = 'frank'
obj['na'+'me'] = 'frank'
let key = 'name'; obj[key] = 'frank'
  1. 可以进行批量赋值
    通过下列API即可对对象的属性进行批量赋值
Object.assign(obj,{name:'frank',age:18,gender:'man'})

上述实例表示给对象obj同时赋值三个属性,包括name、age以及gender。

修改或增加共有属性

无法通过自身修改或增加共有属性
看下列示例:

let obj ={}, obj2 ={} obj.toString = 'xxx'

obj与obj2有着共有属性toString,当执行obj.toString='xxx'时,只是修改了obj自身的属性,而obj2.toString仍然在原型上。
如果我们非要对原型中的属性进行修改时,建议使用:

Object.prototype.toString = 'xxx'

修改对象的原型(一般来说,不要修改原型,会引起很多问题 )

不推荐使用proto去修改对象的原型,一般推荐使用Object.create进行修改。
示例一:(不推荐)

let obj = {name:'frank'} 
let obj2 = {name: 'jack'}
let common = {kind: 'human'} 
obj.__proto__ = common 
obj2.__proto__ = common 

复制代码示例二:(推荐,一创建就指定原型)

let obj = Object.create(common) 
obj.name = 'frank' 
let obj2 = Object.create(common) 
obj2.name = 'jack' 

复制代码规范的大概意思是,要改就一开始就改,别后来再改,后来改会非常影响性能
查属于读,改和增属于写。查的时候会看原型链,改和增是不会看一个对像的原型链的,改只能改自身,增也只能增自身

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容

  • 这是一篇对JS对象基本用法的介绍的文章,所有的内容都能在MDN里面找到,我主要是介绍一些常用的知识。JS一共有7种...
    刘泽佳阅读 342评论 0 0
  • 6种基本数据类型 null undefined string number boolean symobl 5种fa...
    WlSE阅读 274评论 0 0
  • 定义 无序的 键(key)值(value)对组合 声明对象的方式 中括号语法:obj['key']----推荐点语...
    张德瘦嬢嬢阅读 206评论 0 0
  • 1.声明对象 定义:无序的数据集合、键值对的集合 写法 属性名:每个key都是对象的属性名(property) 属...
    fanison阅读 144评论 0 0
  • 今天分享的书叫《向上汇报》,我们将和大家分享两个让上司更青睐自己的职场工作法则:让时间有价值和合作共赢。 001、...
    泉布阅读 192评论 0 3