在实际项目开发中,检测一个对象中是否包含某个键值来避免引用不存在的元素,来避免undefined的引用错误,而因为js又是单线程这一特点,一旦报错将影响后续逻辑执行,所以进行引入的键和值是否存在显得尤为重要,以下是我整理的几种判断和解构方法
检测对象中是否存在某个键
使用 in
操作符
in
操作符可以检查一个对象是否有给定的属性,如果指定的属性在指定的对象或其原型链中,则 in
运算符返回 true
const obj = { name:'iwhao', age: 18, gender: '男' };
if ('name' in obj) {
console.log('属性 name 存在于对象中');
}
使用 hasOwnProperty
方法
如果你只想检查对象自身的属性,而不是从原型链继承的属性,你可以使用 hasOwnProperty
方法。
const obj = { name:'iwhao', age: 18, gender: '男' };
if (obj.hasOwnProperty('name')) {
console.log('属性 name 是对象自身的属性');
}
使用 Object.keys
或 Object.getOwnPropertyNames
这两个方法都会返回一个由一个对象自身的(非继承的)可枚举或所有属性的字符串数组。
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男' };
// 检查可枚举属性
if (Object.keys(obj).includes('name')) {
console.log('属性 name 是对象自身的可枚举属性');
}
// 检查所有自身属性(包括不可枚举属性)
if (Object.getOwnPropertyNames(obj).includes('name')) {
console.log('属性 name 是对象自身的属性(包括不可枚举属性)');
}
使用逻辑与操作符 &&
这是一种比较简单的检查方法,但仅适用于当你确定属性不会是 undefined
或 null
时。
const obj = { name:'iwhao', age: 18, gender: '男' };
if (obj.name && obj.hasOwnProperty('name')) {
console.log('属性 name 存在于对象中,并且它不是 undefined 或 null');
}
注意:这种方法不会检查属性是否是对象自身的属性。
选择哪种方法取决于你的具体需求,是否需要检查原型链属性,或者属性是否可能是 undefined
或 null
。
解构方式
ES6中的解构赋值和对象解构的方式。
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男', money: undefined,car: null };
const { name, ...rest } = obj;
if (name !== undefined) {
console.log('属性 name 存在于对象中');
}
console.log(rest); // 输出 {age: 18, gender: '男',money: undefined,car: null };
重命名属性:可以在解构时给属性取别名,示例如下:
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男', money: undefined,car: null };
const { name: handsomeMan, gender: male } = obj;
console.log(handsomeMan); // 输出 iwhao
console.log(male); // 输出 18
默认值:可以为解构赋值设置默认值,如果属性在对象中不存在,则使用默认值,示例如下:
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男', money: undefined,car: null };
const { name, skin = 'yellow' } = obj;
console.log(name); // 输出 'iwhao'
console.log(skin); // 输出 'yellow'
嵌套解构:可以在对象中进行嵌套解构,示例如下:
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男', money: undefined,car: null };
const { a, b: { c } } = obj;
console.log(a); // 输出 1
console.log(c); // 输出 2
剩余属性:使用剩余属性可以将对象中未被解构的属性收集到一个新的对象中,示例如下:
代码语言:js复制const obj = { name:'iwhao', age: 18, gender: '男', money: undefined,car: null };
const { a, ...rest } = obj;
console.log(a); // 输出 1
console.log(rest); // 输出 { b: 2, c: 3 }