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

前言

本文主要给大家分享了javascript简写常用的12个技巧，无论你是初学者还是资深人士，都值得一读！下面话不多说了，来一起看看详细的介绍：

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'

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

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...

赞 (0)

相关推荐

  • javascript教程:关于if简写语句优化的方法

    UglifyJS是一个对javascript进行压缩和美化的工具,在它的文档说明中,我看到了几种关于if语句优化的方法.尽管我还没使用它去做一些尝试性的测试,但从这里可以看到它的确对js作了美化的工作.也许有人认为if语句就那么简单,能优化到什么程度?但是看看以下的几种方式,你也许会改变看法. 一.使用常见的三元操作符 if (foo) bar(); else baz(); ==> foo?bar():baz();if (!foo) bar(); else baz(); ==> foo?baz

  • 史上最全JavaScript常用的简写技巧（推荐）

    JavaScript 是属于网络的脚本语言!被数百万计的网页用来改进设计.验证表单.检测浏览器.创建cookies,以及更多的应用.同时很容易使用,所以越来越多的开发者选择js代码来实现自己想要的效果,但开发过程中,为了更高的效率和良好的代码规范要求,我们不得不知晓js一些常用的简写技巧,如下我帮大家整理了下,一起进来看看吧~ 1. 三元运算符 当你想用一行代码来写if...else语句的时候,使用三元操作符是非常好的选择,例如: const x = 20; let answer; if (x

  • Javascript简写条件语句(推荐)

    经常在各处牛人的代码中看到许多简写的条件表达语句,看了一些介绍这方面的文章,觉得3 ways 2 say if这篇文章(http://www.thomasfrank.se/3_ways_2_say_if.html)还不错.在这篇文章中作者对传统的if...else....?:.&&/||三种条件表达的写法的特点及用处进行了总结归纳,简述如下: 1. if...else结构 // Set r to 0 or 1 var r= Math.floor(2*Math.random()) // Se

  • Java关系操作符简写介绍

     Java关系操作符简写介绍 eq--等于.neq--不等于.lt--小于.lte--小于等于.gt--大于.gte--大于等于.empty.null 以上这篇Java关系操作符简写介绍就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • 分享19个JavaScript 有用的简写写法

    原文链接,最近很火的一篇文章 This really is a must read for any JavaScript-based developer. I have written this article as a vital source of reference for learning shorthand JavaScript coding techniques that I have picked up over the years. To help you understand

  • JavaScript中最常用的10种代码简写技巧总结

    JavaScript中最常用的10种代码简写技巧总结

    前言 本文主要给大家整理了一份10个程序员常用的代码简写技术,看懂一种是入门,全懂就是大神,你能知道几个呢?下面话不多说了,来看看详细的介绍: 一.三元操作符 当想写if-else语句时,使用三元操作符来代替. const x = 20;let answer;if (x > 10) { 简写: const answer = x > 10 ? 'is greater' : 'is lesser'; 也可以嵌套if语句: const big = x > 10 ? " greater

  • javascript简写常用的12个技巧（可以大大减少你的js代码量）

    前言 本文主要给大家分享了javascript简写常用的12个技巧,无论你是初学者还是资深人士,都值得一读!下面话不多说了,来一起看看详细的介绍: 1. 空(null, undefined)验证 当我们创建了一个新的变量,我们通常会去验证该变量的值是否为空(null)或者未定义(undefined).这对于JavaScript编程来说,是一个经常要考虑到的验证. 如果直接写,像下面这样: if (variable1 !== null || variable1 !== undefined || v

  • JavaScript ES6中的简写语法总结与使用技巧

    ES6为一些已有的功能提供了非破坏性更新,这类更新中的大部分我们可以理解为语法糖,称之为语法糖,意味着,这类新语法能做的事情其实用ES5也可以做,只是会稍微复杂一些.本章我们将着重讨论这些语法糖,看完之后,可能你会对一些你很熟悉的ES6新语法有不一样的理解. JavaScript ES6对象字面量 对象字面量是指以{}形式直接表示的对象,比如下面这样: var book = { title: 'Modular ES6', author: 'Nicolas', publisher: 'O´Reil

  • javascript初学者常用技巧

    本文实例讲解了javascript初学者常用的一些技巧.分享给大家供大家参考之用.具体如下: 一.Javascript程序存放位置 HTML的<body></body>里面 HTML的<head></head>里面 *.js文件里面 二.标准格式 放在HTML的<body></body>里面,当浏览器载入到Body部分的时候就开始执行Javascript <html> <head></head> &

  • JavaScript简写技巧

    目录 1. 合并数组 2. 合并数组(在开头位置) 3. 克隆数组 4. 解构赋值 5. 模板字面量 6. For循环 7. 箭头函数 8. 在数组中查找对象 9. 将字符串转换为整数 10. 短路求值 补充几点 箭头函数 在数组中查找对象 短路求值替代方案 1. 合并数组 普通写法: 我们通常使用Array中的concat()方法合并两个数组.用concat()方法来合并两个或多个数组,不会更改现有的数组,而是返回一个新的数组.请看一个简单的例子: let apples = ['

  • JavaScript中常用的验证reg

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • JavaScript三元运算符的多种使用技巧

    发现代码慢慢写多了的时候会不自觉的将if else 用 三元来替代,仅仅是未了让代码更简洁精辟,当然也有人说用三元可以让你有高潮的感觉.最近在写js 的时候也有这样的感觉,并且收集了一些小技巧,分享分享. 大鸟请跳过下面这段,大大鸟帮忙指正 ^__^ ====普及线==== 表达式 (expr1) ? (expr2) : (expr3) 在 expr1 求值为 TRUE 时的值为 expr2,在 expr1 求值为 FALSE 时的值为 expr3. ============ 普通用法 当你发现

  • JavaScript初学者的10个迷你技巧第1/2页

    在之前的编程语言排行榜中,我们曾介绍过转正在即的JavaScript语言,正如文章中阐明的那样,JavaScript不仅是最具活力的脚本语言,还是是最有用的编程语言之一.因为绝大多数的浏览器都和它兼容,你可以在这些浏览器中使用它.JavaScript被接受的相当快,因为它是如此的简单,而且使用范围相当广泛.许多程序员过去常常认为JavaScript是一门"玩具语言",但是,AJAX进入市场后表现出了完全相反的一面,它让JavaScript展现出了完全不同的能力和功能. 由于这个发明的出

  • JavaScript 字符串常用操作小结(非常实用)

    字符串截取 1. substring() xString.substring(start,end) substring()是最常用到的字符串截取方法,它可以接收两个参数(参数不能为负值),分别是要截取的开始位置和结束位置,它将返回一个新的字符串,其内容是从start处到end-1处的所有字符.若结束参数(end)省略,则表示从start位置一直截取到最后. let str = 'www.jeffjade.com' console.log(str.substring(0,3)) // www co

  • 详解JavaScript中常用的函数类型

    网页中的java代码需要写在JavaScript中,里面部分少不了函数,介绍一下JavaScript中常用的函数类型. 1.可变函数 <script> function show(){ alert("第一个..."); } function show(str){ alert("第二个"); } function show(a,b){ alert("第三个..."); alert(a+":"+b); } </s

  • JavaScript中常用的数组操作方法

    目录 一.concat() 二.join() 三.push() 五.shift() 六.unshift() 七.slice() 八.splice() 九.substring() 和 substr() 十.sort 排序 十一.reverse() 十二.indexOf 与 lastIndexOf 十三.every 对数组 十四.some 十五.filter 十六.map 十七.forEach 数组遍历 1.find(): 2.findIndex(): 3.fill(): 4.copyWithin(

随机推荐