questions

[py-tofee]

2021/02/03

1. webpack HMR 原理 链接
2. JavaScript 单线程 事件循环（event loop），异步任务 同步任务，微任务（promise.then） 宏任务（setTimeout）； 执行顺序 宏任务 - 同步任务 - 微任务 -宏任务 异步编程 Event Loop
3. JavaScript 基本类型和基本包装类型：Boolean, Number, String; 每次访问基本类型的某个方法或者属性时，先用基本包装类型 新建一个实例，通过实例访问对应的属性或者方法，将返回值返回，并删除实例；该实例存在的生命周期只在访问的一瞬间； 链接

   2021/02/04

4. object.defineProperty, Proxy, Reflect 链接
5. JavaScript模块化规范：模块化是为了解决js文件之间的不确定依赖关系；CommonJS, ES6 链接
6. git pull 和 git fetch 链接
7. ES6
   • 模板字符串/模板字面量：反引号( `` )，多行字符串，插入表达式，嵌套模板字符串，带标签模板字符串（函数） 模板字符串
   • class 继承：extend，super()
   • ES5 顶层作用域和函数作用域；ES6 新增 块级作用域
   • 箭头函数：this指向定义函数的地方；函数没有arguments对象；不能用作构造函数，不能使用new；不能使用yield，即不能用作Generator函数
   • promise：pending, fulfileld, reject；reject后的东西，一定会进入then中的第二个回调（error回调），如果then中没有写第二个回调，则进入catch; 网络异常（比如断网），会直接进入catch而不会进入then的第二个回调；
   • reject 和 catch reject 是用来抛出异常，catch 是用来处理异常; reject 和 resolve 是 Promise 的方法 （Promise.reject），而 catch, then, finally 是 Promise 实例（Promise 原型）的方法（Promise.prototype.catch）

[py-tofee]

2021/02/05

1. ES6
   • Symbol 基本数据类型：Symbol(key?)，Symbol.for(key)，Symbol.keyfor(symbol)
   • Set 是一种类数组的数据结构，成员唯一，以[值，值]结构存储，常用于数据去重

     let set = new Set([1,2,3,3,4,4,5]) // 去重
     let unique1 = Array.from(set) // 转为数组
     let unique2 = [...set ] // 使用扩展语法 转为数组
     let unique3 = [...new Set('352255')].join('') // 字符串去重

let s = new Set()
s.add(1).add(2).add(2) // 2只被添加了一次
s.delete(1) // return true
s.has(2) // return true
s.clear() // 清除所有值，无返回值

set.forEach((value, key) => console.log(value, key)) // 遍历Set
set.keys() //返回键名的遍历器
set.values() //返回键值的遍历器
set.entries() //返回键值对的遍历器

[py-tofee]

2021/02/07

1. forEach(handler, this) // 第二个参数用于绑定处理函数的this
2. Map与Object 链接
   • Object 的键只能是String和Symbol类型，且自定义键名可能会与原型上存在的键名冲；Map的键可以是任意类型，包括undefined, null
   • 遍历时，Object 的键是无序的；Map的键是有序的，按插入顺序遍历
   • 计算键值对个数：Object.keys().length ；Map.size 属性
   • Map, Set, Array, String 是可迭代的，它们的实例具有自己的迭代器方法 map[Symbol.iterator] === function，但是object[Symbol.iterator] === undefined；所以object默认不能用for...of遍历；可以手动给Object加上迭代器
   • Object 对象具有从原型上带来的内置属性，例如obj.constructor，但是Map.prototype.get 只能访问自己设置的属性，不会访问原型上的属性map.get('constructor ') === undefined
   • Object.create(null) 可以创建一个没有原型的空对象
   • Map是一个纯哈希的结构，在需要频繁增删键值对的时候，使用Map优于使用Object
   • 当需要用户自定义键名时，用Map优于Object，Object容易与原型上的键名冲突
   • 需要使用序列化时，使用Object，Map不支持序列化；JSON.map(new Map()) = '{}'
3. async/await 与 Generator函数
   • 都是用于处理异步操作
   • async函数执行时，遇到await就先执行（await和await前面的同步代码 当成同步代码执行），await后面的代码进入微任务队列中等待执行
   • async函数是Generator函数的语法糖，区别是async函数内置执行器，能自动执行next函数
   • async函数返回promise，支持then回调；Generator函数返回的Iterator对象
4. forEach, for...of, for...in
   • array.forEach(callback)：为数组的每一项执行一次callback函数，且返回undefined；在callback中使用break（会报错） 或者 return 不会跳出循环，因为callback不是循环体，只是forEach的一个函数类型的参数；

     Array.prototype.myEach = function(callback) {
     for (var i = 0; i < this.length; i++)
       callback(this[i], i, this);
     };

   • forEach 循环本身不会改变原数组，但是callback可能会改变原数组；第一次调用callback后，forEach内部就确认了遍历范围；遍历过程中，增加或者修改数组，不会影响遍历结果；但是删除数组元素，会影响遍历结果链接
   • forEach 函数返回undefined，所以不支持链式调用
   • for...in 语句以任意顺序遍历一个对象的除 Symbol 以外的可枚举属性，包括原型上的可枚举属性

[py-tofee]

5. for...in
   • for...in 用于遍历对象的非symbol类型的，可枚举的属性，包括原型上的属性
   • 使用 getOwnPropertyNames() 或执行 hasOwnProperty() 来确定某属性是否是对象本身的属性
   • 不能保证有序遍历
6. for...of
   • for...of 用于在可迭代对象（Map, Set, Array, String等）上创建一个迭代循环，调用对象自身的迭代器
   • 可以使用continue退出本次循环，使用break跳出整个循环，使用return跳出整个循环，并返回所在函数的返回值

[py-tofee]

2021/02/08

1. axios 封装：
   • 进行请求和响应的拦截
   • 在请求拦截中，可以携带token，post请求头，使用Qs库序列化传参等操作
   • 在响应拦截中，可以根据状态码进行统一的错误管理等
2. 使用深度选择器/deep/覆盖页面中的UI库的样式
   • 在vue文件中，在中定义当前页面的样式
   • .app-container[data-v-e81b3d64] 自己定义的样式会附带data-v-e81b3d64属性，每个页面的data-v-e81b3d64属性后面的数字不同
   • 但是第三方UI库的样式编译后，并不会携带data-v-e81b3d64属性，所以在vue文件中，不能直接修改UI库中的样式
   • 使用深度选择器 /deep/ 修改UI库中的样式，这样编译后 .app-container[data-v-e81b3d64] .el-button {} ，el-button并不会携带上data-v-e81b3d64属性，从而实现在vue文件中修改UI库样式的目的
   • /deep/ -- less； 如果没用less，就使用>>>符号
   • deep原理：

[py-tofee]

2021/02/09

1. Scoped CSS 规范