阅读 204

ES6常见的新特性总结(一)

ES6的新语法及新特性(一):

新增关键字:let const;

let和const声明会形成一个块级作用域的概念,用let 和 const 声明的变量只会在声明的作用域中起作用,这里又出现了作用域的概念,具体关于作用域的内容,还是参照另一篇博客(JS中的作用域);

let:

let和var差不多,都是用来声明变量的。区别就在于:

  • let声明的变量只在所处于的块级有效;
  • let没有‘变量提升’的特性,而是‘暂时性死区(temporal dead zone)’特性。

const:

const命令与let命令一样,声明的变量,其作用域都是块级。 所以const遵循的规则与let相差无二,只是,

  • const是用来声明恒定变量的。
  • 且用const声明恒定变量,声明的同时就必须赋值,否则会报错。

新增箭头函数:

使用方法: 普通函数:function A(name){ console.log(name) } 箭头函数:(name)=>{ console.log(name) } 表面上来看只是写法上变得比较简洁,其实箭头函数和普通函数还是有一些区别的,这里用了B站蛋老师的总结图,做了一个总结:

image.png

新增模版字符串:

代码演示: let name = 'world'; 想要输出‘hello world !’这句话; es5的写法 :console.log('hello '+ name + ' !') es6模版字符串的写法:console.log(hello ${name} !)

新增promise:

Promise对象是一个构造函数,用来生成Promise实例。 下面代码创造了一个Promise实例。

const promise = new Promise((resolve, reject)=>{

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

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

resolve函数的作用是,将Promise对象的状态从“未完成”变为“成功”(即从 pending 变为 fulfilled),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject函数的作用是,将Promise对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。

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

promise.then((value)=>{
  // success
  console.log(value)
}, (error)=> {
  // failure
  console.log(error)
});
复制代码

then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的,不一定要提供。它们都接受Promise对象传出的值作为参数。 一般来说,不要在then()方法里面定义 Reject 状态的回调函数(即then的第二个参数),总是使用catch方法。

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

getJSON('/posts.json').then(function(posts) {
  // ...
}).catch(function(error) {
  // 处理 getJSON 和 前一个回调函数运行时发生的错误
  console.log('发生错误!', error);
});
复制代码

上面代码中,getJSON()方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then()方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected,就会调用catch()方法指定的回调函数,处理这个错误。另外,then()方法指定的回调函数,如果运行中抛出错误,也会被catch()方法捕获。

p.then((val) => console.log('fulfilled:', val))
  .catch((err) => console.log('rejected', err));

// 等同于
p.then((val) => console.log('fulfilled:', val))
  .then(null, (err) => console.log("rejected:", err));
复制代码

finally()方法用于指定不管 Promise 对象最后状态如何,都会执行的操作。该方法是 ES2018 引入标准的。

promise
.then(result => {···})
.catch(error => {···})
.finally(() => {···});
复制代码

上面代码中,不管promise最后的状态,在执行完thencatch指定的回调函数以后,都会执行finally方法指定的回调函数。

新增解构赋值:

ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring)。

以前,为变量赋值,只能直接指定值。

let a = 1;
let b = 2;
let c = 3;
复制代码

ES6 允许写成下面这样。

let [a, b, c] = [1, 2, 3];
复制代码

上面代码表示,可以从数组中提取值,按照对应位置,对变量赋值。

本质上,这种写法属于“模式匹配”,只要等号两边的模式相同,左边的变量就会被赋予对应的值。下面是一些使用嵌套数组进行解构的例子。

let [foo, [[bar], baz]] = [1, [[2], 3]];
foo // 1
bar // 2
baz // 3

let [ , , third] = ["foo", "bar", "baz"];
third // "baz"

let [x, , y] = [1, 2, 3];
x // 1
y // 3

let [head, ...tail] = [1, 2, 3, 4];
head // 1
tail // [2, 3, 4]

let [x, y, ...z] = ['a'];
x // "a"
y // undefined
z // []
复制代码

如果解构不成功,变量的值就等于undefined

let [foo] = [];
let [bar, foo] = [1];
复制代码

以上两种情况都属于解构不成功,foo的值都会等于undefined

另一种情况是不完全解构,即等号左边的模式,只匹配一部分的等号右边的数组。这种情况下,解构依然可以成功。

let [x, y] = [1, 2, 3];
x // 1
y // 2

let [a, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
复制代码

上面两个例子,都属于不完全解构,但是可以成功。

其中promise和解构赋值部分摘自 阮一峰ES6入门

文章分类
前端
文章标签