es6 supplement

es6 complement to es5 of:
1. Variable Note •
  1) Use let declaration is a local variable, hereby certify that only valid domain and can not be repeated statement, and the statement does not advance (var declared in advance), but to create a variable in advance.
  2) with respect to let pleaded no advance, but it can detect the field effect have priority to use their own scope, but if affirmed later use can cause temporary dead zone.
  3) const declared as a constant, In addition to not change the read-only, and let other characteristics similar.

2.NPM Node package management tool
  download package, delete the package, the package update
  package is dependent on project

  npm install -g package name
  cnpm install the package name
  yarn add the package name

  -g: global installed without the directory for this purpose.
  download package node_modules stored in the directory.

3. Each js file is a module, how to access each module.
  Access Nodejs the first export in the module: module.exports.a = 1, then the need for the modules require ( './ url js file ') introduced;

4. deconstruction: pattern matching.
  1) array deconstruction
    // extended operator ...
    the let [m, ... n-] = [l, 2,3];
    m = n-1 = [2,3];
    // for affirming the default value, the default value is only matched to undefined take effect, a default value may be a function.
    the let [E, F = 'Hello'] = [. 1];
    E =. 1, F = Hello
  2) target deconstruction
    let {name , age} = {name: 'zhangsan', age: 12 is};
    the let {name: name, age: age} = {name: 'zhangsan', age: 12 is};
    generating name, and age variables are subject the value of the name attribute.
    // default value of empathy.

  3) the string deconstruction
    let {length} = "hello" ; 5 length is obtained

  4) function parameter deconstruction
    function Test ([X = '0', Y = 2]) {
      the console.log (X, Y);
    }
    Test ([1,2]);
    function Test ({name: the Name = "ha ", Age}) {
      the console.log (the name, Age);
    }
    Test ({name:" haha ", Age: 23 is});

    // operator REST: ... ... a, parameter characteristic is automatically converted into a redundant array
    // array or expand (ARR ...)
    function Test (X, Y ...) {
       Console. log (X, Y); //
    }
    Test (l, 2,3); X:. 1, Y: [2,3];

5.es6 modification of an object:
  1) When the attribute value and attribute names are the same name of the object can be abbreviated:
    the let obj = {name};
  2) methods may also be abbreviated:
    sayName () {

    }
  3) If the property is named variable,
    [STR]: // STR. 1 = "Gender";
    [ "say" STR +]: function () {// saygender method
      console.log (this [str]); / / outputs. 1
    }
    obj [STR]; // STR access object
    obj [ 'saygender'] // get the saygender function obj
  4) changes to the prototype object:
    1.getPrototypeOf (obj): Get the prototype object instance
    2 .setPrototypeOf (obj, protoObj): obj modification example of the prototype object protoObj, the constructor also changed;
  new 5) obj method:
    1.Object.keys (obj): Object returns all attribute names
    2.Object .values (obj): object returns all attribute values
    3.Object.entries (obj): returns the object attribute value pairs.
    4.Object.is (a, b): Analyzing a, b two values are equal.
  6) obj in Precautions:
    1. the default parameter values defined generally as a function of the parameters tail, length parameters of the function will return the number of parameters is not specified the default values.


6. supplement (arrow function) function: do not own this, it is not as a constructor, the internal arguments do not hold argument, if you want to get the argument, using the rest objects.
For example: this points to a normal function of global objects ( global object), the this empty block is an empty object, because the function is located in the global object.
  arrow writing functions:
  ((parameters) => {// put the function body.
    the console.log (the this); // common with different functions, print is the parent scope of this, when it was declared on the set, because the place will not be used to change, it is not recommended to use the this.
  }) (); // automatically, because it is anonymous function


  let fun = ()=>{
    console.log("haha");
  }

7. The extension of the array:
  1. class may traverse the array into an array: Array.from ();
  2. converting a set of values into an array: Array.of (1, 2,3,5);
  . 3. find values in the array
    arr.find (item, index, arr) ; return to find elements not found return undefined
    arr.findIndex (parameters as above); by whether the elements, did not return -1, the index has returned
  4.fill (parameter ): the value of the original values in the array of filling a parameter.
  internal iterator 5. iterator object implements the interface to be used for-of traverse.
  6. the array also has keys (), values (), entries ()
  7.includes (value): there is no such element is determined, promising true, false is not

8. Supplementary Promise for asynchronous operations: stored inside a asynchronous operation, the synchronous operation method of an asynchronous
  1.promise the object is a container, the internal parameter function is constructed, representing the success and failure functions
  2. then this object method inside the parameters of the function (that go into a successful function) function is performed automatically after the success of the object in the letter
  3. catch methods of this object is the function (empathy) automatically executed after the object in the function fails
  4.finally time the last execution anyway, these three methods are bound to declare at the time of promise.
  5.Promise.all ([p1, P2]);. parameter is an array of promise, which is the relationship with the only successful relationship while successfully returns a promise objects
  6.Promise.race ([p1, p2]) : race, who who should end with a state, the object returns a promise
  7.Promise.resolve (obj): Object returns promise a resolve status, if obj then there is a direct call then only as
  8.Promise.reject (obj): empathy.

9. increased set: set, Map
  method set's: (key value and set as set values)
    the Add (value);
    Delete (value);
    Clear ();
    has (value);
    Keys () Returns iterator object
    or (let key of keys): get traversing individual key value
  map method:
    new new the map ([[name: 'John Doe'], [Age: 18 is]])
    new new the map (Object.entries (obj));
    size
    SET (Key, value);
    has (Key);
    forEach (function (value, Key, Map))

In reference to the class 10.js (class nature ED6 was also achieved with the prototype chain, as the constructor of the other wording):
  1. static property: directly through the class name to declare

11.ES6 modules CommonJS
  derived
  let name = 'Joe Smith'.
  Export {name: name}
  Export default {
    name
  }
  import
  import {name} from './module.js' ;

  Note: babel conversion just transformational grammar, no conversion function (not supported by the encounter with babel-polyfill gasket)

12.es6 how convert es5 (use babel conversion tool)

  1, the global installation CLI-Babel
    NPM-CLI the install -g Babel // - G represents a global installation
  2, to create the root directory, and create a directory in the root directory src and the dist directory
    src directory for storing and editing ES6 codes, index .js file
    dist directory for decoding stored code
  3, performing npm init -y, all the way round package.json generated, creating node project,
  4, create a file in the root directory .babelrc
  {
    "Presets": [
    "ES2015"
  ],
  "plugins": []
  }
  . 5, the installation ES5 conversion: // in the catalog downloading dependencies, dependence to save the downloaded package.json in
    executing the install --save-dev Babel NPM-PRESET-ES2015
    --save- dev: development phase used depend,
    --save: product used in stage-dependent.

  6, the code conversion:
    Babel src --out the dir-dist
    converted into index.js in src and output to ES5 dist directory

 

Guess you like

Origin www.cnblogs.com/nyhhd/p/12525960.html