About front-end JavaScript ES6 details

1. Introduction

ES6 is a general term, meaning the next generation standard of JavaScript after version 5.1, covering ES2015 , ES2016 , and ES2017 syntax standards.

The new features of ES6 are currently only supported by some newer versions of browsers. To run them in older versions of browsers, we need to convert ES6 to ES5.

• Chrome : Starting from version 51, it supports 97% of the new ES6 features.
• Firefox : Starting from version 53, it supports 97% of ES6 new features.
• Safari : Version 10 and above supports 99% of ES6 new features.
• IE : Edge 15 can support 96% of ES6 new features. Edge 14 can support 93% of the new ES6 features. (IE7~11 basically do not support ES6)

1.1 Babel Transcoder

It is a widely used ES6 transpiler.

npm install --save-dev @babel/core

Configuration file .babelrc

# Latest transcoding rules $ npm install --save-dev @babel/preset-env

# react transcoding rules$ npm install --save-dev @babel/preset-react
// The `presets` field sets the transcoding rules. The official website provides the following rule sets, which you can install as needed.
  {
    "presets": [
      "@babel/env",
      "@babel/preset-react"
    ],
    "plugins": []
  }

1.2 Polyfill

By default, Babel only converts the new JavaScript syntax. In order to support the new API, you also need to use polyfill to provide a shim for the current environment (that is, the previous version does not have it, so you need to apply a patch).

For example: core-js and regenerator-runtime

$ npm install --save-dev core-js regenerator-runtime
import 'core-js';
import 'regenerator-runtime/runtime';

2. let and const

2.1 let

In terms of scope, ES5 only has global scope and function scope. Variables declared using let are only valid within the code block in which they are declared.

if(true){ let a = 1; var b = 2 }
console.log(a) // ReferenceError: a is not defined
console.log(b) // 2

Looking at the example below, we expect the output to be 1, because there is only one global variable i, so after for is executed, i=5 , and the value printed by the function is always 5.

var funcs = [];
for (var i = 0; i < 5; i++) {
  funcs.push(function () {
    console.log(i);
  });
}
funcs[1](); // 5

Fix: Use local storage for the i variable for each iteration and use a closure to close the scope.

var funcs = [];
for (var i = 0; i < 5; i++) { 
    (function () {
            var local = i
            funcs.push(function () {
                console.log(local);
            });
        }
    )()
}
funcs[1](); // 1

The same effect can be achieved by using let to declare the variable i.

2.2 const

const is used to declare a read-only constant. Must be initialized and cannot be modified once assigned. const declared variables also have block scope.

if (true) {
 const PI = 3.141515926;
 PI = 66666 // TypeError: Assignment to constant variable.
}
console.log(PI) // ReferenceError: PI is not defined

const declaration object

const obj = {};
// Add an attribute to obj, which is successful obj.name = 'hello';

// Pointing obj to another object will result in an error obj = {}; // TypeError: "obj" is read-only

3. Deconstruction

Deconstruction literally means decomposing the structure, that is, breaking the original structure.

3.1 Object Destructuring

Basic usage:

let { name, age } = { name: "hello", age: 12 };
console.log(name, age) // hello 12

Setting Default Values

let { name = 'hi', age = 12 } = { name : 'hello' };
console.log(name, age) // hello 12

The rest parameter (in the form ...variable name) can select any number of elements from an object, or get an object consisting of the remaining elements.

let { name, ...remaining } = { name: "hello", age: 12, gender: '男' };
console.log(name, remaining) // hello {age: 12, gender: 'male'}

3.2 Array Destructuring

The rest parameter (in the form of ...variable name) selects any number of elements from an array, or retrieves an array of the remaining elements.

let [a, ...remaining] = [1, 2, 3, 4];
console.log(a, remaining) // 1 [2, 3, 4]

Some members are ignored during array destructuring.

let [a, , ...remaining] = [1, 2, 3, 4];
console.log(a, remaining) // 1 [3, 4]

3.3 Function parameter destructuring

Array Parameters

function add([x, y]){
  return x + y;
}
add([1, 2]); // 3

Object Parameters

function add({x, y} = { x: 0, y: 0 }) {
  return x + y;
}
add({x:1 ,y : 2});

3.4 Common Scenarios

Swap variables without using the third variable.

let x = 1;
let y = 2;

[x, y] = [y, x];

Extracting JSON data

let json = {
  code: 0,
  data: {name: 'hi'}
};
let { code, data: user } = json;
console.log(code, user); // 0 {name: 'hi'}

Traversing the Map structure

const map = new Map();
map.set('name', 'hello');
map.set('age', 12);

for (let [key, value] of map) {
  console.log(key + " is " + value);
}

4. Extension

4.1 String Extensions

Template string, this is very useful. Use backticks (`) to denote them. It can be used as a normal string, or it can be used to define multi-line strings or embed variables in strings.

`User ${user.name} is login...`);

4.2 Function Extension

ES6 allows you to set default values ​​for function parameters, which can be written directly after the parameter definition.

Once the default values ​​of the parameters are set, the parameters will form a separate context (context) when the function is declared and initialized. When initialization is complete, the scope disappears. This syntax behavior will not occur if the default value of the parameter is not set.

function add(x, y = 1) {
 return x + y
}

Alternative to apply()

// ES5 version Math.max.apply(null, [1, 3, 2])

// ES6 way of writing Math.max(...[1, 3, 2])

4.3 Array Extension

Merge Arrays

// ES5 way of writing var list = [1,2]
list = list.concat([3])

// ES6 way var list = [1,2]
list = [...list, 3]

New Array API

Array.from(), Array.of(), find() and findIndex(), etc., see MDN

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array

4.4 Object Extension

Object properties, method abbreviations

data = [1,2]
const resp = {data}; // attribute abbreviation, equivalent to {data: data}
const obj = {
  add(x, y) { // Method abbreviation, equivalent to add: function(x, y){...}
    return x + y;
  }
};

Extended attributes

const point = {x: 1, y: 2}
const pointD = {...point, z: 3}
console.log(pointD) // {x: 1, y: 2, z: 3}

// When there are repeated attributes, pay attention to the order.
const point = {x: 1, y: 2}
const pointD = {...point, x: 4, z: 3}
console.log(pointD) // {x: 4, y: 2, z: 3}

const point = {x: 1, y: 2}
const pointD = {x: 4, z: 3, ...point}
console.log(pointD) // {x: 1, z: 3, y: 2}

The description object of the property

Each property of an object has a Descriptor object that controls the behavior of the property.

const point = {x: 1, y: 2}
Object.getOwnPropertyDescriptor(point, 'x') 
/**
{ configurable: true
  enumerable: true // indicates enumerable value: 1
 writable: true // indicates writable}
**/

Attribute traversal

• for...in loop: Only traverses the object's own and inherited enumerable properties.
• Object.keys() : Returns the key names of all enumerable properties of the object itself.
• JSON.stringify() : Serializes only the object’s own enumerable properties.
• Object.assign() : Ignore properties whose enumerable is false and only copy the object's own enumerable properties.
  

const point = {x: 1, y: 2}
for(let key in point){
  console.log(key)
}

Some new methods of objects: Object.assign()

Object.assign() method performs a shallow copy, not a deep copy. That is to say, if the value of a property of the source object is an object, then the target object copies a reference to this object. Common Uses:

Cloning an object

function clone(origin) {
  return Object.assign({}, origin);
}

Merge Objects

const merge = (target, ...sources) => Object.assign(target, ...sources);

Specifying Default Values

const DEFAULT_CONFIG = {
  debug: true,
};

function process(options) {
  options = Object.assign({}, DEFAULT_CONFIG, options);
  console.log(options);
  // ...
}

4.5 Operator Extensions

Exponential Operator

2 ** 10 // 1024
2 ** 3 ** 2 // 512 is equivalent to 2 ** (3 ** 2)

let a=10; a **= 3; // equivalent to a = a * a * a

Chaining operators

obj?.prop determines whether an object property exists, func?.(...args) determines whether a function or object method exists.

const obj = {name: 'job', say(){console.log('hello')}}
obj?.name // equals obj == null ? undefined : obj.name
obj?.say() // equals obj == null ? undefined : obj.say()

Null check operator

In JavaScript we use the || operator to specify default values. When we want the default value to be triggered only when the left side is null or undefined , use ??.

const obj = {name: ''}
obj.name || 'hello' // 'hello'
obj.name ?? 'hello' // ''

5. for…of

Because for...in loop is mainly designed for traversing objects, and because the keys of the array are numbers, it returns numbers when traversing the array. Obviously, this cannot meet development needs. Using for...of can solve this problem.

const list = ['a', 'b', 'c']
for (let v in list){
  console.log(v) // 0,1,2
}
for (let v of list){
  console.log(v) // a,b,c
}

6. Summary

This is the end of this article about the details of front-end JavaScript ES6. For more relevant JavaScript ES6 content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope everyone will support 123WORDPRESS.COM in the future!