前端知识

1. viewport 是什么？
2. 设备的物理像素，设备的独立像素   ----（设备像素比 devicePixelRatio）移动端高清、多屏适配方案
3. flex布局 ----  解释Flex布局，为什么要确定主轴方向，缩小倍数有什么用
4. 瀑布流解决方案
5. 盒模型
6. 将一个数字比如100000000展示为100，000，000，有几种解法
7. 怎么自己实现Promise，以及Promise.race，Promise.all ----- {1.小白版}
8. 怎么自己实现一个generator
9. 模块化的理解，怎么自己实现模块化 （前端模块化详解(完整版)）

10. 作为 attribute 和 property 的 value 及 Vue.js 的相关处理  (https://www.kancloud.cn/cyyspring/vuejs/2165362) 

    IDL 属性与内容属性、布尔值属性与枚举属性  (Interface Definition Language)

11. 函数柯里化

题目：

function add(a, b, c){
  return a+b+c
}
curry(add)(1)(2)(3)
curry(add, 1)(2)(3)
curry(add, 1, 2)(3)
curry(add, 1, 2, 3)

答案：

function curry(fn, ...args) {
  var length = fn.length;
  if (args.length >= length) {
    return fn(...args);
  } else {
    return function() {
      let newArgs = args.concat(Array.prototype.slice.call(arguments));
      if (newArgs.length < length) {
        return curry.call(this, fn, ...newArgs);
      } else {
        return fn.apply(this, newArgs);
      }
    };
  }
}




const curry = (fn, ...args) => {
  const length = fn.length;
  return length > args.length
    ? (...a) => {
        const newArgs = [...args, ...a];
        return length > newArgs.length
          ? curry.call(this, fn, ...newArgs)
          : fn.apply(this, newArgs);
      }
    : fn.apply(this, args);
};

 

有N个请求，每次发送一个，如果有一个失败了，就不再执行后面的请求并返回直到上一个请求的所有结果，否则返回所有结果

function send(apis) {
  const result = [];
  const index = 0;
  return new Promise((resolve, reject) => {
    function fn(index) {
      if (index === 3) {
        return resolve(result);
      }
      if (index >= apis.length) {
        return resolve(result);
      }
      setTimeout(() => {
        result.push(apis[index]);
        fn(index + 1);
      }, 1000);
    }
    fn(0);
  });
}

send([6, 5, 4, 3, 2]).then((res) => {
  console.log(res);
});

实现一个方法，用于比较两个版本号（version1、version2）

• 如果version1 > version2，返回1；如果version1 < version2，返回-1，其他情况返回0
• 版本号规则x.y.z，xyz均为大于等于0的整数，至少有x位
• 示例：
• compareVersion('0.1', '1.1.1'); // 返回-1
• compareVersion('13.37', '1.2 '); // 返回1
• compareVersion('1.1', '1.1.0'); // 返回0 */

function compareVersion(version1, version2) {
  version1 = version1.split(".");
  version2 = version2.split(".");
  const a = new Array(3).fill(0);
  const b = new Array(3).fill(0);
  a.splice(0, version1.length, ...version1);
  b.splice(0, version2.length, ...version2);
  for (let i = 0; i < a.length; i++) {
    if (Number(a[i]) > Number(b[i])) {
      return 1;
    } else if (Number(a[i]) < Number(b[i])) {
      return -1;
    }
  }
  return 0;
}

console.log(compareVersion("0.1", "1.1.1")); // 返回-1
console.log(compareVersion("13.37", "1.2 ")); // 返回1
console.log(compareVersion("1.1", "1.1.0")); // 返回0

 

实现以下功能，已知有 N 个 url，每次最多可并行请求 M，尽快完成对 N 个 url 的请求并保存所有返回结果到数组中。（每次发M个请求，每完成一个请求就发送一个剩下的请求）

function send(urls) {
  const m = 3;
  const result = [];
  return new Promise((resolve, reject) => {
    function getData(url) {
      fetch(url).then((res) => {
        result.push(res);
        if (urls.length) {
          getData(urls.splice(0, 1).join(""));
        } else {
          resolve(result);
        }
      });
    }
    urls.splice(0, m).forEach((url) => {
      getData(url);
    });
  });
}

send([2, 3, 4, 5, 6, 7]).then((res) => {
  console.log(res);
});

 

如何使用 XMLHttpRequest 发起一个异步请求

function httpRequest({ url, data, header }) {
  return new Promise((resolve, reject) => {
    var xhr = new XMLHttpRequest();
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(JSON.stringify(data));
    xhr.onreadystatechange = function () {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var obj = JSON.parse(xhr.responseText);
        resolve(obj);
      }
    };
  });
}
httpRequest({
  url: "https://admin.radarcredit.net/risk_api/v1/admin/account/login",
  data: { loginName: "zhengbin", loginPassword: "123456" },
}).then((res) => {
  console.log(res);
});

 

深度拷贝

function deepClone(obj, hash = new WeakMap()) {
      if (obj instanceof RegExp) return new RegExp(obj);
      if (obj instanceof Date) return new Date(obj);
      if (obj === null || typeof obj !== "object") {
        // 如果不是复杂数据类型，直接返回
        return obj;
      }
      if (hash.has(obj)) {
        // 如果已经处理过相同的对象，直接获取（解决循环引用）
        return hash.get(obj);
      }
      /**
       * 如果 obj 是数组，那么 obj.constructor 是 [Function: Array]
       * 如果 obj 是对象，那么 obj.constructor 是 [Function: Object]
       */
      let t = new obj.constructor();
      hash.set(obj, t);
      for (let key in obj) {
        // 递归
        if (obj.hasOwnProperty(key)) {
          // 是否是自身的属性
          t[key] = deepClone(obj[key], hash);
        }
      }
      return t;
    }

    var s = deepClone({
      a: { d: 123 },
      b: new Date(),
      c: function () {},
      x: undefined,
      fs: /\d/,
    });
    console.log(s);

 

堆栈溢出问题：解决方案（异步，闭包）

var list = new Array(100000).fill("1");
// 堆栈溢出：闭包
var nextListItem = function () {
  var item = list.pop();
  if (item) {
    return function () {
      return nextListItem();
    };
  }
};

function fun() {
  var value = nextListItem();
  while (typeof value === "function") {
    value = nextListItem();
  }
  return;
}
fun();





// 异步
var nextListItem = function() {
    var item = list.pop();

    if (item) {
        // process the list item...
        setTimeout(nextListItem,0)
	}
};