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 = '';
        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）函数
 
    ()=>
    v=>v+
    (a,b)=>a+b
    ()=>{
        alert("foo");
    }
    e=>{
        if(e==){
            return ;
        }
        return /e;
    }
 
- 函数参数默认值
    function foo(height=,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] = [,];
        console.log(a); // 1
 
        //如果没有从数组中获取到值，也可以为变量设置一个默认值
        var a,b
        [a=,b=] = [];
        console.log(a); //
        console.log(b); //7
 
        //通过解构赋值可以方便的交换两个变量的值
        var a=;
        var b=;
 
        [a,b] = [b,a];
        console.log(a); //
        console.log(b); //
    - 获取对象中的值
        const student ={
            name : 'Ming',
            age :'',
            city : 'shanghai',
        };
 
        const{name,age,city} = student;
        console.log(name); //'Ming'
        console.log(age); //'18'
        console.log(city); //'shanghai'
 
- 延展操作符（Spread operator）
 
    - 函数调用
        myFunction(...iterableObj);
    - 数组构造或字符串
        [...iterableObj,'',...'hello',];
    - 构造对象时，进行克隆或者属性拷贝
        let objClone ={...obj};
 
    Example
        在函数调用时使用
            function sum(x,y,z){
                return x+y+z;
            }
            const numbers = [,,];
            //不使用延展操作
            console.log(sum.apply(null,numbers));
            //使用
            console.log(sum(...numbers)); //
        构造数组
            const students = ['a','b'];
            const persons = ['c',...students,'d','e'];
            console.log(persons) //['a','b','c','d','e']
        数组拷贝
            var arr = [,,]
            var arr2 = [...arr]   //等同于arr.slice()
            arr2.push();
            console.log(arr2) //[1,2,3,4]
 
            - 展开语法和object.assign()行为一致，执行的都是浅拷贝（只遍历一层）
                - 连接多个数组
                    var arr1 = [,,];
                    var arr2 = [,,];
                    var arr3 = [...arr1,...arr2]; //等同于 var arr4 = arr1.concat(arr2);
 
        #es2018中增加了对象的支持
            var obj1 = {foo:'ac',x:};
            var obj2 = {foo:'ad',y:};
 
            var cloneobj = {...obj1};  // {foo:'ac',x:42}
            var mergeobj = {...obj1,...obj2};  // {{foo:'ad',x:42,y:43}}
 
        在React nativex中：
            - 使用
                <CustomComponent name='Jane' age={} />
                等同于使用了...之后的，如下
                const params ={
                    name:'Jine',
                    age:
                }
                <CustomComponent {...params} />
 
            - 配合解构赋值避免传入一些不需要的参数
                var params ={
                    name:'',
                    title:'',
                    type:'aaa'
                }
                #不想传type，其他需要的放other里
                var {type,...other} =params;
                <CustomComponent type='normal' number={}{...other} />
                    等同于
                <CustomComponent type='normal' number={} name='' title='' />
 
- 对象属性简写
    - 在es6中允许设置一个对象的属性的时候不指定属性名
        - 不使用es6
            const name='xx',age='',city='shang';
            const student={
                name:name,
                age:age,
                city:city
            };
            console.log(student); //{name:'xx',age:'12',city:'shang'}
        - 使用es6
            const name='xx',age='',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’
                },)
            },);
    - 使用es6
        var waitSecond = new Pormise(function(resolve,reject)
        {
            setTimeout(resolve,);
        });    
 
        waitSecond
            .then(function(){
                console.log("hello"); //1s后输出“hello”
                return waitSecond;
            })
            .then(function(){
                console.log("hi"); //2s后输出“hi”
                return waitSecond;
            });
        上面的代码使用两个then来进行异步编程串行化，避免了回调地狱

------from muke