分享11个常用JavaScript小技巧

目录
  • 1.通过条件判断向对象添加属性
  • 2.检查对象中是否存在某个属性
  • 3.解构赋值
  • 4.循环遍历一个对象的key和value
  • 5.使用可选链(Optionalchaining)避免访问对象属性报错
  • 6.检查数组中falsy的值
  • 7.数组去重
  • 8.检查是否为数组类型
  • 9.数字&字符串类型转换
  • 10.巧用空值合并(??)
  • 11.通过!!进行布尔转换

在我们的日常开发过程中,我们经常会遇到数字与字符串转换,检查对象中是否存在对应值,条件性操作对象数据,过滤数组中的错误值,等等这类处理。

在这里,整理出了一些常用的小技巧,这些技巧是我比较喜欢的,可以使我们的代码更精简、更干净,且非常实用。

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技巧的资料请关注我们其它相关文章!

(0)

相关推荐

  • 20个JS简写技巧提升工作效率

    目录 当同时声明多个变量时,可简写成一行 利用解构,可为多个变量同时赋值 巧用三元运算符简化if else 使用||运算符给变量指定默认值 使用&&运算符简化if语句 使用解构交换两个变量的值 适用箭头函数简化函数 使用字符串模板简化代码 多行字符串也可使用字符串模板简化 对于多值匹配,可将所有值放在数组中,通过数组方法来简写 巧用ES6对象的简洁语法 使用一元运算符简化字符串转数字 使用repeat()方法简化重复一个字符串 使用双星号代替Math.pow() 使用双波浪线运算符(~~)

  • 9个JavaScript日常开发小技巧

    1.生成指定范围的数字 在某些情况下,我们会创建一个处在两个数之间的数组.假设我们要判断某人的生日是否在某个范围的年份内,那么下面是实现它的一个很简单的方法 let start = 1900, end = 2000; [...new Array(end + 1).keys()].slice(start); // [ 1900, 1901, ..., 2000] // 还有这种方式,但对于很的范围就不太稳定 Array.from({ length: end - start + 1 }, (_, i

  • 11个Javascript小技巧帮你提升代码质量(小结)

    本文会不断更新,不足之处欢迎评论区补充. 1. 提炼函数 好处: 避免出现超大函数. 独立出来的函数有助于代码复用. 独立出来的函数更容易被覆写. 独立出来的函数如果拥有一个良好的命名,它本身就起到了注释的作用. 语义化将多段分离的逻辑放在不同的函数中实现,可以使代码逻辑清晰,清楚的看到每一步在做什么. 代码举例: 实现获取数据,然后操作dom显示数据,最后添加事件 函数提炼前 // 逻辑都写在一起,需要将所有逻辑看完才知道这段代码是干嘛的,局部逻辑无法复用 function main() {

  • JavaScript开发的七个实用小技巧(很有用)

    目录 1. 数组求和 2. 使用 length 属性更改数组 3. 数组元素随机打乱 4. 过滤唯一值 5. 逗号运算符 6. 使用数组解构交换数据元素 7. 使用 && 代替 If 条件判断为真的条件 总结 本文译文,采用意译. 下面这些方法对于我来说很有作用,自从我发现了这些操作. 1. 数组求和 假设你有下面的数字数组:let numbers = [2,52,55,5]. 计算求和,我们会想到使用 for,是吧. 但是我们可以使用这行代码完成let sum = numbers.red

  • 让JavaScript代码更加精简的方法技巧

    目录 前言: 对象解构示例 {} 解构空对象 嵌套对象解构 前言: 使用 JavaScript 对象解构来节省代码,JavaScript 对象解构赋值在项目开发中是一个常用的技能. 先来看一个 article 对象,有两个属性 title 和 description. const article = { title: "JavaScript对象解构赋值", description: "解构是一个概念,分解其中一种数据类型并将其单独的属性分配给变量", }; 在 ES

  • 分享一些不常见却很实用的JS技巧

    前言 编程语言通常暗藏着各种技巧,熟练使用这些技巧可以提高开发效率.JavaScript 就是一门技巧性很强的语言,掌握常见的语法技巧不但可以加深对语言特性的理解,还可以简化代码,提高编码效率. 下面是列出一些 JavaScript 有用的技巧,相信总有一天会对你有所帮助. 1.数组去重 const numbers = [1, 2, 3, 4, 4, 1] console.log([...new Set(numbers)]) // [1, 2, 3, 4] 2.从数组中过滤所有虚值 const 

  • 分享11个常用JavaScript小技巧

    目录 1.通过条件判断向对象添加属性 2.检查对象中是否存在某个属性 3.解构赋值 4.循环遍历一个对象的key和value 5.使用可选链(Optionalchaining)避免访问对象属性报错 6.检查数组中falsy的值 7.数组去重 8.检查是否为数组类型 9.数字&字符串类型转换 10.巧用空值合并(??) 11.通过!!进行布尔转换 在我们的日常开发过程中,我们经常会遇到数字与字符串转换,检查对象中是否存在对应值,条件性操作对象数据,过滤数组中的错误值,等等这类处理. 在这里,整理出

  • 11个教程中不常被提及的JavaScript小技巧(推荐)

    1.过滤唯一值 Set类型是在ES6中新增的,它类似于数组,但是成员的值都是唯一的,没有重复的值.结合扩展运算符(...)我们可以创建一个新的数组,达到过滤原数组重复值的功能. const array = [1, 2, 3, 3, 5, 5, 1]; const uniqueArray = [...new Set(array)]; console.log(uniqueArray); // [1, 2, 3, 5] 在ES6之前,我们如果想要实现这个功能的话,需要的处理代码要多很多. 这个技巧的适

  • 分享12个非常实用的JavaScript小技巧

    在这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: func

  • JavaScript小技巧带你提升你的代码技能

    目录 1.过滤唯一值 2.短路求值(Short-Circuit Evaluation) 2.1场景举例 3.转换Boolean型 4.转换String型 5.转换Number类型 6.快速求幂 7.快速Float转Integer 7.1使用场景 8.类中自动绑定 9.截取数组 10.获取数组中的最后的元素 11.格式化JSON代码 今天,我将跟大家分享11个在日常教程中不常被提及的JavaScript小技巧,他们往往在我们的日常工作中经常出现,但是又很容易被忽略. 1.过滤唯一值 Set类型是在

  • 12个非常实用的JavaScript小技巧【推荐】

    这篇文章中将给大家分享12个有关于JavaScript的小技巧.这些小技巧可能在你的实际工作中或许能帮助你解决一些问题. 使用!!操作符转换布尔值 有时候我们需要对一个变量查检其是否存在或者检查值是否有一个有效值,如果存在就返回true值.为了做这样的验证,我们可以使用!!操作符来实现是非常的方便与简单.对于变量可以使用!!variable做检测,只要变量的值为:0.null." ".undefined或者NaN都将返回的是false,反之返回的是true.比如下面的示例: funct

  • c# Linq常用的小技巧

    前言 在C#语言发展的历史长河中,Linq是一个极其重要的里程碑! Linq的语法吸取了SQL语法的特性,同时配合Lambda表达式又可以使代码更加优雅! 可以这么说,用好了Linq可以大大提高程序猿的工作效率,毕竟我们的日常工作本质就是对数据的处理.经历了十多年的发展,现在微软自带的内库包含的Linq函数已经非常多了,几乎满足我们日常工作. 下面根据一个对科室数据操作的例子,就个人觉得日常高频使用的Linq小技巧贴出来,权当是做个笔记了. 初始化数据 定义模型 这里定义一个科室对象,模拟我们日

  • 分享JPA的几个小技巧

    关系型数据库其实很讨人厌,尤其是在你使用数据库驱动的开发模式时.需要首先把表给创建好了,然后再使用代码生成器反向生成一堆几乎无法可读的代码.当字段有变更的时候,又是一番折腾. 这其中的典型,就是MyBatis,所以催生了更加简洁的MyBatis Plus. 了解到一些大厂(阿里.腾讯.抖音等),JPA的使用也越来越广泛了,包括我们公司,这是把合适的工具放到了合适的地方.如果想要快速开发,JPA无疑是一个比较好的选择.你无需关注数据库表的结构,使用代码驱动即可完成工作,管它后面是MySQL还是Or

  • JavaScript小技巧 2.5 则

    在前一篇博文中我介绍了一种可以让JavaScript多少具备一点类似Lambda表达式的编程能力的办法,但是由于要兼容于JavaScript的语法检查,所以可以使用的场合也很有限. 不过有些比较细心的朋友可能发现了,我在那个(伪)Lambda模块中使用了几个小技巧,现在我就把这几个小技巧介绍一下: 1.使用new Function来进行语法检查. 尝试写框架的同学们一定对此感受颇深:有的时候通过代码产生的代码可能因为技术上的失误而产语法错误,导致运行过程中异常中断:有的时候需要接受用户的输入,但

  • JavaScript小技巧整理

    本文整理总结了JavaScript的小技巧.分享给大家供大家参考,具体如下: 1.组织默认事件 阻止默认事件,h5默认的input type='date'在某些浏览器和android设备上没有效果,这时要调用h5+的时间选择器,但是要组织input默认的click事件,代码如下: //选择时间 $("#end_time").on("click",function(event){ event.preventDefault(); plus.nativeUI.pickDa

随机推荐