JS学习之ES6

沧桑肥肥 2016-11-30 17:51

1.箭头函数：

两种写法：1）表达式 2）函数体

表达式：

1) let fn=p=>p

2) let fn=(n,m)=>n+m

3) let fn=()=>'我是没有参数的'

函数体

let fn=(n,m)=>{

var total=n+m;

return total;

}

2.定义一个类及类的继承

1）通过class创建类

2）通过constructor创建构造函数

3）函数名(){//公有属性和方法

}

4）static 函数名(){//静态的属性和方法 给类上添加的私有的属性和方法；

}

5）class 子类 extends 父类{//子类继承父类

constructor(name,age,color){

super(name,age);//必须得写；

}

}

3.增强的对象字面量

1)写法简化 2）原型继承：类似于“类”

4.模板字符串

var a='zhufeng';

var b=8;

var str=a+'的年龄是'+b+'岁了';

var str2=`${a}的年龄是${b}岁了`;

5.结构赋值

ES6

环境搭建

• 创建.gitignore 和 readme.md文件：touch .gitignore README.md

• 初始化package.json文件

• npm install babel-cli babel-preset-es2015 –save-dev

• 在package.json的scripts中配置：”dev”:”babel src -d dist -w”

• 创建.babelrc文件：touch .babelrc; 在里面配置：

{

"presets":["es2015"]

}

基本项目目录结构的说明

src es6源代码

dist es6->es5可运行代码

index.html 加载dist目录下的代码，测试

package.json

如何开发

npm run dev

箭头函数

• 箭头函数 使用=>对函数定义的简写。支持两种写法：表达式和函数体

  • 表达式

    let fn3=p=>p

    中间的p代表参数，箭头后面的p，代表返回值；

    let fn3=()=>'无参数输入的箭头函数'

    let fn3=(a,b)=>a+b; 同上;

  • 函数体(显式写法)

    let fn3=(a,b)=>{

    var m=a+b;

    return m;

    }

• 注意：箭头函数体中this : 共用父级作用域的关键字this；

定义一个类及类的继承

• 创建类，添加公有方法和静态方法；

class Father{ //用class创建一个类

construcotr(name,age){//用constructor创建构造函数

this.name=name;

this.age=age;

}

getMessage(){//添加公有方法

console.log(this.name+'的年龄是'+this.age+'岁了')

}

static like(){ //静态方法

console.log('我是静态方法')

}

}

• 构造函数的继承

class Sun extends Father{//子类继承父类

constructor(name,age,color){

super(name,age);//必须写；

this.color=color;

}

getColor(){

console.log(this.name+'喜欢的颜色是：'+this.color);

}

}

增强的对象字面量

优点：1）写法简化 2）原型继承–类似于“类”；

var obj={data:123};

var a=1;

var b='2';

var fn=(n,m)=>console.log(n+m);

var objOther={__proto__:obj,a,b,fn}

模板字符串

var name='tangtang';

var age=2;

var str=`${name}已经${age}岁了`；

注意：用的是``(键盘左上角1旁边的)而不是普通的单引号‘’;

解构赋值

var obj={a:1,b:'2',fn(){console.log('我是函数')}};

var {a,b,fn}=obj;//这样就能拿到a,b,fn任何一个属性的值；

var {Alert,ListView,Text}=reuqire('reactNative');//同上；

默认参数，任意参数，扩展运算符

• 默认参数-减少代码逻辑：function(a='tangtang',b=123){}

• 任意参数-不依赖arguments解决常见问：function(a,...keys)

• 扩展运算符:

var ary=[1,23,21];

var newAry=[...ary,1000,10000];

Math.max(...ary);

let和const

• 新增块级作用域，用let；

• const是常量，不能重复赋值；

• 都没有预解释；