记录一些以前没见过的JS语法

《ES6标准入门 第3版 .pdf》看了一遍，时间长了没怎么用，也没记住多少，嗯，那只好在实践中学习。

立即执行函数

1. js中函数的两种命名方式，即表达式和声明式。

声明式：函数的声明式写法为：function foo(){/*...*/}，这种写法会导致函数提升，所有function关键字都会被解释器优先编译，不管是声明在什么位置，都可以调用它，但是它本身不会被执行，定义只是让解释器知道其存在，只有在被调用的时候才会执行。

表达式：函数的表达式写法为：var foo=function(){/*...*/}，这种写法不会导致函数提升，于是就必须先声明，再调用，否则会出错。

立即执行函数：(function(){}()),(function(){})()这两种是js中立即执行函数的写法，函数表达式后加上()可以被直接调用，但是把整个声明式函数用()包起来的话，则会被编译器认为是函数表达式，从而可以用()来直接调用，如(function foo(){/*...*/})()，但是如果这个括号加在声明式函数后面，如function foo(){/*...*/}()，则会报错，很多博客说这种写法()会被省略，但实际是会出错，因为不符合js的语法，所以想要通过浏览器的语法检查，就必须加点符号，比如()；

立即执行函数的作用是：1.创建一个独立的作用域，这个作用域里面的变量，外面访问不到，这样就可以避免变量污染。2.闭包和私有数据。提到闭包，不得不提下那道经典的闭包问题。

在ES6环境下，let可以完全取代立即执行函数，到目前为止，可能是我眼界所限制，我所能用到的立即执行函数的确能被let替代，前提是你的运行环境（包括旧的浏览器）支持ES2015。如果不支持，你将不得不求助于以前经典的函数。

原文：https://www.cnblogs.com/jdWu-d/p/11587805.html

JavaScript Promise 对象

ECMAscript 6 原生提供了 Promise 对象。

Promise 对象代表了未来将要发生的事件，用来传递异步操作的消息。

参考：https://www.runoob.com/w3cnote/javascript-promise-object.html

JS async

带async关键字的函数，是声明异步函数，返回值是promise对象，如果async关键字函数返回的不是promise，会自动用Promise.resolve()包装。

async function test() {
    return 'test'
}
test();

返回值为 Promise {<resolved>: "test"}。

JS await

await等待右侧表达式的结果，这个结果是promise对象或者其他值。 如果它等到的不是一个 promise 对象，那 await 表达式的运算结果就是它等到的东西。 如果它等到的是一个 promise 对象，await 就忙起来了，它会阻塞后面的代码，等着 promise 对象 resolve，然后得到 resolve 的值，作为 await 表达式的运算结果。

function test() {
    return new Promise(resolve => {
        setTimeout(() => resolve("test"), 2000);
    });
}

const result = await test();
console.log(result);
console.log('end')

由于test()造成的阻塞，console.log('end')会等到两秒后执行

所以为了避免造成阻塞，await 必须用在 async 函数中，async 函数调用不会造成阻塞。

参考：https://www.cnblogs.com/bear-blogs/p/10423759.html

JS Fetch

Fetch API 提供了一个 JavaScript接口，用于访问和操纵HTTP管道的部分，例如请求和响应。它还提供了一个全局 fetch()方法，该方法提供了一种简单，合理的方式来跨网络异步获取资源。

这种功能以前是使用 XMLHttpRequest实现的。Fetch提供了一个更好的替代方法，可以很容易地被其他技术使用，例如 Service Workers。Fetch还提供了单个逻辑位置来定义其他HTTP相关概念，例如CORS和HTTP的扩展。

参考：https://www.jianshu.com/p/e18ced22cfaa、https://www.ruanyifeng.com/blog/2020/12/fetch-tutorial.html

JS 箭头函数

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

参考：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Dom.dispatchEvent()

Dom.dispatchEvent()，触发节点上的指定事件

Dom.dispatchEvent(new Click()、new Event())。节点的所有事件对象都实现了EventTarget接口。

switch

switch(2){
   //1，2都会触发下面的逻辑
    case 1:
    case 2:
        console.log(11)
}