首页 > 编程语言 >16 个 JavaScript 简写神技,提效 60%!

16 个 JavaScript 简写神技,提效 60%!

时间:2025-01-07 11:48:06浏览次数:1  
标签:arr const name 16 JavaScript user 神技 简写 写法

分享下 16 个最常用的 JavaScript 的简写技巧,掌握它们可以让我们编写出更简洁、更优雅的代码,并显著提升开发效率(增加摸鱼时间)

1. 三元运算符简化条件判断

// 传统写法
let result;
if (someCondition) {
   result = 'yes';
} else {
   result = 'no';
}

// 简写方式
const result = someCondition ? 'yes' : 'no';

2. 空值合并运算符

// 传统写法
const name = user.name !== null && user.name !== undefined ? user.name : 'default';

// 简写方式
const name = user.name ?? 'default';

3. 可选链操作符

// 传统写法
const street = user && user.address && user.address.street;

// 简写方式
const street = user?.address?.street;

4. 数组去重

// 传统写法
function unique(arr) {
    return arr.filter((item, index) => arr.indexOf(item) === index);
}

// 简写方式
const unique = arr => [...new Set(arr)];

5. 快速取整

// 传统写法
const floor = Math.floor(4.9);

// 简写方式
const floor = ~~4.9;

6. 合并对象

// 传统写法
const merged = Object.assign({}, obj1, obj2);

// 简写方式
const merged = {...obj1, ...obj2};

7. 短路求值

// 传统写法
if (condition) {
    doSomething();
}

// 简写方式
condition && doSomething();

8. 默认参数值

// 传统写法
function greet(name) {
    name = name || 'Guest';
    console.log(`Hello ${name}`);
}

// 简写方式
const greet = (name = 'Guest') => console.log(`Hello ${name}`);

9. 解构赋值

10. 字符串转数字

11. 多重条件判断

12. 快速幂运算

13. 对象属性简写

14. 数组映射

15. 交换变量值

16. 动态对象属性

// 传统写法
const obj = {};
obj[dynamic + 'name'] = value;

// 简写方式
const obj = {
    [`${dynamic}name`]: value
};

标签:arr,const,name,16,JavaScript,user,神技,简写,写法
From: https://www.cnblogs.com/helenMoon/p/18657325

相关文章

  • JavaScript字符串的常用方法
    在JavaScript中,字符串处理是一个非常常见的任务。JavaScript提供了丰富的字符串操作方法,使开发者能够高效地处理和操作字符串。本文将详细介绍JavaScript字符串的常用方法,并提供示例代码以便更好地理解和应用这些方法。字符串长度获取字符串的长度是一个基本操作,可以使用 lengt......
  • JavaScript 实现支持过期时间的数据缓存功能
    JavaScript实现支持过期时间的数据缓存功能要在JavaScript中实现数据缓存功能并支持设置过期时间,可以使用localStorage、sessionStorage或内存对象(如Map或普通对象)来存储数据,并为每个缓存项设置一个过期时间。以下是一个简单的实现示例:JavaScript实现支持过期时间的数......
  • javascript如何判断浏览器是否支持严格模式?
    在JavaScript中,严格模式(StrictMode)是一种特殊的执行模式,它可以帮助开发者避免一些常见的错误,并提供更强的错误检查。要在JavaScript中启用严格模式,你需要在脚本或函数的顶部添加"usestrict";声明。然而,直接检测浏览器是否“支持”严格模式并不直接可行,因为严格模式不是浏览器的......
  • javascript设置"严格模式"有什么目的?
    设置JavaScript的“严格模式”有以下几个主要目的:消除JavaScript语法的不合理和不严谨之处:通过启用严格模式,可以帮助开发者避免一些在正常模式下可能被忽略的语法错误或不合理之处,从而使代码更加严谨和可靠。提高代码的安全性:严格模式采用了一些安全措施,例如禁止this关键字......
  • 使用javascript实现一个popup
    在前端开发中,实现一个基本的popup(弹出窗口)可以通过多种方式来完成,包括使用原生JavaScript、HTML和CSS。以下是一个简单的示例,展示了如何使用这些技术来创建一个基本的popup。HTML结构首先,在HTML文件中定义popup的结构。这通常包括一个背景遮罩(overlay)和一个包含内容的......
  • JSP程序设计2016花店在线销售管理系统(源码)
    项目包含:源码、讲解视频、说明文档,部署录像运行环境:推荐jdk1.8开发工具:Eclipse、MyEclipe以及idea(推荐)操作系统:windows108G内存以上(其他windows)浏览器:GoogleChrome(推荐)、Edge、360浏览器;数据库:MySQL5.7;数据库可视化工具:NavicatPremium推荐)以及其他Navicat版本......
  • FMC子卡设计原理图:165-2路万兆光纤SFP+ FMC子卡模块
    2路万兆光纤SFP+FMC子卡模块1.概述该板卡是基于kc705和ml605的fmc10g万兆光纤扩展板设计。SFP+(10GigabitSmallFormFactorPluggable)是一种可热插拔的,独立于通信协议的光学收发器,通常传输光的波长是850nm,1310nm或1550nm,用于10Gbps的SONE......
  • FMC子卡设计原理图:FMC228-四路1.2Gsps 16bit DA FMC子卡
    FMC228-四路1.2Gsps16bitDAFMC子卡     一、板卡概述      FMC228 板卡可实现宽波段、四通道、16位、1.2Gsps(600Msps直接射频综合)DAC功能,时钟可采用内部时钟源(可选择锁定到外部参考),或外部提供的采样时钟。此外还为用户提供定制采样控制的触发......
  • springboot高校师生健康档案管理系统-计算机毕业设计源码69161
     摘要本文介绍了一款专为高校师生设计的健康档案管理系统。该系统集校园公告、健康资讯和健康知识管理于一体,利用先进的信息化技术为师生提供便捷、全面的健康信息服务。系统具备用户友好的交互界面,支持师生自主录入健康数据,实现健康档案的电子化管理。同时,系统强大的数据统......
  • 2024实测验证可用的股票数据接口集合:python、JavaScript 、JAVA等实例代码演示教你如
    最近一两年,股票量化分析越来越受欢迎了。想要入行,首先得搞定股票数据。毕竟,所有量化分析都是建立在数据之上的,实时交易、历史交易、财务、基本面,这些数据咱们都得有。咱们的目标就是挖掘这些数据中的价值,来指导咱们的投资策略。为了找数据,我可是尝试了各种方法,自己动手写过......