Let's briefly talk about the six small features of ES6

Foreword

This article mainly gives a brief introduction to ES6. Maybe you don’t know what ES6 is yet. In fact, it is a new JavaScript specification. In this era when everyone is very busy, if you want to have a quick understanding of ES6, then please read on to learn about the six major features of the latest generation of JavaScript, the most popular programming language today.

ES6 has brought a lot of progress in the past year. Here are 6 of my favorite new features in JS.

1. Object[key]

Sometimes it is not possible to set all keys/values ​​when declaring the object variable, so you have to add the key/value after declaring it.

let myKey = 'key3';
let obj = {
  key1: 'One',
  key2: 'Two'
};
obj[myKey] = 'Three';

This is a bit inconvenient at best, confusing and a bit ugly at worst.

ES6 provides developers with a more elegant way:

let myKey = 'variableKey';
let obj = {
  key1: 'One',
  key2: 'Two',
  [myKey]: 'Three' /* yay! */
};

Developers can use [] to wrap variables to complete all functions with one statement.

2. Arrow Functions

You don’t need to keep up with all the changes in ES6. Arrow functions have been a topic of many discussions and have also caused some confusion for JS developers. Even though I could write many blog posts about the features of arrow functions, I want to point out how arrow functions provide a way to compress code for simple functions.

// Adds a 10% tax to total
let calculateTotal = total => total * 1.1;
calculateTotal(10) // 11
 
// Cancel an event -- another tiny task
let brickEvent = e => e.preventDefault();
document.querySelector('div').addEventListener('click', brickEvent);

Without functions and return keywords, sometimes you don’t even need to add (), arrow functions provide a short way to write code for writing functions.

3. find/findIndex

JS provides developers with the Array.prototype.indexOf method to obtain the subscript of the specified element in the array, but indexOf does not provide a method to obtain the specified element based on judgment conditions. find and The two methods of findIndex provide the ability to retrieve the first element and subscript that meet the calculation conditions.

let age = [12,19,6,4];
 
let firstAdult = ages.find(age => age >= 18); // 19
let firstAdultIndex = ages.findIndex(age => age >= 19); // 1

4....Extended modifier

The extended modifier indicates that arrays and iterable objects should be split into single parameters when called:

// Pass to function that expects separate multiple arguments
// Much like Function.prototype.apply() does
let numbers = [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 specific other one Bonus can turn iterable objects (NodeList, arguments) into real arrays. In the past, we often used Array.from or other methods to achieve this.

5. Template Literals

Multi-line characters in JS were initially implemented through + and ```, but they were difficult to maintain. Many developers and even some frameworks use the