今天这篇文章给大家总结一下我们日常开发中一些常用的Object的操作方法,希望可以对各位有所帮助。
01、JavaScript对象有两种类型
Native:在ECMAScript标准中定义和描述,包括JavaScript内置对象(数组,日期对象等)和用户自定义对象;
Host:在主机环境(如浏览器)中实现并提供给开发者使用,比如Windows对象和所有的DOM对象;
02、创建对象并添加成员
最简单的方法(即Object Literal,对象字面变量),之后便可以向它添加属性。
字面量:字面量表示如何表达这个值,一般除去表达式,给变量赋值时,等号右边都可以认为是字面量。
// 1. 创建空对象后,在添加属性
const obj = { }
obj.uname = 'dengke'
obj.fn = () => {
console.log('ggg')
}
console.log(obj) // { uname: 'dengke', fn: ƒ }
// 2. 创建对象并且直接添加属性 (常用)
const obj1 = {
uname:'dengke',
fn: () => {
console.log('ggg')
}
}
console.log(obj1) // { uname: "dengke", fn: ƒ }
补充
扩展运算符(spread)是三个点(...)也可以创建对象(返回一个新对象),注意这是一个浅拷贝
const obj = { name: 'dengke' }
const obj1 = {
age: 18,
temp: {
a: 10
}
}
const obj2 = { ...obj, ...obj1 }
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 10 } }
obj2.temp.a = 20
console.log(obj2) // { name: 'dengke', age: 18, temp: { a: 20 } }
console.log(obj1) // { name: 'dengke', age: 18, temp: { a: 20 } }
03、访问对象属性
const obj = {
info: 'wakaka',
inner: {
a: 10,
b: 20
},
arr: [1, 2],
sayHi: (name) => {
console.log(`hi,${name}`)
}
}
// 用 dot(点 .) 的方式访问
console.log(obj.info) // wakaka
console.log(obj.inner) // {"a":10,"b":20}
console.log(obj.arr) // [1,2]
obj.sayHi('dengke') // hi,dengke
// 用 [] 的方式访问
console.log(obj['info']) // wakaka
console.log(obj['inner']) // {"a":10,"b":20}
console.log(obj['arr']) // [1,2]
obj['sayHi']('dengke') // hi,dengke
补充
如果要访问的对象不存在,可以使用 逻辑运算符 || 指定默认值 只要“||”前面为false,不管“||”后面是true还是false,都返回“||”后面的值。
只要“||”前面为true,不管“||”后面是true还是false,都返回“||”前面的值。
console.log(obj.age || 18) // 18
很多时候,我们想根据这个值是否为空来做接下来的操作,可以使用空值运算符 (??) (es11)
有一个冷门运算符??可以判断undefined和null,这样是比较符合普遍需求的。
const age = 0
const a = age ?? 123
console.log(a) // 0
可选链式操作符(?.) (es11)
这是当对象上没有这个键的时候,不会报错,而是赋值undefined
const foo = { name: "zengbo" }
let a = foo.name?.toUpperCase() // "ZENGBO"
let b = foo.name?.firstName?.toUpperCase() // "undefined"
04、删除对象属性
利用关键字 delete
const o = {
p: 10,
m: 20
}
delete o.p
console.log(o) // { m: 20 }
// 删除对象的属性后,在访问返回 undefined
console.log(o.p) // undefined
05、作为函数参数
const displayPerson = (person) => {
console.log(`name: ${person.name || '无名氏'}`)
console.log(`age: ${person['age'] || 0}`)
}
displayPerson({ name: 'dengke', age: 18 })
// name: dengke
// age: 18
displayPerson({ })
// name: 无名氏
// age: 0
06、枚举对象的属性
在js里面枚举对象属性一共有三种方法:
for in: 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)
Object.keys(): 会返回一个包括所有的可枚举的自有属性的名称组成的数组
Object.getOwnPropertyNames(): 会返回自有属性的名称 (不管是不是可枚举的)
1)、 for...in 会遍历对象中所有的可枚举属性(包括自有属性和继承属性)
const obj = {
itemA: 'itemA',
itemB: 'itemB'
}
// 使用Object.create创建一个原型为obj的对象 (模拟继承来的属性)
var newObj = Object.create(obj)
n