那里有一个很好的JS速记参考吗？ [英] Is there a good JS shorthand reference out there?

问题描述

我想在我的常规编码习惯中加入任何简写技巧，并且当我在压缩代码中看到它们时也能够阅读它们。

I'd like to incorporate whatever shorthand techniques there are in my regular coding habits and also be able to read them when I see them in compacted code.

任何人知道概述技术的参考页面或文档吗？

Anybody know of a reference page or documentation that outlines techniques?

编辑：我之前提到过minifiers，现在我很清楚缩小和有效的JS输入技术是两个几乎完全不同的概念。

推荐答案

已更新与 ECMAScript 2015（ES6）好东西。请参见底部。

Updated with ECMAScript 2015 (ES6) goodies. See at the bottom.

最常见的有条件卖空者是：

The most common conditional shorthands are:

a = a || b     // if a is falsy use b as default
a || (a = b)   // another version of assigning a default value
a = b ? c : d  // if b then c else d
a != null      // same as: (a !== null && a !== undefined) , but `a` has to be defined

用于创建对象和数组的对象文字表示法：

Object literal notation for creating Objects and Arrays:

obj = {
   prop1: 5,
   prop2: function () { ... },
   ...
}
arr = [1, 2, 3, "four", ...]

a = {}     // instead of new Object()
b = []     // instead of new Array()
c = /.../  // instead of new RegExp()

内置类型（数字，字符串，日期，布尔值）

Built in types (numbers, strings, dates, booleans)

// Increment/Decrement/Multiply/Divide
a += 5  // same as: a = a + 5
a++     // same as: a = a + 1

// Number and Date
a = 15e4        // 150000
a = ~~b         // Math.floor(b) if b is always positive
a = +new Date   // new Date().getTime()

// toString, toNumber, toBoolean
a = +"5"        // a will be the number five (toNumber)
a = "" + 5 + 6  // "56" (toString)
a = !!"exists"  // true (toBoolean)

变量声明：

var a, b, c // instead of var a; var b; var c;

索引处的字符串字符：

"some text"[1] // instead of "some text".charAt(1);

---

ECMAScript 2015（ES6）标准短号

这些是相对较新的补充，所以不要指望浏览器之间的广泛支持。
它们可能受现代环境（例如：newer node.js）或通过转换器支持。 旧版本当然会继续有效。

---

ECMAScript 2015 (ES6) standard shorthands

These are relatively new additions so don't expect wide support among browsers. They may be supported by modern environments (e.g.: newer node.js) or through transpilers. The "old" versions will continue to work of course.

箭头功能

a.map(s => s.length)                    // new
a.map(function(s) { return s.length })  // old

休息参数

// new 
function(a, b, ...args) {
  // ... use args as an array
}

// old
function f(a, b){
  var args = Array.prototype.slice.call(arguments, f.length)
  // ... use args as an array
}

默认参数值

function f(a, opts={}) { ... }                   // new
function f(a, opts) { opts = opts || {}; ... }   // old

解构

var bag = [1, 2, 3]
var [a, b, c] = bag                     // new  
var a = bag[0], b = bag[1], c = bag[2]  // old  

对象文字内的方法定义

// new                  |        // old
var obj = {             |        var obj = {
    method() { ... }    |            method: function() { ... }
};                      |        };

对象文字内的计算属性名称

Computed property names inside object literals

// new                               |      // old
var obj = {                          |      var obj = { 
    key1: 1,                         |          key1: 5  
    ['key' + 2]() { return 42 }      |      };
};                                   |      obj['key' + 2] = function () { return 42 } 

奖励：内置对象的新方法

// convert from array-like to real array
Array.from(document.querySelectorAll('*'))                   // new
Array.prototype.slice.call(document.querySelectorAll('*'))   // old

'crazy'.includes('az')         // new
'crazy'.indexOf('az') != -1    // old

'crazy'.startsWith('cr')       // new (there's also endsWith)
'crazy'.indexOf('az') == 0     // old

'*'.repeat(n)                  // new
Array(n+1).join('*')           // old 

奖金2 ：箭头功能也使 self = this 捕获不必要的

Bonus 2: arrow functions also make self = this capturing unnecessary

// new (notice the arrow)
function Timer(){
    this.state = 0;
    setInterval(() => this.state++, 1000); // `this` properly refers to our timer
}

// old
function Timer() {
    var self = this; // needed to save a reference to capture `this`
    self.state = 0;
    setInterval(function () { self.state++ }, 1000); // used captured value in functions
}

这篇关于那里有一个很好的JS速记参考吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！