前端面试题分享1

1、对于一个未知宽度的元素，使其左右居中？（至少两种）

<div class="container">
  <div class="box"></div>
</div>

// 方案1
.box { margin: 0 auto; display: inline-block; }

// 方案2
.container { text-align: center;}
.box2 { display: inline-block; }

2、不改变这行代码<img id='img' src=”1.jpg” style=”width:450px !important”>，使该图片其宽度变为300px？

document.getElementById('img').style.width = '300px';

3、说一说opacity:0;、visibility:hidden;、display:none;三者的区别和使用场景。

• opacity:0;元素不可见，不改变页面布局，其上绑定的事件仍然有效。
• visibility:hidden;元素不可见，不改变页面布局，其上绑定的事件将失效。
• display:none;元素不可见，页面布局会发生变化，其上绑定的事件失效。

4、修改下面的代码，使其打印 0~9 。

// 原始代码（修改前）
for ( let i=0; i<10; i++) {
  setTimeout((i)=>{
    console.log(i)
  }, 1000)
}

// 这段原始代码，等价于下面这段代码
function handle(arg) {  
  console.log(arg)   // arg是handle方法的形参
}
for(let i=0; i<10; i++) {
  setTimeout(handle, 1000)
}

// 修改后（可以打印出0~9）
for(let i=0; i<10; i++) {
  setTimeout(()=>{
    console.log(i)
  }, 1000)
}

• 解释：修改前，执行代码后会打印出10个undefined，原因是setTimeout()定时器的第一个参数是一个方法，方法体中的i只是个形参而已。修改后，定时器中的i就是for循环中的循环计数器，因此会打印出0~9。

5. 请把对象{ 1:222, 2:333, 5:888 }转化成一个固定长度为12的数组[222, 333, null, null, 888, null, null, null, null, null, null, null]。

function obj2arr(obj) {
  let arr = new Array(12)
  arr.fill(null)  // 用null填充这个长度为12的数组
  for(let key in obj) {
    arr[key-1] = obj[key]
  }
  return arr
}
// 转化成长度为12的数组
let res = obj2arr({ 1:222, 2:333, 5:888 })

6. Vue中，如何监听 路由参数 发生变化？

// 使用侦听器来监听路由变化
watch: {
  $route() {
    console.log(this.$route.query.id)
    // 相关业务，在这里进一步处理
  }
}

7、请写出下述代码在控制台中的打印结果。

var sf = 0
function getSF() {
  console.log(sf)
  var sf = 1
  console.log(sf)
}
getSF()
console.log(sf)

• 答案：在控制台的打印结果是undefined 1 0。
• 解释：js中存在函数域，getSF函数内部所定义的局部变量sf存在变量提升，在这个函数域中，局部变量sf的声明会被提升到函数体的顶部去。

8、如何判断一个变量是不是JS数组？有哪些判断方法？

var arr = []

arr instanceof Array  // true
Array.isArray(arr)  // true

Object.prototype.toString.call(arr) === '[object Array]'   // true
Object.prototype.toString.apply(arr) === '[object Array]'   // true
Object.prototype.toString.bind(arr)() === '[object Array]'   // true

• 注意：不能使用typeof arr来判断arr是否是数组。因为即使arr是数组，typeof arr的返回结果也只是object而已。

9、请写出下面代码所返回的结果

typeof 10;  // 'number' 
typeof 1.5;  // 'number' 
typeof NaN;  // 'number' 

typeof null;  // 'object' 
typeof [1,2,3];  // 'object' 
typeof {a:1, b:2};  // 'object' 

typeof undefined;    // 'undefined' 

typeof 'hello';  // 'string' 
typeof '';  // 'string'

typeof Object.prototype.toString;  // 'function' 

typeof false;  // 'boolean'

• 在JavaScript中，使用typeof 来确定变量的数据类型。
• 参考：JavaScript 数据类型

10、如何把<button id='btn' onclick="alert(1)">按钮</button>按钮禁用掉？

// 如下方案，二选一即可
document.getElementById('btn').disabled = true
document.getElementById('btn').setAttribute('disabled', true)

11、请使用ES6的面向对象语法，封装一个类并实现继承关系。

class Base {
  constructor() {
    this.name = 'base'
  }
}
class Test extends Base {
  constructor() {
    super()
    this.name = 'test'
  }
}

var t = new Test()
console.log(t.name)   // 'test'
console.log(Test.name)   // 'Test'

本篇结束！！！