Variable declarations

Const and let

Instead of using var, use const and let for constants and variables, respectively. Unlike the function scope of var, const and let are block-level scopes.

const DELAY = 1000;

let count = 0;
count = count + 1;
Copy the code

Template string

Template strings provide another way to do string composition.

const user = 'world'; console.log(`hello ${user}`); // Hello world // Const Content = 'Hello ${firstName}, Thanks for ordering ${qty} tickets to ${event}.';Copy the code

The default parameters

function logActivity(activity = 'skiing') {
  console.log(activity);
}

logActivity();  // skiing
Copy the code

Arrow function

A shortcut to a function that does not require the function keyword to create a function, and can omit the return keyword.

The arrow function also inherits the this keyword of the current context.

Such as:

[1, 2, 3].map(x => x + 1); Function (x) {return x + 1; function(x) {return x + 1; }).bind(this));Copy the code

Import and Export of modules

Import is used to import modules and export is used to export modules.

Such as:

// import all dva from 'dva'; Import {connect} from 'dva'; import { Link, Route } from 'dva/router'; Import * as github from './services/github'; // Export default App; Import {App} from './file'; Export class App Extend Component {};Copy the code

Destructor assignment

Destructor assignment lets us take part of an Object or Array and store it as a variable.

// const user = {name: 'guanguan', age: 2}; const { name, age } = user; console.log(`${name} : ${age}`); // guanguan: 2 // array const arr = [1, 2]; const [foo, bar] = arr; console.log(foo); / / 1Copy the code

We can also destruct function arguments passed in.

const add = (state, { payload }) => { return state.concat(payload); }; You can also configure aliases during destructions to make your code more semantic. const add = (state, { payload: todo }) => { return state.concat(todo); };Copy the code

Object literals improved

This is the reverse of the destructor and is used to reorganize an Object.

const name = 'duoduo';
const age = 8;

const user = { name, age };  // { name: 'duoduo', age: 8 }
Copy the code

You can also omit the function keyword when defining object methods.

App.model ({reducers: {add() {}}}, effects: {*addRemote() {} function*() {} }, });Copy the code

Spread Operator

Spread Operator = 3 points… There are several different ways to use it.

Can be used to assemble arrays.

const todos = ['Learn dva']; [...todos, 'Learn antd']; // ['Learn dva', 'Learn antd'] can also be used to get part of an array. const arr = ['a', 'b', 'c']; const [first, ...rest] = arr; rest; // ['b', 'c'] // With ignore const [first, , ...rest] = arr; rest; // ['c']Copy the code

You can also collect function arguments as arrays.

function directions(first, ... rest) { console.log(rest); } directions('a', 'b', 'c'); // ['b', 'c']; Instead of the apply. Function foo(x, y, z) {} const args = [1,2,3]; Foo. Apply (null, args); foo(... args);Copy the code

For Object, used to compose new objects. (ES2017 stage-2 proposal)

const foo = { a: 1, b: 2, }; const bar = { b: 3, c: 2, }; const d = 4; const ret = { ... foo, ... bar, d }; // { a:1, b:3, c:2, d:4 }Copy the code

In addition, the Spread Operator can be used to extend props in JSX, as shown in Spread Attributes.

Promises

Promise is used to handle asynchronous requests more elegantly. For example, making an asynchronous request:

fetch('/api/todos')
  .then(res => res.json())
  .then(data => ({ data }))
  .catch(err => ({ err }));
Copy the code

Define the Promise.

const delay = (timeout) => {
  return new Promise(resolve => {
    setTimeout(resolve, timeout);
  });
};

delay(1000).then(_ => {
  console.log('executed');
});Copy the code