11个实用JavaScript开发技巧:从对象处理到类型转换

作者:桌面漫游时间:2026-10-25 11:20:47浏览:492

本文整理了11个高频使用的JavaScript开发技巧,涵盖对象属性动态添加、存在性检查、解构赋值、可选链操作、数组过滤与去重、类型判断及数字字符串互转。重点解析了空值合并运算符(??)与逻辑或(||)的区别,以及通过!!进行布尔转换的方法,旨在帮助开发者编写更精简、健壮的代码。

在日常前端开发中,开发者经常需要处理数据类型转换、验证对象属性存在性、执行条件性数据操作以及过滤数组中的无效值等任务。

本文汇总了个人实践中认为高效且实用的技巧,这些方法有助于精简代码结构,提升代码的可读性与维护性。

1. 通过条件判断向对象添加属性

const isValid = false;
const age = 18;

// 我们可以通过展开运算符向对象添加属性
const person = {
    id: 'ak001',
    name: 'ak47',
    ...(isValid && {isActive: true}),
    ...((age > 18 || isValid) && {cart: 0})
}

console.log('person', person)

2. 检查对象中是否存在某个属性

const person = {
    id: 'ak001',
    name: 'ak47'
}

console.log('name' in person); // true
console.log('isActive' in person); // false

3. 解构赋值

const product = {
  id: 'ak001',
  name: 'ak47'
}

const { name: weaponName } = product;

console.log('weaponName:', weaponName); // weaponName: ak47

// 通过动态key进行解构赋值
const extractKey = 'name';
const { [extractKey]: data } = product;

console.log('data:', data); // data: ak47

4. 循环遍历一个对象的key和value

const product = {
  id: 'ak001',
  name: 'ak47',
  isSale: false
}

Object.entries(product).forEach(([key, value]) => {
  if(['id', 'name'].includes(key)) {
    console.log('key:',key, 'value:',value)
  }
})

// key: id value: ak001
// key: name value: ak47

5. 使用可选链(Optionalchaining)避免访问对象属性报错

const product = {
  id: 'ak001',
  name: 'ak47'
}

console.log(product.sale.isSale); // throw error

console.log(product?.sale?.isSale); // undefined

注意:在实际应用场景中,若获取的属性非必需,可采用上述方式避免报错;但若属性为功能核心且不可或缺,建议提供清晰的错误提示以明确处理逻辑。

6. 检查数组中falsy的值

const fruitList = ['apple', null, 'banana', undefined];

// 过滤掉falsy的值
const filterFruitList = fruitList.filter(Boolean);
console.log('filterFruitList:', filterFruitList); 
// filterFruitList:['apple', 'banana']
// 检查数组中是否有truthy的值
const isAnyFruit = fruitList.some(Boolean);
console.log('isAnyFruit:', isAnyFruit); // isAnyFruit: true

7. 数组去重

const fruitList = ['apple', 'mango', 'banana', 'apple'];

const uniqList = [...new Set(fruitList)]
console.log('uniqList:', uniqList); // uniqList: ['apple', 'mango', 'banana']

8. 检查是否为数组类型

const fruitList = ['apple', 'mango'];

console.log(typeof fruitList); // object
console.log(Array.isArray(fruiltList)); // true

9. 数字&字符串类型转换

const personId = '007';
console.log('personId:', +personId, 'type:', typeof +personId); 
// personId: 7 type: number

const personId = 119;
console.log('personId:', personId + '', 'type:', typeof (personId + '')); 
// personId: 119 type: string

10. 巧用空值合并(??)

let data = undefined ?? 'noData;
console.log('data:', data); // data: noData

data = null ?? 'noData';
console.log('data:', data); // data: noData

data = 0 ?? null ?? 'noData';
console.log('data:', data); // data: noData

// 当我们根据变量自身判断时
data ??= 'noData';
console.log('data:', data); // data: noData

与逻辑或(||)运算符的区别?

逻辑或运算符针对的是falsy类的值(包括0、空字符串、null、undefined、false、NaN),而空值合并运算符仅针对null和undefined生效;

11. 通过!!进行布尔转换

console.log('this is not empty:', !!'')
// this is not empty: false

console.log('this is not empty:', !!'Data')
// this is not empty: true

以上即为分享11个常用JavaScript小技巧的详细内容,更多关于JavaScript技巧的资料请关注本站其它相关文章!

作者最新文章