🚀
头像

默永


人生就像骑单车,想保持平衡就得往前走。

面试题JavaScript基础

2022-10-24 17:27:17 382 💗 0 @默永

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基础知识 

参考答案:

HTMLCollectionElement 集合
 obj.children,只包含⼦元素

NodeList Node 集合
 obj.childNodes,包含⽂本、注释、空格、换⾏

DOM是⼀棵树,所有节点都是Node
NodeElement的基类
Element是其他HTMLElement的基类

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

考察点:js基础知识 

参考答案:

** 箭头函数的this指向父作用域 **

箭头函数有什么缺点
1.没有 arguments
2.无法通过 callapplybind 改变 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 ⽤于可迭代的数据:SetMap
可枚举 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 的值是多少?

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

参考答案:

【值类型】
赋值后,⼊栈,不会互相⼲扰
常⻅值类型:undefinedstringbumberbooleansymbol
【引⽤类型】
会互相⼲扰
常⻅引⽤类型:对象{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;
}

面试题javascript基础题示例 下载地址


    目录导航