面试题JavaScript基础

  • 面试题JavaScript基础已关闭评论
  • 19 次浏览
  • A+
所属分类:Web前端
摘要

参考点:js基础知识参考答案:连环问:想改变函数的this值,如何操作参考点:盒子模型和JS基础知识


原博客地址

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; }