这篇文章分享一些考察前端基础的笔试题，还会列出答案和所考察的知识点。欢迎一起讨论学习。

已知如下代码，如何修改才能让图片宽度为 300px ？注意下面代码不可修改

考察知识点：盒模型

<img src="1.jpg" style="width:480px!important;”>

答案（以下列举4种方案）：

1. max-width:300px;
2. box-sizing:border-box;padding:90px;
3. transform: scale(0.625);
4. zoom:0.625;

简单改造下面的代码，使之分别打印 10 和 20

考察知识点：立即执行函数、变量提升、作用域链

var b = 10;
(function b(){
    b = 20;
    console.log(b); 
})();

答案：

打印10：

var b = 10;
(function b(b) {
 window.b = 20;
 console.log(b)
})(b)

// 或者
var b = 10;
(function b(b) {
 b.b = 20;
 console.log(b)
})(b)

// 或者
var b = 10;
(function (){
  console.log(b);
  b = 20;
})();

打印20

var b = 10;
(function b(b) {
 b = 20;
 console.log(b)
})(b)

// 或者
var b = 10;
(function b() {
 var b = 20;
 console.log(b)
})()

// 或者
var b = 10;
(function (){
  b = 20;
  console.log(b);
})();

以下代码输出是？

考察知识点：箭头函数、parseInt、Array.prototype.map

let unary = fn => val => fn(val)
let parse = unary(parseInt)
console.log(['1.1', '2', '0.3'].map(parse))

答案：[1, 2, 0]

使用 sort() 对数组 [3, 15, 8, 29, 102, 22] 进行排序，输出结果是？

考察知识点：sort默认排序规则

答案： [102, 15, 22, 29, 3, 8]

a.b.c.d 和 a['b']['c']['d']，哪个性能更高？为什么？请写一段测试代码？

考察知识点：抽象语法树

答案：

a.b.c.d 比 a['b']['c']['d'] 更快

后者在解析为AST语法树后的结果比前者更为复杂。

function compare(times) {
  let a = { key: {} };
  let temp = a;
  for (let i = 0; i < times; i++) {
    let tmp = temp['key'];
    tmp['key'] = {};
    temp = tmp;
  }
  temp['key']['key'] = 'surprise';

  console.time('[]')
  let i = a;
  while (i['key'] !== 'surprise') {
    i = i['key'];
  }
  console.timeEnd('[]')

  console.time('.')
  let ii = a;
  while (ii.key !== 'surprise') {
    ii = ii.key;
  }
  console.timeEnd('.')
}

compare(70000000)
// .: 158.670166015625 ms
// []: 161.213134765625 ms