ES6新手使用指南

2017-01-21

表达式写法：

1
2
3

let fn0 = ()=> console.log('xxxx');
let fn = a=>a;//箭头函数
let fn1 = (a,b)=>console.log(a+b);

函数体的写法：函数体代码多了就用他呗，显示写法
1
2
3
let fn3 = ()=>{
console.log('ss');
}

实例化和继承

es5写法

     function Fn() {
         this.name = 'cat';
     }
     Fn.prototype.getX = function () {
         console.log(this.x);
      }
     var fn = new Fn();
//继承
     var s = function () {
         
      }
      s.prototype = new Fn();

es6写法

    class Fn{
        constructor(){
        this.x = 100;
        this.y = 100;
        }
    //es6中constructor外的都为公有
        getX(){
        alert(this.x);
        }
    }
    var f = new Fn(1);
//Es6中的继承，像极了java
    class s extends Fn{
        ``super()要写，因为没他不行``
        constructor(){super();this.z = 'memeda';}
        happy(){
            alert('happy');
        }
    }

对象字面量

作用1：写法简化：

//文艺青年之普通写法
    var a =1,b=2;
    var obj={
        a:a,b:b
    }
//es6写法
    let a =1,b=2;
    let obj = {a,b};

作用2：牛x之处在于es6可以方便继承啊！再原型属性中添加要继承的，这样可以直接继承。

1	let obj1 = {__proto__:obj};

模板字符串

1
2
3

//显然es6再字符串拼接时可以使用``再里面进行类似jquery的选择器进行拼接
var str = 'lisong';
var str2 = `lala,${str}`;

解构赋值，主要用于react native,作用为将复杂框架对象中需要的组件引入后付给对象.

var obj = {a:10,b:11,fn:function () {}}
var obj2 = {a:9,b:12,fn:function () {}}
var obj3 ={aa:obj,bb:obj2 };
var {aa,bb} = obj3;//解构，对象略复杂了,将obj3解构赋值给简单的对象
alert(aa.a);

默认赋值,任意赋值,扩展运算符

//默认参数
function sum(a=3,b=4) {
    console.log(a+b);//此时调用sum(),没实参，则走默认参数，弹出7
}
//参数不确定,使用...+arr，可以直接用了。
function sum(a,b,...ary) {
    console.log(...ary);
}
//扩展运算符,有点像concat
var ary = [1,2,3,4];
var ary1 = [...ary,3,3];//此时已经将ary放在了ary1里面

let const
- let:不能进行预解释，会形成块级作用域，块级作用域中的this就会变为上级作用域的this
- const:不能进行预解释，无法二次赋值
  1
  2
  3
  for(let i = 0;i<xx.length;i++){
  //此时再循环中就会形成一个块级作用域，每一次i就会单独作为作用域参数使用。
  }