真題模擬

• 面試真題
• 講解前提示
• 何為變量提升
• • • var和let const的區別
    • typeof返回哪些類型
    • 列舉強制類型轉換和隱式類型轉換
• 手寫深度比較 isEqual
• • • 手寫深度比較，模擬lodash isEqual
    • split() 和join()的區別
    • 數組pop push unshift shift分別做什么
    • 數組的API，有哪些是純函數
• 你是否真的會用數組map
• • • 數組slice和splice的區別
    • [10,20,30].map(parseInt)返回結果是什么
    • ajax請求get和post的區別
• 再學閉包
• • • 函數call和apply的區別
    • 事件代理（委托）是什么
    • 閉包是什么？有什么特效？有什么負面影響
• 回顧DOM操作和優化
• • • 如何阻止時間冒泡和默認行為
    • 查找、添加、刪除、移動DOM節點的方法
    • 如何減少DOM操作
• jsonp本質是ajax嗎
• • • 解釋jsonp的原理，為何它不是真正的ajax
    • document load和ready的區別
    • 兩等和三等的不同
• 是否用過Object.create()
• • • 函數聲明和函數表達式的區別
    • new Object() 和 Object.create()的區別
    • 關于this的場景題
• 常見的正則表達式
• • • 關于作用域和自由變量的場景題 - 1
    • 判斷字符串以字母開頭，后面字母數字下劃線，長度6-30
    • 關于作用域和自由變量的場景題 - 2
• 如何獲取最大值
• • • 手寫字符串trim方法，保證瀏覽器兼容性
    • 如何獲取多個數字中的最大值
    • 如何用JS實現繼承
• 解析url參數
• • • 如何捕獲JS程序中的異常
    • 什么是JSON
    • 獲取當前頁面url參數
• 數組去重有幾種方式
• • • 將url參數解析為JS對象
    • 手寫數組flatern，考慮多層級
    • 數組去重
• 是否用過requestAnimationFrame
• • • 手寫深拷貝
    • 介紹一下RAF requestAnimationFrame
    • 前端性能如何優化？一般從哪幾個方面考慮？

面試真題

• 搜集網上的高頻JS初級面試題
• 驗證和復習之前學過的知識
• 補充其他技能，如正則表達式、數組API

講解前提示

• 題目沒有按照知識點或者難度排序，即混排
• 只篩選了初級面試題，即本課程知識體系之內的
• 如您遇到了其他未講到的面試題，歡迎提供，讓課程更完善

何為變量提升

var和let const的區別

• var是ES5語法，let const是ES6語法，var有變量提升
• var和let是變量，可修改；const是常量，不可修改
• let const有塊級作用域，var沒有

/ // 變量提升 ES5 // console.log(a) // undefined // var a = 200// var a // console.log(a) // undefined // a = 200// 塊級作用域 for (let i = 0; i < 10; i++) {let j = i + 1 } console.log(j)

typeof返回哪些類型

• undefined string number boolean symbol
• object（注意，typeof null === ‘object’）
• function

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

• 強制：parseInt parseFloat toString等
• 隱式：if、邏輯運算、==、+拼接字符串

手寫深度比較 isEqual

手寫深度比較，模擬lodash isEqual

// 判斷是否是對象或數組 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. 先取出 obj1 和 obj2 的 keys ，比較個數const obj1Keys = Object.keys(obj1)const obj2Keys = Object.keys(obj2)if (obj1Keys.length !== obj2Keys.length) {return false}// 2. 以 obj1 為基準，和 obj2 一次遞歸比較for (let key in obj1) {// 比較當前 key 的 val —— 遞歸！！！const res = isEqual(obj1[key], obj2[key])if (!res) {return false}}// 3. 全相等return true }// 測試 const obj1 = {a: 100,b: {x: 100,y: 200} } const obj2 = {a: 100,b: {x: 100,y: 200} } // console.log( obj1 === obj2 ) console.log( isEqual(obj1, obj2) )const arr1 = [1, 2, 3] const arr2 = [1, 2, 3, 4]

split() 和join()的區別

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

數組pop push unshift shift分別做什么

// const arr = [10, 20, 30, 40]// // pop // const popRes = arr.pop() // console.log(popRes, arr) 40 [10, 20, 30]// // shift // const shiftRes = arr.shift() // console.log(shiftRes, arr) 10 [20, 30, 40]// // push // const pushRes = arr.push(50) // 返回 length // console.log(pushRes, arr) 5 [10, 20, 30, 40, 50]// // unshift // const unshiftRes = arr.unshift(5) // 返回 length // console.log(unshiftRes, arr) 5 [5, 10, 20, 30, 40]

數組的API，有哪些是純函數

// // 純函數：1. 不改變源數組（沒有副作用）；2. 返回一個數組 // const arr = [10, 20, 30, 40]// // concat // const arr1 = arr.concat([50, 60, 70]) // // map // const arr2 = arr.map(num => num * 10) // // filter // const arr3 = arr.filter(num => num > 25) // // slice // const arr4 = arr.slice()// // 非純函數 // // push pop shift unshift // // forEach // // some every // // reduce

你是否真的會用數組map

數組slice和splice的區別

• 功能區別（slice - 切片，splice - 剪接）
• 參數和返回值
• 是否純函數

// const arr = [10, 20, 30, 40, 50]// // slice 純函數 // const arr1 = arr.slice() //console.log(arr1,arr) [10, 20, 30, 40, 50],[10, 20, 30, 40, 50] // const arr2 = arr.slice(1, 4) //console.log(arr2,arr) [20, 30, 40],[10, 20, 30, 40, 50] // const arr3 = arr.slice(2) //console.log(arr3,arr) [30, 40, 50],[10, 20, 30, 40, 50] // const arr4 = arr.slice(-3) // console.log(arr4,arr) [30, 40, 50],[10, 20, 30, 40, 50]// // splice 非純函數 // const spliceRes = arr.splice(1, 2, 'a', 'b', 'c') //console.log(spliceRes,arr) [20, 30],[10, "a", "b", "c", 40, 50] // const spliceRes1 = arr.splice(1, 2) // console.log(spliceRes1, arr) [20, 30], [10, 40, 50] // const spliceRes2 = arr.splice(1, 0, 'a', 'b', 'c') // console.log(spliceRes2, arr) [],[10, "a", "b", "c", 20, 30, 40, 50]

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

• map的參數和返回值
• parseInt參數和返回值

const res = [1, 2, 3].map(parseInt) console.log(res) //[1, NaN, NaN] // 拆解 [1, 2, 3].map((num, index) => {return parseInt(num, index) }) //parseInt(string, radix) 函數將給定的字符串以指定基數（radix/base）解析成為整數。就是 你想把string當成radix進制數解析成10進制 //radix傳入0時會把1當成是10進制數，所以“1”成功了。 //radix傳入1時...沒有1進制數，所以不可能轉換成功，返回NaN //radix傳入2時，"3"不能當作2進制數處理所以也返回NaN

ajax請求get和post的區別

• get一般用于查詢操作，post一般用戶提交操作
• get參數拼接在url上，post放在請求體內（數據體積可更大）
• 安全性：post易于防止CSRF

再學閉包

函數call和apply的區別

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

事件代理（委托）是什么

閉包是什么？有什么特效？有什么負面影響

• 回顧作用域和自由變量
• 回顧閉包應用場景：作為參數被傳入，作為返回值被返回
• 回顧：自由變量的查找，要在函數定義的地方（而非執行的地方）
• 影響：變量會常駐內存，得不到釋放，閉包不要亂用

// // 自由變量示例 —— 內存會被釋放 // let a = 0 // function fn1() { // let a1 = 100// function fn2() { // let a2 = 200// function fn3() { // let a3 = 300 // return a + a1 + a2 + a3 // } // fn3() // } // fn2() // } // fn1()// // 閉包 函數作為返回值 —— 內存不會被釋放 // function create() { // let a = 100 // return function () { // console.log(a) // } // } // let fn = create() // let a = 200 // fn() // 100function print(fn) {let a = 200fn() } let a = 100 function fn() {console.log(a) } print(fn) // 100

回顧DOM操作和優化

如何阻止時間冒泡和默認行為

event.stopProppagation() event.preventDefault()

查找、添加、刪除、移動DOM節點的方法

基礎中的基礎，不再演示，可回顧之前的章節

如何減少DOM操作

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

jsonp本質是ajax嗎

解釋jsonp的原理，為何它不是真正的ajax

• 瀏覽器的同源策略（服務端沒有同源策略）和跨域
• 哪些html標簽能繞過跨域
• jsonp的原理

document load和ready的區別

兩等和三等的不同

• 兩等會嘗試類型轉換
• 三等嚴格相等
• 哪些場景才用兩等？

是否用過Object.create()

函數聲明和函數表達式的區別

• 函數聲明function fn(){…}
• 函數表達式 const fn = function(){…}
• 函數聲明會在代碼執行前預加載，而函數表達式不會

// // 函數聲明 // const res = sum(10, 20) // console.log(res) 30 // function sum(x, y) { // return x + y // }// // 函數表達式 // var res = sum(10, 20) sum is not a function // console.log(res) // var sum = function (x, y) { // return x + y // }

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

• {}等同于new Object()，原型Object.prototype
• Object.create(null)沒有原型
• 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} }) //console.log(obj1===obj2) false const obj21 = new Object(obj1) //console.log(obj21===obj1) true const obj3 = Object.create(null) //console.log(obj3) 返回空對象，沒有原型，沒有屬性 const obj4 = new Object() //console.log(obj4) 返回空對象{}，有原型const obj5 = Object.create({a: 10,b: 20,sum() {return this.a + this.b} })//創建一個空對象，把空對象原型指向傳入的對象 //console.log(obj5===obj1) false const obj6 = Object.create(obj1) //console.log(obj6===obj1) false //console.log(obj6.__proto__===obj1) true obj1.c = 1000; console.log(obj6.c) //1000

關于this的場景題

const User = {count:1,getCount:function(){return this.count;} } console.log(User.getCount()) //1 const func = User.getCount console.log(func()) //undefined,this指window

常見的正則表達式

關于作用域和自由變量的場景題 - 1

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

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

const reg = /^[a-zA-Z]\w{5, 29}$/ 學習正則表達式的規則 手寫常見的正則表達式 // 郵政編碼 /\d{6}/// 小寫英文字母 /^[a-z]+$/// 英文字母 /^[a-zA-Z]+$/// 日期格式 2019.12.1 /^\d{4}-\d{1,2}-\d{1,2}$/// 用戶名 /^[a-zA-Z]\w{5, 17}$/// 簡單的 IP 地址匹配 /\d+\.\d+\.\d+\.\d+/

https://deerchao.cn/tutorials/regex/regex.htm

關于作用域和自由變量的場景題 - 2

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

如何獲取最大值

手寫字符串trim方法，保證瀏覽器兼容性

String.prototype.trim = function(){return this.replace(/^\s+/,'').replace(/\s+$/,'') } //原型、this、正則表達式

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

//方式一 function max(){const nums = Array.prototype.slice.call(arguments) //變為數組let max = 0nums.forEach(n => {if(n > max){max = n}})return max } //方式二 Math.max(10,30,20,40) //以及Math.min

如何用JS實現繼承

• class繼承
• prototype繼承

解析url參數

如何捕獲JS程序中的異常

try{//todo }catch(ex){console.log.error(ex) //手動捕獲catch }finally{//todo } //自動捕獲 window.onerror = function(message,source,lineNum,colNum,error){//第一，對跨域的js，如CDN的，不會有詳細的報錯信息//第二，對于壓縮的js，還要配合sourceMap反查到未壓縮代碼的行、列 }

什么是JSON

• json是一種數據格式，本質是一段字符串
• json格式和JS對象結構一致，對JS語言更友好
• window.JSON是一個全局對象：JSON.stringify JSON.parse
  key和value必須用雙引號（除非是bool或者數字）

獲取當前頁面url參數

• 傳統方式，查找location.search
• 新API，URLSearchParams

// // 傳統方式 // function query(name) { // const search = location.search.substr(1) // 類似 array.slice(1) // // search: 'a=10&b=20&c=30' // const reg = new RegExp(`(^|&)${name}=([^&]*)(&|$)`, 'i') // const res = search.match(reg) // if (res === null) { // return null // } // return res[2] // } // query('d')// URLSearchParams 瀏覽器兼容性問題 function query(name) {const search = location.searchconst p = new URLSearchParams(search)return p.get(name) } console.log( query('b') )

數組去重有幾種方式

將url參數解析為JS對象

//傳統方式，分析search 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 } //使用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 // 已經是 flatern [1, 2, 3, 4]}const res = Array.prototype.concat.apply([], arr)return flat(res) // 遞歸 }const res = flat( [1, 2, [3, 4, [10, 20, [100, 200]]], 5] ) console.log(res) //[1,2,3,4,10,20,100,200,5]

數組去重

• 傳統方式，遍歷元素挨個比較、去重
• 使用Set
• 考慮計算效率

// // 傳統方式 // function unique(arr) { // const res = [] // arr.forEach(item => { // if (res.indexOf(item) < 0) { // res.push(item) // } // }) // return res // }// 使用 Set （無序，不能重復） function unique(arr) {const set = new Set(arr)return [...set] } const res = unique([30, 10, 20, 30, 40, 10]) console.log(res)

是否用過requestAnimationFrame

手寫深拷貝

/*** 深拷貝* @param {Object} obj 要拷貝的對象*/ function deepClone(obj = {}) {if (typeof obj !== 'object' || obj == null) {// obj 是 null ，或者不是對象和數組，直接返回return obj}// 初始化返回結果let resultif (obj instanceof Array) {result = []} else {result = {}}for (let key in obj) {// 保證 key 不是原型的屬性if (obj.hasOwnProperty(key)) {// 遞歸調用！！！result[key] = deepClone(obj[key])}}// 返回結果return result } const obj1 = {age: 20,name: 'xxx',address: {city: 'beijing'},arr: ['a', 'b', 'c'] }const obj2 = deepClone(obj1) obj2.address.city = 'shanghai' obj2.arr[0] = 'a1' console.log(obj1.address.city) console.log(obj1.arr[0]) //注意Object.assign不是深拷貝 const obj = {a:10,b:20,c:30} Object.assign(obj,{d:40}) {a:10,b:20,c:30,d:40} console.log(obj) //{a:10,b:20,c:30,d:40}const obj1 = Object.assign({},obj,{e:50}) console.log(obj) //{a:10,b:20,c:30,d:40} console.log(obj1) //{a:10,b:20,c:30,d:40,e:50} obj.a = 100 console.log(obj1) //{a:10,b:20,c:30,d:40,e:50} const obj = {a:10,{x:100,y:100}} const obj1 = Object.assign({},obj,{c:30}) console.log(obj) //{a:10,{x:100,y:100}} console.log(obj1) //{a:10,{x:100,y:100},c:30} obj.a = 100 console.log(obj) //{a:100,{x:100,y:100}} nsole.log(obj1) //{a:10,{x:100,y:100},c:30} obj.b.x = 101 console.log(obj1.b.x) //101

介紹一下RAF requestAnimationFrame

• 要想動畫流暢，更新頻率要60幀/s，即16.67ms更新一次視圖
• setTimeout要手動控制頻率，而RAF瀏覽器會自動控制
• 后臺標簽或隱藏iframe中，RAF會暫停，而setTimeout依然執行

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>JS 真題演示</title><style>#div1 {width: 100px;height: 50px;background-color: red;}</style></head><body><p>JS 真題演示</p><div id="div1"></div><script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.js"></script><script src="./RAF.js"></script></body> </html> // 3s 把寬度從 100px 變為 640px ，即增加 540px // 60幀/s ，3s 180 幀 ，每次變化 3pxconst $div1 = $('#div1') let curWidth = 100 const maxWidth = 640// // setTimeout // function animate() { // curWidth = curWidth + 3 // $div1.css('width', curWidth) // if (curWidth < maxWidth) { // setTimeout(animate, 16.7) // 自己控制時間 // } // } // animate()// RAF function animate() {curWidth = curWidth + 3$div1.css('width', curWidth)if (curWidth < maxWidth) {window.requestAnimationFrame(animate) // 時間不用自己控制} } animate()

前端性能如何優化？一般從哪幾個方面考慮？

• 原則：多使用內存、緩存，減少計算、減少網絡請求
• 方向：加載頁面，頁面渲染，頁面操作流暢度

總結

以上是生活随笔為你收集整理的（十三）真题模拟【告诉你答案是什么】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。