JavaScript Basics (Fourth day)

ECMASCRIPT6 expected to be officially released in June 2015

The chrome test syntax needs to be introduced into the Traceur editor Https://github.com/google/traceur-compiler

Understand the future of grammar and trends, in the next 1 years will not be used, this is only a basic understanding.

Let variable declaration

{
Let A = 10; Valid only within the code block, suitable for for,if and other method bodies
var B = 20;
}
Console.log (a); Referenceerror A is not defined
Console.log (b); 20

Const declares a constant, which, once declared, cannot be modified.

Const PI = 3.1415;

Deconstruction Assignment of variables

Es3
var a = 1;
var B = 2;
var c = 3;
Console.log (a); 1
Console.log (b); 2
Console.log (c); 3
Es6
var [x, Y, z] = [4,5,6];
Console.log (x); 4
Console.log (y); 5
Console.log (z); 6

Deconstruction assignment of an object

var {foo,bar} = {foo: ' foo ', bar: "BBB"}; Any sense of brain residue?

(1) Function 1, the value of the Exchange variable

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

(2) Function 2, return multiple values from function

function f () {return [4,5,6]}
var [x, Y, z] = f ();
Console.log (x); 4
Console.log (y); 5
Console.log (z); 6

(3) Traverse map, this is the most concise syntax I've ever seen, and I'll talk about map,for of

var map = new map ();
Map.set (' first ', ' Hello ');
Map.set (' Second ', ' World ');

for (let [key,value] of map) {
Console.log (key+ ', ' +value);
}

Extension of the string

' Female string '. Contains (string to be searched); Returns TRUE,FALSE, similar to IndexOf, with a different return value

' Female string '. Startwith (string to be searched); Returns TRUE,FALSE, whether to start with what

' Female string '. EndsWith (string to be searched); Returns the True,false, whether to end with what

' Female string '. repeat (repeats);//Returns a string, a new string, or an old string? A new string, of course.

Console.log (' x '. Repeat (3)); Xxx

The following 2 methods support 4 bytes of stored Unicode characters

' Female string '. Codepointat (character index); Returns the encoding used to process Unicode characters greater than \uffff

' Female string '. Fromcodepoint (Unicode encoding); Returns a character used to handle Unicode characters greater than \uffff

/Match String/imgu. Test (to be matched)//Unicode enabled for processing of Unicode characters greater than \uffff

/ Match string/imy. Test (to be matched)//implicit ^

/abcd/img.test (' xabcd ') = = = True

/abcd/imy.test (' xabcd ') = = = FALSE;

Template string !!! The most important!!!

Requires anti-quote "' support for multiple lines of output, support for variable embedding

' This is ' abcd ' ha ha ha ';

' He he

Ha ha

Hei Hei '

var a = ' aaa ', b= ' BBB '

' This was ${a} and ${b} '//This is AAA and BBB

Expansion of numeric values

0b111110111 = = 503; Support 2 mechanism, prefix 0b

0o767 = = 503; 8 binary, prefix 0o

Number.isfinite (); Non-numeric, return false

Number.isnan ();

Number.parseint ();

Number.parsefloat ();

Number.isinteger (); + = = true, 25.0 = = = true, 25.1 = = False

Number.trunc (); Remove Fractional parts//4.1 >> 4, 4.9 >>4, -4.1 >> -4, -4.9 >> 4;

Math adds a bunch of math algorithms

Expansion of arrays

Array.from (); Set,map, or a similar array (Array-like object) to a real array

Let PS = Document.queryselectorall (' P ');

Array.from (PS) = = >> Transfer to the group

Array.of (); Tells a set of values to convert an array,

Array.of (3,11,8); [3,11,8];

An array instance. Find (); Find the first conforming array element

An array instance. FindIndex (); Find the first index that matches a number element

[1,5,10,15].findindex (function (Value,index,arr) {
return value > 9;
}); 2

An array instance. Fill (); Fills an array with the given values

New Array (3). Fill (7); [7,7,7]

An array instance. Entries (). keys (). VALUES ()

For (Let index of [' A ', ' B '].keys ()) {
Console.log (index);
}
For (Let elem of [' A ', ' B '].values ()) {
Console.log (Elem);
}
for (let [index,elem] of [' A ', ' B '].entries ()) {
Console.log (index+ ', ' +elem);
}

Array derivation

var a1 = [1,2,3,4];
var a2 = [For (I of A1) i*2]; [2,4,6,8]

Array Listener (Add,update,delete,splice)

Array.observe (); Array.unobserve ();

Extension of the Object

Object.is (); Used to compare whether 2 values are equal

Console.log (+0 = = = 0);
Console.log (Object.is (+0,-0)); False
Console.log (nan = = = Nan);
Console.log (Object.is (Nan,nan)); True

Object.assign (Target,source1,source2,....); Assigning a source enumerable property to a target object

var target = {A:1,b:1};
var source1 = {B:2,c:2};
var source2 = {C:3};
Object.assign (TARGET,SOURCE1,SOURCE2);
Target {A:1,b:2,c:3}

Object.__proto__ is used to read the prototype object of the current object, with this property, actually no longer need to use object.create () to generate objects ? Nanyi <ecmascript6 Getting Started >61 page

Is the __proto__ stable? Welcome to Explore

Object.setprototypeof (); Set up prototype objects

function f (obj,proto) {
obj.__proto__ = Proto;
return obj;
}
var o = f ({},obj);
var o = object.setprototypeof ({},null); Same as the above effect

Object.getprototypeof (object to be taken); Get Object Prototypes

Symbol, a new primitive data type, the biggest feature is that the symbol is not equal

Proxy

var proxy = new Proxy ({name: "AAAA"},{
Get:function (target/* proxy Object */,property/* Property */) {
Return 35;
}
});
Proxy.name; 35
Proxy.time; 35

Object.observe (). Object.unobserve (); Change of listener object

Extension of the function

function Point (x=0,y=0) {//default value
This.x=x;
This.y=y;
}
var p = new Point (); {x:0,y:0}

function Add (... values) {//To get extra arguments for a function
let sum = 0;
For (var val of values) {
Sum + = val;
}
return sum;
}

function push (array,... items) {// ... Usage of
Array.push (... items);
}

var sum = (A, b) = = A+b; Arrow functions
sum (3,4); 7

[1,2,3].map (X=>X*X);

Set and map data structures

var s = new Set (); are unique, with no duplicate values
[1,2,2,2,2,2,3].map (function (Val,idx,arr) {S.add (val)});
for (var I of s) {
Console.log (i);
}//1,2,3

Add (value) Delete (value) has (value) clear () size

var m = new Map (); Restrictions on keys are not limited to strings, and objects can also be used as keys

var a = {b: ' BBB ', C: ' CCC '};
M.set (A, ' content ');

Size, set (Key,value) Get (key) has (key) Delete (key) clear () Three kinds of ergodic keys () values () entries ();

var map = new Weakmap (); Accept only objects as key names

Iterator and for of loops

The iterator Walker is a rule that has the next () method, which returns {value: ' Values of the current traverse position ', done: Boolean, indicating whether to traverse the end}

function Mkiterator (array) {
var nextindex = 0;
return {
Next:function () {
Return Nextindex < Array.Length?
{Value:array[nextindex++],done:false},
{value:undefined,done:true};
}
}
}

For the loop an object

As long as the next method is deployed, it is considered to have a iterator interface, which can traverse

Array, class arrays (arguments Dom nodelist object), Set, Map, String, Generator (internal state of the Walker)

Generator (internal state of the Walker)

The generator function is a normal function with 2 features, followed by an asterisk in the function body, which uses yield (output) to define each member of the Walker, which is a different internal state

function* Hellworldgenerator () {
Yield ' hello '; This place can be replaced by a function.
Yield ' world ';
return ' ending ';
}
var h = hellworldgenerator ();
H.next (); {value: ' Hello ', done:false};
H.next (); {value: ' World ', done:false};
H.next (); {value: ' Ending ', done:true};
H.next (); {value: ' Undefined ', done:true}; I'll call you later, like this.

Promise Object!!!! This is the best thing to play!!!! It can express asynchronous operations in a synchronous way, avoiding nested callback functions (promisejs third-party simulation libraries )

http://www.w3ctech.com/topic/656

http://liubin.github.io/promises-book/

Class and Module

Class point{
Constructor (x, y) {
this.x = x;
This.y = y;
}
ToString () {
Return ' (' +this.x+ ', ' +this.y+ ') ';
}
}
var point = new Point (2,3);
Point.tostring ()//(2,3)

Class ColorPoint extends point{
Constructor (X,y,color) {
Super (x, y); Super.constructor (x, y)
This.color=color;
}
ToString () {
return This.color+super ();
}
}

Export and Import

A.js

Export var aaa = ' AAA ';

Exprot var bbb = ' BBB ';

B.js

Import {aaa,bbb} from './a '

Console.log (aaa+ ', ' +bbb);

The ES6 syntax has not been tested with the best technical practice, and the usage is not uniform, the above code is for familiarity only.

ECMASCRIPT7 is not in sight , please list the enhancement of the hanging explosion day

Object.observe the two-way binding of objects and pages, only one of them changes, and it reacts on the other side.

multi-threading multithreading support, let JS run in multi-threaded inside (performance improvement is great)

Traits better support for the class,

Improved memory recovery mechanism/internationalization support/More data structure/typing lower-level operations closer to hardware

The future JS is probably the best scripting language on the planet, not one of them.

It has a world-sweeping UI framework (HTML+CSS) and can fit almost any screen,

It can write client Web pages, can also engage in server communication (node), can even write 3D (WebGL), even can write router plug-in (someone Xiaomi routing hang node), even can write mobile phone (Firefox OS), etc.

It has been wildly sought after by all it big companies and has not yet stopped ...

JavaScript Basics (Fourth day)