对象

125 阅读6分钟

简介

介绍:对象是 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的实例化过程:

  1. 首先在内存中开辟一个空对象
  2. 然后通过this指向空对象
  3. 执行构造函数里的代码,修改this,添加新的属性(进行赋值操作)
  4. 返回已经有了数据的新对象

对象的属性和方法

属性:信息或叫特征,可以理解为变量名(名词)

方法:功能或叫行为,本质是函数(动词)

语法:

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

静态成员

静态成员是构造函数里属性方法(公共特性的属性和方法)

注意:只有构造函数名才能调用静态的 属性和方法