javascript 中的解构技巧

2024-07-03 23:25:32 浏览数 (3)

在实际项目开发中,检测一个对象中是否包含某个键值来避免引用不存在的元素,来避免undefined的引用错误,而因为js又是单线程这一特点,一旦报错将影响后续逻辑执行,所以进行引入的键和值是否存在显得尤为重要,以下是我整理的几种判断和解构方法

检测对象中是否存在某个键

使用 in 操作符

in 操作符可以检查一个对象是否有给定的属性,如果指定的属性在指定的对象或其原型链中,则 in 运算符返回 true

代码语言:js复制
const obj = { name:'iwhao', age: 18, gender: '男' };

if ('name' in obj) {
  console.log('属性 name 存在于对象中');
}

使用 hasOwnProperty 方法

如果你只想检查对象自身的属性,而不是从原型链继承的属性,你可以使用 hasOwnProperty 方法。

代码语言:js复制
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 时。

代码语言:js复制
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 }

0 人点赞