字节跳动 ---- （一面）

第一题：Array中，使用reduce实现map
第一步：我们应该利用Array原生对象得prototype在原生对象Array上重写map

Array.prototype.map = callBack

第二步：我们要开始写callBack回调函数

 const callBack = () => {
  console.log('this', this)
 }
 Array.prototype.map = callBack
 console.log([1, 2, 3].map(item => item * 2))

这样我们发现我们并没有通过this获取到我们的实例对象数组[1, 2, 3]，这是因为箭头函数没有this这个概念，其内部this指向的是其父类的this，所以上述this为window。

OK，那我们将callBack改成function定义，如下

 function callBack() {
  console.log('this', this) // [1, 2, 3]
 }
 Array.prototype.map = callBack
 console.log([1, 2, 3].map(item => item * 2))

第三步：分析原生Array.prototype.map函数和Array.prototype.reduce函数
map：map函数用于遍历实例数组，返回值为新数组，内部元素为callBack回调函数每次执行所返回结果值，若没有返回值，则数组元素为undefined。

reduce：reduce函数用于遍历累加【累加逻辑写在callBack中】数组，返回值为最后一次callBack回调函数返回值。值得注意的是，关于reduce函数的callBack中的参数，及遍历次数。

 /*
 * pre: 累加器，若不自定义赋值初始值，则会为数组第一个元素，且.reduce方法会从index = 1开始遍历，也就是遍历arr.legth - 1 遍
 * item：callBack遍历当前的数组元素，若pre没有自定义设置初始值，则开始值为arr[1]，.reduce方法会从index = 1开始遍历
 * index：callBack遍历当前的数组元素索引，若pre没有自定义设置初始值，则开始值为1，.reduce方法会从index = 1开始遍历
 */
[1, 2, 3].reduce((pre, item, index) => {
 pre = pre + item
 return pre
})

 /*
 * initPre: 外部pre自定义初始值，可以为对象，数组，基本类型值，且.reduce方法会从index = 0开始遍历，也就是遍历arr.legth遍
 * pre: 累加器，初始值为initPre
 * item：callBack遍历当前的数组元素，开始值为arr[0]，.reduce方法会从index = 0开始遍历
 * index：callBack遍历当前的数组元素索引，开始值为0，.reduce方法会从index = 0开始遍历
 */
[1, 2, 3].reduce((pre, item, index) => {
 pre = pre + item
 return pre
}, initPre)

第四步：利用reduce函数中的循环代替map，用reduce中的累加逻辑实现map函数逻辑

 Array.prototype.map = function (cb) {
  return this.reduce((pre, item, index) => {
   pre.push(cb(item, index))
   return pre
  }, [])
 }
 // 结束了，哈哈哈

第二题：前端安全问题及预防
1、XSS（跨站脚本）
XSS，即为（Cross Site Scripting），因为避免与CSS混淆，就称为XSS。中文名称为跨站脚本，是发生在目标浏览器层面上，是在渲染DOM中发生了没有预期的JS执行了相关操作，这就是XSS攻击。关于XSS攻击总的来说是有三大类型，反射型、存储型、DOM自身缺陷型。

反射型
特点
反射型XSS攻击，也称非持久性XSS攻击。简单来说就是通过前台发送一个包含恶意代码字段的请求，后台服务器响应，返回数据中包含这段恶义代码，此时浏览器就会执行这段JS代码，XSS攻击也就发生

攻击手法：
通过登录或其他操作发送请求，传入非法字段，比如传入name字段'<srcipt>alter('XSS攻击')</script>'，若此请求返回结果包含字段name，则在获取用户name字段成功后就引入了我们植入的'<srcipt>alter('XSS攻击')</script>'这段JS代码，从而发生XSS攻击。

存储型
特点
存储型XSS攻击，也称持久性XSS攻击。简单来说就是通过前台发送一个包含恶意代码字段的请求，后台服务器响应并存储在相关数据库中，等到其他接口需要获取这个包含恶意代码字段并成功请求时，此时浏览器就会执行这段JS代码，XSS攻击也就发生。与反射型不同的是，它是将恶意代码植入到对方数据库中，也就意味着只需要一次植入恶意代码的操作即可。

攻击手法：
通过注册或其他操作发送请求，传入非法字段，比如传入name字段'<srcipt>alter('XSS攻击')</script>'存储在对方的数据库用户表。若之后其他操作所发送的请求，返回结果包含字段name，则在获取用户name字段成功后就引入了我们植入的'<srcipt>alter('XSS攻击')</script>'这段JS代码，从而发生XSS攻击。

DOM自身缺陷型
特点
DOM XSS代码的攻击发生的可能在于我们编写JS代码造成的。例如我们知道eval语句有一个作用是将一段字符串转换为真正的JS语句，因此在JS中使用eval是很危险的事情，容易造成XSS攻击

攻击手法：
若用户知道我们代码结构中eval语句中值的传入源或传入方式，用户则可以通过前台的某些输入操作，将恶意代码'<srcipt>alter('XSS攻击')</script>'植入到我们写的eval语句中，从而发生XSS攻击。

预防手段
前台对接口敏感参数及DOM敏感元素过滤或编码化比如（<script>等标签）；
前台对用户ui界面输入值进行校验编码，防止用户输入恶意代码段；
后台对接口敏感参数过滤或编码化比如（<script>等标签）；

千言万语一句话：对于XSS攻击，简单来说就是病从口入，口包括请求、用户与服务器交互参数等。
防护手段第一条：对于我们的口（前台），要学会拒绝或改造不良食品；对于我们的胃（后台），要学会对垃圾食物的排除或改造。

2、跨站请求伪造及防护

第三题：Promise内部同步

第四题：http 缓存