《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()包装。
代码语言:javascript复制async function test() {
return 'test'
}
test();
返回值为 Promise {<resolved>: "test"}。
JS await
await等待右侧表达式的结果,这个结果是promise对象或者其他值。 如果它等到的不是一个 promise 对象,那 await 表达式的运算结果就是它等到的东西。 如果它等到的是一个 promise 对象,await 就忙起来了,它会阻塞后面的代码,等着 promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果。
代码语言:javascript复制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
代码语言:javascript复制switch(2){
//1,2都会触发下面的逻辑
case 1:
case 2:
console.log(11)
}