ES6 新特性（一部分）

Betsy_迪
154 阅读5分钟

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); // 输出undefined
var foo = 2;

 let 的情况
console.log(bar); // 报错ReferenceError

let 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<ary.length;i++){
                          if(ary1.indexOf(ary[i])===-1){
                              ary1.push(ary[i])
                          }
                      }
                      console.log(ary1);
                      
        
            ES6：Array.from(new Set(arr))    （返回的就是去重之后的）
  • 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)
<!--false 每一项都满足条件则返回 true-->

arr.some(d => d > 2) 
<!--true 只要有一项满足条件则返回 true-->

字符串方法

  • 模板字符串

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


const foo = 'this is a' + example

可以优化写法：

const foo = `this is a ${example}`
  • includes()方法 startsWith()方法 endsWidth()方法
let s = 'Hello world!';
s.startsWith('Hello') // true

s.endsWith('!') // true

s.includes('o') // true

解构赋值

 <!--首先有这么一个对象-->

const  props = {
    className: 'tiger-button',
    loading: false,
    clicked: true,
    disabled: 'disabled'
}

<!--当我们想要取得其中的2个值：loading与clicked时：-->

<!--es5-->

var loading = props.loading;
var clicked = props.clicked;

<!--es6-->
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) {
     <!--完成态，value是上面resolve传入的值-->
}, 
function (error) {
    <!--失败态，error是上面reject传入的值-->
});
then()方法传递的两个参数中:


<!--第一个参数（函数）对应着完成态的操作，也就是resolve时调用-->


<!--第二个参数（函数）对应着失败态的操作，也就是reject时调用,第二个参数可以没有-->

错误处理：

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

参考网站：

avatar
文章
阅读
粉丝