通常のコーディングの習慣に速記のテクニックを取り入れ、圧縮されたコードでそれらを見たときにそれらを読むことができるようにしたいと考えています。
テクニックの概要を説明しているリファレンス ページやドキュメントを知っている人はいますか?
編集: 以前にミニファイヤについて言及しましたが、ミニファイと効率的な JS 型付けの手法が 2 つのほぼ完全に別個の概念であることは明らかです。
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;
reduce() メソッド:
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() メソッド:
配列内包表記は 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
- Douglas Crockford のアドバイス: http://javascript.crockford.com/style2.html
JavaScript 1.6+ の新機能をのぞくのは確かに興味深いことですyieldが、メインストリーム サポートが不足しているため、実際には言語機能 (リスト内包表記やキーワードなど) を使用することはできません。ただし、Lisp や Scheme に触れたことがない場合は、新しい標準ライブラリ関数について学ぶ価値があります。map、reduce、およびfilterなどの関数型プログラミングの多くの典型的な部分は知っておくとよいものであり、jQuery などの JavaScript ライブラリによく登場します。もう 1 つの便利な関数はbind ( jQuery ではプロキシ、ある程度まで) で、メソッドをコールバックとして指定するときに役立ちます。
于 2010-10-10T08:49:39.003 に答える
1
この github リポジトリは、Javascript のバイト節約技術に特化しています。私はそれがかなり便利だと思います！
https://github.com/jed/140bytes/wiki/Byte- Saving-techniques
于 2016-01-04T20:20:12.970 に答える