ES 6テクニック操作

ES 6はこれで十分です

let、const 1.1 varに存在する問題var有効ドメイン問題(グローバル役割ドメインを汚染する)varは、varが変数を上げることを繰り返し宣言することができます.事前解釈varは定数1.2 letを定義できません.const特性let、constはletを繰り返し宣言できません.constはグローバル役割ドメインにletを宣言しません.constは変数constを事前に解釈しない定数宣言(一般定数名は大文字)

1.3 let、constの役割ドメインのプレゼンテーション

//1.    
//var
var a = 5;
console.log(window.a); //5

//let、const
let a = 5;
console.log(window.a); //undefined
//     ，let   a       ？    （：

//2.      
//var 
var a = 5;
var a = 6;

//let、const
let a = 5;
let a = 6; //Identifier 'a' has already been declared       

//3.    
//var
console.log(a); //undefined      var a;
var a = 5;

//let const
console.log(a)//Uncaught ReferenceError: a is not defined     ，     
let a = 5;

//4.   
//var
var a = 5;
a = 6;

//const
const a = 5;
a = 6;//Uncaught TypeError: Assignment to constant variable.     

2.解体について
解構はes 6の新しい特性であり,配列オブジェクトの内容を直接解析することができる.

//1.    
let [a1,a2,a3] = [1,2,3]; //a1 = 1; a2 = 2; a3 = 3;

//2.    
let {name,age} = {name:'meteor',age:8}; //name = 'meteor',age = 8;
//let {name:n} = {name:'meteor',age:8};//n = 'meteor'    “：”        

//3.    
let [{age}] = [{age:8,name:'xx'},'  ',[1,2,3]]; //age = 8         

//4.    
let {age=5} = {age:8,name:'xx'}; //age=8     age   age=5
//          
//  
function(){var a = a || 5}
//  
function(a=5){}

3.文字列
Es 6には「`」反引用符が入り、反引用符には${}がテンプレート文字列を処理する.
3.1反引用符より人間的な文字列の結合

let name = 'xx';
let age = 9;
let str = `${name}${age}  `;
console.log(str); //xx    

正規+evalを使用した単純なシミュレーション

let name = 'xx';
let age = 9;
let str = `${name}${age}  `;
str = str.replace(/\$\{([^}]+)\}/g, function ($1) {
    return eval(arguments[1]);
})
console.log(str); //xx    

ラベル付きテンプレート文字

//        ，                 
//             
//              
let name = 'xx';
let age = 9;
function tag(strArr, ...args) {
    var str = '';
    for (let i = 0; i < args.length; i++) {
        str += strArr[i] + args[i]
    }
    console.log(strArr,args);
    //[ '', '  ', '  ' ]   [ 'xx', 9 ]
    //
    str += strArr[strArr.length - 1];
    return str;
}
let str = tag`${name}  ${age}  `;
console.log(str);

义齿

//               
let str = 'woaini';
str.includes('ai'); //true

endsWith、startsWithメソッド

//                   
var a = '1AB2345CD';
console.log(a.startsWith('1A')); //true
a.endsWith('cD') //false

4.関数
4.1関数パラメータ付与可能、解体可能

function({a=5}){}

4.2矢印関数パラメータが1つしかない場合は、カッコを省略してreturnを書かない場合は、カッコを書かなくてもarguments変数がなければthisの指向を変更しません.

//  
let sum = (a,b)=>a+b;

配列5.1配列の新しい方法

Array.from(); //         
Array.of(); //    
Array.fill();//    
Array.reduce();//               
Array.filter();//    
Array.find();//     
Array.includes();//         

5.2 Array.from()

//Array.from();
let arr = Array.from({'0':1,'1':2,length:2});
console.log(arr);//[1,2]

5.3 Array.of()

Array.of(2,3); //[2,3]

5.4 Array.reduce()

[1, 2, 3, 4, 5].reduce((prev, next, index, current) => {
    //prev   reduce       ，prev      ；  prev              
    //next   reduce       ，next         ；  next              
    //index        1  
    //current    
    return prev + next;
})
//reduce      
Array.prototype.myReduce = function (cb, pre) {
    let prev = pre || this[0];
    for (var i = pre ? 0 : 1; i < this.length; i++) {
        prev = cb(prev, this[i], i, this);
    }
    return prev;
}

5.3 Array.filter();

let result = [1,2,3,4,5].filter(function(item){
    return item>3;
})
console.log(result);//[4,5]
//filter    
Array.prototype.myFilter = function(cb){
    var arr = [];
    for(var i=0; i

6.対象
6.1 keyとvalueが等しい場合は簡潔に書くことができる

let name = 'xx';
let obj = {name};

7.Classクラス
Class定義クラスextends実装継承サポート静的メソッドconstructor構築メソッド

class Parent{
    constructor(name){
        this.name = name;
    }
    getName(){
        return this.name;
    }
    static fn(){
        return 9;
    }
}
class Child extends Parent{
    constructor(name,age){
        super(name);//          super
        this.age = age;
    }
}
let child = new Child('xingxing',9);
console.log(child.getName());//xingxing
console.log(child.name);//xingxing
console.log( Child.fn() );//9