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 3f1c4e4b6b16bbbd69b2ee476dc4f83a tag to hold the template, and then use the DOM method outerHTML```` to get the HTML characters.

ES6 provides Template Literals to easily create multi-line strings using backticks:

// 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

6. Default Argument Values

Providing default values ​​for function parameters has been provided in server-side languages ​​(python, php ), now JS also has this capability:

//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 what ES6 provides to developers, and of course there are many more features.