导航

HTML

CSS

JavaScript

浏览器 & 网络

版本管理

框架

构建工具

TypeScript

性能优化

软实力

算法

UI、组件库

Node

冷门技能

针对性攻坚(TODO)

let、const

⭐ let & const 与 var 的区别？

• var 和 let 用以声明变量，const 用于声明只读的常量；
• var 声明的变量，不存在块级作用域，在全局范围内都有效，let 和 const 声明的，只在它所在的代码块内有效；
• let 和 const 不存在像 var 那样的 “变量提升” 现象，所以 var 定义变量可以先使用，后声明，而 let 和 const 只可先声明，后使用；
• let 声明的变量存在暂时性死区，即只要块级作用域中存在 let，那么它所声明的变量就绑定了这个区域，不再受外部的影响。
• let 不允许在相同作用域内，重复声明同一个变量；
• const 在声明时必须初始化赋值，一旦声明，其声明的值就不允许改变，更不允许重复声明；如 const 声明了一个复合类型的常量，其存储的是一个引用地址，不允许改变的是这个地址，而对象本身是可变的。

⭐ 为什么已经有 var 了， 还要再推出 let 和 const

因为 var 存在三个特性或者说问题：

1. 变量提升
2. 重复声明（同一作用域下）
3. if、for代码块中声明外界却可以访问

而 let、const 解决了这些问题：

1. 声明之前无法使用
2. 同一作用域下无法重复声明
3. 使用的是块级作用域，if、for 这样的代码块中不对外界有干扰

⭐ 全局作用域中，用 const 和 let 声明的变量不在 window 上，那到底在哪里？如何去获取？

在 ES5 中，顶层对象的属性和全局变量是等价的，var 命令和 function 命令声明的全局变量，自然也是顶层对象。

var a = 12;
function f() {};
console.log(window.a); // 12
console.log(window.f); // f() {}

但 ES6 规定，var 命令和 function 命令声明的全局变量，依旧是顶层对象的属性，但 let 命令、const 命令、class 命令声明的全局变量，不属于顶层对象的属性。

let aa = 1;
const bb = 2;
console.log(window.aa); // undefined
console.log(window.bb); // undefined

在哪里？怎么获取？通过在设置断点，看看浏览器是怎么处理的：

通过上图也可以看到，在全局作用域中，用 let 和 const 声明的全局变量并没有在全局对象中，只是一个块级作用域（Script）中

怎么获取？在定义变量的块级作用域中就能获取啊，既然不属于顶层对象，那就不加 window（global）呗。

let aa = 1;
const bb = 2;
console.log(aa); // 1
console.log(bb); // 2

箭头函数

⭐ 箭头函数与普通函数的区别？

1. 箭头函数不能作为构造函数，不能 new
2. 箭头函数没有自己的 this
3. 箭头函数没有 arguments 对象
4. 箭头函数没有原型对象

const a = () => 1;
console.log(a.prototype); // undefined

剩余函数

• ...args 是个真数组
• arguments 是类数组

Symbol

Symbol 的应用场景？

• 使用 Symbol 充当属性名
• 使用 Symbol 充当变量
• 使用 Symbol 实现私有属性

异步

setTimeout 的机制

等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，才会执行 setTimeout 指定的任务

参考：JavaScript 运行机制详解：再谈Event Loop

处理异步的方法有哪些？

• 回调函数
• setTimeout
• Promise
• async/await
• 发布订阅
• 事件监听

⭐ 什么是 Promise？解决了什么问题？

• JS 异步操作的一种解决方案
• 好处
  • 解决了回调地狱
  • 提高代码可读性
  • 状态不可逆不可变
  • 存值，使用时再执行方法

⭐️ Promise 失败重试，可指定重试次数

来源：https://www.mulingyuer.com/archives/758/

//模拟异步请求
function axiosFn() {
    return new Promise((resolve, reject) => {
        const flge = Math.random(); //随机值
        setTimeout(() => {
            //大于0.7就是成功
            if (flge > 0.7) {
                return resolve(flge);
            } else {
                return reject(flge);
            }
        }, 1000)
    })
}

/**
 * @description: promise 失败重试方法
 * @param {*} fn 异步函数
 * @param {*} times 次数
 * @Date: 2022-02-20 22:47:54
 * @Author: mulingyuer
 */
Promise.retry = function(fn, times) {
    return new Promise(async (resolve, reject) => {
        while (times--) {
            try {
                const res = await fn();
                //请求成功,结束while循环
                return resolve(res);
            } catch (error) {
                //请求失败
                if (times > 0) {
                    console.log(`请求失败正在重试，还剩${times}次，错误信息为：${error}`);
                } else {
                    console.log(`请求失败，重试${times}次后，还是失败，错误信息为：${error}`);
                    return reject(error);
                }
            }
        }
    })
}

//测试
Promise.retry(axiosFn, 3).then(res => {
    console.log(`获得的数据为：${res}`);
}).catch(error => {
    console.log(`失败了，错误信息为：${error}`);
});

⭐ 什么是 async/await？解决了什么问题？

是 generator + Promise 的语法糖，主要的作用是用同步方式执行异步操作，await 只能在 async 函数中使用，async 函数执行会返回一个 Promise，值由函数的 return 值所决定

JS 异步解决方案的发展历程以及优缺点

1. 回调函数（callback）
   1. 优点：解决了同步的问题（只要有一个任务耗时很长，后面的任务都必须排队 等着，会拖延整个程序的执行）
   2. 缺点：回调地狱，不能用 try catch 捕获错误，不能 return
2. Promise
3. Generator
4. Async / await

⭐ 实现一个 sleep 函数

比如 sleep(1000) 意味着等待1000毫秒，可从 Promise、Generator、Async/Await 等角度实现。

// Promise
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))
sleep(1000).then(() => console.log('Done'));

// Generator
function* sleepGenerator(delay) {
  yield new Promise(resolve => setTimeout(resolve, delay))
}

sleepGenerator(1000).next().value.then(() => console.log('Done'));

// async / await
const sleep = delay => new Promise(resolve => setTimeout(resolve, delay))
async function output() {
  await sleep(1000)
  console.log('Done')
}
output()

// ES5
function sleep(cb, delay) {
  if (typeof cb === 'function')
    setTimeout(cb, delay)
}
function output() {
  console.log('Done')
}
sleep(output, 1000)

⭐  a、b、c 三个请求，希望 c 在 a、b 获取数据后再发请求，要是你你会怎么做？

• 答：promise.all
• 问：如果不用 promise 该如何实现？
• 答：可以用 定义一个 arr 数组和方法 fn，两个请求发出后的成功回调中都调用fn，fn方法接收一个数据，内部把数据push到arr数组中，判断 arr.length === 2 时发起请求c

let fs = require('fs')
let arr = []
function fn(data) {
  arr.push(data)
  if (arr.length === 2) {
  	console.log(arr)
  }
}
fs.readFile('./name.text', 'utf8', (err, data) => {
	fn(data)
})
fs.readFile('./age.text', 'utf8', (err, data) => {
	fn(data)
})

• 问：那如果我要保证顺序呢，例如你上面arr中索引0是a，索引1是b。怎么办？