ES6的一些知识学习

一、基础

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来进行异步编程串行化，避免了回调地狱
        
    
    
    
    
    
    
    
    
    
    
    
    
    
    











        
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
            
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        
        

        
        
        
        
        
        
    




        

------from muke