当前位置：首页 > news >正文

前端常见问题

news 2025/6/9 17:07:45

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

如河判空
- 基础判空技巧
- 高级判空技巧
- 实际应用中的判空策略

如河判空

基础判空技巧

逻辑运算符：使用逻辑运算符&&来判断变量是否存在。

function handleFormSubmit(inputValue) {if (inputValue.trim() !== '') {console.log('Hello, ' + inputValue);} else {console.log('Please enter your name.');}
}

类型检查：使用 typeof 或 instanceof 来检查变量的类型。

function handleApiResponse(data) {if (Array.isArray(data) && data.length > 0) {console.log('Data received:', data);} else {console.log('No data received.');}
}

高级判空技巧

Optional Chaining（可选链）：ES2020引入的可选链操作符?.
允许我们安全地访问深层嵌套的对象属性，即使中间的某个属性是null或undefined也不会抛出错误。例如，访问用户信息：

const user = {name: 'Jane Doe',profile: {email: 'jane@example.com'}
};const name = user?.name; // 'Jane Doe'
const email = user?.profile?.email; // 'jane@example.com'

Nullish Coalescing Operator（空值合并运算符）：?? 运算符用于在左侧表达式为 null 或 undefined 时返回右侧表达式的值。例如，提供默认值：

const user = {name: null,profile: {email: 'jane@example.com'}
};const name = user.name ?? 'Anonymous'; // 'Anonymous'
const email = user?.profile?.email ?? 'no-email@example.com'; // 'jane@example.com'

Lodash库：Lodash是一个流行的JavaScript实用工具库，它提供了许多有用的函数来处理空值，如_.get方法可以安全地访问对象的属性。例如，使用Lodash获取用户信息：

import _ from 'lodash';const user = {name: 'John Doe',profile: {email: null}
};const name = _.get(user, 'name', 'Anonymous'); // 'John Doe'
const email = _.get(user, 'profile.email', 'no-email@example.com'); // 'no-email@example.com'