ES6快速入门

let:

　　ES6新增的，用于声明变量。其用法类似var，但是声明的变量只在let命令所在的代码块内有效。

{
    var x = 2;
    let y = 3;
}
undefined
x
2
y
# VM60:1 Uncaught ReferenceError: y is not defined
    at <anonymous>:1:1

 

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

　　let声明的变量不行，不能在声明之前使用，

console.log(x);
# undefined,var 声明的变量在赋值之前是可以使用该变量，
var x = 10;

console.log(y);

let y = 2;

# VM112:1 Uncaught SyntaxError: Identifier 'x' has already been declared
    at <anonymous>:1:1

 

　　let 不允许在相同的作用域内重复声明同一个变量。var 可以，var声明的同一个变量，后一个会覆盖前一个。

function(){
  let x = 5;
  let x = 6;
}

# 这样重复声明就会报错

 

　　ES5中只有全局作用域和函数作用域，并没有块级作用域。

var name = "qingqiu";
function foo(){
    console.log(name);
    if(false){
        var name = "xiaobai"
    }
}
foo()

# undefined

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

 

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

var name = "qingqiu";
function foo(){
    console.log(name);
    if(false){
        let name = "xiaobai"
    }
}
foo()
# qingqiu
# let只在自己所在的域生效，所以name并没有被覆盖。

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

 

const:

　　const用来声明常量。const声明变量必须立即初始化，并且其值不能再改变。

　　const声明常量的作用域与let相同，只在声明所在的块级作用域内有效。

const PI = 3.14;

 

全局对象的属性：

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

var x = 10;
let y = 2;
undefined
window.x
# 10
window.y
# undefined

 

变量的解构赋值：

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

var [x,y,z] = [11,22,33];

x
# 11
y
# 22
z
# 33

 

var {x,y} = {x:10,y:20}
undefined
x
# 10
y
# 20

 

字符串：

　　include,startsWith,endsWith

　　在此之前，JavaScript只有indexOf方法可用来确定一个字符串是否包含在另一个字符串中。

　　ES6中又提供了3中新方法：

　　includes()：返回布尔值，表示是否找到了参数字符串。

　　startsWith()：返回布尔值，表示参数字符串是否在原字符串的开始位置。

　　endsWith()：返回布尔值，表示参数字符串是否在原字符串的结尾位置。

var s = "hello world";

// s.includes("o");
// s.startsWith("he");
s.endsWith("ld");
# true

　　三种方法都支持第二个参数，表示开始匹配的位置。

var s = "hello world";

s.includes("o",6);
true
var s = "hello world";

s.includes("o",8);
false

 

模板字符串：

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

var name="qingqiu",age=18;
`my name is ${name},i'm ${age} years old`
# "my name is qingqiu,i'm 18 years old"

 

函数：

　　箭头函数：

　　特点：

　　1，如果参数值只有一个，可以省略小括号。

　　2，如果不写return，可以不写大括号。

　　3，没有arguments变量。

　　4，不改变this指向。

　　其中箭头函数中，this指向被固定化，不是因为箭头函数内部绑定this的机制。实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码快的this。

var person2 = {
    name:"qingqiu",
    age:17,
    func:()=>{
        console.log(this);
    }
}
person2.func()
#  Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}
#  window对象

var person = {
    name:"qingqiu",
    age:17,
    func:function(){
        console.log(this);
    }
}
person.func()
#  {name: "qingqiu", age: 17, func: ƒ}
#  person对象

 

对象：

　　属性简介表示法：

　　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.assigon()方法用来将原对象的所有可枚举属性复制到目标对象。它至少需要两个对象作为参数，第一个参数是目标对象，第二个参数是原对象。

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

　　Object.assign只复制自身属性，不可枚举属性和继承的属性不会被复制。

var x = {name:"qingqiu",age:18};
var y = x;
var z = Object.assign({},x);
x.age = 17;  # 重新赋值

x.age
# 17  
y.age
# 17   y会随着x的改变而改变
z.age
# 18    z则不会，z是独立的

 

面向对象：

　　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()

 

Promise:　

　　Promise 是异步编程的一种解决方案，比传统的解决方案（回调函数和事件）更合理、更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。

　　使用Promise的优势是有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

const promiseObj = new Promise(function(resolve, reject) {
  // ... some code

  if (/* 异步操作成功 */){
    resolve(value);
  } else {
    reject(error);
  }
});

　　Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

　　Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数

promiseObj.then(function(value) {
  // success
}, function(error) {
  // failure
});

　　then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。其中，第二个函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

promiseObj
.then(function(value) {
  // success
})
.catch(function(error) {
  // failure
});

　　其实Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。