先上文档地址:ES6入门
Babel
配置Babel,首先安装Babel,再建立项目文件夹,根目录下创建.babelre文件,基础配置:
{
"presets": [
"es2015",
"react",
"stage-2"
],
"plugins": []
}
再用终端在文件夹下初始化npm,创建package.json:
npm init
然后运行:
sudo npm install babel-preset-env --save-dev
babel配置完成,现在还需要手动转换,自动转换要设置监听
转换命令:
babel ./ssa.js --out-dir ./dist
可以写入package.json
{
"name": "es6_practice",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "babel ./*.js --out-dir ./dist"
},
"author": "dawn",
"license": "ISC",
"devDependencies": {
"babel-preset-es2015": "^6.24.1"
}
}
之后运行即可完成转换
npm run build
#ES6语法
- let:块级作用域!!!没有变量提升!!!不用多BB跟C语言一毛一样
- const:常量
默认值
let [foo = true] = [];
foo // true
let [x, y = 'b'] = ['a']; // x='a', y='b'
let [x, y = 'b'] = ['a', undefined]; // x='a', y='b'
变量解构
function example() {
return [1, 2, 3];
}
let [a, b, c] = example();
// 返回一个对象
function example() {
return {
foo: 1,
bar: 2
};
}
let { foo, bar } = example();
// 参数是一组有次序的值
function f([x, y, z]) { ... }
f([1, 2, 3]);
// 参数是一组无次序的值
function f({x, y, z}) { ... }
f({z: 3, y: 2, x: 1});
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
箭头函数
// ES5
var selected = allJobs.filter(function (job) {
return job.isSelected();
});
// ES6
var selected = allJobs.filter(job => job.isSelected());
简化版的匿名函数
箭头前是参数列表,箭头后为返回值表达式.
模块化
核心关键字: export import
export 用于在独立文件中向外部抛数据
// profile.js
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;
export {firstName, lastName, year};
无法通过export直接向外部抛一个数值,应对向外抛接口
// 报错
export 1;
// 报错
var m = 1;
export m;
// 正确写法一
export var m = 1;
// 正确写法二
var m = 1;
export {m};
// 正确写法三
var n = 1;
export {n as m};
函数
函数的默认参数
function makeRequest(url, timeout = 2000, callback = function(){}){
// url必须传入
}
非原始值传参
function getVaule(){
return 5;
}
function add(first,second = getVaule()){
return first+second;
}
add(1,1) ==>2
add(1) ===>6
如果不传入第二个参数就调用getVaule()
不定参数
fuction pick(object, ...keys){
let result = Object.create(null);
for (let i=0,len = key.length; i< len;i++){
result[keys[i]] = object[keys[i]];
}
}