ES6学习笔记
Posted 叮呤
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6学习笔记相关的知识,希望对你有一定的参考价值。
写好的es6的代码可以通过babel-cli插件转化为es5的代码
npm install babel-cli -g
babel之前是个专用的es6转化es5的工具,因为es6的代码在浏览器中的没法跑起来,但是现在babel的功能更加强大了,比如react的jsx也是通过babel来转化
的,所以现在babel可以转化多种类型的js代码,不再是专用的es6转es5的解析器了,解析工作由配置文件来实现。
.babelrc{
"presets":["es2015"],
"plugins":[]
}
touch .babelrc//创建一个配置文件.babelrc,将上述对象配置进去
因为babel是个多功能的解析器,因此想把es6转化为es5,还需要安装专门的转化es6为es5的插件babel-preset-es2015。
npm install --save-dev babel-preset-es2015
babel安装完成之后就可以用来转化了。babel es6.js -o es5.js
ES6代码的头部要引用严格模式 ‘use strict‘
1,template 模板字符串
let name = "叮呤";
let age = 26;
//es5拼接字符串
console.log(name+"年龄是"+age+"岁");
//es6拼接字符串
console.log(`$(name)年龄是$(age)岁`)
2,箭头函数
let say = name => name;
let write = (name,age) => {
var a = 5;
`${name} is ${age+a} years old`
}
//相当于es5的
let say = function(name){
return name;
}
let write = function(name,age){
var a = 5;
return `${name} is ${age+a} years old`
}
3,构造函数
在es5中没有构造函数与普通函数没有太大的区别,只用new来区分。在es6中用class表示一个真正的构造函数。
class Person{
constructor(name){
this.name = name;
this.hobbies= []
}
getName(){ console.log(this.name); }
get hobby(){
return this.hobbies
}
set hobby(hobby){
this.hobbies.push(hobby)
}
}
//用法
var p = new Person(‘叮呤‘)
p.hobby = ‘sing‘
p.hobby = ‘dance‘
console.log(p.habby())//[‘sing‘,‘dance‘]
p.getName();
class Student extends Person(){
constructor(name,stuNo){
super(name);//在子类构造函数中要先调用父类的构造函数
this.stuNo = stuNo;
this.name = name;
}
getStuNo(){
console.log(this.stuNo);
}
}
var student = new Student(‘叮呤‘,’‘18);
console.log(super.getName(),student.getName())
4,模块
在es5中,没有模块的功能,所以经常使用commonJS或者seaJs来实现。在es6中,在语言的规格上,实现了模块功能。
·export命令用于规定模块的对外接口。导出变量;导出变量为一个对象;导出函数或类(class)
·import命令用于输入其他模块提供的功能
1,其他js文件可以通过import命令加载这个模块
2,import命令接受一个对象,里面指定要从其他模块导入的变量名
3,模块的整体加载 import * as util from ‘./util‘
4,export default命令,为模块指定默认输出
5,export default对应的import语句不需要使用大括号,不使用export default对应的import语句需要使用大括号
6,一个模块只能有一个默认输出(export default)
·一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取
·如果你希望外部能读取模块内部的某个变量,就必须使用export关键字输出该变量
person.js:
var name = "张三"
var getName = function(){
console.log(name);
}
export{name,getName}
entry.js
import {name,getName} from "./person.js"
getName();
每个模块都会有一个默认导出,即export default。导入的时候默认得到默认导出的部分
person.js:
export default print(word){
console.log(word);
}
entry.js:
import Print from "./person.js"
Print("hello");//执行person中的print方法
5,迭代器Iterator
//原理: let says = say([‘hello‘,‘world‘]); console.log(says.next());//{value:‘hello‘,done:false} console.log(says.next());//{value:‘world‘,done:false} console.log(says.next());//{value:undefined,done:true} function say(words){ let i = 0; return { next(){ value:words[i], done:i++>=words.length } } }
6,生成器generator
function* say(){ yield "a";//将生成器认为一个数组,yield就相当于push yield "b"; } var says = say(); console.log(says.next()); console.log(says.next());
以上是关于ES6学习笔记的主要内容,如果未能解决你的问题,请参考以下文章