【面试】前端面试题系列（一）

JS面试题

查看如下代码，得出A(2)的运行结果【滴滴面试-考察闭包】

var a = 0,
    b = 0;
function A(a) {
  A = function (b) {
    alert(a + b++);
  };
  alert(a++);
}
A(1);
A(2);

题目解析: 口说无凭，先打印各个阶段的结果来查看下：

var a = 0,
    b = 0;
function A(a) {
    console.log('b', b); // 12行
  A = function (b) {
    console.log('a', a); // 14行
    console.log('b', b); // 15行
    console.log('c', a + b++); // 16行
  };
  console.log('a', a++); // 18行
}
console.log(A); // 20行
A(1);
console.log(A); // 22行
A(2);

根据结果，我们运行过程一目了然了。

1. 当执行A（1）的时候，func-A就是外层的A, 先执行内层的A，由于A是全局变量，因此内层的A函数会替代外层的A函数，执行的结果就是console.log('a', a++); =》输出a,1，并且对a++,所以A（1）的结果就是先输出a,1,然后a执行++=1++后a的值就是2, 由于是闭包，因此结果存在闭包中，不会因A（1）执行完毕而销毁，然后A=func..()作为全局变量替换了外层的函数A。如22行看到的那样。
2. 当执行A（2）的时候，函数A已经被内层函数A替换了，因此A（2）执行的实际是内层的函数，这时候传入的参数是2，执行a+b++ 《=》 2（A（1）执行完后a=2） + 2（A（2）传入的参数2）= 4，所以A（2）后的结果是4

原型链的指向[滴滴面试]

// 问 : a的原型链指向谁?
const b = 2;
a = b;

a 的原型是指向是 Number不是指向 b，b 是基础类型，所以 a 是重新赋值，a 的原型指向是 Number。

遍历嵌套对象【滴滴】

编写函数获得对象中的值1，必须使用到str = 'a.b.c';

// 需要遍历的对象
var obj = {
  a: {
    b: {
      c: 1,
    },
  },
};
var str = "a.b.c";

题目解答：

const find = (obj, str) => {
  let arr = [];
  // 循环str字符串，遍历每个字母（本例默认每个key都是字母情况）
  for (const key in str) {
    // hasOwnProperty() 方法会返回一个布尔值，
    // 指示对象自身属性中是否具有指定的属性（也就是，是否有指定的键）。
    if (Object.hasOwnProperty.call(str, key)) {
      // str[key]即是str中的每个字母=>a . b . c
      if (str[key] != ".") {
        // 只要不是点就添加入数组
        arr.push(str[key]);
      }
    }
  }
  // 最终数组中的结果
  console.log(arr, ["a", "b", "c"]);
  try {
    return `${obj[ arr[0] ][ arr[1] ][ arr[2] ]}`;
    // 等价 obj['a']['b']['c']
  } catch (error) {
    return undefined;
  }
};

console.log(find(obj, 'a.b.c')) // 得到1

这道题的重点就是要知道检索对象中包含的值有什么方法。方法有两种:

1. 在[]后缀中包括住一个字符串表达式的方法 如：obj[a]
2. 可以使用.表示法 如：obj.a

3. 其中上面的解法就是采用[]获取对象中的值。

4. Object.prototype.hasOwnProperty()-MDN解释

Webpack

webpack都用过哪些loader

• babel-loader → 转义代码
• css-loader → 加载 css,支持文件导入
• style-loader → 把 css 代码注入到 javaScript 中,
• scss-loader → 转义 scss
• less-loader → 转义 less