Glance at ES6

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 undefinedprintName('George', undefined, 'Waters'); // George Roger WatersprintName('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);     // trueconsole.log(printer instanceof Object);          // trueconsole.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 modulefunction subtract(num1, num2) {    return num1 - num2;}// define a function...function multiply(num1, num2) {    return num1 * num2;}// ...and then export it laterexport { 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); //Johnconsole.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}

本来一开始想写一个概览，但是写着写着就觉得这样的半壶水好没有意思。所以这篇文章，就此打住，之后还是针对每一点都具体地来写写吧。

关键字：JavaScript

版权声明

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！