ES6 的一些语法

2022-10-22 18:13:18

1，let 声明变量

let 声明的变量只能在let 的块级作用域中生效，也是为了弥补var声明变量的全局污染问题。

var 声明变量有变量提升的作用，也就是在声明变量之前可以使用变量

console.log(x);

var x = 10;

不会报错。而let会报错。

let 不允许在同一块作用域下声明同一个变量，而var 可以。

function foo(){

　　let x = 10;

　　var x = 20;

}会报错；

或者function foo (){

　　let x = 10;

　　let x = 20;

}也会报错。

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

var name = '' naza"

function foo(){

　　console.log(name)

　　if (false){

　　var name = 'NN'

}

foo()

undifined

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

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

for (i,i<5,i++){

　　console.log('哈哈');}

console.log(i); i =5

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

var name = 'Q1mi'

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

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

2,const 声明常量

const声明常量，常量必须立即初始化，常量不可更改。

const 和let一样，只在所在的块级作用域中有效。

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

var 和function声明的变量默认会在window对象上，
let 和 const ，申明的所有变量不会出现在window中。

3，变量的解构赋值

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

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

对象的结构赋值

var {x, y} = {x:21, y:30}

4，字符串

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

include、startsWith、endsWith

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

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

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

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

var s = 'hello world'

s.includes('hello'), true

s.startsWith("hello"),true

endsWith('world')

后面还可以加参数

s.includes('hello'，3), 可以加索引

s.startsWith("hello"，3),可以加索引

endsWith('world',4)可以加索引

5,模板字符串

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

var name = 'yuyu'

var age = 18

`my name is ${name}, I'm age is ${age} years old`

6,函数

箭头函数

箭头函数有个特点：

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

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

var person = {

name: 'qimi',

age: 18,

func:function(){

console.log(this);

}

}

person.func()

VM44:5 {name: "qimi", age: 18, func: ƒ}

var person = {

name: 'qimi',

age: 18,

func:()=>{

console.log(this);

}

}

person.func()

VM48:5 Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, frames: Window, …}

7,对象

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"

}

}

8,Object.assign()

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

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

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

var x = {name: "Q1mi", age: 18};

var y = x;

var z = Object.assign({}, x);

x.age = 20;

x.age  //

y.age  //

z.age  //

9,面向对象

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

10，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)的别名，用于指定发生错误时的回调函数。

码农公寓