Eighteen Blog

说明

在一篇文章里看到这样一个问题。文章地址

文章中会扩展一些其他的内容, 大家可以看过之后再来看我这篇个人的总结

函数声明写在块级作用域中(ES6)

1
2
3
4
5
6
7
8
var a = 0;
if(true){
a = 1;
function a(){}
a = 21;
console.log("里面",a);
}
console.log("外部",a);

请问输出是什么? 答案是:里面21 外面1

小朋友,ni'you
正如我一样,看到答案的我蒙蔽了,然后就继续阅读完全文,感觉还是有点不太明白。最后经过我查询资料我得到了答案。

转换结果

代码转化如下:

1
2
3
4
5
6
7
8
9
10
11
12

var a;
var a = 0;
if (true) {
let a = function a() {
}
a = 1;
window.a = a; //此处为原函数声明的位置
a = 21;
console.log("里面",a);
}
console.log("外部",a);

其实,函数声明放在块级作用域内做了以下几件事。
so, 我想看到了转换后的代码,估计大家就豁然开朗了。

  1. {}内部修改的是let定义的块级a,跟外部没关系。

  2. 所以 a = 1 的时候,外部其实还是为0。

  3. 外部的全局a原本为0, 被window.a = a 同步为了1.

  4. a =21 块级a变成了21,全局a无变化还是1.

那么为啥会这么转换呢????

实质

  1. 函数声明会被提升到块级作用域顶部。

  2. 使用了类似let的方式定义了一个块级作用域的函数同名变量,并赋值。(个人总结)

  3. 函数声明的变量被声明到了全局作用域(或者函数作用域)顶部。

  4. 在函数声明的位置,会将目前块级作用域内的变量的值同步到全局作用域(函数作用域)下。

解释

如下标记 1234 ,我想这样是最直观的。

(window 代表的外层的作用域上下文,意思是if块所在的作用域,因为此处为全局,所以为window)。

1
2
3
4
5
6
7
8
9
10
11
12
13

var a; // 3
var a = 0;
if (true) {
let a = function a() {
// 1,2
}
a = 1;
window.a = a; // 4:此处为原函数声明的位置
a = 21;
console.log("里面",a);
}
console.log("外部",a);

扩展

1
2
3
4

if(true) {
function a( ){}
}

转换为es5为

1
2
3
4
5
"use strict";

if (true) {
var a = function a() {};
}

所以经过我的查找,所有人都不推荐直接在块级作用域内进行函数声明,如果非要,就请使用es5的函数表达式写法。

说明

有时候我们需要用setinterval来执行一些异步操作来刷新页面的信息。但是如果一旦异步函数的请求时间过长,就会造成事件操作堆积。

如:

1
2
3
4
5

this.interval = setInterval(async () =# {
const resp = await ajax();
this.rows = resp.rows;
}, 5000);

假设ajax()请求的时间因为网络或者其他原因超过了5秒,定时器并不会等待其返回结果,而是依旧会进行下一次循环,这样的话,其实定时器和异步请求之间的时序并没有联系顺序也毫无规律,那么我们如何实现等本次ajax请求完毕之后等待一段时间之后再进行下一次循环呢?

查找数组特定元素需要用到的方法就是findIndex()

用法与定义

  • findIndex() 方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
  • findIndex() 方法为数组中的每个元素都调用一次函数执行:
    当数组中的元素在测试条件时返回 true 时, findIndex() 返回符合条件的元素的索引位置之后的值不会再调用 执行函数。
    如果没有符合条件的元素返回 -1
当我们使用video标签的时候,有时候因为更多的需要,我们要自己自定义控制栏,而进入和退出全屏也是其中的一部分

  • 不同的浏览器有不同的实现方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    // Webkit
    element.webkitRequestFullScreen();//进入全屏
    document.webkitCancelFullScreen();//退出全屏

    // Firefox
    element.mozRequestFullScreen();
    document.mozCancelFullScreen();

    // W3C
    element.requestFullscreen();
    document.exitFullscreen();