> 文章列表 > javascript之面向对象

javascript之面向对象

javascript之面向对象

对象

合并

对象合并也称为mixin,js提供了方法Object.assign.
Object.assign执行的是浅复制,在有多个源的情况下,如果key有相同的,则以最后的一次为准
还有在复制过程中,中间出现异常,不会回退,也就是会出现出现只复现部分的问题

相等判定

Object.is可以用于之前对于使用===不能正确处理的情况

console.log(Object.is(+0, -0)) //输出为false
console.log(Object.is(+0, 0))//输出为true
console.log(Object.is(-0, 0))//输出为falseconsole.log(Object.is(NaN, NaN))//输出为true

增强的对象语法

  • 属性简写
    在属性名和变量名一致时,可以省略属性名
let name = "Matt"
let person = {name
};console.log(person)//输出为{ name: 'Matt' }
  • 可计算属性
    在通过对象字面量方式创建对象时可以动态属性赋值
const nameKey = "name"
const ageKey = "age"
const jobKey = "job"let person = {[nameKey]: "Matt",[ageKey]: 27,[jobKey]: "Software engineer"
}console.log(person)//输出{ name: 'Matt', age: 27, job: 'Software engineer' }

可计算属性支持表达式运算

const nameKey = "name"
const ageKey = "age"
const jobKey = "job"
let uniqueToken = 0function getUniqueKey(key)
{return `${key}_${uniqueToken++}`;
}let person = {[getUniqueKey(nameKey)]: "Matt",[getUniqueKey(ageKey)]: 27,[getUniqueKey(jobKey)]: "Software engineer"
}console.log(person)//输出为{ name_0: 'Matt', age_1: 27, job_2: 'Software engineer' }
  • 方法名简写
    与属性简写类似
let person = {sayName(name) {console.log(`My name is ${name}`);}
}person.sayName('Matt')

对象解构

就是使用与对象相匹配的结构来实现对对象赋值

let person = {name:"Matt",age: 27
};let {name: personName, age: personAge} = person
console.log(personName, personAge)

上面代码表示将person中的name赋值给personName,age赋值给personAge
可以使用属性简写语法

let person = {name:"Matt",age: 27
};let {name, age} = person
console.log(name, age)

在解析过程中,如果原对象的属性不存在,则赋值为undefined

let person = {name:"Matt",age: 27
};let {name, job} = person
console.log(name, job) //输出为Matt undefined

对于上面因为原对象属性不存在导致赋值为undefined时,可以为其指定默认值

let person = {name:"Matt",age: 27
};let {name, job = "Software engineer"} = person
console.log(name, job)//输出为Matt Software engineer

解构内部是通过函数ToObject将源数据结构转为对象,那么null和undefined解析进会抛出异常

let {_} = undefined
会抛出异常
let {_} = undefined^TypeError: Cannot destructure property '_' of 'undefined' as it is undefined.at Object.<anonymous> (/Users/wuli06/test.js:2:6)at Module._compile (node:internal/modules/cjs/loader:1275:14)at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)at Module.load (node:internal/modules/cjs/loader:1133:32)at Module._load (node:internal/modules/cjs/loader:972:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)at node:internal/main/run_main_module:23:47Node.js v19.9.0let {_} = null
let {_} = null^TypeError: Cannot destructure property '_' of 'null' as it is null.at Object.<anonymous> (/Users/wuli06/test.js:2:6)at Module._compile (node:internal/modules/cjs/loader:1275:14)at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)at Module.load (node:internal/modules/cjs/loader:1133:32)at Module._load (node:internal/modules/cjs/loader:972:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)at node:internal/main/run_main_module:23:47Node.js v19.9.0

解构赋值并没有要求在解构时声明变量,也可以先声明, 再解构赋值,此时要求解析赋值用括号括起来

let personName, personAgelet person = {name:"Matt",age: 27
};({name:personName, age:personAge} = person)
console.log(personName, personAge)

嵌套解构要求外层属性存在,否则会抛出异常,源和目的都需要满足


let person = {job: {title: "Software engineer"}
};let personCopy = {};({foo: {bar: personCopy.bar}
} = person);
抛出异常bar: personCopy.bar^TypeError: Cannot read properties of undefined (reading 'bar')at Object.<anonymous> (/Users/wuli06/test.js:12:10)at Module._compile (node:internal/modules/cjs/loader:1275:14)at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)at Module.load (node:internal/modules/cjs/loader:1133:32)at Module._load (node:internal/modules/cjs/loader:972:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)at node:internal/main/run_main_module:23:47let person = {job: {title: "Software engineer"}
};let personCopy = {};({job: {title: personCopy.job.bar}
} = person);
抛出异常
title: personCopy.job.bar^TypeError: Cannot set properties of undefined (setting 'bar')at Object.<anonymous> (/Users/wuli06/test.js:12:23)at Module._compile (node:internal/modules/cjs/loader:1275:14)at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)at Module.load (node:internal/modules/cjs/loader:1133:32)at Module._load (node:internal/modules/cjs/loader:972:12)at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)at node:internal/main/run_main_module:23:47