JS学习之ES6

作者 : 开心源码 本文共2038个字,预计阅读时间需要6分钟 发布时间: 2022-05-11 共59人阅读

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是常量,不可以重复赋值;

  • 都没有预解释;

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » JS学习之ES6

发表回复