开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第18天,点击查看活动详情
一切事物皆可对象。在 JavaScript 中,字符串、数值、数组、函数等等所有都是对象。
- 对象时一组没有特定顺序的值。
- 每个对象都有属性和方法
对象的理解
使用 object 创建自定义对象,再给实例添加属性和方法。
let person = new Object()
person.name ='Tom'
person.age= 18
person.sayHi = function(){
console.log('hi,myname is' + this.name)
}
如上源码所示,创建的 person 对象,实际就是 Object 的一个实例。它有2个属性和1个方法。但现在越来越多创建对象直接使用对象字面量进行创建:
let person ={
name:'tom',
age:18,
sayHi: function(){ console.log('hi,myname is' + this.name)}
}
属性类型
对象中的属性,一般的用法就是对它进行读取或写入。打开浏览器 F12 然后进入控制台,在控制台中输出刚才创建的对象,并将对象输出。
从控制台中输出的内容,可以看到除了创建的对象时定义的2个属性和1个方法,还多了一个[[Prototype]]。这是对象内部特性,主要用来描述属性的特征, 这些特性是由为 JavaScript 实现引擎的规范定义 ,一般无法直接访问。
属性分两种:数据属性和访问器属性。
- 数据属性:能够读取和写入,还包含保存数据值的位置;
- 访问器属性:只能够读取和写入,不包含数据值。通过 getter([[Get]])和setter([[Set]]) 函数进行读取和写入操作。
let person ={
year_ = 2022, // 私有成员 year_ ,下划线表示内部属性不希望被外部访问
}
// 修改属性的默认特性
Object.defineProperty(person, "name", {
writable: false,
value :'Tommy'
})
定义访问器属性不能直接定义,必须使用 Object.defineProperty
Object.defineProperty(person, "year", {
get(){return this.year_}
set(newValue){
this.year_ = newValue
}
})
对象相等判断
ES6 中新增了 Object.is() 来解决对象的相等的判定。
比如,在之前 console.log(+0 === -0) 结果是 true 这个结果是错误的,但使用 Obejct.is 就可以正确判断出结果。
console.log({} === {}); // false
console.log(Object.is({}, {})); // false
console.log(NaN === NaN); // false
console.log(Object.is(NaN, NaN)); // true
对象解构
ES6 中新增了对象解构语法,就是使用一条语句实现一个或多个赋值操作。以下是解构的常用几种方法。
let person = {
name:'Tommy',
age: 18,
position: {
city:'北京',
country: '北京'
}
}
// 用法1:一次性取值
let {name, age} = person;
// 用法2:解构时支持属性名称的自定义
let {name: personName, age: personAge} = person;
// 用法3: 解构时设置默认值,在 person 对象没有age 值就会使用默认值
let {name, age=20} = person;
// 用法4:嵌套解构 和部分属性解构
let {position:{city,country}} = person