面试题JavaScript基础

原博客地址

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

参考点：js基础知识

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为元江县企业提供专业的成都网站建设、网站设计，元江县网站改版等技术服务。拥有十载丰富建站经验和众多成功案例,为您定制开发。

参考答案：

// 全局开启
'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. 何时使⽤ == ？何时使⽤ === ？

考察点：编程能⼒

参考答案：

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