ES 6の6つの小特性について(2)

2290 ワード

前言
Javascriptグループのすべての人は新しいAPI、文法更新及び特性が好きです.それらはより良い、よりスマート、より効果的な方法を提供して、重要な任務を完成します.
前の「ES 6の6つの特性について簡単に話します」に続いて、今回はコードを減らし、最大化する方法を6つ共有します.
1.Object Shothand
新しいオブジェクト宣言方法は、オブジェクトのkeyを宣言しないことができます.

var x = 12;
var y = yes;
var z = {one:'1',two:'2'};

// The old way
var obj = {
 x:x,
 y:y,
 z:z
}
// The new way
var obj = {x,y,z};
2.Method Properties
functionキー宣言関数を避ける:

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}
Functionキーを削除することは、コードを簡潔にし、より保守的にすることを確認しなければなりません.
3.Blocks vs Immediately Executed Functions
すぐに実行する方法を作成します.

(function(){
 // do stuff
})();
ES 6を通して、{}とletによりブロックレベルの役割を作成し、直ちに関数を実行する役割を果たすことができます.

{
 let j = 12;
 let divs = document.querySelectorAll('div');

 // do stuff
}

j; // ReferenceError: j is not defined...
Blockの内部宣言関数であれば、外部からアクセスされます.ただし、letキーワード宣言関数引数を使うと、括弧を使わずにIEFの機能を実現します.
4.for loops and let
JSには変数が存在しますので、私たちはしばしばスコープの前で「不要」な反復変数を宣言します.例えば(for var x=…).ES 6 letを使ってこの悩みを解決しました.

for(let x = 0; x < len; i++){
 //do stuff
}

x; // ReferenceError: x is not defined
近いうちにletがもっと応用されます.
5.get and set forクラスes

class Cart{
 constructor(total){
 this._total = total;
 }
 get total(){return this._total;}
 set total(v){this._total = Number(v);}
}

var cart = new Cart(100);

cart.total // 100
属性にget、setを設定できるのはこの部分が一番いいです.関数を使って特殊な設定をする必要はありません.Obj.prop={value}を実行すると、すべてが自動的に実行されます.
6.starts With、endswith and includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;

"MooTools".endsWith("Tools"); // true;

"MooTools".includes("oo"); // true;
注:includes方法の互換性はまだたくさんあります.オンラインバグがあったのは、この方法がサポートされていないからです.
原文:https://davidwalsh.name/es6-features-ii/amp
締め括りをつける
以上がこの文章の内容の全部です.本文の内容は皆さんの学習や仕事に一定の助けをもたらすことを望んでいます.もし疑問があれば、メッセージを残して交流してもいいです.