最好的JavaScript语法糖

这里有一些gem:

文字:

var obj = {}; // Object literal, equivalent to var obj = new Object(); var arr = []; // Array literal, equivalent to var arr = new Array(); var regex = /something/; // Regular expression literal, equivalent to var regex = new RegExp('something'); 

默认值:

 arg = arg || 'default'; // if arg evaluates to false, use 'default', which is the same as: arg = !!arg ? arg : 'default'; 

当然,我们知道匿名函数,但能够将它们当作文字并在现场执行(作为封闭)是非常好的:

 (function() { ... })(); // Creates an anonymous function and executes it 

问题:在JavaScript中还有什么其他很好的语法糖?

获取当前date时间为毫秒:

 Date.now() 

例如,要执行一段代码:

 var start = Date.now(); // some code alert((Date.now() - start) + " ms elapsed"); 

对象成员testing:

 var props = {a:1,b:2};

 (道具中的“a”)// true
 (道具中的“b”)// true
 (道具中的“c”)// false

在Mozilla(据说IE7),你可以使用以下命令创build一个XML常量:

 var xml = <elem> </ elem>;

您也可以replacevariables:

 var elem =“html”;
 var text =“一些文字”;
 var xml = <elem}> {text} </ {elem}>;

使用匿名函数和闭包创build一个私有variables(信息隐藏)和相关的get / set方法:

 var getter, setter; (function() { var _privateVar=123; getter = function() { return _privateVar; }; setter = function(v) { _privateVar = v; }; })() 

能够通过原型inheritance来扩展原生JavaScripttypes。

 String.prototype.isNullOrEmpty = function(input) { return input === null || input.length === 0; } 

多行string:

 var str =“这是\
所有的一个\
串。”;

既然你不能缩进后面的行,也没有在string中添加空格,人们通常喜欢用plus操作符连接。 但是这确实提供了一个很好的文档function。

使用===比较值types:

 var i = 0;
 var s =“0”;

如果(我= s)/ /真

如果(我=== s)//假

调整数组的长度

长度属性是不可读的 。 您可以使用它来增加或减less数组的大小。

 var myArray = [1,2,3]; myArray.length // 3 elements. myArray.length = 2; //Deletes the last element. myArray.length = 20 // Adds 18 elements to the array; the elements have the undefined value. A sparse array. 

通过利用空数组上的连接方法重复一个string,如“ – ”特定的次数:

 var s = new Array(repeat+1).join("-"); 

结果在“—”重复== 3时。

像默认的运算符|| 是警卫人员, &&

 answer = obj && obj.property 

而不是

 if (obj) { answer = obj.property; } else { answer = null; } 
 var tags = { name: "Jack", location: "USA" }; "Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){ return tags[match]; }); 

stringreplacecallback只是有用的。

吸气剂和吸附剂 :

 function Foo(bar) { this._bar = bar; } Foo.prototype = { get bar() { return this._bar; }, set bar(bar) { this._bar = bar.toUpperCase(); } }; 

给我们:

 >>> var myFoo = new Foo("bar"); >>> myFoo.bar "BAR" >>> myFoo.bar = "Baz"; >>> myFoo.bar "BAZ" 

这不是一个JavaScript独占,但像三行代码保存:

 check ? value1 : value2 

levik的例子更多一点:

 var foo = (condition) ? value1 : value2; 

在Javascript 1.6上的数组#forEach

 myArray.forEach(function(element) { alert(element); }); 

关注obj || {default:true}语法:

用下面的方法调用你的函数:hello(neededOne && neededTwo&needThree)如果一个参数是undefined或false,那么它会调用hello(false), 有时有用

在parsing具有固定组件部分的情况下:

 var str = "John Doe"; 

您可以使用“解构赋值”synatx将结果直接分配给variables:

 var [fname, lname] = str.split(" "); alert(lname + ", " + fname); 

这是比以下更可读:

 var a = str.split(" "); alert(a[1] + ", " + a[0]); 

交替:

 var [str, fname, lname] = str.match(/(.*) (.*)/); 

请注意,这是一个Javascript 1.7的function。 那么这就是Mozilla 2.0+和Chrome 6+浏览器。

我忘了:

 (function() { ... }).someMethod(); // Functions as objects 

创build一个匿名对象文字,只需:({})

例如:需要知道对象是否有valueOf方法:

var hasValueOf = !!({})。valueOf

奖金语法糖:双重不“!!” 非常简洁地将任何东西都转换成布尔值。

立即调用箭头function:

 var test = "hello, world!"; (() => test)(); //returns "hello, world!"; 

我喜欢能够eval()一个JSONstring,并得到一个完全填充的数据结构。 我恨不得不写所有东西至less两次(IE一次,再次Mozilla)。

将经常使用的关键字(或任何方法)分配给像这样的简单variables

  var $$ = document.getElementById; $$('samText'); 

JavaScript的Date类提供了一个半“Fluent接口”。 这弥补了无法直接从Date类中提取date部分:

 var today = new Date((new Date()).setHours(0, 0, 0, 0)); 

这不是一个完全stream畅的接口,因为以下只会给我们一个实际上不是Date对象的数值:

 var today = new Date().setHours(0, 0, 0, 0); 

默认回退:

 var foo = {}; // empty object literal alert(foo.bar) // will alert "undefined" alert(foo.bar || "bar"); // will alert the fallback ("bar") 

一个实际的例子:

 // will result in a type error if (foo.bar.length === 0) // with a default fallback you are always sure that the length // property will be available. if ((foo.bar || "").length === 0) 

这里是我刚刚发现的一个:调用函数之前的空检查:

 a = b && b.length; 

这相当于:

 a = b ? b.length : null; 

最好的部分是,你可以检查一个财产链:

 a = b && bc && bclength; 

我喜欢使用列表是多么简单:

 var numberName = ["zero", "one", "two", "three", "four"][number]; 

和哈希:

 var numberValue = {"zero":0, "one":1, "two":2, "three":3, "four":4}[numberName]; 

在大多数其他语言中,这将是相当繁重的代码。 值默认也是可爱的。 例如错误代码报告:

 var errorDesc = {301: "Moved Permanently", 404: "Resource not found", 503: "Server down" }[errorNo] || "An unknown error has occurred"; 

int转换为string

 var i = 12; var s = i+""; 
 element.innerHTML = ""; // Replaces body of HTML element with an empty string. 

删除元素的所有子节点的快捷方式。

将string转换为默认为0的整数,

 0 | "3" //result = 3 0 | "some string" -> //result = 0 0 | "0" -> 0 //result = 0 

在某些情况下可能有用,大多数情况下,0被认为是不好的结果

模板文字

 var a = 10; var b = 20; var text = `${a} + ${b} = ${a+b}`; 

那么文本variables将如下所示!

10 + 20 = 30