ES6 learning ---- let, const, destructuring assignment, the new string, the string template, Symbol type, Proxy, Set

This study notes es6 comes from the serious cousin table, I encountered the most transparent lectures, English pronunciation best to listen to the teacher, want to go to lectures here with it  https://biaoyansu.com/i/hzhj1206

 

ES6 is JS6, JS sixth edition, ES can be understood as a standard, JS can be understood as the realization of a standard.

ES6 major browsers are now fully supported, ES6 powerful, precise and concise. Compatibility issues can be resolved with some tools, the es6 converted into es5, write es6 the development, production run es5.

1 let command

1.1 Scope

and let a var function but different scopes,

var as global variables, and local variables,

let met as long as a block of code, even for a domain,

Example:

if(1){
    let b=2;
    console.log("b：",b);
}
console.log("b：",b);

 

let used for general statement,

Example:

for(var i=0;i<5;i++){
    console.log(i);
}
console.log("循环外的i:"+i);

 

In fact, here i do not need, and this is a drawback with the var defined.

 

If you change let:

for(let i=0;i<5;i++){

         console.log(i);

}

console.log ( "outer loop i:" + i);

 

Which is more secure.

 

1.2 es5 variables upgrade issues

Example 1:

Write only one console.log (a);

  

If a defined below,

console.log(a);

There;

 

 

Example 2:

var a=1;
function fun(){
    if(false){
        var a=2;
    }
    console.log(a);
}
fun();

 

es5 variables upgrade is to prevent some errors occurred, to accommodate the developers. But this feature is in the actual development adversely, and we need to be more rigorous code, so let change with it.

console.log(a);

let a;

 

2 const command

const is constant, constant mean,

1) during program execution, the constant is not being changed,

2) must be assigned at the time of declaration, otherwise it will error,

3) the same scope and let, the code block,

4) can be assigned not only simple values, but also that an object

 

So the question is, if a constant point to an object, then the value of this object changes, do that then?

Example:

let user={
    name:'你的名字',
    age:18
};            
const User=user;            
console.log(user);
user.age=19;
console.log(user);

 

Conclusion: If the value of the constant is an object, the object itself can be changed, change is a constant pointer to an object.

 

Deconstruction variable assignment 3

3.1 Array

1) The most simple assignment:

var A =. 1, B = 2, C =. 3; can be written as var [a, b, c] = [1,2,3];

 

2) structure may be more complex:

There [a, [b, c]] = [1, [2.3]];

 

3) You can also danced assignment:

var [a,,c]=[1,2,3];
console.log("a:"+a);
console.log("c:"+c);
console.log("b:"+b);

 

4) The first value is assigned to a, all the rest to c, ... can be used to write:

var [a,...c]=[1,2,3];
console.log("a:"+a);
console.log("c:"+c);

 

 

 

5) You can also specify a default value:

var [a,b,c="default",d="default"]=[1,2,3];
console.log("a:",a);
console.log("b:",b);
console.log("c:",c);
console.log("d:",d);

 

 

6) Number of different sides of the equal sign does not matter

var [a,b,c]=[1,2];
console.log("a:",a);
console.log("b:",b);
console.log("c:",c);

 

 

With deconstruction assignment, simple, clear, strong,

Only a few simple symbols, put the function before it needs to complete the function is complete.

 

3.2 Object

1) Example 1:

var obj={
    a:1,
    b:2
}
let {a,b}=obj;
console.log("a:",a);
console.log("b:",b);

 

 

2) Example 2:

var obj={
    a:1,
    b:2
}
let {c,b}=obj;
console.log("c:",c);
console.log("b:",b);

 

To the same name, but not when there is no error, it is undefined

 

3) Example 3: Change Name

var obj={
    a:1,
    b:2
}
let {a:A,b}=obj;
console.log("A:",A);
console.log("b:",b);
console.log("a:",a);

 

 

Here a positioning exists only as a front let {a, b} = obj; is let {a: a, b: b} = obj; but did not write omitted.

 

4) Note that this wording is not acceptable:

  

 

Braces can not appear in the front, it is parsed into code blocks.

You can add a small parenthesis on the line, indicating that a statement:

var obj={
    a:1,
    b:2
}
let a;
({a,b}=obj);
console.log("a:",a);
console.log("b:",b);

 

 

5) a slightly more complex deconstruction:

var obj={
    arr:[
        "abc",
        {
            a:1
        }
    ]
}
let {arr:[str,{a}]}=obj;
console.log("str:",str);
console.log("a:",a);

 

 

6) specify default values: l

let {a=1,b=2}={a:10};
console.log("a:",a);
console.log("b:",b);

 

let {a:A=1,b=2}={a:10};
console.log("A:",A);
console.log("b:",b);

 

7) Real project application: processing data returned by the server

let res={
    status:200,
    id:12,
    data:[
        {
            name:"龙龙"
        },
        {
            name:"巍巍"
        }
    ]
}

let {status,id,data}=res;
if(status==200){
    console.log(data);
}

 

 

8) not only deconstructed data, the method may further deconstructed:

let {floor,pow}=Math;
let a=1.9;
console.log("floor(a):",floor(a));
console.log("pow(2,3):",pow(2,3));

 

 

Deconstruction assignment object is simple and powerful.

 

3.3 Other

1) length of string required for example:

var len="abc".length;
console.log(len);

By way of deconstruction can be directly written as:

var {length}="abc";
console.log("length:",length);

Written grammar is very simple.

 

2) string deconstruction

let [a,b,c]="abc";
console.log(a,b,c);

 

 

3) may be a function of parameter passing to deconstruct

Conventional writing:

 

 

Deconstruction writing:

var arr=[1,2];
function test([a,b]){
    console.log("a:",a);
    console.log("b:",b);
}
test(arr);

 

 

There is an array of pass malpractice, must follow the order, you can pass objects,

var obj={    
    b:2,
    a:1
};

function test({a,b}){
    console.log("a:",a);
    console.log("b:",b);
}
test(obj);

 

 

You can also specify a default value:

var obj={    
    b:2    
};

function test({a=10,b}){
    console.log("a:",a);
    console.log("b:",b);
}
test(obj);

 

This method greatly simplifies the code, and more accessible, easier to maintain

 

4 new string method 

1) Test whether there is another character string in a string

prior to:

console.log("abc".indexOf("a")!==-1);

 

new method:

console.log("abc".includes("a"));

 

Code is more concise and easier to read

 

2) startsWith is not beginning with a string, endsWith is not the end to a string

console.log("abc".startsWith("a"));

 

console.log("abc".endsWith("ab"));

 

 

3) repeat to repeat a string parameter is the number of repetitions

console.log('abc '.repeat(3));

 

 

5 template string

es6 introduces a new concept --- template string string

Template, can be understood as a fill-in, then the data is "empty." Only templates and data together, makes sense. A template is repeated to find a place for regular-coded, dynamic local data through dynamic loading.

 

Can be used in es6 back quotes `` backtick which can break lines, so the format can be written like a html, you can also go directly to the change in writing, grammar is $ {variable name}.

Example:

let title="这是一个标题";

var tpl_es5='<div>'+
    '<span>'+title+'</span>'+
'</div>';

let tpl_es6=`
    <div>
        <span>${title}</span>
    </div>
`;
console.log("tpl_es5:",tpl_es5);
console.log("tpl_es6:",tpl_es6);

 

 

You can also nest the template in the template

Example:

let title = "This is a title" ; 
the let tpl_2 = `
     <div> 
        <span> $ {title + `
             <EM> $ {1234} nested </ EM> 
        `} </ span> 
    </ div> `; 
console.log ( "tpl_2:", tpl_2);

 

 

6 Symbol type

Symbol is a new data type es6 introduced. Symbol has a characteristic, every time you create a Symbol, its value is not the same, the specific value is the number without care.

// Create a Symbol

let a=Symbol();

Can pass a parameter used to describe the creation of Symbol, the description for the value of this Symbol is no effect, the pass does not pass, what pass, it does not matter.

Symbol biggest role is as the name attribute of an object, the object's properties to prevent being overwritten.

For temporary and locally change the properties of an object and the object does not change the original value of the property.

 

7 Proxy

Proxy means a proxy for operating an object on the linguistic level,

Creating a Proxy

There are two arguments, the first is to the object passed, the second is the configuration items.

There are configuration items in the get method, the parameters are: objects, methods name

Example:

var user=new Proxy({},{
    get:function(obj,prop){
        if(prop=='full_name'){
            return obj.fname+' '+obj.lname;
        }        
    }    
});

user.fname='姓';
user.lname='名字';

console.log(user.full_name);
console.log(user.full_name2);

 

 

Compare es5 wording:

var user={
    fname:'名字',
    lname:'姓',
    full_name:function(){
        return this.lname+' '+this.fname;
    }    
}    
console.log(user.full_name());    
console.log(user.full_name);    

 

 

Defined as Proxy, you do not have to write another method, you can use prop write branch, you will be able to realize the different functions.

get method as a filter side, add a layer value of an object in the process.

 

set methods: Some values ​​may be set for different attributes.

 

For more detailed usage, I found Ruan Yifeng great God wrote:

http://es6.ruanyifeng.com/?search=Proxy&x=4&y=8#docs/proxy

 

8 Set

Es6 new data structure introduced, and an array of similar, except that the values ​​are all unique, can not be duplicated, if the incoming repeated, taking only one other lost.

Example:

var s=new Set([1,2,3,3]);
console.log("s:",s);

 

 

Common attributes:

size, length

 

Common methods:

add (), add

delete (), delete

has (), to check whether it has a value

clear (), Clear

 

Example:

// Create             
var S = new new the Set ([1,2,3,3 ]); 
the console.log ( "S:" , S);
 // length of 
the console.log ( "s.size:" , s.size) ;
 // add 
s.add (. 4 ); 
the console.log ( "S:" , S);
 // delete the 
S. delete (2 ); 
the console.log ( "S:" , S);
 // Analyzing 
console. log ( "s.has (. 5):", s.has (. 5 ));
 // Clear 
s.clear (); 
the console.log ( "S:", S);