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