Six beautiful ES6 Tips

To force a request for a parameter by default value

ES6 Specifies that default parameters are executed only when they are actually used, which allows us to force a request for a parameter:

/**

* Called if a parameter is missing and

* The default value is evaluated.

*/

function Mandatory() {

throw new Error("Missing parameter");

}

function foo(mustbeprovided = mandatory()) {

return mustbeprovided;

}

The function call mandatory () is executed only if the parameter mustbeprovided is missing.

In the console test:

> foo()

Error: Missing parameter

> foo(123)

123

More content:

• Paragraph: "Required parameters".

Iterating over array elements and indexes by for-of loops

The method ForEach () allows you to traverse an array of elements and indexes:

var arr = ["A", "B", "C"];

Arr. ForEach(function (elem, index) {

console. Log("index ="+index+", Elem ="+elem);

});

Output:

index = 0, Elem = a

index = 1, Elem = b

index = 2, Elem = C

The for-of loop of the ES6 supports ES6 iterations (through Iterables and iterators) and deconstruction. If you use the new method of the array enteries () to combine the deconstruction, you can achieve the same effect as the above ForEach:

Const arr = ["A", "B", "C"];

for (const [index, elem] of arr. Entries()) {

console. Log('index = ${index}, elem = ${elem} ');

}

Arr.enteries () returns an iterative object by index-element pairing. Each pair of elements and indexes are then directly obtained by deconstructing the array [index, Elem]. The Console.log () parameter is the template literal attribute in ES6, which brings the ability of the string to parse the template variable.

More content:

• Section: "Destructuring"

• Section: "Iterables and Iterators"

• Paragraph: "Iterating with a destructuring pattern"

• Section: "Template literals"

Traversing a Unicode-represented string

Some Unicode-encoded words consist of two JavaScript characters, for example, emoji emoticons:

The string implements the ES6 iteration, and if you iterate through the strings, you can get a single word encoded (each word is represented by 1 or 2 JavaScript characters). For example:

For (const ch of "xud83dude80y") {

console. Log(ch. Length);

}

Output:

1

2

1

This makes it easy for you to get the actual number of words in a string:

> [... "xud83dude80y"]. length

3

The expand operator (...) expands and inserts its operands into the array.

More content:

• Section: "Unicode in ES6"

• Paragraph: "The spread operator (...)"

Exchange values of two variables by variable deconstruction

If you put a pair of variables into an array and then deconstruct the array to assign the same variables (in different order), you can exchange the values of two variables without relying on the intermediate variables:

[A, b] = [B, a];

As you can imagine, the JavaScript engine will be particularly optimized for this pattern in the future, removing the overhead of constructing arrays.

More content:

• Section: "Destructuring"

Simple template parsing with template literals (templates literals)

ES6 template literals are closer to string literals than text templates. However, if you return them through a function, you can use them to do simple template rendering:

Const Tmpl = Addrs = '

${Addrs. Map(addr = '

${addr. First}${addr. Last}

`). Join("")}

`;

The Tmpl function uses the array Addrs to spell the string with a join of map (via the arrow function). Tmpl () can insert data into a table in bulk:

Const Data = [

{First : " ", last : "Bond" },

{First : "Lars", last : " },

];

Console. Log(tmpl(data));

Output:

// //

//

Bond

//

Lars

//

//

//

More content:

• Blog post: "Handling whitespace in ES6 template literals"

• Paragraph: "Text templating via untagged template literals"

• Chapter: "Arrow Functions"

Simple synthesizer with sub-class factory

When the ES6 class inherits from another class, the inherited class can be a dynamic class created from an arbitrary expression:

Function ID () simply returns its parameter

Const id = x + x;

Class Foo extends ID(Object) {}

This feature allows you to implement a synthesizer pattern and use a function to map a class C to a new class that inherits the C. For example, the following two functions Storage and Validation are synthesizers:

Const Storage = sup = class extends sup {

Save(database) { ... }

};

Const Validation = sup = class extends sup {

Validate(schema) { ... }

};

You can use them to combine to generate an Employee class such as the following:

Class Person { ... }

Class Employee extends Storage(Validation(person)) { ··· }

More information:

• Paragraph: "Simple Mixins"

The following two chapters provide a good overview of the features of ECMAScript 6:

• An overview's new in ES6

• First steps with ECMAScript 6 [features that is easy to adopt]

Six beautiful ES6 Tips