简介
介绍:对象是 JavaScript 数据类型的一种,可以被理解成是一种数据集合,可以详细的描述描述某个事物,它由属性和方法两部分构成。
使用场景:保存网站用户信息
==花括号{ }是对象的字面量==
对象声明语法
利用字面量创建对象
语法:const obj = {}
const start = {
uname: '鹿晗', //属性 属性和方法之间用逗号隔开
sing: function() { //方法
console.log('他会唱歌')
}
}
利用new Object创建对象
语法:const obj = new Object()
const obj = new Object()
obj.uname = 'pink老师'
console.log(obj) // {uname: 'pink老师'}
const obj = new Object({
uname: 'pink老师'
})
console.log(obj)
利用构造函数创建对象
介绍:是一种封装对象的函数,主要用来初始化对象
**缺点:**存在浪费内存的问题(主要体现在存储复杂数据类型时,会开辟多个内存,存储相同的内容)
语法:
function 构造函数名(uname,age,sex) {
this.name = uname name是对象的属性,uname是形参
this.age = age //this指向被调用者
this.sex = sex
this.sing = function(song){
console.log(song) //孤城
}
}
const ldh = new 构造函数名('刘德华',18,'男') 调用构造函数必须加new
console.log(ldh.name) 使用对象的属性
ldh.sing('孤城') 使用对象的方法
注意:
- 构造函数名首字母大写
- 调用的时候必须实例化(new调用)
- 构造函数里不需要写return,返回值就是创建的新对象
- 构造函数创建的对象特点:结构相同,值不同,并且对象彼此之间不受影响
// 方法一:
const Car = function () {}
const bmw = new Car()
// console.log(bmw)
// 方法二:
function Animal() {}
const dog = new Animal()
new的实例化过程:
- 首先在内存中开辟一个空对象
- 然后通过this指向空对象
- 执行构造函数里的代码,修改this,添加新的属性(进行赋值操作)
- 返回已经有了数据的新对象
对象的属性和方法
属性:信息或叫特征,可以理解为变量名(名词)
方法:功能或叫行为,本质是函数(动词)
语法:
const 对象名 = {
属性名:属性值,
方法名: 函数
}
对象名.属性名 /调用属性
对象名.方法名() /调用方法
注意点:
- ==属性名和值之间使用英文 : 分隔==
- ==多个属性之间使用英文 , 分隔==
- 属性就是依附在对象上的变量(外面是变量,对象内是属性)
- 属性名可以使用
""或'',一般情况下省略,除非名称遇到特殊符号如空格、中横线等
const person = {
name: '小明', //属性
age: 18, //属性
hobby: function(hob){ //方法
console.log(hob) /踢足球
}
}
console.log(person.name) 调用属性
person.hobby('踢足球') 调用方法
对象的查(属性访问)
**介绍:**声明对象,并添加了若干属性后,可以使用 . 或 [] 获得对象中属性对应的值,我称之为属性访问。
语法:对象名.属性名 或 对象名['属性名'] 中括号里写单引和双引都可以
注意: [ ] 语法里面的值如果===不添加引号 默认会当成变量解析==
let obj = {
'goods-name': '小米10青春版',
num: '100012816024',
weight: '0.55kg',
address: '中国大陆'
}
console.log(obj.weight)
// 查的另外一种属性:
// 对象名['属性名']
console.log(obj['goods-name'])
对象的增和改
介绍:如果对象里没有属性,就是追加,如果有就是修改
改属性语法:对象名.属性名 = 新值
增属性语法:对象名.新属性名 = 新值
let obj = {
'goods-name': '小米10青春版',
weight: '0.55kg',
address: '中国大陆'
}
obj.weight: '0.41kg' 更改属性值
obj.color = '粉色' 新增属性
console.log(obj.color) // 粉色
对象的删
**介绍:**删除对象的属性
语法:delete 对象名.属性名
let obj = {
'goods-name': '小米10青春版',
weight: '0.55kg',
address: '中国大陆'
}
delete obj.weight 删除 weight属性
console.log(obj) // {goods-name: '小米10青春版', address: '中国大陆'}
for in 遍历对象
实现原理:
利用查(访问)对象的第二种方式 对象名['属性名']遍历对象,原因是在于k他可以把对象里所有的属性名都取出来,这样的话,把第二种方式里的属性名换为k,就可以实现遍历对象的作用
-
==k 全等于 属性名==
-
遍历对象必须加中括号
[] -
for in 不提倡遍历数组 因为 k 是 字符串
语法:for (let k in 对象名) { console.log(对象名[k])}
let obj = {
uname: 'pink'
}
for(let k in obj) {
// k 属性名 字符串 带引号 obj.'uname' k === 'uname'
// obj[k] 属性值 obj['uname'] obj[k]
console.log(k) //用于获得 属性名 uname
console.log(obj[k]) //用于获得 属性值 'pink'
}
==注意==: 这里遍历对象不能使用 console.log(对象名 . k),这样写结果是undefined,因为k遍历出来的是字符串
Object.keys遍历对象
介绍:Object.keys是静态方法(内置的方法),也就是==只有构造函数才能调用==的方法,返回的是数组
理解:
Object.keys()
相当于 构造函数里的一个方法
function Object() = {
keys = function() {} 实质上是在调用他 通过他来遍历对象的每一个值
}
获得 属性名 语法:Object.keys(对象名)
获得 属性值 语法:Object.values(对象名)
const start = { uname: '张杰',age: 18}
1.获得对象的所有 属性名
console.log( Object.keys(start) ) / ['uname', 'age']
---------------------------------------------------------
2.获得对象的所有 属性值
console.log( Object.values(start) ) / ['张杰', 18]
Object.assign拷贝对象(克隆)
语法:Object.assign(拷贝给谁,被拷贝者)
被拷贝者
const start = { uname: '刘德华', gender: '男'}
拷贝给谁
const sta = {}
Object.assign(sta,start)
console.log(sta) / { uname: '刘德华', gender: '男'}
使用场景:给对象添加多个属性
语法:Object.assign(要添加的对象,{ 要添加/更改 的属性 })
原对象
const start = { uname: '刘德华', gender: '男'}
---------------------------------------------------------------------------
拷贝后的对象
Object.assign(start,{age:18,uname:'赵丽颖'})
console.log(start) / { uname: '赵丽颖', gender: '男' ,age:'18'}
注意:需要==加大括号==
声明空对象(null)
介绍:null 也是 JavaScript 中数据类型的一种,通常只用它来表示不存在的对象,null也是对象数据类型的一种
语法:const 对象名 = null
let obj = null
// null 类似于 obj = {} 空对象
console.log(typeof obj) 输出为 object
实例成员和静态成员
实例成员
介绍:通过构造函数创建的对象称为实例对象,实例对象中的属性和方法称为实例成员
实例对象:
const ldh = new 构造函数名('刘德华',18,'男') /ldh 接过来的对象就是实例对象
实例成员:
==在实例对象里的属性和方法被称为实例成员== 比如:name age sex sing
静态成员
静态成员是构造函数里的属性和方法(公共特性的属性和方法)
注意:只有构造函数名才能调用静态的 属性和方法