12个常用的javascript简写技巧---可以大大减少js代码量

news/2024/9/9 12:53:24

微信公众号 个人博客 知乎

本文是并非本人所写,只是我看了觉得对自己很有帮助,所以分享给大家,原文链接在最下面,谢谢观看。
1. 空(null, undefined)验证
当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined)。这对于JavaScript编程来说,是一个经常要考虑到的验证。
如果直接写,像下面这样:

if (variable1 !== null || variable1 !== undefined || variable1 !== ''){let variable2 = variable1;
}

我们可以使用一个更加简洁的版本

let variable2 = variable1 || '';

如果你不信,可以在谷歌浏览器开发者模式下的控制台中试试!

//值为null的例子
let variable1 = null;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//值为undefined的例子
let variable1 = undefined;
let variable2 = variable1 || '';
console.log(variable2);
//输出: ''
//正常情况
let variable1 = 'hi there';
let variable2 = variable1 || '';
console.log(variable2);
//输出: 'hi there'

在这里要注意的是,你在调试完一组代码后要刷新下页面,或者定义不同的变量,不然会报错:


修改:有读者评论应该加上0和false,我也去运行了,的确应该加上,但这边原作者写的标题是null和undefined的鉴定,或许是因为这样才没加上去。那我在这边就自己修改一下

if (variable1 !== null || variable1 !== undefined || variable1 !== '' || variable1 !== 0 || variable1 !== false){let variable2 = variable1;
}

简化后

let variable2 = variable1 || '';

2. 数组
这个好像比较简单!
非优化代码:

let a = new Array(); a[0] = "myString1"; a[1] = "myString2"; a[2] = "myString3";

优化代码:

let a = ["myString1", "myString2", "myString3"];

3. if true .. else 的优化

let big;
if (x > 10) {
big = true;
}
else {
big = false;
}

简化后:

let big = x > 10 ? true : false;

这是三目运算,当判断条件和结果都只有一个的时候可以使用。
极大的简化了代码量!

let big = (x > 10);
let x = 3,
big = (x > 10) ? "greater 10" : (x < 5) ? "less 5" : "between 5 and 10";
console.log(big); //"less 5"
let x = 20,
big = {true: x>10, false : x< =10};
console.log(big); //"Object {true=true, false=false}"

4. 变量声明
尽管JavaScript会自动讲变量上提(hoist),使用该方法可以讲所有的变量都在函数的头部用一行搞定。
优化钱:

let x;
let y;
let z = 3;

优化后:

let x, y, z=3;

5. 赋值语句的简化
简化前:

x=x+1;
minusCount = minusCount - 1;
y=y*10;

简化后:

x++;
minusCount --;
y*=10;

假设x=10,y=5,那么基本的算术操作可以使用如下的简写方式:

x += y // x=15
x -= y // x=5
x *= y // x=50
x /= y // x=2
x %= y // x=0

6. 避免使用RegExp对象
简化前:

var re = new RegExp("\d+(.)+\d+","igm"),
result = re.exrc("padding 01234 text text 56789 padding");
console.log(result);//"01234 text text 56789"

简化后:

var result = /d+(.)+d+/igm.exec("padding 01234 text text 56789 padding");
console.log(result); //"01234 text text 56789"

7. If 条件优化
简化前:

if (likeJavaScript === true)

简化后:

if (likeJavaScript)

我们再来个判断非真的例子:

let c;
if ( c!= true ) {
// do something...
}

简化后:

let c;
if ( !c ) {
// do something...
}

9. 函数参数优化
我个人倾向于使用获取对象元素的方式来访问函数参数,当然这个见仁见智啦!
通常使用的版本:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {
// do something...
}
myFunction( "String", 1, [], {}, true );

我喜欢的版本:

function myFunction() {
/* 注释部分
console.log( arguments.length ); // 返回 5
for ( i = 0; i < arguments.length; i++ ) {
console.log( typeof arguments[i] ); // 返回 string, number, object, object, boolean
}
*/
}
myFunction( "String", 1, [], {}, true );

译者注:原文下方有评论表示不建议用楼主的方法,使用第一种方法函数参数的顺序是可以变动的,第二种你就要小心了。
10. charAt()的替代品
简化前:

"myString".charAt(0);

简化后:

"myString"[0];//返回'm'

译者注:我相信用第一种方法的人已经不多了吧!
11. 函数调用还可以更短
简化前:

function x() {console.log('x')};function y() {console.log('y')};
let z = 3;
if (z == 3)
{
x();
} else
{
y();
}

简化后:

function x() {console.log('x')};function y() {console.log('y')};let z = 3;
(z==3?x:y)();

12. 如何优雅的表示大数字
在JavaScript中,有一个简写数字的方法,也许你忽略了。1e7表示10000000。
简化前:

for (let i = 0; i < 10000; i++) {

简化后:

for (let i = 0; i < 1e7; i++) {

译者:Fundebug
译文:http://www.cnblogs.com/fundeb...
原文:https://hackernoon.com/12-ama...


http://lihuaxi.xjx100.cn/news/241105.html

相关文章

android百度地图轨迹实现,android 获取GPS经纬度在百度地图上绘制轨迹

实现将一组GPS模块获取的经纬度数据在百度地图上绘制轨迹1.将经纬度转换成百度地图坐标/*** 标准的GPS经纬度坐标直接在地图上绘制会有偏移&#xff0c;这是测绘局和地图商设置的加密&#xff0c;要转换成百度地图坐标** return 百度地图坐标*/public GeoPoint gpsToBaidu(Stri…

代码解说Android Scroller、VelocityTracker

在编写自己定义滑动控件时经常会用到Android触摸机制和Scroller及VelocityTracker。Android Touch系统简单介绍&#xff08;二&#xff09;:实例具体解释onInterceptTouchEvent与onTouchEvent的调用过程对Android触摸机制须要用到的函数进行了具体的解释。本文主要介绍两个重要…

二叉树:root==NULL和*root==NULL的区别

root NULL 通常为查找的递归边界&#xff0c;说明当前结点不存在。 *root NULL 表明当且结点存在&#xff0c;但是内容不存在。是创建一棵二叉树时的初始化操作。 前者常用得多。

线性,逻辑回归

之前我们已经大概学习了用线性回归&#xff08;Linear Regression&#xff09;来解决一些预测问题&#xff0c;详见&#xff1a; 1.《机器学习笔记01&#xff1a;线性回归(Linear Regression)和梯度下降(Gradient Decent)》 2.《机器学习笔记02&#xff1a;多元线性回归、梯度下…

chrome android插件开发教程,谷歌(Chrome)浏览器插件开发教程

谷歌浏览器插件是一种小型的用于定制浏览器体验的程序。通过插件&#xff0c;可以自定义浏览器的一些行为来适应个人的需要&#xff0c;只要你会HTML&#xff0c;JavaScript&#xff0c;CSS就可以动手开发浏览器插件了。开发谷歌浏览器插件&#xff0c;就相当于在谷歌浏览器的基…

1020 Tree Traversals

1. 有这样一个经典结论&#xff1a;中序序列可以和先序序列、后序序列、层序序列中的任意一个来构建唯一的二叉树&#xff0c;而后三者两两搭配或者三个一起上都不行。因为从本质上来说&#xff0c;后三者都只提供根结点&#xff0c;只有通过中序才能区分左右子树。 2. 本题用…

写给云栖社区在做网站的朋友一点干货

我本人也是从事网站建设及APP开发业务的&#xff0c;工作多年下来&#xff0c;从以前的几百元企业网站&#xff0c;到商城网站&#xff0c;以及一些应用类型的APP开发&#xff0c;亲眼目睹了很多企业&#xff0c;以及很多项目&#xff0c;在应用的过程中&#xff0c;过了1-2年&…

第十四 Dom相关

1.DOM说明 文档对象模型&#xff08;Document Object Model&#xff0c;DOM&#xff09;是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法&#xff0c;可以改变文档的内容和呈现方式。我们最为关心的是&#xff0c;DOM把网页和脚本以及其他的编程语言联…