10個の最適Es 6特性

4992 ワード
読み取り可能性を保証するために、本稿では直訳ではなく意訳を採用し、ソースコードを大量に修正した.また、この著作権は元の作者に帰属し、翻訳は学習にのみ使用されます.ES 6は、正式名称はECMAScript 2015ですが、ES 6という名称はよりシンプルです.ES 6はもはやJavaScriptの最新の標準ではないが、プログラミングの実践に広く使われている.ES 6を使ったことがないなら、まだ遅くないです.次は10個のES 6の一番いい特性です.順位は前後の区別がありません.
*        
*      
*      
*     
*       
*     
* Promise
* Let Const
*  
*
  • 関数パラメータのデフォルト値は、ES 6を関数とするパラメータ設定のデフォルト値を使用しません.
    • function foo(height, color)
{
var height = height || 50;
var color = color || 'red';
//...
}
    このように書くのは普通は大丈夫ですが、パラメータのブール値がfalseの場合、問題が発生します.例えば、foo関数をこのように呼びます.
    foo(0, "", "")
    0のブール値はfalseであるため、heightの値は50になります.同じカラーの値は「red」です.ES 6を使う
    function foo(height = 50, color = 'red')
{
// ...
}
  • テンプレート文字列はES 6を使用しないで+番号を使って変数を文字列につづり合わせます.
    • var name = 'Your name is ' + first + ' ' + last + '.'
    //ES 6/変数を大かっこに入れる:
    var name = `Your name is ${first} ${last}.`
    ES 6の書き方はより簡潔で直感的です.
  • 複数行の文字列はES 6を使用せずに「\t」を使用して複数行の文字列をつなぎ合わせます.
    • var roadPoem = 'Then took the other, as just as fair,
    \t'
+ 'And having perhaps the better claim
    \t'
+ 'Because it was grassy and wanted wear,
    \t'
+ 'Though as for that the passing there
    \t'
+ 'Had worn them really about the same,
    \t'
    ES 6を使用してマルチ行の文字列を逆引用符`の間に置くといいです.
    var roadPoem = `Then took the other, as just as fair,
And having perhaps the better claim
Because it was grassy and wanted wear,
Though as for that the passing there
Had worn them really about the same,`
  • 構成値は、ES 6を使用せずに、あるオブジェクトの属性値を取得する必要がある場合、単独で取得する必要があります.
    var data = $('body').data(); // data house mouse  
var house = data.house;
var mouse = data.mouse;
    ES 6を使用してオブジェクトのサブ属性を一度に取得します.
    var { house, mouse} = $('body').data()
    配列についても同じです.
    var [col1, col2] = $('.column')；
  • オブジェクト属性は、単にES 6オブジェクトを使用しない場合、属性と値を含む必要があります.非常に余分です.
    var bar = 'bar';
var foo = function ()
{
// ...
}

var baz = {
bar: bar,
foo: foo
};
    ES 6オブジェクトで直接変数を書くのは、とても簡単です.
    var bar = 'bar';
var foo = function ()
{
// ...
}
var baz = { bar, foo };
  • 矢印関数は、ES 6の一般関数体内のthisを使用せず、呼び出し時のオブジェクトを指します.
    • function foo()
{
console.log(this.id);
}
var id = 1;
foo(); //   1
foo.call({ id: 2 }); //   2
    ES6矢印関数を使用すると、呼び出し時にあるオブジェクトではなく、定義時にあるオブジェクトです.
    var foo = () => {
console.log(this.id);
}
var id = 1;
foo(); //   1
foo.call({ id: 2 }); //   1
  • Promiseは、ES 6ネストされた2つのsetTimeoutコール関数を使用しない:
    • setTimeout(function()
{
console.log('Hello'); // 1    "Hello"
setTimeout(function()
{
console.log('Fundebug'); // 2    "Fundebug"
}, 1000);
}, 1000);
    ES 6を使用して二つのthenを非同期的にプログラムしたシリアル化を行い、コールバック地獄を回避しました.
    var wait1000 = new Promise(function(resolve, reject)
{
setTimeout(resolve, 1000);
});
wait1000
.then(function()
{
console.log("Hello"); // 1    "Hello"
return wait1000;
})
.then(function()
{
console.log("Fundebug"); // 2    "Fundebug"
});
  • LetとConstはVar varを使用して定義された変数非関数レベルの作用領域:
    • {
var a = 10;
}
console.log(a); //   10
    letとconst letで定義した変数はブロックレベルのスコープですので、エラーが発生します.
    {
let a = 10;
}
console.log(a); //   “ReferenceError: a is not defined”
    constは、letと同様に、ブロックレベルのスコープでもある.
  • 類はES 6を使用せずに構造関数を使用してオブジェクトを作成します.
    • function Point(x, y)
{
this.x = x;
this.y = y;
this.add = function()
{
return this.x + this.y;
};
}
var p = new Point(1, 2);
console.log(p.add()); //   3
    ES 6を使用してクラスを定義し、より規範化し、継承できます.
    class Point
{
constructor(x, y)
{
this.x = x;
this.y = y;
}
add()
{
return this.x + this.y;
}
}
var p = new Point(1, 2);
console.log(p.add()); //   3
  • モジュール化JavaScriptは、公式のモジュール化ソリューションがないまま、開発者は主にCommonJSとAMD仕様を採用しています.ES 6はモジュール機能を制定しました.ES 6 Node.jsを使わずにCommunJS仕様でモジュール化していますが、フロントエンドも採用できます.ただし、展開時にBrowserifyなどのツールを使って包装する必要があります.ここでCommunJS規格を紹介してもいいです.module.jsではmodule.exportsを使用して、port変数とgetAcceounts関数を導出します.
    • module.exports = {
port: 3000,
getAccounts: function() {
...
}
}
main.js   require  module.js：
var service = require('module.js')
console.log(service.port) //   3000
    ES 6 ES 6を使って、exportとimportのキーワードを使ってモジュール化を実現します.module.jsでは、exportを使用して、port変数とgetAcceounts関数を導出します.
    export var port = 3000
export function getAccounts(url) {
...
}
main.js   import  module.js，           ：
import {port, getAccounts} from 'module'
console.log(port) //   3000
    すべての変数をインポートすることもできます.
    import * as service from 'module'
console.log(service.port) // 3000
    iframe+javascriptは一つのフォーム提出後の複数の処理ファイルを順次に処理することを実現します.