前端高頻面試題 Day02

面試題

var 和 let const 的區別

  • var 是 ES5 及之前的語法，let const 是 ES6 語法
  • var 和 let 是變量，可修改；const 是常量，不可修改
  • var 有變量提升，let const 沒有
  • var 沒有塊級作用域，let const 有 （ES6 語法有塊級作用域）
// var 變量提升
console.log('a', a)
var a = 100// let 沒有變量提升
console.log('b', b)
let b = 200

// var 沒有塊級作用域
for (var i = 0; i < 10; i++) {var j = 1 + i
}
console.log(i, j)// let 有塊級作用域
for (let x = 0; x < 10; x++) {let y = 1 + x
}
console.log(x, y)

typeof 有哪些返回類型？

// 判斷所有值類型
let a
console.log(a) // 'undefined'
const str = 'abc'
typeof str  // 'string'
const n = 100
typeof n // 'number'
const b = true
typeof b // 'boolean'
const s = Symbol('s')
typeof s // 'symbol'

列舉強制類型轉換和隱式類型轉換

  • 強制 parseInt parseFloat
  • 隱式 if ，== ， + 拼接字符串

手寫深度比較，如 lodash isEqual

// 實現如下效果
const obj1 = {a: 10, b: { x: 100, y: 200 }}
const obj2 = {a: 10, b: { x: 100, y: 200 }}
isEqual(obj1, obj2) === true

// 判斷是否是 object
function isObject(obj) {return typeof obj === 'object' && obj !== null
}
// 全相等
function isEqual(obj1, obj2) {if (!isObject(obj1) || !isObject(obj2)) {// 值類型，不是對象或數組（注意，equal 時一般不會有函數，這里忽略）return obj1 === obj2}if (obj1 === obj2) {// 兩個引用類型全相等（同一個地址）return true}// 兩個都是引用類型，不全相等// 1. 先取出 obje2 obj2 的 keys，比較個數const obj1Keys = Object.keys(obj1)const obj2Keys = Object.keys(obj2)if (obj1Keys.length !== obj2Keys.length) {// keys 個數不相等，則不是全等return false}// 2. 以 obj1 為基準，和 obj2 依次遞歸比較for (let key in obj1) {// 遞歸比較const res = isEqual(obj1[key], obj2[key])if (!res) {// 遇到一個不相等的，則直接返回 falsereturn false}}// 3. 都相等，則返回 truereturn true
}

split() 和 join() 的區別

'1-2-3'.split('-')
[1,2,3].join('-')

數組的 pop push unshift shift 分別做什么

注意以下幾點

  • 函數作用是什么？
  • 返回值是什么？
  • 對原數組是否造成影響？
  • 如何對原數組不造成影響？concat slice map filter

【擴展】數組 API 的純函數和非純函數

純函數 —— 1. 不改變來源的數組； 2. 返回一個數組

  • concat
  • map
  • filter
  • slice
const arr = [100, 200, 300]
const arr1 = arr.concat([400, 500])
const arr2 = arr.map(num => num * 10)
const arr3 = arr.filter(num => num > 100)
const arr4 = arr.slice(-1)

非純函數

情況1，改變了原數組

  • push
  • reverse
  • sort
  • splice

情況2，未返回數組

  • push
  • forEach
  • reduce
  • some

數組 slice 和 splice 的區別？

slice - 切片；splice - 剪接；

// slice()
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice() // arr2 和 arr1 不是一個地址，純函數，重要！！！// arr.slice(start, end)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(1, 4) // [20, 30, 40]// arr.slice(start)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(2) // [30, 40, 50]// 負值
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.slice(-2) // [40, 50]

// arr.splice(index, howmany, item1, ....., itemX)
const arr1 = [10, 20, 30, 40, 50]
const arr2 = arr1.splice(1, 2, 'a', 'b', 'c') // [20, 30]
// arr1 會被修改，不是純函數，即有副作用

[10, 20, 30].map(parseInt) 的結果是什么？

// 拆解開就是
[10, 20, 30].map((num, index) => {return parseInt(num, index)// parseInt 第二個參數是進制// 如果省略該參數或其值為 0，則數字將以 10 為基礎來解析。如果它以 “0x” 或 “0X” 開頭，將以 16 為基數。// 如果該參數小于 2 或者大于 36，則 parseInt() 將返回 NaN
})

// 可以對比
[10, 20, 30].map((num, index) => {return parseInt(num, 10)
})

ajax 請求中 get 和 post 的區別

  • get 一般用于查詢操作，post 一般用于提交操作
  • get 參數在 url 上，post 在請求體內
  • 安全性：post 請求易于防止 CSRF

（post 代碼演示：網頁，postname）

call 和 apply 的區別

  • fn.call(this, p1, p2, p3)
  • fn.apply(this, arguments)

事件委托（代理）是什么

const p1 = document.getElementById('p1')
const body = document.body
bindEvent(p1, 'click', e => {e.stopPropagation() // 注釋掉這一行，來體會事件冒泡alert('激活')
})
bindEvent(body, 'click', e => {alert('取消')
})

閉包是什么，有什么特性，對頁面有什么影響

知識點回顧

  • 回歸作用域和自由變量
  • 閉包的應用場景：函數作為參數被傳入，函數作為返回值被返回
  • 關鍵點：自由變量的查找，要在函數定義的地方，而不是執行的地方

對頁面的影響

  • 變量內存得不到釋放，可能會造成內存積累（不一定是泄露）
// 自由變量示例 —— 內存會被釋放
let a = 0
function fn1() {let a1 = 100function fn2() {let a2 = 200function fn3() {let a3 = 300return a + a1 + a2 + a3}fn3()}fn2()
}
fn1()

// 閉包 函數作為返回值 —— 內存不會被釋放
function create() {let a = 100return function () {console.log(a)}
}
let fn = create()
let a = 200
fn() // 100// 閉包 函數作為參數 —— 內存不會被釋放
function print(fn) {let a = 200fn()
}
let a = 100
function fn() {console.log(a)
}
print(fn) // 100

如何阻止事件冒泡和默認行為

event.stopPropagation()
event.preventDefault()

添加 刪除 替換 插入 移動 DOM 節點的方法

（粘貼一下代碼片段，作為回顧）

怎樣減少 DOM 操作？

  • 緩存 DOM 查詢結果
  • 多次操作，合并到一次插入

（粘貼一下代碼片段，作為回顧）

解釋 jsonp 的原理，以及為什么不是真正的 ajax

  • 瀏覽器的同源策略，什么是跨域？
  • 哪些 html 標簽能繞過跨域？
  • jsonp 原理

document load 和 document ready 的區別

window.addEventListener('load', function () {// 頁面的全部資源加載完才會執行，包括圖片、視頻等
})
document.addEventListener('DOMContentLoaded', function () {// DOM 渲染完即可執行，此時圖片、視頻還可能沒有加載完
})

== 和 === 的不同

  • == 會嘗試進行類型轉換
  • === 嚴格相等

函數聲明與函數表達式的區別？

const res = sum(10, 20)
console.log(res) // 30// 函數聲明
function sum(x, y) {return x + y
}

const res = sum(100, 200)
console.log(res) // 報錯！！！// 函數表達式
const sum = function(x, y) {return x + y
}

new Object() 和 Object.create() 的區別

示例一

const obj1 = {a: 10,b: 20,sum() {return this.a + this.b}
}
const obj2 = new Object({a: 10,b: 20,sum() {return this.a + this.b}
})
const obj3 = Object.create({a: 10,b: 20,sum() {return this.a + this.b}
})
// 分別打印看結構

示例二

const obj1 = {a: 10,b: 20,sum() {return this.a + this.b}
}
const obj2 = new Object(obj1)
console.log(obj1 === obj2) // true
const obj3 = Object.create(obj1)
console.log(obj1 === obj3) // falseconst obj4 = Object.create(obj1)
console.log(obj3 === obj4) // false// 然后修改 obj1 ，看 obj2 obj3 和 obj4
obj1.printA = function () {console.log(this.a)
}

對作用域上下文和 this 的理解，場景題

const User = {count: 1,getCount: function() {return this.count}
}
console.log(User.getCount()) // what?
const func = User.getCount
console.log( func() ) // what?

對作用域和自由變量的理解，場景題

let i
for(i = 1; i <= 3; i++) {setTimeout(function(){console.log(i)}, 0)
}
// what?

判斷字符串以字母開頭，后面可以是數字，下劃線，字母，長度為 6-30

const reg = /^[a-zA-Z]\w{5,29}$/

  • 查看正則表達式規則 https://www.runoob.com/regexp/regexp-syntax.html
  • 查看常見正則表達式
/\d{6}/ // 郵政編碼
/^[a-z]+$/ // 小寫英文字母
/^[A-Za-z]+$/ // 英文字母
/^\d{4}-\d{1,2}-\d{1,2}$/ // 日期格式
/^[a-zA-Z]\w{5,17}$/ // 用戶名（字母開頭，字母數字下劃線，5-17位）
/\d+\.\d+\.\d+\.\d+/ // 簡單的 IP 地址格式

以下代碼，分別 alert 出什么？

let a = 100
function test() {  alert(a)a = 10alert(a)
}
test()
alert(a)
// what?

手寫 trim 函數，保證瀏覽器兼容性

String.prototype.trim= function (){return this.replace(/^\s+/,"").replace(/\s+$/,"")
}

知識點：原型，this，正則

如何獲取多個數值中的最大值？

Math.max(10, 30, 20, 40)
// 以及 Math.min

function max() {const nums = Array.prototype.slice.call(arguments) // 變為數組let max = 0nums.forEach(n => {if (n > max) {max = n}})return max
}

如何用 JS 實現繼承？

class 代碼

程序中捕獲異常的方法

try {// todo
} catch (ex) {console.error(ex) // 手動捕獲 catch
} finally {// todo
}

// 自動捕獲 catch（但對跨域的 js 如 CDN 的，不會有詳細的報錯信息）
window.onerror = function (message, source, lineNom, colNom, error) {
}

什么是 JSON ？

首先，json 是一種數據格式標準，本質是一段字符串，獨立于任何語言和平臺。注意，json 中的字符串都必須用雙引號。

{"name": "張三","info": {"single": true,"age": 30,"city": "北京"},"like": ["籃球", "音樂"]
}

其次，JSON 是 js 中一個內置的全局變量，有 JSON.parse 和 JSON.stringify 兩個 API 。

獲取當前頁面 url 參數

自己實現

// const url = 'https://www.xxx.com/path/index.html?a=100&b=200&c=300#anchor'
function query(name) {const search = location.search.substr(1) // 去掉前面的 `?`const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i')const res = search.match(reg)if (res === null) {return null}return decodeURIComponent(res[2])
}
console.log( query('a') )
console.log( query('c') )

新的 API URLSearchParams

const pList = new URLSearchParams(location.search)
pList.get('a')

將 url 參數解析為 JS 對象？

自己編寫

function queryToObj() {const res = {}const search = location.search.substr(1) // 去掉前面的 `?`search.split('&').forEach(paramStr => {const arr = paramStr.split('=')const key = arr[0]const val = arr[1]res[key] = val})return res
}

新的 API URLSearchParams

function queryToObj() {const res = {}const pList = new URLSearchParams(location.search)pList.forEach((val, key) => {res[key] = val})return res
}

實現數組 flatern ，考慮多層級


function flat(arr) {// 驗證 arr 中，還有沒有深層數組，如 [1, [2, 3], 4]const isDeep = arr.some(item => item instanceof Array)if (!isDeep) {return arr // 沒有深層的，則返回}// 多深層的，則 concat 拼接const res = Array.prototype.concat.apply([], arr) // 回歸上文，apply 和 call 的區別return flat(res) // 遞歸調用，考慮多層
}
flat([[1,2], 3, [4,5, [6,7, [8, 9, [10, 11]]]]])

數組去重

要考慮：

  • 順序是否一致？
  • 時間復雜度

ES5 語法手寫。

// 寫法一
function unique(arr) {const obj = {}arr.forEach(item => {obj[item] = 1 // 用 Object ，去重計算高效，但順序不能保證。以及，非字符串會被轉換為字符串！！！})return Object.keys(obj)
}
unique([30, 10, 20, 30, 40, 10])

// 寫法二
function unique(arr) {const res = []arr.forEach(item => {if (res.indexOf(item) < 0) { // 用數組，每次都得判斷是否重復（低效），但能保證順序res.push(item)}})return res
}
unique([30, 10, 20, 30, 40, 10])

用 ES6 Set

// 數組去重
function unique(arr) {const set = new Set(arr)return [...set]
}
unique([30, 10, 20, 30, 40, 10])

手寫深拷貝

粘貼代碼

【注意】Object.assign 不是深拷貝，可以順帶講一下用法

  • Object.assign(obj1, {...})
  • const obj2 = Object.assign({}, obj1, {...})

介紹一下 RAF requestAnimationFrame

想用 JS 去實現動畫，老舊的方式是用 setTimeout 實時刷新，但這樣效率非常低，而且可能會出現卡頓。

  • 想要動畫流暢，更新頻率是 60幀/s ，即每 16.6ms 更新一次試圖。太慢了，肉眼會感覺卡頓，太快了肉眼也感覺不到，資源浪費。
  • 用 setTimeout 需要自己控制這個頻率，而 requestAnimationFrame 不用自己控制，瀏覽器會自動控制
  • 在后臺標簽或者隱藏的<iframe>中，setTimeout 依然會執行，而 requestAnimationFrame 會自動暫停，節省計算資源

（代碼演示）

對前端性能優化有什么了解？一般都通過那幾個方面去優化的？

原則

  • 多使用內存、緩存或者其他方法
  • 減少 CPU 計算、較少網絡

方向

  • 加載頁面和靜態資源
  • 頁面渲染

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/40332.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/40332.shtml
英文地址，請注明出處：http://en.pswp.cn/news/40332.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！

相關文章

JavaWeb-DAO設計模式

JavaWeb-DAO設計模式

目錄 DAO設計模式 1.認識DAO 2.DAO各部分的詳解 3.DAO設計模式流程 DAO設計模式 1.認識DAO DAO(Data Acess Object 數據庫訪問對象)的主要功能是操作數據庫&#xff0c;所以DAO在標準開發架構中數據數據層&#xff0c;以下是標準開發的架構 客戶層&#xff1a;目前使用B/…
閱讀更多...
vue中style scoped屬性的作用

vue中style scoped屬性的作用

一、為什么要給style 節點加 scoped 屬性&#xff08;vue&#xff09; 1、作用&#xff1a;當style標簽里面有scoped屬性時&#xff0c;它的css只作用于當前組建的元素。在單頁面項目中可以使組件之間互不污染&#xff0c;實現模塊化&#xff08;實現組件的私有化&#xff0c;不…
閱讀更多...
Ubuntu安裝mysql5.7

Ubuntu安裝mysql5.7

目錄 1. 更新系統軟件包2. 安裝MySQL 5.73. 啟動MySQL 服務4. 設置MySQL root 密碼5. 驗證MySQL 安裝6. 啟用遠程訪問7. 創建新用戶8. 為新用戶授予權限9. mysql命令 以Ubuntu 18.04系統為例&#xff0c;安裝MySQL 5.7。操作步驟如下&#xff1a; 1. 更新系統軟件包 sudo apt…
閱讀更多...
Openai中的tokens怎么估計

Openai中的tokens怎么估計

大規模語言模型&#xff08;LLM&#xff09;的出現給自然語言處理領域帶來了變革的可能性&#xff0c;Openai開放了chatgpt的API&#xff0c;方便了開發人員使用LLM的推理能力&#xff0c;注冊時贈送5美元的使用額度&#xff0c;有效期3個月。 如果想便捷的使用chatgpt的API&a…
閱讀更多...
介紹 TensorFlow 的基本概念和使用場景

介紹 TensorFlow 的基本概念和使用場景

TensorFlow 是一種開源的機器學習框架&#xff0c;由 Google 開發。它是用來構建和訓練機器學習模型的強大工具&#xff0c;支持很多種不同類型的機器學習算法&#xff0c;并使用數據流圖來表示計算過程。 TensorFlow 的核心是張量 (Tensor) 和計算圖 (Graph)。 張量 (Tensor)…
閱讀更多...
OpenCV之薄板樣條插值(ThinPlateSpline)

OpenCV之薄板樣條插值(ThinPlateSpline)

官方文檔&#xff1a;OpenCV: cv::ThinPlateSplineShapeTransformer Class Reference 使用方法&#xff1a; 頭文件&#xff1a;#include <opencv2/shape/shape_transformer.hpp> &#xff08;1&#xff09;點匹配 一般根據有多少個樣本&#xff08;或者點&#xff09;…
閱讀更多...
6.2 Spring Boot整合MyBatis

6.2 Spring Boot整合MyBatis

1、基于Spring BootMyBatis的學生信息系統的設計與實現案例 基于Spring BootMyBatis實現學生信息的新增、修改、刪除、查詢功能&#xff0c;并實現MySQL數據庫的操作。 MySQL數據庫創建學生表&#xff08;t_student&#xff09;&#xff0c;有主鍵、姓名、年齡、性別、出生日…
閱讀更多...
npm如何設置淘寶的鏡像源模式

npm如何設置淘寶的鏡像源模式

1. 查看當前npm的下載源 npm config get registry2. 全局配置npm使用淘寶鏡像作為默認下載源 npm config set registry https://registry.npm.taobao.org --global3. 安裝依賴包 npm install <package-name> 添加到devDependencies字段中&#xff1a; npm install &l…
閱讀更多...
Jmeter 二次開發 函數助手 AES加解密

Jmeter 二次開發 函數助手 AES加解密

Jmeter 二次開發 函數助手 AES加解密 1. 環境準備2. 關鍵技術說明2.1 離線導包2.2 示例代碼 3. 代碼包4. 結果演示 1. 環境準備 IDE &#xff1a;IntelliJ IDEA 2021.1.1 x64JAVA環境 &#xff1a;jdk1.8.0_251離線導包&#xff1a;導入Jmeter安裝目錄下lib/ext下的ApacheJmet…
閱讀更多...
Java課題筆記~ SpringMVC的四種跳轉方式

Java課題筆記~ SpringMVC的四種跳轉方式

默認的跳轉是請求轉發&#xff0c;直接跳轉到jsp頁面展示 還可以使用框架提供的關鍵字redirect&#xff0c;進行一個重定向操作&#xff0c;包括重定向頁面和重定向action&#xff0c;使用框架提供的關鍵字forward&#xff0c;進行服務器內部轉發操作&#xff0c;包括轉發頁面…
閱讀更多...
Martin_DHCP_V3.0 (DHCP自動化泛洪攻擊GUI)

Martin_DHCP_V3.0 (DHCP自動化泛洪攻擊GUI)

Github>https://github.com/MartinxMax/Martin_DHCP_V3.0 首頁 Martin_DHCP_V3.0 自動化DHCP洪泛攻擊 Martin_DHCP_V3.0 使用方法 安裝三方庫 #python3 1.RunMe_Install_Packet.py 攻擊路由器 #python3 Martin_DHCP_Attack.py 填寫網卡 填寫攻擊次數 開始運行
閱讀更多...
《Go 語言第一課》課程學習筆記（二）

《Go 語言第一課》課程學習筆記（二）

初窺門徑&#xff1a;一個 Go 程序的結構是怎樣的&#xff1f; 創建“hello&#xff0c;world”示例程序 在 Go 語言中編寫一個可以打印出“hello&#xff0c;world”的示例程序&#xff0c;我們只需要簡單兩步&#xff0c;一是創建文件夾&#xff0c;二是開始編寫和運行。通…
閱讀更多...
高光譜 | 礦物識別和分類標簽數據制作、農作物病蟲害數據分類、土壤有機質含量回歸與制圖、木材含水量評估和制圖

高光譜 | 礦物識別和分類標簽數據制作、農作物病蟲害數據分類、土壤有機質含量回歸與制圖、木材含水量評估和制圖

本課程提供一套基于Python編程工具的高光譜數據處理方法和應用案例。 本課程涵蓋高光譜遙感的基礎、方法和實踐。基礎篇以學員為中心&#xff0c;用通俗易懂的語言解釋高光譜的基本概念和理論&#xff0c;旨在幫助學員深入理解科學原理。方法篇結合Python編程工具&#xff0c;…
閱讀更多...
阿里云服務器部署RabbitMQ流程

阿里云服務器部署RabbitMQ流程

阿里云百科分享使用阿里云服務器部署RabbitMQ流程&#xff0c;RabbitMQ是實現了高級消息隊列協議&#xff08;AMQP&#xff09;的開源消息代理軟件&#xff0c;用于在分布式系統中存儲轉發消息&#xff0c;有良好的易用性、擴展性和高可用性。本文介紹如何通過ECS實例部署Rabbi…
閱讀更多...
CentOS系統環境搭建（四）——Centos7安裝Java

CentOS系統環境搭建（四）——Centos7安裝Java

centos系統環境搭建專欄&#x1f517;點擊跳轉 Centos7安裝Java 查看云端yum庫中目前支持安裝的jdk軟件包 yum search java|grep jdk選擇JDK版本&#xff0c;并安裝 yum install -y java-1.8.0-openjdk檢查是否安裝成功 java -version查看JDK的安裝目錄 find / -name jav…
閱讀更多...
【Java面試】redis雪崩、穿透和擊穿詳解

【Java面試】redis雪崩、穿透和擊穿詳解

一 Redis雪崩、穿透和擊穿 1. Redis雪崩&#xff1a; Redis雪崩是指在某一時刻&#xff0c;緩存中大量的緩存數據同時失效或過期&#xff0c;導致大量的請求直接打到后端數據庫&#xff0c;導致數據庫負載劇增&#xff0c;引發性能問題甚至崩潰。這通常是因為緩存數據的過期時…
閱讀更多...
機器學習筆記：李宏毅 stable diffusion

機器學習筆記：李宏毅 stable diffusion

1 基本框架 ①&#xff1a;文字變成向量 ②&#xff1a;喂入噪聲文字encoder&#xff0c;產生中間產物 ③&#xff1a;decoder 還原圖片 2 text encoder 這張圖越往右下表示效果越好&#xff0c;可以看到text encoder尺寸越大&#xff0c;對后續生成圖片的增益越多 3 評價圖…
閱讀更多...
公園游玩必備！新零售模式如何吸引更多游客

公園游玩必備！新零售模式如何吸引更多游客

隨著科技的不斷演進&#xff0c;新零售模式正以前所未有的速度改變著我們的購物方式和消費體驗。其中&#xff0c;自動售貨機作為新零售模式的重要組成部分&#xff0c;以其智能化、便捷性和多樣性的特點&#xff0c;正逐漸成為城市中熠熠生輝的一道風景線。 從24小時不間斷的運…
閱讀更多...
LeetCode Top100 Liked 題單（序號34~51）

LeetCode Top100 Liked 題單（序號34~51）

?34. Find First and Last Position of Element in Sorted Array ? 題意&#xff1a;找到非遞減序列中目標的開頭和結尾 我的思路 用二分法把每一個數字都找到&#xff0c;最后返回首尾兩個數 代碼 Runtime12 ms Beats 33.23% Memory14 MB Beats 5.16% class Solution {…
閱讀更多...
前端練手小項目--自定義時間（html+css+js）

前端練手小項目--自定義時間（html+css+js）

自定義時間 寫文章的因 關于要寫這篇文章的原因 是記錄在工作上遇到的困難需求&#xff0c;是希望能給大家提供一些解決問題的思路 接下來我描述這個需求的多樣性&#xff0c;難點在哪。 勾選勾選框開始時間與結束時間默認顯示昨天與今天。取消勾選框開始時間與結束時間清空。…
閱讀更多...
最新文章

Copyright @ 2022~2023