面試題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;
}

本文來自博客園，作者：默永，轉載請註明原文鏈接：https://www.cnblogs.com/Lmyong/p/16822348.html