JS 对象

本文详细探讨了JavaScript中的对象,包括奇怪的属性名、对象的隐藏属性及其原型,以及对象属性的增删改查方法。重点讲解了如何使用变量作为属性名,并强调了属性值为`undefined`与不含属性名的区别。同时,文中还提醒了避免直接修改原型以防止引发问题。
摘要由CSDN通过智能技术生成

本节课主要讲解js的第7种数据类型,唯一一种复杂类型:对象object

其它
1.新手学js的三座大山:原型、this、ajax
2.读对象的属性时(重要知识点) (1)如果使用[ ]语法,那么JS 先求[ ]中表达式的值,注意区分表达式是"变量"还是常量。 (2)如果使用点语法,那么点后面一定是 string 常量。
3.7种数据类型:4基2空1对象 string number bool symbol undefined null object 除了bool的false外,其它数据类型也有假的值。 5个falsy值::2个空2个数字1个字符串 undefined
null 0 NaN ‘’(空字符串)
4.打印出一个对象的所有key

var obj={   
  2:'22222' 
} 
Object.keys(obj) 
输出结果:['2']

5.若一个属性不存在则它的值为undefined。
6.log返回的值永远是undefined
7.原型是对象,原型包含了共有属性。

对象object

前6种是简单类型,不能包含其它任何东西。
对象是复杂类型,可以包含其它的6种东西甚至包括自己。

语法
1.定义
无序的数据集合
键值对的集合
2.写法

1’ let obj={'name':'frank','age':18}  //推荐写法
2’ let obj=new Object({'name':'frank'})
3’ console.log('name':'frank','age':18)

3.细节
键名必须是字符串。不像标识符,键名可以以数字开头。键名可以包含任意字符。
引号可省略,省略之后就只能按照标识符的规则来写。
就算省略引号,键名也还是字符串(重要)

属性名:每个key都是对象的属性名(property)
属性值:每个value都是对象的属性值

奇怪的属性名

1.所有属性名会自动变成字符串

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

输出结果:['1', '100', '255', '3.2', '0.01']

2.变量作属性名
如何用变量做属性名
之前都是用常量做属性名
let p1=‘name’
let obj={p1:‘frank’}这样写属性名为’p1’
let obj={[p1]:‘frank’}这样写属性名为’name’
对比
不加[]的属性名会自动变成字符串
加了[]的则会当作变量求值
值如果不是字符串,则会自动变成字符串

例子

let a='xxx'
var obj={
  a:1111
}
控制台输入:obj
输出结果:{a:1111}

var obj={
  [a]:1111
}
控制台输入:obj
输出结果:{xxx:1111}

重要:如果你想用变量的值做key必须加[]!

对象的隐藏属性

隐藏属性
JS中每一个对象都有一个隐藏属性
这个隐藏属性储存着其共有属性组成的对象的地址
这个公有属性组成的对象叫做原型
也就是说,隐藏属性储存着原型的地址
代码示例

var obj={}
obj.toString() //居然不报错

因为obj的隐藏属性对应的对象上有toString()
在这里插入图片描述

var obj={'10':'十'}
输入:obj
输出:{'10':'十'}

超纲知识
除了字符串,symbol也能做属性名
let a=Symbol()
let obj={[a]:‘hello’}
这有什么用呢?
目前没用,在学习「迭代」时会用到

对象属性的增删改查

一.删属性

1.delete obj.xxx或delete obj[‘xxx’]
即可删除obj的xxx属性。只能删属性不能用来删对象。
请区分「属性值为undefined」和「不含属性名」
2.不含属性名
‘xxx’ in obj=false
含有属性名
‘xxx’ in obj && obj.xxx
=undefined
注意:obj.xxx === undefined 不能断定’xxx’是否为obj的属性

var obj={}
var obj2={x:undefined} 

控制台输入:obj.x === undefined
输出结果:true

控制台输入:obj2.x === undefined
输出结果:true

控制台输入:'x' in obj
输出结果:false
控制台输入:'x' in obj2
输出结果:true

只能判断属性值,不能判断属性名,要判断属性名只能用in
例子

1' var obj={name:'frank',age:18}
  obj.name=undefined //这种也可以删除但不推荐!
  控制台输入:obj
  输出结果:{name:undefined,age:18}
  
2' var obj2={name:'frank',age:18}
  delete obj2.name
  控制台输入:obj2
  输出结果:{age:18}

二.读属性

1.查看所有属性(读属性)
(1)查看自身所有属性
Object.keys(obj)

var obj={name:'frank',age:18}
Object.keys(obj)   //查看key
输出结果:['name','age']

Object.values(obj) //查看value
输出结果:['frank','18']
 
Object.entries(obj) //查看key和value
输出结果:[Array(2), Array(2)]
         0: (2) ['name', 'frank']
         1: (2) ['age', 18]

(2)查看自身+共有属性
console.dir(obj)
或者自己依次用Object.keys打印出obj.__ proto__. //不推荐
(3)判断一个属性是自身还是共有的

obj.hasOwnProperty('toString')
输出结果:false

2.查看单独属性
1’ 中括号语法:obj[‘key’] //推荐使用
2’ 点语法:obj.key
3’ 坑新人语法:obj[key] //变量key值一般不为’key’

点语法会误导你,让你以为key不是字符串
等你确定不会弄混两种语法再改用点语法

总结
1.obj.name等价于obj[‘name’]
obj.name不等价于obj[name]
这里的name是字符串,而不是变量

let name='frank'
  obj[name]等价于obj['frank']

考题
分清变量name和常量字符串’name’

let list=['name','age','gender']
letperson={
 name:'frank',age:18,gender:'man'
}
for(let i=0;i<list.length;i++){
 let name=list[i]
 console.log(person_?_)
}
打印person的所有属性: console.log(person[name])

原型

1.每个对象都有原型
原型里存着对象的共有属性
比如obj的原型就是一个对象
obj.__proto__存着这个对象的地址
这个对象里有toString/constructor/valueOf等属性
2.对象的原型也是对象
所以对象的原型也有原型
obj={}的原型即为所有对象的原型
这个原型包含所有对象的共有属性,是对象的根
这个原型也有原型,是null

控制台输入:console.log(obj.__proto__.__proto__)
  输出结果:null

如果一个属性不存在它的值为undefined。
null就说明被人为指定为null的,是根

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

直接赋值

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']

批量赋值
Object.assign(obj,{age:18,gender:‘name’,…})

修改或增加共有属性
1.无法通过自身修改或增加共有属性

let obj={},obj2={}.  //共有toString
obj.toString='xxx' 只会改obj自身属性
obj2.toString 还是在原型上

2.我偏要修改或增加原型上的属性
一般来说不要修改原型,会引起很多问题
obj.proto.toString=‘xxx’ //不推荐
window.Object.prototype.toString=‘yyy’

3.修改隐藏属性(修改原型)
不推荐使用__proto__ 代码:obj.proto=common
推荐使用Object.create

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

规范大概的意思是,要改就一开始改,别后来再改,影响性能。

var common={'国籍':'中国',hairColor:'black'}
var person=Object.create(common,{name:{value:'frank'}})
cosole.log(person)

总结


基本同上:有则改,没有属性则增

delete obj['name']
'name' in obj //false
obj.hasOwnProperty('name') //false

改自身obj['name']='jack'
批量改自身Object.assign(obj,{age:18,...})
改共有属性Object.prototype['toString']='xxx'
改原型let obj=Object.create(common)

Object.keys(obj)
console.dir(obj)
obj['name']
obj.name //记住这里的name是字符串
obj[name]//记住这里的name是变量
### 回答1: JavaScript对象编程是指使用JavaScript语言创建和操作对象的过程。在JavaScript中,对象是一种复合数据类型,可以包含属性和方法。对象可以通过字面量、构造函数、原型等方式创建。通过对象编程,可以实现面向对象编程的思想,使代码更加模块化、可维护和可扩展。在JavaScript中,对象是非常重要的概念,掌握对象编程是成为一名优秀的JavaScript开发者的必备技能之一。 ### 回答2: JavaScript是一种流行的编程语言,其中面向对象编程(OOP)是其中的重要组成部分。对象JavaScript编程中最重要的概念之一,它是一种数据类型,通过对象可以轻松地组织和管理数据。JS对象包含了一组属性和方法,可以用来描述某个对象的性质和行为。 在JavaScript中,对象是动态创建的。创建对象的方法有很多,其中最简单的就是使用字面量,例如: var person = { name: 'Tom', age: 20, gender: 'male', sayHi: function() { console.log('Hi, my name is ' + this.name + ',I am ' + this.age + ' years old.') } }; 上面的代码定义了一个名为person的对象,该对象具有属性name、age、gender和方法sayHi。使用字面量创建对象的好处是,可以轻松地在代码中定义对象,而无需使用专门的构造函数。 当然,也可以使用构造函数来创建对象,例如: function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; this.sayHi = function() { console.log('Hi, my name is ' + this.name + ',I am ' + this.age + ' years old.') } }; var person = new Person('Tom', 20, 'male'); 上面的代码定义了一个名为Person的构造函数,在创建对象时使用了new关键字来调用该构造函数,返回一个新的person对象。这个对象包含了属性name、age、gender和方法sayHi。 在JavaScript中,对象是可以嵌套的。可以在对象中嵌套其他对象,也可以在对象中嵌套函数,这些函数就是对象的方法。通过对象的嵌套,可以更好地管理数据,使程序更加规范和易于维护。 总之,JavaScript对象编程是一种强大且灵活的编程方式,通过对象可以轻松地组织和管理数据,从而实现更好的开发效率和代码质量。由于JavaScript的广泛应用,对于对象编程的掌握将有助于开发者更好地掌握这门语言。 ### 回答3: 在JavaScript中,对象是一种基础数据类型,也是语法的重要组成部分。对象是由若干属性构成的,每个属性都是键值对的形式,其中键是字符串类型,值可以是任意的JavaScript数据类型,包括对象。通过定义对象的属性和方法,我们可以在JavaScript中创建功能强大的程序。 JavaScript对象编程有以下几个重要概念: 1. 对象字面量:使用“{}”来定义对象,字符:“:”分割键与值,“,”分割不同键值对。如:var obj = {name: "小明", age: 18}; 2. 访问对象属性:使用“.”操作符访问对象属性。如:obj.name 3. 新增属性:使用“.”或“[]”,如:obj.height = 180; 或 obj['sex'] = 'male'; 4. 删除属性:使用“delete”关键字,如:delete obj.age; 5. 遍历对象属性:使用“for...in...”语句遍历对象属性,如: for(var key in obj) { console.log(key + ": " + obj[key]); } 6. 面向对象编程:JavaScript中也可以实现面向对象编程。定义一个构造函数,然后使用“new”关键字创建对象实例,如: function Person(name, age) { this.name = name; this.age = age; this.sayHello = function () { console.log("Hello, my name is " + this.name + ", I'm " + this.age + " years old."); } } var p = new Person('小明', 18); p.sayHello(); // 输出:Hello, my name is 小明, I'm 18 years old. JavaScript对象编程是非常灵活的,我们可以根据需要动态地定义、操作对象,同时结合面向对象编程,使得JavaScript的代码结构更加清晰有序。掌握好JavaScript对象编程的技巧,可以让我们开发出更高效、更具有扩展性的项目。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老老老老李

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值