`

JavaScript 一些简写代码的例子

 
阅读更多

在使用UglifyJS对javascript进行压缩和美化时,我在其中发现了一些关于if else的语法简写,顺便说说平时有哪些JavaScript代码可以进行简写,同时不会影响可读性和性能。
javascript简写(JavaScript shorthand)是每一个javascript开发者必须掌握的技术,最少的代码获得最大的性能!

 

1. 判断是否为空(Null, Undefined,”)
当创建新的变量,有时你需要检查引用变量的值是否为null或undefined。
实例:

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

简写:

var variable2 = variable1 || '';

 

2. 对象
实例:

var a = new Array();
var b = new Object();
var c = new String("myString");

简写:

var a = [];
var b = {};
var c = "myString";

 

3. 对象数组
对象数组就是数组里的每个元素都是类的对象,赋值时先定义对象,然后将对象直接赋给数组就行了。
实例:

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

简写:

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

 

4. 关联数组
关联数组类似于对象,是由无序的键 和值 组成的。关联数组使用键而不是数字索引来组织存储的值。每个键都是一个唯一的字符串,与一个值相关联并用于访问该值。值可以是数字、数组、对象等数据类型。在创建代码以查找与一个键相关联的值时,您就是在创建索引或执行查找。这可能是关联数组最常见的用途。
实例:

var skillSet = new Array();
skillSet['Document language'] = 'HTML5';
skillSet['Styling language'] = 'CSS3';
skillSet['Javascript library'] = 'jQuery';
skillSet['Other'] = 'Usability and accessibility';

简写:

var skillSet = {
	'Document language' : 'HTML5',
	'Styling language' : 'CSS3',
	'Javascript library' : 'jQuery',
	'Other' : 'Usability and accessibility'
};

不要忘记最后一组结尾是没有逗号的,不然IE浏览器会报错.

 

5. 赋值运算符
赋值运算符用于赋值到JavaScript变量,毫无疑问,你每天不假思索地使用算术(不管你用什么编程语言的Java,PHP,C++它本质上是相同的)。
实例:

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

简写:

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

 

其它运算符,定义 x=10 y=5:

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

 

6. Regexp 对象
RegExp 对象用于规定在文本中检索的内容
/test/("is test in here")
老外建议用正则来检索内容,似乎是从javascript性能上来考虑的,我不得而知了。
实例:

searchText = "padding 1234 rocket str austin TX 78704 more padding"
/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m(searchText)
//returns: ["1234 rocket str austin TX 78704"]

简写:

var re = new RegExp(/\d+.+\n{0,2}.+\s+[A-Z]{2}\s+\d{5}/m);
re.exec(searchText);
//returns: ["1234 rocket str austin TX 78704"]

 

7. If语句
这可能是微不足道的,但值得一提。在做”If判断”的时候赋值运算符有时可以省略。
实例:

if (likeJavaScript == true)

简写:

if (likeJavaScript)

 

下面是另一个例子。如果a不等于true,然后…
实例:

var a;
if ( a != true ) {}

简写:

var a;
if ( !a ) {}

 

实例:

var big;
if (x > 10) {
	big = 1;
}else {
	big = 2;
}

简写:

var big = (x > 10) ? 1 : 2;

 

实例:

var a, b;
if ( !a ) {
	a = b;
}

简写:

var a, b;
a = a || b;

 

更多补充:
如果你想写

if (!false)
{
	alert('false');
}

 

不妨考虑写成:

false || alert('false');
false || alert('false'); true || alert('true'); //output false;
用"||"的情况下,第一个条件true,不检测第二个直接返回true.第一个条件false,会执行第二个条件检测
false && alert('false'); true && alert('true'); //output true
用"&&"的情况下,第一个条件true,还会检测第二个条件。第一个条件false,直接返回false退出。

 

8. JavaScript For 循环

实例:

for (var i = 0; i < allImgs.length; i++)

简写:

for(var i in allImgs)

 

9. 函数变量参数
常见的写法:

function myFunction( myString, myNumber, myObject, myArray, myBoolean ) {}
myFunction( "String", 1, [], {}, true )

看看高手们的写法:

function myFunction() {
	alert( arguments.length ); // Returns 5
	for ( i = 0; i < arguments.length; i++ ) {
		alert( typeof arguments[i] ); // Returns string, number, object, object, boolean
	}
}
myFunction( "String", 1, [], {}, true );

虽然看上去代码变的更臃肿了,但是动态变量参数更方便维护。

 

10、对象字面量
示例:

function myFunction() {
	this.myMethod = function() {}
}
var myObject = new myFunction();

简写:

var myObject = {
	myMethod: function() {}
};

 

 

 

 

分享到:
评论

相关推荐

    精通javascript+jQuery书中实例

    2. **函数**:JavaScript 中的函数是可重用的代码块,可以接受参数并返回值。了解如何定义、调用和传递函数至关重要。 3. **对象与数组**:JavaScript 支持对象(键值对的集合)和数组(有序元素列表)。理解它们的...

    分享一个右下角弹窗的完整例子(完整代码)

    在这个例子中,虽然弹窗的核心是JavaScript,但JSP可以用来集成这些JavaScript代码,并在服务器端处理数据,比如根据特定条件决定是否显示弹窗。JSP中的标签库和EL(表达式语言)可以帮助简化页面开发,使得代码更...

    Ssdun网络验证EasyClick例子新版.zip

    3. **JavaScript示例**:压缩包中的JavaScript文件很可能是实现Ssdun网络验证和EasyClick功能的代码示例。开发者可以研究这些代码来了解如何在实际项目中集成和使用这些技术。 4. **版本更新**:作为"新版",这个...

    一个简单的js例子

    【标题】"一个简单的js例子"所提及的是一个JavaScript编程的示例,JavaScript是一种广泛用于网页和网络应用的脚本语言。它主要负责实现客户端的交互性,如动态内容更新、表单验证以及用户界面的实时反馈。JavaScript...

    JavaScript权威指南(第6版)(附源码)

    本书要讲述的内容涵盖JavaScript语言本身,以及Web浏览器所实现的JavaScriptAPI。本书第6版涵盖了HTML5和ECMAScript5,很多章节完全重写,增加了当今Web开发的最佳实践的内容,新增的章节包括jQuery、服务器端...

    JavaScript权威指南(第6版)中文版pdf+源代码

     15.7 例子:生成目录表387  15.8 文档和元素的几何形状和滚动389  15.9 HTML表单396  15.10 其他文档特性404  第16章 脚本化CSS410  16.1 CSS概览411  16.2 重要的CSS属性416  16.3 脚本化内联样式427  ...

    JavaScript编程50例

    通过实践这些例子,开发者可以逐步掌握JavaScript的核心概念和技巧。 首先,基础语法是JavaScript学习的基石,包括变量声明(var、let、const)、数据类型(字符串、数字、布尔、null、undefined、对象、数组)、...

    【JavaScript源代码】vue 实现click同时传入事件对象和自定义参数.docx

    在Vue.js中,事件处理是框架的一个核心特性,它允许我们响应用户交互并执行相应的JavaScript代码。在HTML模板中,我们可以使用`v-on`指令来监听DOM事件,例如`click`,并执行与之关联的方法。`v-on`指令可以简写为`@...

    JavaScript实现简单的时钟实例代码

    首先,我们看到标题提及的是“JavaScript实现简单的时钟实例代码”,这通常涉及到实时更新页面上的时间显示,以模拟一个数字时钟。在给定的代码中,这个功能是通过创建一个名为`displayTime`的函数来完成的。这个...

    【JavaScript源代码】web面试vue自定义组件及调用方式.docx

    `v-model`实际上是`value` prop和`input`事件的简写,确保组件内部的值改变能即时反映到父组件中。 在模板中,有两段代码展示了如何调用`mymodel`组件: 1. 使用`v-model="show"`的方式,当点击`fn1`按钮时,通过...

    javascript实现的在当前窗口中漂浮框的代码

    标签部分列出了“AS, asc, c, ip, java, javascript, pt, rip, sc, script”,这里所列举的单词大部分是编程语言或者技术的缩写,如Java, JavaScript, IP(互联网协议)等。但在这段信息中,关键词显然是...

    【JavaScript源代码】Vue实现计数器案例.docx

    首先,让我们分析提供的代码片段。这个计数器案例包含以下关键组件: 1. HTML 结构:`&lt;div id="app"&gt;` 包含两个按钮("+" 和 "-")和一个`&lt;span&gt;`用于显示计数器的当前值。按钮的点击事件分别绑定了`add`和`sub`...

    JavaScript程序设计-ES中对象的简化语法.pdf

    总结来说,JavaScript程序设计中的ES6对象简化语法包括属性简写和方法简写,这两种方式都极大地提高了代码的可读性和简洁性。同时,为了保证代码在不同环境下运行,我们需要了解如何使用工具如Babel进行语法转换。...

    JavaScript截取图片

    关于Ajax,它是Asynchronous JavaScript and XML的缩写,尽管现在通常不再使用XML,而是JSON或者其他格式。使用jQuery的`$.ajax()`或原生的`fetch` API,我们可以将截取的图片数据发送到服务器: ```javascript $....

    Javascript简写条件语句(推荐)

    传统的条件语句如`if-else`结构虽然功能强大,但有时候可以被一些简写形式替代,以提高代码的简洁性。在下文中,我们将探讨几种常见的简写条件语句的方法。 ### 1. 三元运算符(?:) 三元运算符是JavaScript中唯一...

    【JavaScript源代码】Vue实现简单图片切换效果.docx

    这行代码`&lt;script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"&gt;&lt;/script&gt;`确保了Vue.js可以在页面上运行。 接下来,我们创建了一个`&lt;div&gt;`元素,其id为`app`,这是Vue实例挂载的根元素。在这个`&lt;div&gt;`内,...

    【JavaScript源代码】Vue模拟实现购物车结算功能.docx

    以下是对代码实现的详细解析: 1. **HTML结构**: HTML部分为页面构建了一个基本的布局,包括商品项、价格、数量调整和总价的显示。每个商品项被封装在一个`.item`类的div中,包含商品图片、价格和数量调整区`....

    javascript简化代码 A=alert w=[removed]ln

    这些都是JavaScript中常见的一些概念或函数的缩写,但在这个具体的例子中并没有直接使用。例如: - `al`可能是`alert`的简写。 - `asc`可能是指`ASCII`转换,但JavaScript中没有内置的`asc`函数,可能指的是自定义...

    扩展JavaScript功能的正确方法(译文)

    JavaScript内置了众多方法供开发者使用,但随着项目需求的扩展,有时候我们需要添加一些内置方法里没有的功能。在扩展JavaScript功能时,重要的是要选择一种不破坏代码原有结构、不会引起意外副作用的方法,以实现...

Global site tag (gtag.js) - Google Analytics