环境搭建
- 创建.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; 在里面配置:123{"presets":["es2015"]}
基本项目目录结构的说明
|
|
如何开发
|
|
箭头函数
箭头函数 使用=>对函数定义的简写。支持两种写法:表达式和函数体
表达式
1234let fn3=p=>p中间的p代表参数,箭头后面的p,代表返回值;let fn3=()=>'无参数输入的箭头函数'let fn3=(a,b)=>a+b; 同上;函数体(显式写法)
1234let fn3=(a,b)=>{var m=a+b;return m;}
注意:箭头函数体中this : 共用父级作用域的关键字this;
定义一个类及类的继承
创建类,添加公有方法和静态方法;
123456789101112class Father{ //用class创建一个类construcotr(name,age){//用constructor创建构造函数this.name=name;this.age=age;}getMessage(){//添加公有方法console.log(this.name+'的年龄是'+this.age+'岁了')}static like(){ //静态方法console.log('我是静态方法')}}构造函数的继承
123456789class Sun extends Father{//子类继承父类constructor(name,age,color){super(name,age);//必须写;this.color=color;}getColor(){console.log(this.name+'喜欢的颜色是:'+this.color);}}
增强的对象字面量
优点:1)写法简化 2)原型继承–类似于“类”;12345var obj={data:123};var a=1;var b='2';var fn=(n,m)=>console.log(n+m);var objOther={__proto__:obj,a,b,fn}
模板字符串
|
|
注意:用的是``(键盘左上角1旁边的)而不是普通的单引号‘’;
解构赋值
|
|
默认参数,任意参数,扩展运算符
- 默认参数-减少代码逻辑:function(a=’tangtang’,b=123){}
- 任意参数-不依赖arguments解决常见问:function(a,…keys)
- 扩展运算符:123var ary=[1,23,21];var newAry=[...ary,1000,10000];Math.max(...ary);
let和const
- 新增块级作用域,用let;
- const是常量,不能重复赋值;
- 都没有预解释;