On JavaScript, ES5, ES6

What is JavaScript

JavaScript is a dynamic-type, weakly-typed, prototype-based client-side scripting language used to add dynamic functionality to HTML pages. (Well, what's the most annoying concept?)

Dynamic:

Determines the data type at run time. A type declaration is not required before a variable is used, and the type of the variable is usually the type of the value being assigned.

Weak class:

It is possible to convert the consumer transparently between different types, even if the type is incorrect, by implicitly converting to the correct type.

Prototype:

The new object inherits the object (as a template), shares its own properties with the new object, and the template object is called a prototype. This allows the new object to be instantiated to not only enjoy its own creation and runtime-defined properties, but also to enjoy the properties of the prototype object.

PS: The new object refers to a function, the template object is an instance object, the instance object cannot inherit the prototype, the function can be.

JavaScript is made up of three parts:

1.ECMAScript (CORE)

As the core, it specifies the components of the language: syntax, type, statement, keyword, reserved word, operator, object

Implementation of ps:* not fully compatible

2.DOM (Document Object model)

Dom maps the entire page to a multi-level node result, and the developer can easily delete, add, replace, or modify any node with the help of the API provided by the DOM.

Ps:dom also has the level, divides into DOM1, DOM2, DOM3, expands many specifications and the new interface.

3.BOM (Browser object model)

Supports browser object models that can access and manipulate browser windows, and developers can control parts of the page that the browser displays.

Ps:bom not formed specification

What is ES5

As the fifth version of ECMAScript (version fourth because it is too complex to discard), browser support can be seen in the first image, the addition of features as follows.

1.strict mode

Strict mode, limit some usage, ' use strict ';

2.Array Add method

Added every, some, ForEach, filter, IndexOf, lastIndexOf, IsArray, map, reduce, reduceright methods

PS: There are other ways Function.prototype.bind, String.prototype.trim, Date.now

3.Object method

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: There is nothing to say but what to say.

What is ES6

ECMASCRIPT6 provides a number of new features in the context of guaranteed backwards compatibility, and is currently compatible with the following browsers:

The ES6 features are as follows:

1. Block-level scope keyword let, constant const

2. Attribute assignment shorthand for object literals (property value shorthand)

1 varobj = {2 3    //__proto__4 5 __proto__: Theprotoobj,6 7    //shorthand for ' handler:handler '8 9 Handler,Ten  One    //Method Definitions A  - toString () { -  the    //Super calls -  -    return"D" +super.tostring (); -  +    }, -  +    //Computed (Dynamic) property names A  at[' Prop_ ' + (() = 42) ()]: 42 -  -};

3. Assignment Deconstruction

1 Let singer = {first: ' Bob ', Last: ' Dylan ' }; 2 3 // equivalent to F = "Bob", L = "Dylan" 4 5 Let [All, year, month, day] =  /^ (\d\d\d\d)-(\d\d)-(\d\d) $/.exec ("2015-10-25"); 6 7 // x = 1, y = 2

4. Function parameters-default values, parameter packaging, array expansion (default, Rest, Spread)

//DefaultfunctionFindartist (name= ' Lu ', age= ' 26 ') {   ...} //Restfunctionf (x, ... y) {//y is an Array returnX *Y.length;} F (3, "Hello",true) = = 6//Spreadfunctionf (x, Y, z) {returnX + y +Z;}//Pass each elem of array as argumentF (... [) = = 6

5. Arrow function Arrows functions

(1). Simplified code form, default return expression result.

(2). Automatic binding semantics this, which is the this when defining a function. As in the example above, the this is used in the anonymous function parameter of foreach.

6. String Templates Template Strings

var name = "Bob", time = "Today"; ' Hello ${name}, how is you ${time}? ` // return "Hello Bob, how is you today?"

7.Iterators (iterator) + for: Of

The iterator has a next method, and the call returns:

(1). Returns an element of an iteration object: {done:false, Value:elem}

(2). If the end of the iteration object is reached: {done:true, value:retval}

 for (var n of [' A ', ' B ', ' C ']) {console.log (n);} // print A, B, C

8. Generator (Generators)

9.Class

Class, with constructor, extends, super, but essentially a syntactic sugar (which has no effect on the function of the language, but is more convenient for programmers to use).

class Artist {constructor (name) { This. Name =name; } perform () {return  This. Name + "performs";       }} class Singer extends Artist {constructor (name, song) {super.constructor (name);  This. Song =Song; } perform () {returnSuper.perform () + "[" + This. Song + "]"; }} let James=NewSinger ("Etta James", "at the last"); JamesinstanceofArtist;//trueJamesinstanceofSinger;//truejames.perform ();//"Etta James performs [at last]"10. ModulesES6 's built-in module capabilities draw on Commonjs and AMD's respective benefits: (1). Features with Commonjs refinement syntax, unique export export (single exports), and cyclic dependency (cyclic dependencies). (2). Similar to AMD, supports asynchronous loading and configurable module loading. //Lib/math.jsExportfunctionsum (x, y) {returnX +y;} ExportvarPI = 3.141593; //App.jsImport* As math from "Lib/math"; alert ("2π=" +math.sum (Math.PI, Math.PI)); //Otherapp.jsImport {sum, pi} from"Lib/math"; alert ("2π=" +sum (pi, pi)); Module Loaders://Dynamic loading– ' System ' is default loaderSystem.import (' Lib/math '). Then (function(m) {alert ("2π=" +m.sum (M.pi, M.pi);}); //Directly Manipulate module CacheSystem.get (' jquery '); System.set (' jquery ', Module ({$: $}));//Warning:not Yet finalized

11.Map + Set + weakmap + WeakSet

The four collection types, Weakmap, and weakset as property keys, will be reclaimed if no other variables are referencing them.

//setsvars =NewSet (); S.add ("Hello"). Add ("Goodbye"). Add ("Hello"); S.size= = 2; S.has ("Hello") = = =true; //Mapsvarm =NewMap (); M.set ("Hello", 42); M.set (s),34); M.get (s)= = 34; //WeakmapvarWM =NewWeakmap (); Wm.set (S, {extra:42}); Wm.size===undefined//Weak SetsvarWS =NewWeakSet (); Ws.add ({data:42});//Because The added object has no other references, it is not being held in the set

12.Math + number + String + Array + Object APIs

Some of the new APIs

Number.EPSILONNumber.isInteger (Infinity)//falseNumber.isnan ("NaN")//falseMath.acosh (3)//1.762747174039086Math.hypot (3, 4)//5Math.imul (Math.pow (2, +)-1, Math.pow (2, 32)-2)//2"ABCDE". Includes ("CD")//true"ABC". Repeat (3)//"ABCABCABC"Array.from (Document.queryselectorall (‘*‘))//Returns a real ArrayArray.of (1, 2, 3)//Similar to New Array (...), but without special one-arg behavior [0, 0, 0].fill (7, 1)//[0,7,7][1, 2, 3].find (x = x = = 3)//3[1, 2, 3].findindex (x = x = = 2)//1[1, 2, 3, 4, 5].copywithin (3, 0)//[1, 2, 3, 1, 2]["A", "B", "C"].entries ()//iterator [0, "a"], [1, "B"], [2, "C"]["A", "B", "C"].keys ()//iterator 0, 1, 2["A", "B", "C"].values ()//iterator "A", "B", "C"Object.assign (point, {origin:NewPoint (0,0)})

13.Proxies

Use the proxy to listen for an object's actions, and then do something accordingly.

var target = {}; var handler =function  (receiver, name) {   return ' Hello, ${name}!   varnew= = ' Hello, world! ';

Actions to listen to: GET, set, has, DeleteProperty, apply, construct, Getownpropertydescriptor, DefineProperty, getprototypeof, Setprototypeof, enumerate, Ownkeys, Preventextensions, isextensible.

14.Symbols

Symbol is a basic type. The symbol is generated by calling the symbol function, which receives an optional name parameter, and the symbol returned by the function is unique.

var key = Symbol ("key"); var key2 = Symbol ("key"= = Key2  //false

15.Promises

Promises is an object that handles asynchronous operations and uses a Promise object to organize the code in a chained way, making the code more intuitive (like jquery's deferred object).

functionfakeajax (URL) {return NewPromise (function(Resolve, reject) {//settimeouts is for effect, typically we would handle XHR   if(!URL) {     returnSetTimeout (Reject, 1000); }   returnSetTimeout (Resolve, 1000); });} //no URL, Promise rejectedFakeajax (). Then (function() {Console.log (' Success ');},function() {Console.log (' Fail ');});

Summarize

For ES6, in some ways is not repeating the ES4 of the mistakes, become complex, or perhaps a few years later, everyone's acceptance of the ability to become stronger, think it should be. I think it is good, because they are backwards compatible, even if the complex grammar will not be used, but also in their own familiar way, the provision of grammatical sugar is quite practical.

Original: http://www.cnblogs.com/lovesong/p/4908871.html?utm_source=caibaojian.com

On JavaScript, ES5, ES6