Good programmers web front-end share based tutorial for ES6

  Good programmers web front-end share based tutorial for ES6, ES6 mention we are not unfamiliar, but do not know how to use the following Xiaobian take you into the ES6, now ES8, ES9 + are updated on the basis of ES6, so we to grasp ES8, ES9 + must ES6 to master when it comes to this question is raised up? That direct ES5 school not on the list thing, however, ES5 and ES6 is a big gap, did not talk much, now pinpointing.
ES5 and ES6 difference
  ES5 as ECMAScript fifth version (fourth edition abandoned because it is too complicated), browser support case to see this pair of map
  Good programmers web front-end share based tutorial for ES6
(core)
as a core part of its few rules: grammar, sentence, keywords, reserved words, operator, object type.
Using ES5 strict mode using the 'use strict' limit some uses; Array Array add some methods, such as we are familiar with the forEach, filter, indexOf, lastIndexOf, isArray, map and so on.
The most important thing is ES5 object method I took the list down:
Object.getPrototypeOf
Object.create
Object.getOwnPropertyNames
Object.defineProperty
Object.getOwnPropertyDescriptor
Object.defineProperties
Object.keys
Object.preventExtensions / Object.isExtensible
Object.seal / Object.isSealed
Object.freeze / Object.isFrozen
PS: What do they talk about, what do not speak yes. ES5 first wrote here, the focus here.
  1) This syntax .ES5 write up more trouble, highlighted the benefits ES6 on its use object literal property assignment is very convenient, for example:
var obj = {
// proto
proto : theProtoObj,
// for shorthand 'Handler: Handler'
Handler,
// Definitions Method,
toString () {
// Super Calls
return "D" + super.toString is a ();
},
// Computed (Dynamic) Property names

};
Block-level scope Statement 2) .ES6 is much better than the ES5 is
increased keyword let ES6, so reducing pollution const constant declarations global variables at block-level scope.
However, there are many ES6 ES5 more convenient to use the method of deconstruction 2. Class 3. assignment arrow function (ps here is the key)
1. Assignment deconstruction
  deconstruct 1.1 array assignment
Good programmers web front-end share based tutorial for ES6
  This assignment is a method of deconstruction, deconstruction generally have three cases complete deconstruction, incomplete deconstruction, deconstruction is not successful, and there is complete deconstruction deconstruction unsuccessful examples in the above example
Good programmers web front-end share based tutorial for ES6
Good programmers web front-end share based tutorial for ES6
destructuring assignment 2.2 objects
deconstruction and an array of objects has a very important difference is taken sequentially arranged array element variables value is determined by its location; and the properties of the object did not order, and variables must attribute of the same name, in order to get the correct value
Good programmers web front-end share based tutorial for ES6
is actually assigned deconstruction of the object in such a form of shorthand
Good programmers web front-end share based tutorial for ES6
that is, the internal mechanism of deconstruction assignment object is the first find of the same name properties, and then assigned to the variable corresponding to the real assignment was the latter, and not the former, the first foo / bar is a pattern that matches the corresponding foo / bar property value is variable, real the assigned attribute values (i.e. second foo / bar), if not look at the following example is understood
Good programmers web front-end share based tutorial for ES6
well, said assignment deconstruction Here are some here this Class property
2.Class
man of few words said on the code, here I'll give you an example of a new approach attribute instance In addition to defining attribute () this method above inside, you can also define the class constructor the topmost layer. All instances of the object's own properties are defined in the head of the class, looks relatively neat, one can see what this class instance properties.
Good programmers web front-end share based tutorial for ES6
Good programmers web front-end share based tutorial for ES6
Class attribute this attribute so much, there is not much to say,
3. arrow function - (only for the transformation of anonymous functions)
(Parameter member list) => {function body}
  <1> Features:
  arrow function is essentially an anonymous function;
  characteristic arrow function: internal arrows function of this, always and external arrow function this consistency;
  Good programmers web front-end share based tutorial for ES6
  < 2> three variants arrow functions:
  normal: remove the function, the function name:
  var = function name (parameter 1, ...) => {}
  function name (parameter 1, ...) ---- call
  such as: var = the Add (X, Y) => X + Y} {return
  the Add (. 1, 2)
introduced in the first here ES6

Guess you like

Origin blog.51cto.com/14256902/2424591