ES6

ES6初始

ES6 是 ECMAScript 6.0 的简写，即 JavaScript 语言的下一代标准，已经在 2015年6月正式发布了，它的目标是让JS能够方便的开发企业级大型应用程序，因此，ES6的一些规范正在逐渐向Java、C# 等后端语言标准靠近。在 ES6 规范中，比较重大的变化有以下几个方面：

1. 新增let，const命令来声明变量，和var相比，let声明的变量不存在变量提升问题，但没有改变JS弱类型的特点，依然可以接受任意类型变量的声明；const 声明的变量不允许在后续逻辑中改变，提高了JS语法的严谨性。
2. 新增解构赋值、rest 语法、箭头函数等，这些都是为了让代码看起来更简洁，而包装的语法糖。
3. 新增模块化机制，这是JavaScript走向规范比较重要的一步，让前端更方便的实现工程化。
4. 新增类和继承的概念，配合模块化，JavaScript 也可以实现高复用、高扩展的系统架构。
5. 新增模板字符串功能，高效简洁，结束拼接字符串的时代。
6. 新增 Promise 机制，解决异步回调多层嵌套的问题。

ES6介绍

let和const

{
        let x = 10;
        var y = 20;    
} 

var声明变量存在变量提升。也就是在声明变量之前就可以使用该变量。

console.log(x)    // undefined , var 声明变量之前可以使用该变量
var x = 10;

而let不会这样 ， let声明的变量不能在声明之前使用

console.log(x)  // ReferenceError: x is not defined，let声明变量之前不可以使用该变量
let x = 10;

注意：let不允许在相同的作用域内重复声明同一变量

比如：

function foo(){
    let x = 10;
    var x = 20;
}  // 报错

ES5中只有全局作用域和函数作用域，并没有块级作用域。 请看下面的示例：   

var name = 'hmls'

function foo(){
    console.log(name)
    if (false){
        var name = 'Bob'
    }
}
foo()  // undefined

出现上述现象的原因就是在函数内部，由于变量提升导致内存的name变量覆盖了外层的name变量。

类似的情况还出现在 for循环的计数变量最后会泄露为全局变量。 

for (var i=0;i<5;i++){
    console.log('哈哈');
}
console.log(i);  // 5

ES6中的let声明变量的方式实际上就为JavaScript新增了块级作用域。

var name = 'hmls'

function foo(){
    console.log(name)
    if (false){
        let name = 'Bob'
    }
}
foo()  // hmls

此时，在foo函数内容，外层代码块就不再受内层代码块的影响。所以类似for循环的计数变量我们最好都是用let来声明。

const

const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。 const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。 

例如

const PI = 3.14；

全局对象的属性：

ES6规定：var命令和function命令声明的全局变量依旧是全局对象的属性；let命令、const命令和class命令声明的全局变量不属于全局对象的属性。

查看下面的示例代码：

var x = 10;
let y = 20;
window.x  // 10
window.y  // undefined

变量的解构赋值

ES6允许按照一定的模式，从数组或对象中提取值，对变量进行赋值，这种方式被称为解构赋值。

var [x, y, z] = [10, 20, 30]
x  // 10
y  // 20
z  // 30

对象的解构赋值：

var {x, y} = {x: 10, y: 20}
x  // 10
y  // 20

板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识。它可以当做普通字符串使用，也可以用来定义多行字符串，或者在字符串中嵌入变量。在模板字符串中嵌入变量，需要将变量名写入${}中。

var name = 'hmls', age = 18;
`My name is ${name}, I’m ${age} years old.`

函数

箭头函数

箭头函数有个特点：

1. 如果参数只有一个，可以省略小括号
2. 如果不写return，可以不写大括号
3. 没有arguments变量
4. 不改变this指向

其中箭头函数中this指向被固定化，不是因为箭头函数内部有绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。   可以查看下面两段代码输出的区别：

var person = {
    name: 'hmls',
    age:18,
    func:function(){
        console.log(this);
    }
}
person.func()  // person对象

var person = {
    name: 'hmls',
    age:18,
    func:()=>{
        console.log(this);
    }
}
person.func()  // window对象

对象

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。

function (x, y){
    return {x, y}
}

上面的写法等同于：

function(x, y){
    return {x: x, y: y}
}

对象的方法也可以使用简洁表示法：

var o = {
    method(){
        return “Hello!”;
    }
}

等同于：

var o = {
    method: function(){
        return “Hello!”;
    }
}

面向对象

ES5的构造对象的方式 使用构造函数来创造。构造函数唯一的不同是函数名首字母要大写。

function Point(x, y){
    this.x = x;
    this.y = y;
}

// 给父级绑定方法
Point.prototype.toSting = function(){
    return '(' + this.x + ',' + this.y + ')';
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

// 继承
function ColorPoint(x, y, color){
    Point.call(this, x, y);
    this.color = color;
}
// 继承父类的方法
ColorPoint.prototype = Object.create(Point.prototype);
// 修复 constructor
ColorPoint.prototype.constructor = Point;
// 扩展方法
ColorPoint.prototype.showColor = function(){
    console.log('My color is ' + this.color);
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
console.log(cp.toSting());
cp.showColor()

ES6 使用Class构造对象的方式：

class Point{
    constructor(x, y){
        this.x = x;
        this.y = y;
    }  // 不要加逗号
    toSting(){
        return `(${this.x}, ${this.y})`;
    }
}

var p = new Point(10, 20);
console.log(p.x)
p.toSting();

class ColorPoint extends Point{
    constructor(x, y, color){
        super(x, y);  // 调用父类的constructor(x, y)
        this.color = color;
    }  // 不要加逗号
    showColor(){
        console.log('My color is ' + this.color);
    }
}

var cp = new ColorPoint(10, 20, "red");
console.log(cp.x);
cp.toSting();
cp.showColor()

对象 

属性简洁表示法

ES6允许直接写入变量和函数作为对象的属性和方法。

function (x, y){
    return {x, y}
}

上面的写法等同于：

function(x, y){
    return {x: x, y: y}
}

对象的方法也可以使用简洁表示法：

var o = {
    method(){
        return “Hello!”;
    }
}

等同于：

var o = {
    method: function(){
        return “Hello!”;
    }
}

 

Object.assign() 

Object.assign方法用来将源对象（source）的所有可枚举属性复制到目标对象（target）。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是源对象。

参数必须都是对象，否则抛出TypeError错误。

Object.assjgn只复制自身属性，不可枚举属性（enumerable为false）和继承的属性不会被复制。

简单示例：

阮一峰的ECMAScript 6 入门

 

多读书、多写码。世界很大，我们很小。

    分类: Frontend   Q1mi
关注 - 32
粉丝 - 704     ? 上一篇：django-debug-toolbar使用指南
? 下一篇：初学Django项目可能会遇到的问题 posted @ 2018-07-01 14:52 Q1mi 阅读(782) 评论(0) 编辑 收藏