ES6的一些知識學習

1、基礎

ES6
- 類：
    class A{
        constructor(name,color){
            this.name = name;
            this.color = color;
        }
        
        toString(){
            console.log('name:'+this.name+'color:'+this.color);
        }
    }

    let dog = new A('dog','white');
    dog.toString();
    #一些變量判斷方法
    console.log(doga.hasOwnProperty('name'))
    console.log(doga.__proto__.hasOwnProperty('toString'))
    
    - 繼承

- 導入、導出
    導出變量
        export var name = 'xxxxxx'
        
        //test.js
        var name = 'ssds';
        var age = '21';
        export{name,age};
        
    導出函數
        //myModule.js
        export function myModule(args) {
            
            return args;
        }
    導入
        import {myModule} from 'myModule'; //main.js
        import {name,age} from 'xxx.js'; //test.js
        //一條import語句能夠同時導入默認函數和其餘變量
        import defaultMethod, {otherMethod} from 'xx.js';

-箭頭（Arrow）函數

    ()=>1
    v=>v+1
    (a,b)=>a+b
    ()=>{
        alert("foo");
    }
    e=>{
        if(e==0){
            return 0;
        }
        return 100/e;
    }

- 函數參數默認值
    function foo(height=50,color='red'){
        // .....
    }

- 模板字符串
    不使用以前
        var name = 'your name is' + first + ' ' +last + '.'
    使用模板字符串
        var name = `Your name is ${first} ${last}`
        #${}完成字符串的拼接，變量放於大括號之中

-解構賦值
    - 獲取數組中的值
        #從數組中獲取值並賦值到變量中，變量的順序域數組中的對象順序對應
        var foo = ['one','two','three','four'];
        var [one,two,three] = foo;
        console.log(two); //'two'
        
        //若是你想忽略某些值，能夠以下
        var [first, , ,last] = foo;
        console.log(last); // 'four'
        
        //也能夠先申明變量
        var a,b; 
        [a,b] = [1,2];
        console.log(a); // 1
        
        //若是沒有從數組中獲取到值，也能夠爲變量設置一個默認值
        var a,b
        [a=5,b=7] = [1];
        console.log(a); //1
        console.log(b); //7
        
        //經過解構賦值能夠方便的交換兩個變量的值
        var a=1;
        var b=2;
        
        [a,b] = [b,a];
        console.log(a); // 2
        console.log(b); //1
    - 獲取對象中的值
        const student ={
            name : 'Ming',
            age :'18',
            city : 'shanghai',
        };
        
        const{name,age,city} = student;
        console.log(name); //'Ming'
        console.log(age); //'18'
        console.log(city); //'shanghai'

- 延展操做符（Spread operator）
    
    - 函數調用
        myFunction(...iterableObj);
    - 數組構造或字符串
        [...iterableObj,'4',...'hello',6];
    - 構造對象時，進行克隆或者屬性拷貝
        let objClone ={...obj};
    
    Example
        在函數調用時使用
            function sum(x,y,z){
                return x+y+z;
            }
            const numbers = [1,2,3];
            //不使用延展操做
            console.log(sum.apply(null,numbers));
            //使用
            console.log(sum(...numbers)); //6
        構造數組
            const students = ['a','b'];
            const persons = ['c',...students,'d','e'];
            console.log(persons) //['a','b','c','d','e']
        數組拷貝
            var arr = [1,2,3]
            var arr2 = [...arr]   //等同於arr.slice()
            arr2.push(4);
            console.log(arr2) //[1,2,3,4]
            
            - 展開語法和object.assign()行爲一致，執行的都是淺拷貝（只遍歷一層）    
                - 鏈接多個數組
                    var arr1 = [0,1,2];
                    var arr2 = [3,4,5];
                    var arr3 = [...arr1,...arr2]; //等同於 var arr4 = arr1.concat(arr2);
                
        #es2018中增長了對象的支持
            var obj1 = {foo:'ac',x:42};
            var obj2 = {foo:'ad',y:43};
            
            var cloneobj = {...obj1};  // {foo:'ac',x:42}
            var mergeobj = {...obj1,...obj2};  // {{foo:'ad',x:42,y:43}}

        在React nativex中：
            - 使用
                <CustomComponent name='Jane' age={21} />
                等同於使用了...以後的，以下
                const params ={
                    name:'Jine',
                    age:21
                }
                <CustomComponent {...params} />
                
            - 配合解構賦值避免傳入一些不須要的參數
                var params ={
                    name:'123',
                    title:'456',
                    type:'aaa'
                }
                #不想傳type，其餘須要的放other裏
                var {type,...other} =params;
                <CustomComponent type='normal' number={2}{...other} />
                    等同於
                <CustomComponent type='normal' number={2} name='123' title='456' />
            
- 對象屬性簡寫
    - 在es6中容許設置一個對象的屬性的時候不指定屬性名
        - 不使用es6
            const name='xx',age='12',city='shang';
            const student={
                name:name,
                age:age,
                city:city
            };
            console.log(student); //{name:'xx',age:'12',city:'shang'}
        - 使用es6
            const name='xx',age='12',city='shang';
            const student ={
                name,
                age,
                city
            }
            console.log(student); //{name:'xx',age:'12',city:'shang'}

- Promise 異步編程的一種方案，必傳統的callback更優雅，統一了用法，原生提供了Promise對象
    - 不使用es6
        嵌套兩個setTimeout函數
            setTimeout(function(){
                console.log('hello'); //1s後輸出‘hello’
                setTimeout(function(){
                    console.log('hi'); //2s後輸出‘hi’
                },1000)
            },1000);
    - 使用es6
        var waitSecond = new Pormise(function(resolve,reject)
        {
            setTimeout(resolve,1000);
        });    
        
        waitSecond
            .then(function(){
                console.log("hello"); //1s後輸出「hello」
                return waitSecond;
            })
            .then(function(){
                console.log("hi"); //2s後輸出「hi」
                return waitSecond;
            });
        上面的代碼使用兩個then來進行異步編程串行化，避免了回調地獄
        
    
    
    
    
    
    
    
    
    
    
    
    
    
    











        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

        
        
        
        
        
        
    




        

View Code

------from muke