面试题JavaScript基础

原博客地址

01. 如何开启js严格模式？js严格模式有什么特点？

参考点：js基础知识

参考答案：

// 全局开启 'use stcict'  // 局部开启 function fu(){   'use strict' }  /*   1.全局变量必须先声明   2.禁止使用with   3.创建eval作用域   4.禁止this指向window   5.函数参数不能重名 */  // 全局变量必须先声明 let n = 10; console.log(n);  // 禁止使用with let obj = { name:'mo' } with (obj) {   console.log(name); }  // eval有单独的作用域 let a = 10; eval(`let a=5; console.log('in eval',a)`); console.log(a);  // 禁止this指向window function fn(a,b){   console.log(this); } fun();  // 函数参数不能重名令 function fn(x,x,y){} fn(10,20,30);

连环问：想改变函数的this值，如何操作

function fn(a,b){   console.log(a+b); }  fn.call(改变的this指向,1,2); fn.apply(改变的this指向,[1,2]);  // bind不会调用函数，会返回一个新的函数的拷贝 const Fn = fn.bind(改变的this指向,1,2); Fn();

02. offsetHeight、scrollHeight、clientHeight有什么区别

参考点：盒子模型和JS基础知识

参考答案：

offsetHeight = border + padding + content scrollHeight = padding + 实际内容大小 clientHeight = padding + content

扩展知识：不要频繁的获取offsetHeight等值，所有DOM操作都很费性能

连环问： 

• scrollLeft与scrollTop是什么？ 

    滚动距离 

• 如何获取元素距离⻚⾯顶部的距离？ 

    offsetParent.scrollTop + xx.scrollTop 

    obj.getBoundingClientRect().top

03. HTMLCollection与NodeList区别？

考察点：js DOM基础知识 

参考答案：

HTMLCollection 是 Element 集合  obj.children，只包含⼦元素  NodeList 是 Node 集合  obj.childNodes，包含⽂本、注释、空格、换⾏  DOM是⼀棵树，所有节点都是Node Node是Element的基类 Element是其他HTMLElement的基类

04. 箭头函数有什么缺点？什么时候不能 使⽤箭头函数？

考察点：js基础知识 

参考答案：

** 箭头函数的this指向父作用域 **  箭头函数有什么缺点 1.没有 arguments 2.无法通过 call、apply、bind 改变 this  不能使用箭头函数的场景 1.对象方法，不能使用 -> this 指向不正确 2.原型方法 __proto__，不能使用 -> this 指向不正确 3.构造函数，不能使用 -> this 指向不正确 4.动态上下文中使用this，不能使用 -> this 指向不正确 5.vue的生命周期和method，不能使用 -> this 指向不正确

05. for..in 与 for..of 有什么区别？

考察点：js基础知识、考察ES6基本功 

参考答案：

for..in 遍历得到key，可以遍历对象，不可以遍历 Set和Map for..of 遍历得到value，不可以遍历对象，可以遍历 Set 和 Map [扩展] 可枚举 与 可迭代 for...in ⽤于可枚举的数据：对象、字符串、数组、类数组 for...of ⽤于可迭代的数据：Set、Map 可枚举 Object.getOwnPropertyDescriptors(obj)  enumerable: true 可迭代 arr[Symbol.iterator]()  有没有next

扩展知识点：

Map文档

Set文档

06. typeOf 可以判断哪些类型？

考察点：typeOf的使⽤ 

参考答案：

undefined string number boolean function object symbol

07. 阅读代码，填写结果

console.log('我的年龄是' + 18 + 1) // 我的年龄是181 console.log(100 == '100') // true console.log(0 == '') // true console.log(0 == false) // true console.log(false == '') // true console.log(null == undefined) // true

考察点：隐式类型转换

08. 何时使⽤ == ？何时使⽤ === ？

考察点：编程能⼒ 

参考答案：

eslint Visual Code检查语法插件

除了 if (obj.a == null) 使⽤ == 之外，全部⽤ ===  if (obj.a === null || obj.a === undefined )

09. 阅读代码，填写结果

let a1=10; let b1=a1; b1=100; console.log(a1); // 此时 a1 的值是多少？ let a2={age: 18}; let b2=a2; b2.age=20; console.log(a2); // 此时 a2.age 的值是多少？

考察点：值类型与引⽤类型 

参考答案：

【值类型】 赋值后，⼊栈，不会互相⼲扰 常⻅值类型：undefined、string、bumber、boolean、symbol 【引⽤类型】 会互相⼲扰 常⻅引⽤类型：对象{a:10}、数组[1, 2, 3]、null

扩展阅读： Symbol⽂档

10. ⼿写深拷⻉函数

考察点：编程能⼒、递归、原型链

const obj = {   name: "默永",   age: 18,   address: {     city: "beijing"   }   hobby: ["羽毛球","游戏"] }  function deepClone(obj = {}){   if(typeof obj !== "object" || obj == null) {     return obj;   }      let result;   if(obj instanceof Array) {     result = [];   }else{     result = {};   }    for(let key in obj) {     if (obj.hasOwnProperty(key)) {  // 判断obj是否有相对应属性       result[key] = deepClone(obj[key]);     }   }    return result; }