最好的JavaScript语法糖


81

这是一些宝石:

文字:

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中还可以使用其他什么语法糖?


2
我没有意识到|| 默认值语法。精致小巧,虽然不那么直观。(也许我已经看过,但从未理解。)
克里斯·诺

1
我很难掌握三元语法。多次编写后,这似乎是第二天性。就您可能已经看到的地方而言,我认为jquery.js和prototype.js都使用它。
2008年

1
如何解释每个示例?
pc1oad1etter

2
我不知道“ arg ||'默认'”。我希望它返回一个布尔值,但它会返回第一个值(从左开始),该值为真(类似于python)!它比“ arg = arg?arg:'default'”要好得多!
Jamol

克里斯·诺(Chris Noe)将此线程当掉了!
Mahesh Velaga

Answers:


58

获取当前日期时间(以毫秒为单位):

Date.now()

例如,要定时执行一段代码:

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

实际上,这是最好的javascript语法糖。Winnar Si yuo。
2008年

3
OrbMan,这可能取决于上下文。如果将其作为参数传递,则可以将其强制为对象,而不是数字或字符串,在这种情况下,+可以将其强制为数字。实际上,+似乎是parseInt(value,10)的简写形式。
眼睑滑落

更正:与parseInt(value,10)确实有一些区别。例如,+ [3]和parseInt函数([3],10)都等于数3,但+ [3,4] == NaN的和parseInt函数([3,4],10)== 3
眼睑滑落09年

呃... parseInt(value,10)的所有这些实例都应该是parseFloat(value)。和克里斯·诺伊(Chris Noe),对垃圾邮件的评论感到抱歉;)
眼睑失明2009年

1
我的好奇心把我尝试它在jsperf它似乎是最高效的是规范的getTime():)(参考jsperf.com/millisecondsdate
sirLisko

33

对象成员资格测试:

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

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

当然,这比props.a更简洁。a === undefined谢谢。
2008年

15
即使props = {a:undefined},也是如此。
迅速

仅供参考-当您尝试在XPCNativeWrapper对象上使用“ in”时,Firefox会引发TypeError。从Firefox 4开始,包装了许多对象。因此,返回到props.a ===在这些情况下未定义。
克里斯·诺

26

在Mozilla(据说是IE7)中,您可以使用以下命令创建XML常量:

var xml = <elem> </ elem>;

您也可以替换变量:

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

真?还有其他引擎支持吗?
2008年

1
只是想知道:一旦创建了“ xml”变量,该怎么办?只是现在在firebug中玩它,看起来好像它没有任何方法或属性,并且您无法将其添加到DOM中。
尼克


8
E4X字面量由于跨站点脚本包含攻击而造成了安全灾难,实际上并不能比仅说“ IMO IMO = var xml = new XML('<elem> </ elem>')”更好。
bobince

2
@CharlieSomerville那不是风险。E4X可能会将“安全” [X] [HT] ML文件转换为活动JS。请阅读code.google.com/p/doctype/wiki/ArticleE4XSecurity了解此问题的背景。
bobince 2010年

26

使用匿名函数和闭包创建私有变量(信息隐藏)和关联的get / set方法:

var getter, setter;

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

花了我一段时间,但我明白了。这很整洁。
matt lohkamp

不久前,我在查看swfobject源时发现了一种类似的技术。使用闭包创建私有变量/方法可能是我从未想过的事情。挺酷的
Herms,2009年

随着新版本的JS,我们可以用更简单if(true) { let _privateVar=123; }
Kulvar

请注意此处的“狗球”样式潜在问题。参见:twitter.com/paul_irish/status/176187448420864000?lang=zh
Jonathan.Brink

22

能够通过原型继承扩展本机JavaScript类型。

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

6
只是避免对Array执行此操作:stackoverflow.com/questions/61088/…–
克里斯·诺

这是正确的,但前提是您使用了for(a in b)循环。我通常会使用框架,因为我确定其他人也会这样做。因此,我通常使用.each()
steve_c

如果容器中的任何代码都使用for(a in b),则可能会出现问题。当该容器是浏览器时,您可能会破坏浏览器中的其他代码(例如,该框架)。我一直被那个迷住了。
克里斯·诺

是的 好点,克里斯。我仍然将原型继承视为JavaScript的最佳功能之一:)
steve_c

for(var i in obj){if(!obj.hasOwnProperty(i)){继续;} ...}
失眼

21

使用===比较值类型:

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

if(i == s)//是

if(i === s)//否

它实际上被称为严格相等-基本上可以避免执行==时必须进行的所有类型转换
olliej

其他语言(PHP)也称其为“身份”检查,即:这两个值是否相同
尼克

@nickf,这有点用词不当。$var1 = 'string'; $var2 = 'string'; $var1 === $var2; // true,即使$var1$var2不相同(引用相同的内存值),也只是相同的类型和相同的值。
眼睑失明

@eyelidlessness,我不确定javascript的工作方式是... (通常)按值存储和传递字符串。但是,对象存储为参考:var1 = {a : 'b'}; var2 = {a : 'b'}; var1 === var2 // false
尼克

@nickf,我知道。但是您可以删除PHP代码中的标记,并在JavaScript中获得相同的结果。这些字符串不相同,但它们的值相同
眼睑失明

21

多行字符串:

var str =“这是\
全部一个
串。”;

由于不能在不将空格也添加到字符串中的情况下缩进后面的行,因此人们通常倾向于使用plus运算符进行连接。但这确实提供了很好的此处文档功能。


2
合理警告-如果\后面有任何空格,将引发异常。
丹尼尔·萨博

21

调整数组的长度

length属性是非只读的。您可以使用它来增加或减少数组的大小。

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 empty value. A sparse array.

1
主席先生,我认为这必须是关于SO的最重要的单一答案。不再push为我而烦,呵呵。谢谢你
aefxx

4
实际上,使用这种方法创建的元素实际上并不存在(它们也不具有未定义的值,但是访问它们会使您变得未定义)。您也无法使用for..in遍历它们。
yorick 2011年

16

通过在空数组上利用join方法,将诸如“-”之类的字符串重复特定的次数:

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

当重复== 3时,结果为“-”。


15

像默认运算符一样, ||是后卫运算符&&

answer = obj && obj.property

相对于

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}

1
不一定必须是null。只有当时才是这种情况obj === null
pimvdb

1
也可以与||结合使用 以确保在根本不存在obj或对象存在而key属性不存在的情况下进行备份。总是这样定义答案:answer =(obj && obj.property)|| 'backupprop';
迪普森2015年

13
var tags = {
    name: "Jack",
    location: "USA"
};

"Name: {name}<br>From {location}".replace(/\{(.*?)\}/gim, function(all, match){
    return tags[match];
});

字符串替换的回调非常有用。


12

获取器和设置器

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"

是的,它将比我目前使用的方法更好。
Ash Ash

IE实现的是ECMAScript 5的Object.defineProperty中的@eyelidlessness,其他浏览器可以使用defineGetter
伊莱·格雷

IE8仅实现DOM对象的getter / setter方法,因此在使自己的对象API变得更整洁时是没有用的:-/
Jonny Buchanan,2009年

5

这不是JavaScript专有的,但保存起来就像三行代码:

check ? value1 : value2

不分配值时是否有与此等效的内容(例如fnName?fnName:defaultFn;)?
2008年

1
不,三元运算符严格用于表达式;没有声明
Josh Hinman

1
您可以使用它来评估匿名函数,例如:“ var myFunc =(browserIsIE?function(){...}:function(){...})”。就个人而言,我不推荐这样做,因为它很令人困惑,但至少有可能。
尼克

在先前的评论中,“评价”可能不是最好的词。嗯..分配?
nickf

@eyelidlessness:是:fnName吗?fnName():defaultFn(); //
单独运行

4

关于levik的例子更多:

var foo = (condition) ? value1 : value2;

4
您不需要括号。三元运算符在许多其他语言中也很常见。
Ates Goral,

1
当条件语句中的语法有歧义时,括号会提供帮助(例如,确定?适用于条件语句的哪个部分)。
2009年


4

跟随obj || {default:true}语法:

调用此函数:hello(neededOne && neededTwo && needThree)如果一个参数未定义或为false,则它将调用hello(false),有时有用


4

在使用固定的一组零件进行解析的情况下:

var str = "John Doe";

您可以使用“分解分配” synatx将结果直接分配给变量:

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功能。这就是Mozilla 2.0+和Chrome 6+浏览器。


我在Safari Javascript控制台中尝试了此操作,它导致解析错误。
失眼

Snap,我想我只在Firefox中使用过。我添加了浏览器兼容性说明。
克里斯·诺

它在Chrome 6上不起作用。它提供了SyntaxError: Unexpected token [
RaYell 2010年

一点研究开始发现chrome 1.7并非完全标准。有报道用让利的问题还有:stackoverflow.com/questions/300185/...
克里斯·诺埃

它仍然无法在Chrome 13上使用。关于何时实施的任何线索?
pimvdb


2

我忘了:

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

2

使用以下简单方式创建匿名对象文字:({})

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

var hasValueOf = !!({})。valueOf

额外的语法糖:双引号'!!' 可以非常简洁地将几乎所有内容转换为布尔值。


1

我喜欢能够eval()json字符串并返回完全填充的数据结构。我讨厌必须至少写两次所有内容(一次用于IE,再次一次用于Mozilla)。


1

将常用关键字(或任何方法)与诸如ths的简单变量相关联

  var $$ = document.getElementById;

  $$('samText');

3
那将不起作用(至少在Chrome中是无效的),因为该this值会丢失。相反,您应该使用document.getElementById.bind(document)。没有bind它仅仅是分配HTMLDocument.prototype.getElementById功能,而没有应该调用它的信息document
pimvdb

1

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

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

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

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

1

默认后备:

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) 

1

这是我刚刚发现的:调用函数前的null检查:

a = b && b.length;

这是较短的等价于:

a = b ? b.length : null;

最好的部分是您可以检查属性链:

a = b && b.c && b.c.length;

1

我喜欢使用列表非常简单:

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";

看起来很棒,其技术名称是什么?
TrySpace 2014年


0
element.innerHTML = "";  // Replaces body of HTML element with an empty string.

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


6
那不是真正的Javascript,它是DOM,目前还不是标准的。
2009年

0

将字符串转换为整数,如果不可能的话,默认为0,

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

在某些情况下可能有用,主要是在将0视为不良结果时


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.