一. es6编译环境搭建
1 . 初始化 npm 创建package.json文件
npm init
2. 安装webpack
cnpm install webpack -D
3. 安装babel相关包来编译es6 语法
cnpm install babel-loader babel-core babel-preset-es2015 -D
二、 写webpack.config.js配置文件,配置编译es6
1. loader相关配置
module.exports = {
entry:'./entry.js',
output:{
filename:'./bundle.js'
},
module:{
loaders:[
{
test:/\.js$/,
loader:'babel-loader',
exclude:/node_modules/
}
]
}
}
2. 创建.babelrc配置文件
{
"presets": ["es2015"]
}
三、es6的遍厉和...替代anguments
1 遍厉对象和替代anguments
{
function test3(...arg){
for(let v of arg){
console.log("rest",v);
}
}
test3(1,2,3,4,5,"a");
}
2. es6的遍厉对象,Object.entries
{
let test ={x:1,y:456};
for(let [key,value] of Object.entries(test)){
console.log([key,value]);
}
}
四、类的继承class。
补充:普通方法是实例化出来的对象,静态方法属于类,亦可以被继承。
1.类的基本定义生成实例
{
class Person{
//构造函数。
constructor(name = "laozhou"){ //默认值:laozhou
this.name = name;
}
}
let p1 = new Person("小王"); //new的时候自动执行构造函数。
console.log("构造函数和实例",p1);
}
2.继承
extends 继承
super 上一级,可以调用父类的构造函数。
{
class Father {
constructor(name="侯瑞强",sex="男") {
this.name = name;
this.sex = sex;
}
}
class Child extends Father {
constructor(name="child",sex) { //把父类的本事拿了过来。
super(name,sex); //调用父类的构造函数。super必须在第一行,否则报错。
this.age = 10;
}
}
console.log("子类覆盖父类属性的实例",new Child());
}
3.静态属性
{
class Person {
constructor(name="默认") {
this.name = name;
}
}
//静态属性的定义,是直接给类下的属性赋值,该属性就是静态属性,类名点什么直接定义
Person.type = "text"; //type就是静态属性。
console.log(Person.type);
}
五、模块化
1.导出exprot,导入import
导出
export default{
a:1,
b:2,
say(){
console.log("i can say");
}
}
导入
import Model2 from "./module2.js";
console.log(Model2);
六、 尾调用
一个函数执行,执行到最后的时候调用了另一个函数。
function go(callback){
console.log(1231313);
console.log("vvv");
callback && callback();
}
function tail(){
console.log(123131313);
}
go(tail);
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。