ES6简单入门

let

let命令用来声明块级作用域. 以前的JavaScript只有全局作用域和函数作用域, 没有块级作用域.

// 示例1:
if (1) {
    var a = "hello";
    let b = "world";
}
console.log( a ); // hello
console.log( b ); // b is not defined

// 示例2:
for (let i = 0; i < 10; i++) {
    // do something
}

console.log(i); // ReferenceError: i is not defined

// 示例3.1:
var a = [];
for (var i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
console.log( i );
console.log( a[6]() ); // 10
// 循环结束后i的值为10, a[6](), 相当于a[6](10), 所以输出10

// 示例3.2:
var a = [];
for (let i = 0; i < 10; i++) {
    a[i] = function () {
        console.log(i);
    };
}
console.log( a[6]() ); // 6
// 循环结束后, i不再能够被访问, 此时调用a[6](), 则相当于a[6](6), 输出6

不存在变量提升

// var 的情况
console.log(foo); // 输出undefined
var foo = 2;

// let 的情况
console.log(bar); // 报错ReferenceError
let bar = 2;

// 什么都不定义而直接输出
console.log(foo2); // 报错ReferenceError

报错与输出undefined大不一样, undefined是JavaScript里的值, 而报错则程序中断运行.

const

const声明一个只读的常量. 一旦声明, 常量的值就不能改变.

const PI = 3.1415;
PI // 3.1415

// 为const变量重新赋值报错
PI = 3; // TypeError: Assignment to constant variable.

// 由const变量不能在其后赋值, 所以在声明的同时必须同时赋值, 否则报错
const foo; // SyntaxError: Missing initializer in const declaration

const的变量作用域等其它特性都与let相同

箭头函数

ES6允许使用箭头(=>)定义函数. 一个箭头函数表达式的语法比一个函数表达式更短.

语法

首先箭头函数一般用来简化使用函数表达式来定义的函数, 总体理解就是箭头左边是函数的参数, 箭头

右边是函数的返回值或者函数体.

var func1 = (param1, param2, paramN) => expression; // 相当于
var func2 = function (param1, param2, paramN) { return expression };

// 注意下面的statements加了大括号
var func10 = (param1, param2, paramN) => { statements }; // 相当于
var func11 = function (param1, param2, paramN) { statements };

// Parentheses are optional when there's only one parameter name:
// 函数参数只有1个, 则参数外层的括号可省略
var func3 = (singleParam) => { statements }; // 相当于
var func4 = singleParam => { statements }    // 相当于
var func5 = function (singleParam) { statements };

// A function with no parameters should be written with a pair of parentheses.
// 函数没有参数, 参数外层的括号不可省略
var func6 = () => { statements }; // 相当于
var func7 = function () { statements };

// Parenthesize the body of function to return an object literal expression:
// 函数的返回值是1个对象, 则需要额外加一层小括号(因为原来的大括号当包围函数体的用途)
var func8 =  params => ({name: sheng});
var func9 = function (params) { return {name: sheng} };

强烈推荐这个网站http://babeljs.io/repl, 把自己写的箭头函数, 复制粘贴到该网站左边的框

里, 该网站就会自动帮你解析成ES3/5版本.

简单示例

var sayHello = () => "hello-world";
console.log( sayHello() );

Class

ES6标准的定义的class并不是推翻了已经存在JavaScript基于原型的继承方式, 新的class,

写法只是让我们看起来更清晰, 更像传统的面向对象编程.class, 实际上是1个特殊的函数.

// 传统写法
function Point(x, y) {
    this.x = x;
    this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);

// class写法
//定义类
class Point {
    constructor(x, y) {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

模板字符串

模板字符串是增强版的字符串, 使用反引号标识. 提供嵌入表达式, 插入变量, 保留换行等功能.

语法

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text` // ${} 是固定用法

用法

// 在字符串中嵌入变量
var name = "Bob", time = "today";
`Hello ${name}, how are you ${time}?`

// 多行字符串
console.log(`
    string text line 1
    string text line 2
    string text line 3
`);

console.log("\
string text line 1\
string text line 2\
string text line 3\
");

//

相关链接

Babel REPL: http://babeljs.io/repl, 该工具非常强大, 在线把ES6语法解析成其兼容版本.

本文大部分内容都参考自此书: http://es6.ruanyifeng.com/

箭头函数 - MDN