【AICon】 如何构建高效的 RAG 系统?RAG 技术在实际应用中遇到的挑战及应对策略?>>> 了解详情
写点什么

20 个常用的 JavaScript 简写技巧

  • 2020-11-30
  • 本文字数:3464 字

    阅读完需:约 11 分钟

20个常用的JavaScript简写技巧

任何编程语言的简写技巧都能够帮助你编写更简练的代码,让你用更少的代码实现你的目标。让我们一个个来看看 JavaScript 的简写技巧吧。

1. 声明变量


//Longhand let x; let y = 20; 

//Shorthand let x, y = 20;
复制代码


2. 给多个变量赋值


我们可以使用数组解构来在一行中给多个变量赋值。


//Longhand let a, b, c; a = 5; b = 8; c = 12; //Shorthand let [a, b, c] = [5, 8, 12];
复制代码


3. 三元运算符


我们可以使用三元(条件)运算符在这里节省 5 行代码。


//Longhand let marks = 26; let result; if(marks >= 30){ result = 'Pass'; }else{  result = 'Fail'; } //Shorthand let result = marks >= 30 ? 'Pass' : 'Fail';
复制代码


4. 赋默认值


我们可以使用 OR(||)短路运算来给一个变量赋默认值,如果预期值不正确的情况下。


//Longhand let imagePath; let path = getImagePath(); if(path !== null && path !== undefined && path !== '') {   imagePath = path; } else {   imagePath = 'default.jpg'; } 

//Shorthand let imagePath = getImagePath() || 'default.jpg';
复制代码


5. 与(&&) 短路运算


如果你只有当某个变量为 true 时调用一个函数,那么你可以使用与(&&) 短路形式书写。


//Longhand if (isLoggedin) { goToHomepage(); } 

//Shorthand isLoggedin && goToHomepage();
复制代码


当你在 React 中想要有条件地渲染某个组件时,这个与(&&) 短路写法比较有用。例如:


<div> { this.state.isLoading && <Loading /> } </div>
复制代码


6. 交换两个变量


为了交换两个变量,我们通常使用第三个变量。我们可以使用数组解构赋值来交换两个变量。


let x = 'Hello', y = 55; //Longhand const temp = x; x = y; y = temp; 

//Shorthand [x, y] = [y, x];
复制代码


7. 箭头函数


//Longhand function add(num1, num2) {    return num1 + num2; } 

//Shorthand const add = (num1, num2) => num1 + num2;
复制代码


参考: JavaScript Arrow function


8. 模板字符串


我们一般使用+运算符来连接字符串变量。使用 ES6 的模板字符串,我们可以用一种更简单的方法实现这一点。


//Longhand console.log('You got a missed call from ' + number + ' at ' + time); 

//Shorthand console.log(`You got a missed call from ${number} at ${time}`);
复制代码


9. 多行字符串


对于多行字符串,我们一般使用+运算符以及一个新行转义字符(\n)。我们可以使用(`)以一种更简单的方式实现。


//Longhand console.log('JavaScript, often abbreviated as JS, is a\n' +             'programming language that conforms to the \n' + 'ECMAScript specification. JavaScript is high-level,\n' + 'often just-in-time compiled, and multi-paradigm.' ); //Shorthand console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);
复制代码


10. 多条件检查


对于多个值匹配,我们可以将所有的值放到数组中,然后使用indexOf() 或includes() 方法。


//Longhand if (value === 1 || value === 'one' || value === 2 || value === 'two') {      // Execute some code } 

// Shorthand 1if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { // Execute some code }// Shorthand 2if ([1, 'one', 2, 'two'].includes(value)) { // Execute some code }
复制代码


11. 对象属性复制


如果变量名和对象的属性名相同,那么我们只需要在对象语句中声明变量名,而不是同时声明键和值。JavaScript 会自动将键作为变量的名,将值作为变量的值。


let firstname = 'Amitav'; let lastname = 'Mishra'; //Longhand let obj = {firstname: firstname, lastname: lastname}; 

//Shorthand let obj = {firstname, lastname};
复制代码


12. 字符串转成数字


有一些内置的方法,例如parseInt 和parseFloat 可以用来将字符串转为数字。我们还可以简单地在字符串前提供一个一元运算符(+)来实现这一点。


//Longhand let total = parseInt('453'); let average = parseFloat('42.6'); 

//Shorthand let total = +'453'; let average = +'42.6';
复制代码


13. 重复一个字符串多次


为了重复一个字符串 N 次,你可以使用for 循环。但是使用repeat() 方法,我们可以一行代码就搞定。


//Longhand let str = ''; for(let i = 0; i < 5; i ++) {   str += 'Hello '; } console.log(str); // Hello Hello Hello Hello Hello 

// Shorthand 'Hello '.repeat(5);
复制代码


提示:想要给某人发 100 遍“sorry”来道歉吗?用 repeat()方法试试吧。如果你想要每次在新的一行重复字符串,可以在字符串后面加一个 \n 。


'sorry\n'.repeat(100);
复制代码


14. 指数幂


我们可以使用Math.pow() 方法来得到一个数字的幂。有一种更短的语法来实现,即双星号(**)。


//Longhand const power = Math.pow(4, 3); // 64 

// Shorthand const power = 4**3; // 64
复制代码


15. 双非位运算符 (~~)


双非位运算符是Math.floor() 方法的缩写。


//Longhand const floor = Math.floor(6.8); // 6 

// Shorthand const floor = ~~6.8; // 6
复制代码


来自Caleb的评论的改进: 双非位运算符只对 32 位整数有效,例如 (2**31)-1 = 2147483647。所以对于任何大于 2147483647 的数字,双非位运算符(~~)都会给出错误的结果,这种情况下推荐使用 Math.floor()方法。


16. 找出数组中的最大和最小数字


我们可以使用 for 循环来遍历数组中的每一个值,然后找出最大或最小值。我们还可以使用Array.reduce()方法来找出数组中的最大和最小数字。


但是使用扩展符号,我们一行就可以实现。


// Shorthand const arr = [2, 8, 15, 4]; Math.max(...arr); // 15 Math.min(...arr); // 2
复制代码


17. For 循环


为了遍历一个数组,我们一般使用传统的for 循环。我们可以使用for...of 来遍历数组。为了获取每个值的索引,我们可以使用for...in 循环。


let arr = [10, 20, 30, 40]; //Longhand for (let i = 0; i < arr.length; i++) {   console.log(arr[i]); } //Shorthand //for of loop for (const val of arr) {   console.log(val); } //for in loop for (const index in arr) {   console.log(arr[index]); }
复制代码


我们还可以使用for...in 循环来遍历对象属性。


let obj = {x: 20, y: 50}; for (const key in obj) {   console.log(obj[key]); }
复制代码


参考:JavaScript中遍历对象和数组的不同方法


18. 合并数组


let arr1 = [20, 30]; //Longhand let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80] 

//Shorthand let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]
复制代码


19. 深拷贝多级对象


为了深拷贝一个多级对象,我们要遍历每一个属性并检查当前属性是否包含一个对象。如果当前属性包含一个对象,然后要将当前属性值作为参数递归调用相同的方法(例如,嵌套的对象)。


我们可以使用JSON.stringify() 和JSON.parse() ,如果我们的对象不包含函数、undefined、NaN 或日期值的话。


如果有一个单级对象,例如没有嵌套的对象,那么我们也可以使用扩展符来实现深拷贝。


let obj = {x: 20, y: {z: 30}}; 

//Longhand const makeDeepClone = (obj) => { let newObject = {}; Object.keys(obj).map(key => { if(typeof obj[key] === 'object'){ newObject[key] = makeDeepClone(obj[key]); } else { newObject[key] = obj[key]; } }); return newObject; } const cloneObj = makeDeepClone(obj);

//Shorthand const cloneObj = JSON.parse(JSON.stringify(obj));//Shorthand for single level objectlet obj = {x: 20, y: 'hello'};const cloneObj = {...obj}
复制代码


来自评论的改进:如果你的对象包含 function, undefined or NaN 值的话,JSON.parse(JSON.stringify(obj))就不会有效。因为当你 JSON.stringify 对象的时候,包含 function, undefined or NaN 值的属性会从对象中移除。


因此,当你的对象只包含字符串和数字值时,可以使用 JSON.parse(JSON.stringify(obj)) 。


参考: JSON.parse() 和 JSON.stringify()


20. 获取字符串中的字符


let str = 'jscurious.com'; //Longhand str.charAt(2); // c 

//Shorthand str[2]; // c
复制代码


作者介绍


Amitav Mishra 是一名前端 Web 开发者,喜欢撰写 JavaScript、Angular、React、HTML、CSS 等相关的博客。可以在jscurious.com查看这些博客。


 原文链接


20 JavaScript Shorthand Techniques that will save your time


2020-11-30 14:351684

评论 1 条评论

发布
用户头像
挺好
2020-12-01 10:02
回复
没有更多了
发现更多内容

浅谈 Slack Channel 支持的一些提高工作效率的特性

Jerry Wang

远程办公 即时通讯 SAP Slack 7月月更

技术分享| HTTP 代理

anyRTC开发者

https 音视频 网络协议 HTTP

LeetCode-111. 二叉树的最小深度(java)

bug菌

Leet Code 7月月更

java零基础入门-综合案例(File类+递归)

喵手

7月月更

spark调优(六):大家好才是真的好——广播变量

怀瑾握瑜的嘉与嘉

spark 7月月更

激情的开头,大意的结局,Python反爬加更,好友求助米哈游的API,给他安排上

梦想橡皮擦

Python 爬虫 7月月更

泛云桌面关键技术分析

A池伟

云桌面 算力网络

python 中Mixin混入类的用法

杨彦星

Python

DBPack 读写分离功能发布公告

峨嵋闲散人

分布式事务 分库分表 读写分离 dbmesh Database Mesh

有证书有目录!|海泰密码服务平台

电子信息发烧客

软件研发效能需求价值流分析专题

思码逸研发效能

研发效能 软件研发

QT | VS2017 + Qt5.14.2环境搭建

YOLO.

环境搭建 vs Qt Creator 7月月更

对接企业微信,客户关系管理也可以很简单!

CRMEB

【C语言】进阶指针night

謓泽

7月月更

蛋糕可以一刀切,研发需求可以吗? | 敏捷实践

LigaAI

程序员 敏捷 产品经理 需求分析 敏捷管理

Linux下QT配合OpenCV完成图像处理(实现基本的人脸检测)

DS小龙哥

7月月更

【答疑解惑】 裁员浪潮中,N+1 到底指什么?

面试官问

互联网裁员 N+1

微信内H5页面唤起小程序&App

南城FE

前端 微信开发 7月月更

Android/Unity大乱斗-完整双方集成交互指南

芝麻粒儿

android Unity 7月月更

Room:又要写业务代码了?看看我吧,给你飞一般的感觉!

编程的平行世界

数据库 Android; android jetpack

Spring Boot Event 观察者模式,轻松带你实现业务解耦

了不起的程序猿

Java java程序员 spring event

许式伟:Go+ 演进之路

七牛云

golang 编程语言 go+

如何控制css鼠标样式以及扩大鼠标点击区域

南极一块修炼千年的大冰块

7月月更

服务网格中 sidecar 流量治理与多协议嗅探

博文视点Broadview

从0开始的 TypeScriptの十四:内置工具类型

空城机

typescript 7月月更

深入Ceph原理包含核心算法Crush说明和通信机制原理(五)

Lansonli

云原生 Ceph 7月月更

谈谈JavaScript的作用域及作用域链

南极一块修炼千年的大冰块

7月月更

【LeetCode】最长的斐波那契子序列的长度Java题解

Albert

LeetCode 7月月更

RocketMQ系列一:入门级使用演示

hum建应用专家

云计算 RocketMQ

mysql进阶(三)游标简易知识点汇总

No Silver Bullet

MySQL 数据库 游标 7月月更

语音聊天源码——语音聊天源码开发设计搭建

开源直播系统源码

软件开发 直播系统源码 开源源码 语音聊天源码 语音社交软件

20个常用的JavaScript简写技巧_大前端_Amitav Mishra_InfoQ精选文章