ECMAScript6 特性-史莱姆的博客

ES6 简介：

ECMAScript 6 简称 ES6，是 JavaScript 语言的下一代标准，于 2015年06月正式发布。

ECMAScript与JavaScript之间的关系：

ECMAScript：

The specification defined in ECMA-262 中定义的标准，是用于创建通用目的脚本语言的。然而ECMA-262是标准的名称，它代表了脚本语言规范ECMAScript

ECMAScript提供脚本语言必须遵守的规则、细节和准则，这些才是其被视为兼容ECMAScript的判断标准。

JavaScript：

一种通用目的的脚本语言，遵循 ECMAScript 规范。通过阅读 ECMAScript 规范，你将学会如何创建脚本语言。通过阅读 JavaScript 文档，你将学习如何使用脚本语言。

之间的关系总结：

前者是后者的语法规格，后者是前者的一种实现。

ES6新特性：

let、const：

相同点：定义的变量不会变量提升，且都为块作用域。

不同点：const定义的变量不能被修改。

在ES6之前，是并没有{}块级作用域的概念，只有（函数作用域、全局作用域、eval作用域）。

export、import(导入、导出)：

export 导出模块：

// javascript code-model
// 导出默认
export default {};

// 部分导出
export class App extends Component {};

import 导入模块：

// javascript code-model
// 全部导入
import exaple from './example'

// 将整个模块当做单一模块导入
import * as example from './example.js'

// 引入模块中指定的部分
import { name, age } from './example'

class、super、extends(类、继承)：

这里就直接找一个网上包含class、super、extends的例子了。。。

// javascript code-model
// ES5
var Shape = function(id, x, y) {
　　this.id = id,
　　this.move(x, y);
};
Shape.prototype.move = function(x, y) {
　　this.x = x;
　　this.y = y;
};
 
var Rectangle = function id(ix, x, y, width, height) {
　　Shape.call(this, id, x, y);
　　this.width = width;
　　this.height = height;
};
Rectangle.prototype = Object.create(Shape.prototype);
Rectangle.prototype.constructor = Rectangle;
 
var Circle = function(id, x, y, radius) {
　　Shape.call(this, id, x, y);
　　this.radius = radius;
};
Circle.prototype = Object.create(Shape.prototype);
Circle.prototype.constructor = Circle;
 
// ES6
class Shape {
　　constructor(id, x, y) {
　　　　this.id = id this.move(x, y);
　　}
　　move(x, y) {
　　　　this.x = x this.y = y;
　　}
}
 
class Rectangle extends Shape {
　　constructor(id, x, y, width, height) {
　　　　super(id, x, y) this.width = width this.height = height;
　　}
}
 
class Circle extends Shape {
　　constructor(id, x, y, radius) {
　　　　super(id, x, y) this.radius = radius;
　　}
}

arrow functions(箭头函数):

// javascript code-model
// 代替function
let code = (val1, val2) => {
    return val1 + val2;
};

// 上面只有一行表达式也可以直接简化为
let code = (val1, val2) => val1 + val2;

// 在其他地方使用
let arr2 = [1, 2, 3];
let newArr2 = arr2.map(x => {
　　return x + 1;
});

// 会向上继承this
let names = 'slmBlog';
let code = {
    names: 'slm',
    getName: val => {
        return this.names;
    }
};
code.getName(); // slmBlog
code.getName = function () {
    return this.names;
};
code.getName(); // slm

template string(字符串模板)：

在ES5中字符串拼接一直是一个痛点，如果在多个字符与变量拼接的情况下，可读性极差且及其丑陋...尤其是换行拼接!

// javascript code-model
const name = 'slm';
// ES5
console.log(name + 'Blog');
// ES6
console.log(`${name}Blog`);

destructuring (解构)：

// javascript code-model
let web = {
　　name: 'slmBlog',
　　age: 3,
　　color: ['white', 'blue']
};
// ES5
var myName = people1.name;
var myAge = people1.age;
var mainColor = people1.color[0];
console.log(myName + '----' + myAge + '----' + mainColor); // slmBlog----3----white

// ES6
let { name, age } = web;
let [mainColor, affColor] = web.color;
console.log(`${name}----${age}----${mainColor}`); // slmBlog----3----white

default 函数默认参数：

// javascript code-model
// ES5
function bate (val1, val2) {
    val1 = val1 || 'slm';
    val2 = val2 || 'Blog';
    return val1 + val2;
}
// ES6
function bate (val1 = 'slm', val2 = 'Blog') {
    // codes ...
    return val1 + val2;
}

rest arguments (rest参数):

// javascript code-model
function fool (val1, val2, ...rest) {
    return rest.length * 2;
}
console.log(fool(1, 2, 3, 4, 5));  // 6

Spread Operator(展开运算符):

// javascript code-model
const arr = [5, 6, 7, 8, 9];
console.log([1, 2, 3, 4, ...arr]); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

第二种用法（取其中某值）:

// javascript code-model
const arr = [5, 6, 7, 8, 9];
let [first, val, ...rset] = arr;
console.log(rset); //

对象的简化：

// javascript code-model
// ES5
function fool (name, age) {
　　return {
　　　　name: name,
　　　　age: age
　　};
}
 
// ES6
function fool (name, age) {
　　return {
　　　　name,
　　　　age
　　};
}

function的省略:

// javascript code-model
var obj = {
　　name: 'slmBlog',
　　getName: function () {
　　　　console.log(this.name);
　　}
};
 
// ES6
let obj2 = {
　　name: 'slmBlog',
　　getName () {
　　　　console.log(this.name);
　　}
};

Promise:

// javascript code-model
// 发起异步请求
fetch('/api/todos')
    .then(res => res.json())
    .then(data => ({
　　    data
    }))
    .catch(err => ({
　　    this.$router.push({
            name: 'error',
            query: err
        });
    }));

Promise 本身是同步的，但内部代码是异步执行。