【JS编码技巧】技巧掌握的好,业务代码才能写的溜(一)

简介: 语言的一些高级特性的使用可以帮助我们更好去实现一些复杂的功能,以尽量简短的语句来使代码看上去更简洁、逻辑更完善,而且这样减少了出现 bug 的风险。接下来让我总结一些 JavaScript 中的一些简写小技巧。

GH`KDT}~P6K7N8VYOYDG$ZH.png

语言的一些高级特性的使用可以帮助我们更好去实现一些复杂的功能,以尽量简短的语句来使代码看上去更简洁、逻辑更完善,而且这样减少了出现 bug 的风险。接下来让我总结一些 JavaScript 中的一些简写小技巧。


1. 声明多个变量

// 常规写法
let x; 
let y = 20; 
// 简写
let x, y = 20;


2. 为多个变量赋值

我们可以使用数组解构赋值,仅用一行代码实现为多个变量赋值。

// 常规写法 
let a, b, c; 
a = 5; 
b = 8; 
c = 12;
// 简写
let [a, b, c] = [5, 8, 12];


3. 恰当使用三元运算符

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

// 常规写法
let marks = 26; 
let result; 
if(marks >= 30){
 result = 'Pass'; 
}else{ 
 result = 'Fail'; 
} 
// 简写
let result = marks >= 30 ? 'Pass' : 'Fail';


4. 指定默认值

我们可以使用「OR ( || ) 短路求值」的逻辑,来给定一个默认值。当 || 我们的期望值是一个「false」值的时候,整个表达式的值便会取到我们给定的默认值。

// 常规写法
let imagePath; 
let path = getImagePath(); 
if(path !== null && path !== undefined && path !== '') { 
  imagePath = path; 
} else { 
  imagePath = 'default.jpg'; 
} 
// 简写
let imagePath = getImagePath() || 'default.jpg';

5. AND(&&)短路求值

如果你只在一个变量为真的情况下才调用某个函数,那么你可以用「AND(&&)短路求值」的逻辑来代替。

// 常规写法
if (isLoggedin) {
 goToHomepage(); 
} 
// 简写
isLoggedin && goToHomepage();

当你想有条件地渲染某个组件时,可以尝试使用 AND(&&) 这种简写方式。例如下面这个例子

<div> { this.state.isLoading && <Loading /> } </div>


6. 交换两个变量的值

当我们想交换两个变量的值时,经常会采取引入第三个变量的方法。其实我们可以通过数组解构赋值轻松地交换两个变量。

let x = 'Hello', y = 55; 
// 常规写法,引入第三个变量
const temp = x; 
x = y; 
y = temp; 
// 简写,使用数组解构赋值
[x, y] = [y, x];


7. 善用箭头函数

// 常规写法
function add(num1, num2) { 
   return num1 + num2; 
} 
// 简写
const add = (num1, num2) => num1 + num2;


8. 模板字符串

我们通常使用 + 运算符来连接字符串和其他类型的变量。有了 ES6 模板字符串,我们可以用更简单的方式来组合字符串。

// 常规写法 
console.log('You got a missed call from ' + number + ' at ' + time); 
// 简写
console.log(`You got a missed call from ${number} at ${time}`);


9. 多行字符串

对于多行字符串,我们通常使用+操作符和一个新的换行符

(\n) 拼接实现。其实我们可以通过使用反引号 (') 来更简单地实现。

// 常规写法
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.' ); 
// 简写
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() 方法来简写。

// 常规写法
if (value === 1 || value === 'one' || value === 2 || value === 'two') { 
     // 执行一些代码
} 
// 简写1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) { 
    // 执行一些代码 
}
// 简写2
if ([1, 'one', 2, 'two'].includes(value)) { 
    // 执行一些代码 
}



目录
相关文章
|
15天前
|
JavaScript 前端开发 Python
用python执行js代码:PyExecJS库
文章讲述了如何使用PyExecJS库在Python环境中执行JavaScript代码,并提供了安装指南和示例代码。
65 1
用python执行js代码:PyExecJS库
|
11天前
|
编解码 前端开发 JavaScript
javascript检测网页缩放演示代码
javascript检测网页缩放演示代码
|
13天前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
14天前
|
存储 JavaScript 前端开发
webSocket+Node+Js实现在线聊天(包含所有代码)
文章介绍了如何使用WebSocket、Node.js和JavaScript实现在线聊天功能,包括完整的前端和后端代码示例。
65 0
|
11天前
|
存储 JavaScript 前端开发
改进JavaScript代码,给水果有序赋色
改进JavaScript代码,给水果有序赋色
|
13天前
|
存储 JSON JavaScript
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇
JavaScript帮我编写快递自动分拣的代码,区分省份市区县城乡镇在JavaScript中编写一个用于快递自动分拣的代码,区分省份、市区、县、城乡镇,通常意味着你需要一个数据结构来存储这些地理区域的信息,并编写逻辑来根据快递地址中的信息将其分配到正确的分类中。 这里,我将提供一个简化的示例,说明如何使用JavaScript对象和函数来实现这一功能。请注意,这个示例是高度简化的,并且假设你已经有了某种方式(如正则表达式或API调用)来从快递地址中提取省份、市区、县等信息。 ----------------------------------- ©著作权归作者所有:来自51CTO博客作者goS
|
14天前
|
JavaScript 前端开发 Python
python执行js代码
本文档详细介绍如何安装Node.js环境及PyExecJS库,并提供示例代码展示其功能。首先,通过指定链接安装Node.js,安装完毕后可在命令行中输入`node --version`来验证安装是否成功。接着,使用`pip install PyExecJS`安装PyExecJS库,该库允许Python程序执行JavaScript代码。文档还提供了多个示例代码,展示了如何在Python环境中执行和编译JavaScript代码,并可以选择特定的JavaScript运行时环境,如Node.js或JScript。最后,通过具体案例展示了PyExecJS的功能与使用方法。
16 3
|
23天前
|
JavaScript
网站内容禁止复制的js代码
网站内容禁止复制的js代码
|
2天前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
|
29天前
|
缓存 JavaScript 前端开发
js和html代码一定要分离吗
JavaScript(JS)和HTML代码的分离虽非绝对必要,但通常被推荐