ES6 环境配置
关于es6的详细特性可以看 http://es6.ruanyifeng.com/，这里仅仅是个人笔记～～
Babel 转码器
Babel 是一个广泛使用的 ES6 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。这意味着，你可以用 ES6 的方式编写程序，又不用担心现有环境是否支持。下面是一个例子。
// 转码前
input.map(item => item + 1);
// 转码后
input.map(function (item) {
return item + 1;
});
上面的原始代码用了箭头函数，Babel 将其转为普通函数，就能在不支持箭头函数的 JavaScript 环境执行了。
配置.babelrc
Babel 的配置文件是.babelrc，存放在项目的根目录下。使用 Babel 的第一步，就是配置这个文件。
{
"presets": [],
"plugins": []
}
presets字段设定转码规则，官方提供以下的规则集，你可以根据需要安装。
# 最新转码规则
$ npm install --save-dev babel-preset-latest
# react 转码规则
$ npm install --save-dev babel-preset-react
# 不同阶段语法提案的转码规则（共有4个阶段），选装一个
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3
然后，将这些规则加入.babelrc。
{
"presets": [
"latest",
"react",
"stage-2"
],
"plugins": []
}
命令行转码babel-cli
Babel 提供babel-cli工具，用于命令行转码。
它的安装命令如下。
npm install --global babel-cli
基本用法如下。
# 转码结果输出到标准输出
$ babel example.js
# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
$ babel example.js --out-file compiled.js
# 或者
$ babel example.js -o compiled.js
# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
$ babel src --out-dir lib
# 或者
$ babel src -d lib
# -s 参数生成source map文件
$ babel src -d lib -s
编程风格
let const
let
if(true) {
var a = 5;
}
console.log(a);
上面的结果是5，是因为es5中还没有块作用域。
if(true) {
let a = 5;
}
console.log(a);
上面的代码会报错：Uncaught ReferenceError: a is not defined，因为let引入了块级作用域。
const
- const定义的常量，不可变
- const比较适合函数式编程
- 本质的区别，编译器内部的处理机制不同，对const做了相应优化。
解构
function test(){
return {
a:1,
b:2
}
}
const {a,b} = test();
console.log(b);
上面的结果为2, {a,b}的顺序是可以调整的，但是不可以改变名字。
模版字符串
传统的 JavaScript 语言，输出模板通常是这样写的。
$('#result').append(
'There are <b>' + basket.count + '</b> ' +
'items in your basket, ' +
'<em>' + basket.onSale +
'</em> are on sale!'
);
上面这种写法相当繁琐不方便，ES6 引入了模板字符串解决这个问题。
$('#result').append(`
There are <b>${basket.count}</b> items
in your basket, <em>${basket.onSale}</em>
are on sale!
`);
下面也是一些有趣的地方
const d = "hello";
const e = "lemon";
const f = `say ${d} ${e}fe`;
console.log(f.startsWith('say'));
console.log(f.includes('say'));
function test(str, ...values){
console.log(values);
}
function test2(str){
console.log(str);
}
test`say ${d} ${e}fe` // ["hello", "lemon"]
test2`say ${d} ${e}fe` // ["say ", " ", "fe", raw: Array(3)]
数组
Array.from()
const str = 'lemon';
const res = Array.from(str);
console.log(res) // (5) ["l", "e", "m", "o", "n"]
数组扩展（...）
const t = "lemon";
const arr = [1,2,3,...t];
console.log(arr) // [1, 2, 3, "l", "e", "m", "o", "n"]
对象
const t = "lemon";
const obj = {
[t+1]:1,
t:t,
q:function(){
console.log('lemon')
}
}
console.log(obj)
上面的代码可以写成
const t = "lemon";
const obj = {
[t+1]:1,
t,
q(){
console.log('lemon')
}
}
console.log(obj); // {lemon1: 1, t: "lemon", q: ƒ}
obj.q()
对象的建议写法：
const a = {a:null};
a.x = 3
对象的一些新方法：
const eat = {
getEat(){
return 'eat';
}
}
const drink = {
getDrink(){
return 'water';
}
}
let sunday = Object.create(eat);
console.log(sunday.getEat()) // eat
console.log(Object.getPrototypeOf(sunday))
Object.setPrototypeOf(sunday,drink)
console.log(sunday.getDrink()) // water
const drink = {
getDrink(){
return 'water';
}
}
let sunday = {
__proto__ : drink,
getDrink(){
return super.getDrink() + 'coffee';
}
}
console.log(sunday.getDrink()) // watercoffee
函数
fn.name
const fn = function lemon(){
}
console.log(fn.name) //lemon
箭头函数
const res = [1,2,3].map(function(index) {
return index * 3;
});
console.log(res) // [3, 6, 9]
上面的代码我们使用箭头函数来改造一下：
const res = [1,2,3].map(index => index * 4);
console.log(res)
对this的影响
const s = {
a: 40,
p: function(){
const q = {
a:50,
test:function(){
console.log(this.a)
}
}
q.test()
}
}
s.p() // 50
使用箭头函数改写：
const s = {
a: 40,
p:()=>{
const q = {
a:50,
test:() => {
console.log(this.a)
}
}
q.test()
}
}
s.p() // 40
上面比较复杂，再看看这个：
window.a = 50;
const s = {
a:40,
p:() => {
console.log(this.a)
}
}
s.p() // 50
函数传参
function test(...res){
console.log(res)
}
test(1,2,32,4) // [1, 2, 32, 4]
网友评论