近况

最后再整理一下es6中的部分知识点，坦白说，我没有专门看网课学习ES6内容，不过看一些廖雪峰博客
学习vue网课的时候学到了很多这部分内容，所以索性记录一下，之前我写过es6的promise，模块化，let和const
模板字符串，Proxy和Reflect，接下来写es6的一些内容包括一些js其他知识点：

  • async和await关键字
  • generator函数
  • localStorage对象
  • this指向问题

async和await关键字

async和await是es7的关键字，使用他们可以实现用同步方式，执行异步操作，
async关键字标注的函数是异步函数，函数返回值是promise对象，可以使用 then 方法添加回调函数。

async function helloAsync(){
    return "helloAsync";
  }
  
console.log(helloAsync())  // Promise {<resolved>: "helloAsync"}
 
helloAsync().then(v=>{
   console.log(v);         // helloAsync
})

async 函数中可能会有 await 表达式，async 函数执行时，如果遇到 await 就会先暂停执行 ，
等到触发的异步操作完成后，恢复 async 函数的执行并返回解析值。

await操作符用于等待一个 Promise 对象, 它只能在异步函数 async function 内部使用。
如果等待的不是一个Promise对象，则返回该值本身
如果一个 Promise 被传递给一个 await 操作符，await将等待Promise正常处理完成并返回其处理结果。

function testAwait (x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);		//x参数作为返回值返回
    }, 2000);
  });
}
 
async function helloAsync() {
  var x = await testAwait ("hello world");
  console.log(x); 
}
helloAsync ();
// hello world

generator函数

本想好好写一写，但肚子里没货，看了别人写的博客，写的太好了，我再怎么也写不出来
索性直接将链接拿过来，省的再去花时间水一篇垃圾博客，看大佬用generate实现一个async/await
掘金作者：林三心
点击文章：20分钟就能搞定的async/await原理！

localStorage对象

浏览器本地存储：localStorage,sessionStorage，这两个统称为webStorage
本地存储，指的是网站把一些数据存在了浏览器中，打开开发者选项，查看application即可看到数据
localStorage是window对象中的属性，所以可以直接使用localStorage对象

localStorage的操作

  • 存储数据

    /*
	数据都是键值对形式，如果key重复存储，则值会替换，值只能是字符串，如果是数字，存到浏览器时也是字符串
	如果存对象，不能直接存，使用stringify将对象中数据转成json字符串，
		即{"name": "万一","age": "20"}，直接存，则存的是[Object Object]
*/
localStorage.setItem('msg',"wanyi")  
const person = {name: '万一',age: 20}
localStorage.setItem('wanyi',JSON.stringify(person))

  • 读取数据

    /*
	如果读取是对象，结果长这样：{"name": "万一","age": "20"}，
		那就需要JSON.parse(localStorage.getItem("key")),解析一下json字符串，转成js对象
	如果读取一个不存在的数据，则返回null
*/
localStorage.getItem("key")

  • 删除数据

    localStorage.removeItem("key")
localStorage.clear()	//删除localStorage上所有数据

与localStorage相似的是sessionStorage，上面的四个api，sessionStorage都是相同的使用
唯一的区别是：localStorage的数据，当浏览器关闭后，数据依然在，而如果是sessionStorage，浏览器关闭后，数据全部消失

this指向问题

this指向是当我们调用函数的时候确定的，调用方式的不同决定了this的指向不同，一般指向我们的调用者
下面是一张总结this指向图片：