我想在我的常规编码习惯中加入任何速记技术，并且当我在压缩代码中看到它们时也能够阅读它们。
有人知道概述技术的参考页面或文档吗？
编辑：我之前提到过缩小器，现在我很清楚，缩小和高效的 JS 打字技术是两个几乎完全不同的概念。
问问题
9789 次
5 回答
44
更新了ECMAScript 2015 (ES6)好东西。见底部。
最常见的条件简写是：
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
用于创建对象和数组的对象字面量表示法：
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()
内置类型（数字、字符串、日期、布尔值）
// 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 = b**3 // b * b * b
a = +new Date // new Date().getTime()
a = Date.now() // modern, preferred shorthand
// 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) 标准简写
这些是相对较新的添加，因此不要期望在浏览器中得到广泛支持。它们可能受到现代环境（例如：较新的 node.js）或转译器的支持。当然，“旧”版本将继续工作。
箭头函数
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() { ... }
}; | };
对象字面量内的计算属性名称
// 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捕获变得不必要
// 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
}
关于类型的最后说明
小心使用隐式和隐藏类型转换和舍入，因为它会导致代码可读性降低，并且其中一些不受现代 Javascript 样式指南的欢迎。但即使是那些比较晦涩的也有助于理解其他人的代码，阅读最小化的代码。
于 2010-10-10T08:28:28.507 回答
17
如果通过 JavaScript，您还包括比 1.5 版更新的版本，那么您还可以看到以下内容：
表达式闭包：
JavaScript 1.7 及更早版本：
var square = function(x) { return x * x; }
JavaScript 1.8 添加了一个简写的Lambda 符号，用于编写带有表达式闭包的简单函数：
var square = function(x) x * x;
减少（）方法：
JavaScript 1.8 还为数组引入了reduce()方法：
var total = [0, 1, 2, 3].reduce(function(a, b){ return a + b; });
// total == 6
解构赋值：
在 JavaScript 1.7 中，您可以使用解构赋值，例如，交换值以避免临时变量：
var a = 1;
var b = 3;
[a, b] = [b, a];
数组理解和 filter() 方法：
Array Comprehensions是在 JavaScript 1.7 中引入的，它可以减少以下代码：
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [];
for (var i = 0; i < numbers.length; i++) {
if (numbers[i] % 2 === 0) {
evens.push(numbers[i]);
}
}
对于这样的事情：
var numbers = [1, 2, 3, 21, 22, 30];
var evens = [i for each(i in numbers) if (i % 2 === 0)];
或者使用filter()JavaScript 1.6 中引入的 Arrays 中的方法：
var numbers = [1, 2, 3, 21, 22, 30];
var evens = numbers.filter(function(i) { return i % 2 === 0; });
于 2010-10-10T08:41:48.383 回答
3
您正在寻找JavaScript 语言的习语。
- 一个简洁但不全面的列表： http ://ajaxian.com/archives/javascript-idioms-you-need-to-know
- 道格拉斯·克罗克福德的建议：http: //javascript.crockford.com/style2.html
看看JavaScript 1.6+ 中的新功能yield当然很有趣，但由于缺乏主流支持，您将无法在野外使用这些语言特性（例如，列表解析或关键字）。但是，如果您没有接触过 Lisp 或 Scheme，那么学习新的标准库函数是值得的。许多典型的函数式编程，例如map、reduce和filter都很值得了解，并且经常出现在 jQuery 等 JavaScript 库中；另一个有用的函数是bind（在某种程度上是 jQuery 中的proxy ），它在将方法指定为回调时很有帮助。
于 2010-10-10T08:49:39.003 回答
1
获取数组的最后一个值
这并不是真正的速记，而更像是大多数人使用的技术的一种较短的替代技术
当我需要获取数组的最后一个值时，我通常使用以下技术：
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ').slice(-1)[0];
.slice(-1)[0]作为速记技术的一部分。与我看到的几乎所有人使用的方法相比，这更短：
var str = 'Example string you actually only need the last word of FooBar';
var lastWord = str.split(' ');
lastWord = lastWord[lastWord.length-1];
测试这个速记的相对计算速度
为了测试这一点，我做了以下事情：
var str = 'Example string you actually only need the last word of FooBar';
var start = +new Date();
for (var i=0;i<1000000;i++) {var x=str.split(' ').slice(-1)[0];}
console.log('The first script took',+new Date() - start,'milliseconds');
然后分别（以防止可能的同步运行）：
var start2 = +new Date();
for (var j=0;j<1000000;j++) {var x=str.split(' ');x=x[x.length-1];}
console.log('The second script took',+new Date() - start,'milliseconds');
结果：
The first script took 2231 milliseconds
The second script took 8565 milliseconds
结论：使用这种速记没有缺点。
调试速记
大多数浏览器确实支持每个具有 id 的元素的隐藏全局变量。因此，如果我需要调试某些东西，我通常只需向元素添加一个简单的 id，然后使用我的控制台通过全局变量访问它。您可以自己检查一下：只需在此处打开您的控制台，输入footer并按 Enter。<div id="footer>除非您拥有没有此功能的稀有浏览器（我还没有找到），否则它很可能会返回。
如果全局变量已经被其他变量占用，我通常使用可怕 document.all['idName']的或document.all.idName. 我当然知道这是非常过时的，我不会在我的任何实际脚本中使用它，但是当我真的不想输入完整的内容时我会使用它，document.getElementById('idName')因为大多数浏览器都支持它，是的，我我确实很懒。
于 2013-12-28T22:56:33.793 回答
1
这个 github repo 专门用于 Javascript 的字节保存技术。我觉得很方便！
于 2016-01-04T20:20:12.970 回答