语言功能 - 最好的javascript语法糖

这里有一些宝石:

文字:

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中有哪些其他优秀的语法糖?

30个解决方案
57 votes

获取当前日期时间为毫秒:

Date.now()

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

var start = Date.now();
// some code
alert((Date.now() - start) + " ms elapsed");
Chris Noe answered 2019-09-17T06:46:26Z
32 votes

对象成员测试:

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

("a" in props) // true
("b" in props) // true
("c" in props) // false
Chris Noe answered 2019-09-17T06:46:50Z
26 votes

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

var xml = <elem></elem>;

您也可以替换变量:

var elem = "html";
var text = "Some text";
var xml = <{elem}>{text}</{elem}>;
Chris Noe answered 2019-09-17T06:47:20Z
26 votes

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

var getter, setter;

(function()
{
   var _privateVar=123;
   getter = function() { return _privateVar; };
   setter = function(v) { _privateVar = v; };
})()
Ash answered 2019-09-17T06:47:43Z
22 votes

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

String.prototype.isNullOrEmpty = function(input) {
    return input === null || input.length === 0;
}
steve_c answered 2019-09-17T06:48:07Z
21 votes

多行字符串:

var str = "This is \
all one \
string.";

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

Chris Noe answered 2019-09-17T06:48:38Z
21 votes

调整数组长度的大小

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.
pramodc84 answered 2019-09-17T06:49:07Z
20 votes

使用===比较价值和类型:

var i = 0;
var s = "0";

if (i == s)  // true

if (i === s) // false
Chris Noe answered 2019-09-17T06:49:32Z
16 votes

通过在空数组上利用join方法,重复一个字符串,如“ - ”特定次数:

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

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

J c answered 2019-09-17T06:50:02Z
15 votes

与默认运算符一样,||是保护运算符,&&

answer = obj && obj.property

而不是

if (obj) {
    answer = obj.property;
}
else {
    answer = null;
}
Skilldrick answered 2019-09-17T06:50:30Z
13 votes
var tags = {
    name: "Jack",
    location: "USA"
};

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

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

Serkan Yersen answered 2019-09-17T06:50:56Z
11 votes

吸气剂和二传手:

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"
Jonny Buchanan answered 2019-09-17T06:51:27Z
5 votes

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

check ? value1 : value2
levik answered 2019-09-17T06:51:52Z
4 votes

更多关于levik的例子:

var foo = (condition) ? value1 : value2;
VirtuosiMedia answered 2019-09-17T06:52:16Z
4 votes

Javascript 1.6上的Array#forEach

myArray.forEach(function(element) { alert(element); });
Pablo Cabrera answered 2019-09-17T06:52:40Z
4 votes

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

用这个来调用你的函数:hello(neededOne && neededTwo && needThree)如果一个参数未定义或者为false,那么它将调用hello(false),有时候会有用

vvo answered 2019-09-17T06:53:11Z
4 votes

在使用一组固定的组件部分解析情境时:

var str = "John Doe";

您可以使用“解构赋值”语法将结果直接分配给变量:

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+浏览器。

Chris Noe answered 2019-09-17T06:54:02Z
3 votes

立即调用箭头功能:

var test = "hello, world!";
(() => test)(); //returns "hello, world!";
Gerard Simpson answered 2019-09-17T06:54:26Z
2 votes

我忘了:

(function() { ... }).someMethod(); // Functions as objects
eyelidlessness answered 2019-09-17T06:54:50Z
2 votes

简单地创建一个匿名对象文字:({})

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

var hasValueOf = !!({})。valueOf

额外语法糖:双重不是'!!' 几乎任何东西都非常简洁地转换为布尔值。

mkoistinen answered 2019-09-17T06:55:35Z
1 votes

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

dicroce answered 2019-09-17T06:56:02Z
1 votes

将常用关键字(或任何方法)分配给这样的简单变量

  var $$ = document.getElementById;

  $$('samText');
RameshVel answered 2019-09-17T06:56:26Z
1 votes

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

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

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

var today = new Date().setHours(0, 0, 0, 0);
palswim answered 2019-09-17T06:56:58Z
1 votes

默认回退:

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) 
roosteronacid answered 2019-09-17T06:57:28Z
1 votes

这是我刚发现的一个:在调用函数之前进行null检查:

a = b && b.length;

这相当于:

a = b ? b.length : null;

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

a = b && b.c && b.c.length;
lightblade answered 2019-09-17T06:58:05Z
1 votes

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

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";
manixrock answered 2019-09-17T06:58:43Z
0 votes

int to string cast

var i = 12;
var s = i+"";
Martijn Laarman answered 2019-09-17T06:59:07Z
0 votes
element.innerHTML = "";  // Replaces body of HTML element with an empty string.

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

pramodc84 answered 2019-09-17T06:59:31Z
0 votes

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

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

在某些情况下可能很有用,大多数情况下0被视为不良结果

Raimonds answered 2019-09-17T07:00:01Z
0 votes

模板文字

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

然后文本变量将如下所示!

10 + 20 = 30

Mohan Kumar answered 2019-09-17T07:00:38Z
translate from https://stackoverflow.com:/questions/180841/best-javascript-syntactic-sugar