Simple talk about ES6 's six small features _javascript tips

Objective

This article is mainly for ES6 to do a brief introduction, perhaps you do not know what ES6 is, in fact, it is a new JavaScript specification. In a time when everyone is busy, if you want to have a quick understanding of ES6, read on to learn about the six features of the latest generation of JavaScript, the most popular programming language today.

In the past year ES6 has brought full progress, here are 6 of my favorite JS new features.

One, Object[key]

Sometimes you cannot set all the Key/value when an object variable is declared, so you have to add key/value after you declare it.

Let MyKey = ' Key3 ';
Let obj = {
  key1: ' One ',
  key2: ' Two '
};
Obj[mykey] = ' Three ';

Well, that's a little inconvenient, and the bad way to say it is confusing and a bit ugly.

ES6 provides a more elegant way for developers to:

Let MyKey = ' variablekey ';
Let obj = {
  key1: ' One ',
  key2: ' Two ',
  [MyKey]: ' Three '/* yay!/
};

Developers can use [] to wrap variables and use a single statement to accomplish all of their functions.

Two, Arrow functions

You don't need to keep up with all the changes in ES6, and the arrow function is already a topic of discussion and a bit confusing for JS developers. Even though I can write a lot of posts about the features of the arrow function, I want to point out how the arrow function provides a way to compress code for a simple function.

Adds a 10% tax to total we
calculatetotal = Total => total * 1.1;
CalculateTotal (a)//one

//Cancel Event-another tiny task let
brickevent = e => e.preventdefault ();
Document.queryselector (' div '). AddEventListener (' click ', brickevent);

There are no functions and return keywords, and sometimes you don't even need to add (), the arrow function provides a short code notation for write functions.

Third, Find/findindex

JS provides the developer with the Array.prototype.indexOf method to get the specified element subscript in the array, but IndexOf does not provide a method for obtaining the specified element based on the judgment condition, find and FindIndex two methods provide the first element and subscript that satisfies the calculation condition.

let-age = [12,19,6,4];

Let Firstadult = Ages.find (age => age >= 18);
Firstadultindex = Ages.findindex (age => age >= 19);//1

Four... Extension modifiers

An extension modifier indicates that an array and an iterative object should be split into a single argument when invoked:

Pass to function this expects separate multiple arguments
//Much like Function.prototype.apply () does let
numb ers = [9, 4, 7, 1];
Math.min (... numbers); 1

//Convert nodelist to Array let
divsarray = [... document.queryselectorall (' div ')];

Convert Arguments to Array let
argsarray = [... Arguments];

This particular bonus can turn an iterative object (nodelist, arguments) into a true array, which we used to use Array.from or other methods often.

V. Template literals

In JS, multi-line characters are initially done through + and ' ', but are difficult to maintain. Many developers and even some frameworks use <script> tags to hold templates, and then use the DOM method's outerHTML ' ' to get HTML characters.

ES6 provides template literals use inverted quotes to easily create multiple-line strings:

Multiline String let
myString = ' Hello

I ' m-A new line ';

Basic interpolations let
obj = {X:1,y:2};

Console.log (' Your total is: ${obj.x + obj.y} '); Your Total is 3

VI. Default Argument Values

Providing default values for function parameters in the server language has been provided (Python, PHP), now JS also has the ability to:

Basic usage

function Great (name = ' Anon ') {
  console.log (' Hello ${name} ');
}

Great (); Hello anon!

You can have a function too!

function greet (name = ' Anon ', callback = function () {}) {
  console.log (' Hello ${name}! ');
  No more "callback && callback ()" (no conditional)
  callback ();
}

Only set a default for one parameter
function greet (name, callback = function () {}) {}

The 6 features listed above are provided to developers by ES6 and, of course, many features.

Summarize

The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.