ES6 新特性（一部分）-白红宇

ES6的新特性

ES6简介：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长

1、 let 和 const

var是传统的函数的作用域，存在变量提升，即在变量声明之前使用的就是undefined

let是不存在变量提升的，但是有块级作用域,暂时性死区

const与let类似，但是他定义的变量是不可以修改的

在我们开发的时候，可能认为应该默认使用 let 而不是 var，这种情况下，对于需要写保护的变量要使用 const。然而另一种做法日益普及：默认使用 const，只有当确实需要改变变量的值的时候才使用 let。这是因为大部分的变量的值在初始化后不应再改变，而预料之外的变量的修改是很多 bug 的源头。

var 的情况 console.log(foo); // 输出undefinedvar foo = 2; let 的情况console.log(bar); // 报错ReferenceErrorlet bar = 2;复制代码

块级作用域

内层作用域和外层作用域不会互相影响

{
   {
   {
   {  let insane = 'Hello World';  {
   let insane = 'Hello World'}}}}};复制代码

ES6对于操作字符串和数组上增加了一些方法

数组方法

1、数组的includes方法
- [1, 2, 3].includes(4)// false
- [1, 2, NaN].includes(NaN) // true
- [1, 2, 3].includes(2)// true

2、数组的解构赋值 let [a,b,c]=[1,2,3]

3、数组的去重传统方式vsES6的新方法

varary =[12,24,26,12,24,15,32,15,24];                      varary1 =[];                      for(vari=0;i

4、数组的filter find方法

filter:用来过滤数组（比较常用）

find：也是过滤数组的，但是与filter不同，他返回的过滤出来的第一项，不是数组，而filter是数组

const list = [{
   'name':'1',index:1},{
   'name':'2'},{
   'name':'1'}]let list2 = list.find(i=>i.name==='1')let list3 = list.filter(i=>i.name==='1')console.log(list);//[ { name: '1', index: 1 }, { name: '2' }, { name: '1' } ]console.log(list2)//{ name: '1', index: 1 }console.log(list3)//[ { name: '1', index: 1 }, { name: '1' } ]复制代码

5、some every方法

const arr = [1, 2, 3, 4]arr.every(d => d > 2)
    arr.some(d => d > 2) 
    复制代码

字符串方法

模板字符串

我们拼字符串的时候可以使用模版字符串，用处：拼url给后台传参数的时候

const foo = 'this is a' + example可以优化写法：const foo = `this is a ${example}`复制代码

includes()方法 startsWith()方法 endsWidth()方法

let s = 'Hello world!';s.startsWith('Hello') // trues.endsWith('!') // trues.includes('o') // true复制代码

解构赋值


    const  props = {    className: 'tiger-button',    loading: false,    clicked: true,    disabled: 'disabled'}
    
    var loading = props.loading;var clicked = props.clicked;
    const { loading, clicked } = props;复制代码

箭头函数（ES6升级重点核心）。箭头函数是ES6核心的升级项之一，箭头函数里没有自己的this,这改变了以往JS函数中最让人难以理解的this运行机制。

主要优化点:

1、箭头函数内的this指向的是函数定义时所在的对象，而不是函数执行时所在的对象。ES5函数里的this总是指向函数执行时所在的对象，这使得在很多情况下this的指向变得很难理解，尤其是非严格模式情况下，this有时候会指向全局对象，这甚至也可以归结为语言层面的bug之一。ES6的箭头函数优化了这一点，它的内部没有自己的this,这也就导致了this总是指向上一层的this，如果上一层还是箭头函数，则继续向上指，直到指向到有自己this的函数为止，并作为自己的this。

2、箭头函数不能用作构造函数，因为它没有自己的this，无法实例化。

3、也是因为箭头函数没有自己的this,所以箭头函数内也不存在arguments对象。（可以用扩展运算符代替）

4、函数默认赋值。ES6之前，函数的形参是无法给默认值得，只能在函数内部通过变通方法实现。ES6以更简洁更明确的方式进行函数默认赋值。

import 和export

import引入的模块是静态加载（编译阶段加载）而不是动态加载（运行时加载）。

import引入export导出的接口值是动态绑定关系，即通过该接口，可以取到模块内部实时的值。

Promise 异步操作

Promise 的then方法：

p.then(function (value) {     
    }, function (error) {    
    });then()方法传递的两个参数中:
    
    复制代码

错误处理：

var p = new Promise(function (resolve, reject) {    // ...    if(/* 异步操作成功 */){        resolve(ret);    } else {        reject(error);    }});p.then(function (value) {    // 完成态}, function (error) {    // 失败态});复制代码

Promise的常见应用

使用Promise封装一个ajax请求：

function getURL(url){    return new Promise(function(resolve,reject){        var req=new XMLHttpRequest();        req.open('GET',url,true);        req.onload=function(){            if (req.status==200) {                resolve(req.responseText);            }else{                reject(new Error(req.statusText))            }        };        req.onerror=function(){            reject(new Error(req.statusText));        };        res.send();    })}复制代码

异步加载图片

let preloadImage=(path)=>{    return  new  Promise(function(resolve,reject){        let img=new Image();        img.onload=resolve;        img.onerror=reject;        img.src=path;    })}复制代码

Promise.all()

Promise.all()方法用于将多个Promise实例，包装成一个新的Promise实例，例如：

var p = Promise.all([p1, p2, p3])复制代码

新的Promise实例p的状态由p1, p2, p3决定：

当p1, p2, p3的状态都为完成态时，p为完成态。

p1, p2, p3中任一一个状态为失败态，则p为失败态。

例子：

let a = new Promise((resolve, reject) => {     setTimeout(() => {       resolve(2)     }, 2000)   }) let b = new Promise((resolve, reject) => {     setTimeout(() => {       resolve(3)     }, 2000)   }) Promise.all([a, b]).then( (ret) => console.log(ret)) //2秒后，注意这里返回的是数组 [2,3].catch( err => console.log(err.toString()));复制代码

async await ：实际上是generator的语法糖，主要用来解决异步问题的

async function test() {  const data = await axios.get('https://randomuser.me/api/')  console.log(data)}// 等同于function test() {  axios.get('https://randomuser.me/api/').then(res => console.log(res)) // axios 也是 promise 对象}// 结合try/catch async function test() {  try {    const data = await axios.get('https://randomuser.me/api/')    console.log(data)  } catch (err) {    console.log(err)  }}复制代码

参考网站：