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

標籤：JavaScript

上一篇：面試 個人摸底監測 考察JavaScript基礎 （第三天）

下一篇：第一百零四篇:DOM事件流