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

-Advertisement-

01，如何開啟JS嚴格模式？JS嚴格模式有什麼特點？兩種方式全局開啟在js開頭加上 'use strict' 局部開啟，在作用域開頭加上 function fn(){ 'use strict' } 特點： 1，全局變數必須先聲明 2，禁止使用with 3，創建eval作用域有單獨的作用域 4， ...

01，如何開啟JS嚴格模式？JS嚴格模式有什麼特點？

兩種方式

全局開啟在js開頭加上

'use strict'

局部開啟，在作用域開頭加上

function fn(){
  'use strict'
}

特點：

1，全局變數必須先聲明

2，禁止使用with

3，創建eval作用域

有單獨的作用域

4，禁止this指向window

5，函數參數不能重名

02、offsetHeight、scrollHeight、clientHeight有什麼區別？

offsetHeight = boder + padding + content

clientWidth = padding + content

scrollWidth = padding + 實際內容大小

註意：不要頻繁的去獲取offsetHeight等值，所有DOM操作都很費性能

scrollLeft 左邊滾動距離 scrollTop 距離頂部的距離

offsetParent 找距離自己定位過的父級

獲取元素距離頁面頂部的距離？

offsetParent.scrollTop + xx.scrollTop 定位過得父級top 加上自身距離父級的top

obj.getBoundingClientRect().top

03、HTMLCollection與NodeList區別？

HTMLCollection 是 Element 集合

obj.children，只包含⼦元素

NodeList 是 Node 集合

obj.childNodes，包含⽂本、註釋、空格、換⾏

DOM是⼀棵樹，所有節點都是Node

04、箭頭函數有什麼缺點？什麼時候不能使⽤箭頭函數？

** 箭頭函數的this指向⽗作⽤域 **

箭頭函數有什麼缺點？

一，沒有 arguments

二，⽆法通過 call、apply、bind 改變 this

1、相同點
三個都是用於改變this指向；
接收的第一個參數都是this要指向的對象；
都可以利用後續參數傳參。
2、不同點
call和bind傳參相同，多個參數依次傳入的；
apply只有兩個參數，第二個參數為數組；
call和apply都是對函數進行直接調用，而bind方法不會立即調用函數，而是返回一個修改this後的函數。

不能使⽤箭頭函數的場景：

1.對象的⽅法，不能使⽤ -> this 指向不正確

2.原型⽅法 __proto__，不能使⽤ -> this 指向不正確

3.構造函數，不能使⽤ -> this 指向不正確

4.動態上下⽂中使⽤this，不能使⽤ -> this 指向不正確

5.Vue的⽣命周期和method，不能使⽤ -> this 指向不正確

05、for..in 與 for..of 有什麼區別？

for..in 遍歷得到key，可以遍歷對象，不可以遍歷 Set 和 Map

for..of 遍歷得到value，不可以遍歷對象，可以遍歷 Set 和 Map

Set 和 Map

Set

集合是由一組無序且唯一的項組成的，可以想象成集合是一個既沒有重覆元素，也沒有順序概念的數組
ES6提供了新的數據結構Set，類似於數組，但是成員的值都是唯一的，沒有重覆的值
Set本身是一個構造函數，用來生成Set數據結構的

Map

類似於對象，也是鍵值對的集合，但是鍵的範圍不限於字元串，各種類型的值都可以當作鍵，是一種更完善的Hash結構實現，如果你需要鍵值對的數據結構，Map 比 Object更合適
集合和字典的區別：
— 共同點：集合，字典可以存儲不重覆的值
— 不同點：集合是以[值，值]的形式存儲元素，字典是以[鍵，值]的形式存儲

06、typeOf 可以判斷哪些類型？

基本數據類型，判斷 {} 或【】會返回 object

undefined

string

number

boolean

function

object

symbol 是ES6 引入了一種新的基本數據類型（原始數據類型） Symbol ，表示獨一無二的值。它是 JavaScript 語言的第七種數據類型，前六種是： undefined 、 null 、布爾值（Boolean）、字元串（String）、數值（Number）、對象（Object）。

每個從 Symbol() 返回的symbol值都是唯一的。一個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、何時使⽤ == ？何時使⽤ === ？

除了 if (obj.a == null) 使⽤ == 之外，全部⽤ ===

擴展

falsely 變數，除此之外都是 truly 變數

!!0 === false

!!NaN === false

!!'' === false

!!null === false

!!undefined === false

!!false === false

！！取反之後還是 false 的就是 falsely 變數

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

一個是傳值，一個是傳址

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)) {
result[key] = deepClone(obj[key]);   // 遞歸
 }
 }
return result;
}

個人博客原文地址：http://blog.qianbaiyv.cn/get/my/blog/details/2311887075%40qq.com/118

您的分享是我們最大的動力!