前端面试题集锦

发表于 | 更新于: | 分类于

ES6

1)

https://buluo.qq.com/p/detail.html?bid=314687&pid=3951568-1489992778&from=share_qq

  • async await
1
2
3
4
5
6
7
8
9
10
11
12
const sleep = (timer) => new Promise( (resolve)=>{
    setTimeout( resolve, timer * 1000)
});
(async ()=>{
    for(var i = 0; i < 5; i++){
        await sleep(1);
        console.log(i);
    }
    await sleep(1);
    console.log(i);
})()
// 输出结果： ->0->1->2->3->4->5
  • Promise.all
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const tasks = []; // 这里存放异步操作的 Promise
const output = (i) => new Promise((resolve) => {
    setTimeout(() => {
        console.log(new Date, i);
        resolve();
    }, 1000 * i);
});// 生成全部的异步操作
for (var i = 0; i < 5; i++) {
    tasks.push(output(i));
}// 异步操作完成之后，输出最后的 i
Promise.all(tasks).then(() => {
    setTimeout(() => {
        console.log(new Date, i);
    }, 1000);
});
// 输出结果： ,0->1->2->3->4->5

, 表示立即输出      ->表示过一段时间再输出

js基础

1)

以let/const声明的变量或常量，必需是经过对声明的赋值语句的求值后，才算初始化完成，创建时并不算初始化。如果以let声明的变量没有赋给初始值，那么就赋值给它undefined值。也就是经过初始化的完成，才代表着TDZ期间的真正结束，这些在作用域中的被声明的变量才能够正常地被访问。

对于TDZ的解释：https://segmentfault.com/a/1190000008213835

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
var x = 1;
function foo(x, y = function(){x = 2}){
    console.log("第一次", x); 
    y();
    console.log("第二次", x);
    var x = 3;
    y();
    console.log("第三次", x);
}
foo(x);
console.log("第四次", x);

// 执行结果 1131


var x = 1;
function foo(x, y = function(){x = 2}){
    console.log("第一次", x); 
    y();
    console.log("第二次", x);
    //var x = 3;
    y();
    console.log("第三次", x);
}
foo(x);
console.log("第四次", x);
// 执行结果 1221

// 分析：根据ES标准中的定义，如果参数存在默认值，则有三个环境 environment( environment in ES6 = scope in ES5). Outer environment / parameters environment / function body environment. parameters environment 可以访问自己和外层，不能访问函数体内的变量。函数体内可以修改 parameters env 里定义的 formal parameters 的值，不能重新定义（除非用var……）。
// 分析： 主要来说就是如果在foo函数体内用var声明了变量x的话，y里面的x和foo函数里的x就不是一个变量了。这个y函数会形成一个中间作用域

https://code.wileam.com/default-value-n-params-env/

Webpack

1) tree shaking 原理

例如， 在 webpack 项目中，有一个入口文件，入口文件有很多依赖的模块，实际情况中，虽然依赖了某个模块，但其实只使用其中的某些功能。通过 tree-shaking，将没有使用的模块摇掉，这样来达到删除无用代码的目的。

  • Tree-shaking的本质是消除无用的js代码。
  • ES6模块依赖关系是确定的，和运行时的状态无关，可以进行可靠的静态分析，这就是tree-shaking的基础。

    所谓静态分析就是不执行代码，从字面量上对代码进行分析，ES6之前的模块化，比如我们可以动态require一个模块，只有执行后才知道引用的什么模块，这个就不能通过静态分析去做优化。
    这是 ES6 modules 在设计时的一个重要考量，也是为什么没有直接采用 CommonJS，正是基于这个基础上，才使得 tree-shaking 成为可能，这也是为什么 rollup 和 webpack 2 都要用 ES6 module syntax 才能 tree-shaking。

文章：https://juejin.im/post/5a4dc842518825698e7279a9

其他

1) 如何在不增加中间变量的情况下，交换2个变量的值

1
2
3
4
5
6
7
8
// .ts
namespace b{
    function swap<A,B>(tuple:[A,B]):[B,A]{
        return [tuple[1],tuple[0]];
    }
    let result = swap<string,number>(['jf',18]);
    console.log(result);
}

编译后

1
2
3
4
5
6
7
8
9
// .js
var b;
(function (b) {
    function swap(tuple) {
        return [tuple[1], tuple[0]];
    }
    var result = swap(['jf', 18]);
    console.log(result);
})(b || (b = {}));

或者

1
2
3
let a = 1, b = 2;
[b, a] = [a, b];
console.log(b,a);// 1  2

React的setState是同步还是异步
immutable.js和pureComponent有什么关系
vue响应式的原理
webpack现在有100个入口，编了5分钟怎么办
101状态码是什么意思
302和304分别表示什么
async/defer的区别
css三角形怎么画
输入url到渲染都发生什么
最近的新技术都了解哪些