About ES6Six Little Features (Part Two)

Preface

Every member of the JavaScript community likes new APIs, grammar updates, and features, which provide better, smarter, and more efficient ways to complete important tasks.

Following the previous article, 'A Simple Talk about ES6of the six small features》, this time I will share6a method that can reduce code and maximize efficiency.

1. Object Shorthand

The new object declaration method allows us to not declare the key of the object:

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

Avoid using the function keyword to declare functions:

var davidwalsh = {
 makeItHappen(param){
 // do stuff
 }
}

It must be admitted that removing the function keyword really makes the code more concise and easier to maintain.

3. Blocks vs Immediately Executed Functions

The pattern of creating immediately executed functions is a bit ugly:

(function()
 // do stuff
))();

Through ES6We can create block-level scopes using {} and let to achieve the effect of immediately executed functions:

{
 let j = 12;
 let divs = document.querySelectorAll('div');
 // do stuff
}
j; // ReferenceError: j is not defined...

If a function is declared inside a block, it can be accessed from outside. But if you use the let keyword to declare a function variable without parentheses, you can achieve the IEF function.

4. for loops and let

Because in JavaScript, there can be variable hoisting, we often declare some 'useless' iteration variables before the scope, such as (for var x = …). ES6 Using let solves this annoying problem:

for (let x = 0; x < len; i++{
 //do stuff
}
x; // ReferenceError: x is not defined

Let will be applied more in the near future.

5.get and set for Classes

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

It's great that properties can be set with get and set. There is no need to use functions for special settings - everything will be executed automatically when obj.prop = {value} is executed.

6.startsWith,endsWith and includes

"MooTools".startsWith("Moo"); // true;
"MooTools".startsWith("moo"); // false;
"MooTools".endsWith("Tools"); // true;
"MooTools".includes("oo"); // true;

Note:The compatibility of the includes method is still very good, there was once an online bug because this method is not supported.

Original: https://davidwalsh.name/es6-features-ii/amp

Summary

That's all for this article, I hope the content of this article can bring some help to everyone's learning or work, if you have any questions, everyone can leave a message to communicate.

Statement: The content of this article is from the Internet, the copyright belongs to the original author, the content is contributed and uploaded by Internet users spontaneously, this website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#oldtoolbag.com (Please replace # with @ when sending an email to report violations, and provide relevant evidence. Once verified, this site will immediately delete the infringing content.)