javascript - 最好的 javascript 语法糖

Question

这里有一些宝石：

字面量：

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 中还有哪些出色的语法糖？

score 58 · Accepted Answer

以毫秒为单位获取当前日期时间：

Date.now()

例如，要计时一段代码的执行时间：

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

score 33 · Accepted Answer

对象成员资格测试：

变种道具 = { a: 1, b: 2 };

("a" in props) // true
("b" in props) // true
("c" in props) // false

score 26 · Accepted Answer

在 Mozilla（据报道是 IE7）中，您可以使用以下方法创建 XML 常量：

var xml = <elem></elem>;

您也可以替换变量：

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

score 26 · Accepted Answer

使用匿名函数和闭包创建私有变量（信息隐藏）和相关的 get/set 方法：

var getter, setter;

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

score 22 · Accepted Answer

能够通过原型继承来扩展原生 JavaScript 类型。

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

score 21 · Accepted Answer

用于===比较值和类型：

变量 i = 0;
变量 s = "0";

if (i == s) // 真

if (i === s) // 假

score 21 · Accepted Answer

多行字符串：

var str = "这是\
一个\
细绳。”;

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

score 21 · Accepted Answer

调整数组长度

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.

score 16 · Accepted Answer

通过在空数组上利用 join 方法重复特定次数的字符串（例如“-”）：

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

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

score 15 · Accepted Answer

与默认运算符一样，||是守卫运算符，&&.

answer = obj && obj.property

与

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

score 13 · Accepted Answer

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

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

字符串替换的回调很有用。

score 12 · Accepted Answer

获取器和设置器：

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"

score 5 · Accepted Answer

5

这不是 javascript 独有的，但可以保存三行代码：

check ? value1 : value2

于 2008-10-07T23:46:48.803 回答

score 4 · Accepted Answer

4

更多关于列维克的例子：

var foo = (condition) ? value1 : value2;

于 2008-10-08T00:07:27.640 回答

score 4 · Accepted Answer

4

Javascript 1.6 上的Array#forEach

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

于 2008-10-08T11:24:41.860 回答

score 4 · Accepted Answer

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

用这个调用你的函数： hello(neededOne && neededTwo && needThree) 如果一个参数未定义或为假，那么它将调用 hello(false)，有时很有用

score 4 · Accepted Answer

在解析具有一组固定组成部分的情况下：

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

score 3 · Accepted Answer

3

立即调用箭头函数：

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

于 2016-06-06T05:46:26.137 回答

score 2 · Accepted Answer

2

我忘了：

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

于 2008-10-09T06:33:51.697 回答

score 2 · Accepted Answer

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

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

var hasValueOf = !!({}).valueOf

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

score 1 · Accepted Answer

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

score 1 · Accepted Answer

将常用关键字（或任何方法）分配给简单的变量，如 ths

  var $$ = document.getElementById;

  $$('samText');

score 1 · Accepted Answer

JavaScript 的 Date 类提供了一个半“流利的接口”。这弥补了无法直接从 Date 类中提取日期部分：

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

它不是一个完全流畅的接口，因为下面只会给我们一个实际上不是 Date 对象的数值：

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

score 1 · Accepted Answer

默认回退：

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)

score 1 · Accepted Answer

我喜欢使用列表的简单性：

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

score 1 · Accepted Answer

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

a = b && b.length;

这是一个较短的等价于：

a = b ? b.length : null;

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

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

score 0 · Accepted Answer

0

int 到字符串转换

var i = 12;
var s = i+"";

于 2009-03-31T13:49:59.317 回答

score 0 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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

在某些情况下可能很有用，主要是当 0 被认为是不好的结果时

score 0 · Accepted Answer

模板文字

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

那么文本变量将如下所示！

10 + 20 = 30

javascript - 最好的 javascript 语法糖

30 回答 30

Related

Reference