记武汉某公司的一次面试笔试题

1，下面代码的执行顺序是什么？

onsole.log(1);   
setTimeout(() => {
  console.log(2) 
  Promise.resolve().then(() => {
    console.log(3) 
  })
  
  setTimeout(() => {  
    console.log(4) 
  }, 0)
}, 0)

new Promise((resolve, reject) => {
  console.log(5) 
  resolve(6)
}).then((data) => {
  console.log(data) 
  data = 7
}).then((data) => {
  console.log('!!!' + data) 
})

setTimeout(() => {
  console.log(8) 
}, 0)
console.log(9) 
// 打印 1,5,9,@@@6，!!!undefined,2,3,8,4
// undefined是因为没有resolve(data)到下一个then
// 主要考察js的事件循环机制

2，手写一个数组的 reduce 方法

// 原生reduce的使用
// arr.reduce(function(prev, cur, index, arr){}, initialValue)
// [1，2，3].reduce(function(prev, cur, index, arr){}, 0)
// 对数组 比如 [1，2，3] 归并执行 (prev, cur) => prev + cur，
// 执行过程为：
// [1, 2, 3] // 取出 1 + 2 ，填回 3
// [3, 3] // 取出 3 + 3 ，填回 6
// [6] // 最终结果为 6
Array.prototype.myReduce = function myReduce(fn, base) {
  if (typeof fn !== "function") {
    throw new TypeError("arguments[0] is not a function");
  }
  let initialArr = this;
  let arr = initialArr.concat();

  if (base) arr.unshift(base);
  let index, newValue;

  while (arr.length > 1) {
    index = initialArr.length - arr.length + 1;
    newValue = fn.call(null, arr[0], arr[1], index, initialArr);

    arr.splice(0, 2, newValue); // 直接用 splice 实现替换
  }
  return newValue;
};

3，手写debounce函数，debounce是防抖的意思

const debounce = debounce(fn, wait) {
    let timer = null
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn();
            timer = null;
        }, wait)
     }
}
// 这是防抖，意思是wait等待期间内频繁触发操作的时候，先不调用函数，先要clearTimeout。
// 下面是节流
const throttle = throttle(func: Function, delay: number) {
    let timer: Object | null = null
    return function () {
        if (!timer) {
            timer = setTimeout(() => {
                // func.apply(this, arguments);
                func()
                timer = null
            }, delay)
        }
    }
}
// 如果在delay时间内，频繁触发操作，也要等上一次的函数执行完才会在重新执行函数

4，var arr = [0, [1, 3],[2, 5], 4] 降维度

// 就是数组扁平化操作
function flatten(arr) {
    var res = [];
    arr.map(item => {
        if (Array.isArray(item)) {
            res = res.concat(flatten(item));
        } else {
            res.push(item);
        }
    });
    return res;
}

5，使用ajax发送一个请求，在两秒内未响应则取消该请求

// 主要是需要指导ajax的about方法
// 如果该请求已被发出，XMLHttpRequest.abort() 方法将终止该请求。当一个请求被终止，它的 readyState 将被置为 XMLHttpRequest.UNSENT (0)，并且请求的 status 置为 0。
let xhr = new XMLHttpRequest();
xhr.open('get', '/api', false);
xhr.send();
setTimeout(() => {
  xhr.abort();
}, 2000)

// axios的终止请求如下：
const CancelToken = axios.CancelToken;
const source = CancelToken.source();
axios.get('/user/12345', {
  cancelToken: source.token
}).catch(function (thrown) {
  if (axios.isCancel(thrown)) {
    console.log('Request canceled', thrown.message);
  } else {
    // 处理错误
  }
});
axios.post('/user/12345', {
  name: 'new name'
}, {
  cancelToken: source.token
})
// 取消请求（message 参数是可选的）
source.cancel('Operation canceled by the user.');