1: Block Scope
1.1 变量的块级作用域名
let 定义的变量拥有block的作用域
if(true){
let a = 1;
console.log(a); // 1
}
console.log(a); // Uncaught ReferenceError: a is not defined
1.2 function的块级作用域
if (true) {
// Throws a syntax error in ES5, not so in ES6
function printName() {
// ...
}
}
但是在ES6是合法的,并且拥有块级作用域:
if (true) {
console.log(typeof doSomething); // "function"
function printName() {
// ...
}
printName();
}
console.log(typeof printName); // "undefined"
2: Function接受可以设置默认值的参数, 剩余参数,以及扩展参数
2.1 给参数设置默认值
function printName(firstName, middleName='Roger', lastName){
console.log(`${firstName} ${middleName} ${lastName}`);
}
printName('George'); // George Roger undefined
printName('George', undefined, 'Waters'); // George Roger Waters
printName('George', null, 'Waters'); // George null Waters
从上面的例子可以看出来,只有当相应的参数没有传值,或者明确传入undefined
时,才会使用参数的默认值。
2.2 剩余参数(rest parameters)
function printName(name, ...keys) {
console.log(keys); // ["a", "b"]
console.log(arguments.length); // 3
}
printName('hehe', 'a', 'b');
console.log(printName.length); // 1
剩余参数的语法是三个点(...)跟着一个变量名,它代表从某个位置开始到最后的所有剩余参数,这个变量是一个数组,元素就是每一个剩余参数。
并且我们也可以看得出来,剩余参数的这种语法,对arguments.length 和function本身的length并没有影响。
3: Function的箭头函数形式:
var sum = (num1, num2) => num1 + num2;
// effectively equivalent to:
var getName = function() {
return "Nicholas";
};
上面只是一个很简单的例子,更多的内容会专门再写文章延伸。
4: 新添加的基本类型 Symbol
一切的基本类型(primitive type)有:strings, numbers, booleans, null, and undefined。ES6新添加了一个symbol。
let firstName = Symbol();
let person = {};
person[firstName] = "Nicholas";
console.log(person[firstName]); // "Nicholas"
5: ES6的面向对象新语法:Class
ES6添加了Class,可以像其他面向对象语言一样通过new一个类型来创建一个实例:
class Printer {
// equivalent of the PersonType constructor
constructor(name) {
this.name = name;
}
// equivalent of PersonType.prototype.sayName
printName() {
console.log(this.name);
}
}
let printer = new Printer("John");
printer.printName(); // "John"
console.log(printer instanceof Printer); // true
console.log(printer instanceof Object); // true
console.log(typeof Printer); // "function"
console.log(typeof Printer.prototype.printName); // "function"
6: JS模块化编程的支持 import
ES6之前如果想要对JS模块化编程,必须借助第三方库,例如require.js或者browserify.js。但是ES6却进行了原生的支持,再也不需要借用第三方库了。
首先,export
// this function is private to the module
function subtract(num1, num2) {
return num1 - num2;
}
// define a function...
function multiply(num1, num2) {
return num1 * num2;
}
// ...and then export it later
export { multiply };
以上代码定义在一个js文件里面,比方说example.js
对于想要被别人用的方法,可以export出去,同时可以不export本身的私有函数。
然后,import
然后在另外一个js文件里,我想用example.js里的mutiply方法,那么我就在我的js文件里面import就行了:
import { multiply } from "./example.js";
接下来我就可以在我的js文件里面调用multiply这个方法了,就像java一样。
7: ES6的异步编程Promise
在ES6之前,我们要利用promise来异步编程,必须借助第三方的库,比方说Promises.js,Q.js.但是现在ES6对Promise实现了原生的支持,我们也就不再需要引用第三方库了.来看一个ES6原生promise的例子:
//第一步:实例化一个Promise对象
let promiseA = new Promise(function(resolve, reject){
if(true){
resolve({name: 'nana', age: '19'});
}else{
reject({code: '222', message: 'hehe'});
}
});
let resolveF = function(student){
console.log(`name: ${student.name}`);
console.log(`age: ${student.age}`);
}
let rejectF = function(error){
console.log(error.code);
}
//第二步,调用Promise对象上的then()指定异步操作成功和失败时候的回调函数
promiseA.then(resolveF, rejectF);
第一步:通过new实例化一个Promise,它接受一个函数作为参数。这个函数有两个参数:
分别在异步操作成功和失败的时候调用,并且把异步操作的结果作为接下来的回调函数的参数
传出去。
第二步:每一个实例化好的promise对象上都有一个then(),它接受两个参数,分别对应promise成功和失败的回调函数,并且这连个回调函数以之前promise传递出的结果
作为实参。所以如代码所示,在resolveF(student
)函数里,我们拿到的student对象就是之前在promiseA里面resolve(student
)传递出来的student
对象。
8: 字符串模版(template strings)
let firstName = 'John';
let middleName = 'Winston';
let fullName = `${firstName} ${middleName} Lennon`;
console.log(fullName); //John Winston Lennon
语法很简单:
1: 把字符串模版包在一对后引号(``),注意不是单引号(‘’)里面
2: 通过${variable}对变量取值
PS: 后引号(`
)就是如下图所示的[esc
]键正下方的那个和波浪号(~
)在一起的键
9: 解构(deconstruction)
let fullName = {
firstName: 'John',
middleName: 'Winston',
lastName: 'Lennon'
};
let {firstName, lastName} = fullName;
console.log(firstName); //John
console.log(lastName); //Lennon
以上是一个对对象解构的例子。对于对象来说,它是按照与对象的key的名字一一对应的方式解构赋值的。
10: for ...of
for ...of 用来对数组或者对象进行循环,每次得到每个元素的值value,与for...in的区别的是,后者每次得到的是数组的下标index或者对象的key。
let fullName = ['John', 'Winston', 'Lennon']
for(let n of fullName) {
console.log(n); // John Winston Lennon
}
for(let n in fullName){
console.log(n); // 0 1 2
}
本来一开始想写一个概览,但是写着写着就觉得这样的半壶水
好没有意思。所以这篇文章,就此打住,之后还是针对每一点都具体地来写写吧。