<ruby id="bdb3f"></ruby>

    <p id="bdb3f"><cite id="bdb3f"></cite></p>

      <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
        <p id="bdb3f"><cite id="bdb3f"></cite></p>

          <pre id="bdb3f"></pre>
          <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

          <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
          <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

          <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                <ruby id="bdb3f"></ruby>

                合規國際互聯網加速 OSASE為企業客戶提供高速穩定SD-WAN國際加速解決方案。 廣告
                > 下面的三級標題,代表的是此小節視頻對應的標題。四級標題為對應的面試題。 ### 何為變量提升 #### 變量提升 ```javascript // 變量提升 ES5 console.log(a) // undefined var a = 200 // 等價于下面,js 執行中會把所有 var 提升的前面; var a console.log(a) // undefined a = 200 ``` #### typeof 判斷類型 * undefined、string、number、boolean、symbol * object(typeof null === 'object') * function ### 手寫深度比較 isEqual #### 手寫深度比較 lodash.isEqual ```javascript // 實現效果如下 const obj1 = {a:10,b:{x:100,y:200}} const obj2 = {a:10,b:{x:100,y:200}} isEqual(obj1,obj2) === true ``` ```javascript function isEqual(obj1, obj2) { if (!isObject(obj1) || !isObject(obj2)) { 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 } ``` #### split() 和 join() ```javascript '1-2-3'.split('-') // [1,2,3] [1,2,3].join('-') // '1-2-3' ``` #### 數組的 pop push unshift shift * 功能是什么? * 返回值是什么? * 是否會對原數組造成影響? ```javascript 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,向數組后面追加一個元素,返回新數組的length,原數組發生改變 const pushRes = arr.push() console.log(pushRes, arr) // 4 [ 10, 20, 30, 40 ] // unshift() ,在數組第一個元素前增加一個元素(傳入的參數值),返回新數組的length,原數組發生改變 const unshiftRes = arr.unshift(20) console.log(unshiftRes, arr) // 5 [ 20, 10, 20, 30, 40 ] ``` ##### 純函數 * 不改變源數組(沒有副作用) * 返回一個數組 ```javascript // arr1.concat(arr2) 拼接兩個數組,不影響源數組,返回新數組 const arr1 = arr.concat([50, 60, 70]) // arr1:[10, 20, 30, 40, 50, 60, 70 ] // 遍歷數組 const arr2 = arr.map((num) => num * 10) // [ 100, 200, 300, 400 ] // 過濾數組 const arr3 = arr.filter((num) => num > 25) // slice 從已有的數組中返回選定的元素。可以用來做深拷貝 // https://www.w3school.com.cn/jsref/jsref_slice_array.asp const arr4 = arr.slice() ``` ### 你是否真的會用數組 #### 數組 slice 和 splice 的區別 * 功能區別(slice-切片,splice-剪接) ```javascript const arr = [10,20,30,40] // slice(start?:number,end?:number),截取函數的一部分,返回新函數,不改變舊函數 const arr4 = arr.slice(1,3) // [ 10, 20, 30, 40 ] // splice(start:number,deleteCount?:number),剪接函數,改變源函數 const arr5 = arr.splice(1, 2) // arr5:[ 20, 30 ] arr:[ 10, 40 ] const spliceReg = arr.splice(1, 2, 'a', 'b', 'c') // spliceReg:[ 20, 30 ] arr:[ 10, 'a', 'b', 'c', 40 ] ``` #### [10,20,30].map(parseInt) * map 的參數和返回值 * parseInt 的參數和返回值 * **parseInt(\*string\*, \*radix\*)** 解析一個字符串并返回指定基數的十進制整數, `radix` 是2-36之間的整數,表示被解析字符串的基數 ```javascript [10,20,30].map(parseInt) // [10, NaN, NaN] // 拆解 [10,20,30].map((item,index)=>{ return parseInt(item,index) }) ``` #### ajax 請求 get 和 post 的區別 * get 一般用于查詢操作,post 一般用于提交操作 * get 參數拼接在 url 上,post 放在請求體內(數據體積可以更大) * 安全性:post 易于防止 CSRF ### 再學閉包 #### 函數 call 和 apply 的區別 ```javascript // 傳參不同,call 參數分開傳,apply 傳一個數組 fn.call(this,p1,p2,p3) fn.apply(this,arguments) ``` #### 事件代理(委托)是什么 ![image-20210313095115799](https://image.mdashen.com/pic/image-20210313095115799.png) #### 閉包是什么,有什么特性?有什么負面影響? 跳轉 [閉包](# 閉包) 閉包影響:變量會常駐內存,得不到釋放。閉包不要亂用 ### 回顧 DOM 操作和優化 #### 如何阻止事件冒泡和默認行為? ```javascript event.stopPropagation() event.preventDefault() ``` #### 如何減少 DOM 操作? ```javascript // DOM 查詢結果做緩存 // 創建一個文檔片段,document.createDocumentFragment() ``` ![image-20210313100717748](https://image.mdashen.com/pic/image-20210313100717748.png) ### jsonp 本職是 ajax 嗎? #### 解釋 jsonp 的原理,為何它不是真正的 ajax * 瀏覽器的同源策略(服務端沒有同源策略)和跨域 * jsonp 原理 ![image-20210313101530622](https://image.mdashen.com/pic/image-20210313101530622.png) > jsonp 是使用 script 標簽來進行通信。沒有使用 xhr 請求。 #### document load 和 ready 的區別 ![image-20210313101634495](https://image.mdashen.com/pic/image-20210313101634495.png) #### == 和 === 的不同 跳轉 [鏈接](# == 運算符) * 日常使用中 除了 == null 之外,其他都一律使用 === ### 常見的正則表達式 #### 關于作用域和自由變量的場景題 ```javascript // question 1 let i for(i=1;i<=3;i++){ setTimeout(function(){ console.log(i) },0) } // answer1 4 4 4 ``` ```javascript // question 2 let a = 100 function test(){ alert(a) a = 10 alert(a) } test() alert(a) // answer 2 100 10 10 ``` #### 判斷字符串以字母開頭,后面字母數字下劃線,長度 6-30 ```javascript const reg = /^[a-zA-Z]\w{5,29}$/ ``` [正則表達式30分鐘入門教程](https://deerchao.cn/tutorials/regex/regex.htm) ### 如何獲取最大值 #### 手寫字符串 trim 方法,保證瀏覽器兼容性 ```javascript String.prototype.trim = function(){ return this.replace(/^\s+/,'').replace(/\s+$/,'') } // 原型、this、正則表達式 ``` #### 如何獲取多個數字中的最大值 ```javascript function max() { const nums = Array.prototype.slice.call(arguments) // 變為數組 let max = 0 nums.forEach((n) => { if (n > max) { max = n } }) return max } ``` #### 如何用 JS 實現繼承 * class 繼承 * protorype 繼承 ### 解析 url 參數 #### 如何捕獲 JS 程序中的異常? ```javascript try{ // todo } catch (ex) { console.error(ex) // 手動捕獲 catch } finally { // todo } ``` ```javascript window.onerror = function(message,source,lineNom,colNom,error){ // 第一,對跨域的 js,如 CDN 的,不會有詳細的報錯信息 // 第二,對于壓縮的 js,還要配合 sourceMap 反查到未壓縮代碼的行、列 } ``` #### 什么是 JSON * json 是一種數據格式,本職是一段字符串 * json 格式和 js 對象結構一致,對 JS 語言更友好 * window.JSON 是一個全局對象:JSON.stringify JSON.parse #### 獲取當前頁面 url 參數 ![image-20210318173641426](https://image.mdashen.com/pic/image-20210318173641426.png) ![image-20210318173718181](https://image.mdashen.com/pic/image-20210318173718181.png) ### 數組去重有幾種方式 #### 將 url 參數解析為 JS 對象 ```javascript // 傳統方法 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 } ``` ```javascript // 新方法 function queryToObj() { const res = {} const pList = new URLSearchParams(location.search) pList.forEach((val, key) => { res[key] = val }) return res } ``` #### 手寫數組 flatern,考慮多層級 > flatern 可以理解為,拍平,扁平化(v.) ```javascript flat([1,2,[1,2,3],4,5]) // [1,2,1,3,4,5] ``` ```javascript 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) // 遞歸 } console.log(flat([1, 2, [3, 4, [5, 6, 7, [8, 9]]]])) ``` #### 數組去重 ```javascript // 傳統方式 function unique(arr) { const res = [] arr.forEach((item) => { if (res.indexOf(item) < 0) { res.push(item) } }) return res } console.log(unique([1, 2, 2, 2, 11, 3, 3])) ``` ```javascript // 使用 Set(無序,不能重復) function unique(arr){ const set = new Set(arr) return [...set] } ``` ### 是否用過 requestAnimationFrame #### 手寫深拷貝 [跳轉鏈接](# 深拷貝) * Object.assign 不是深拷貝 ```javascript function deepClone(obj = {}) { if (typeof obj !== 'object' || obj == null) { // obj 是 null ,或者不是對象和數組,直接返回 return obj } // 初始化返回結果 let result if (obj instanceof Array) { result = [] } else { result = {} } for (let key in obj) { // 保證 key 不是原型的屬性 if (obj.hasOwnProperty(key)) { // 遞歸調用,解決多級對象\數組 result[key] = deepClone(obj[key]) } } // 返回結果 return result } ``` #### RAF requestAnimationFrame * 要想動畫流暢,更新頻率要 60幀/s,即16.67ms 更新一次視圖 * setTimeout 要手動控制頻率,而 RAF 瀏覽器會自動控制 * 后臺標簽或隱藏 iframe 中,RAF 會暫停,而 setTimeout 依然執行 #### 前端性能如何優化?一般從哪幾個方面考慮? * 原則:多使用內存、緩存、減少計算、減少網路請求 * 方向:加載頁面,頁面渲染,頁面操作流暢度 ***** **完** # 祝大家早日找到心儀的工作
                  <ruby id="bdb3f"></ruby>

                  <p id="bdb3f"><cite id="bdb3f"></cite></p>

                    <p id="bdb3f"><cite id="bdb3f"><th id="bdb3f"></th></cite></p><p id="bdb3f"></p>
                      <p id="bdb3f"><cite id="bdb3f"></cite></p>

                        <pre id="bdb3f"></pre>
                        <pre id="bdb3f"><del id="bdb3f"><thead id="bdb3f"></thead></del></pre>

                        <ruby id="bdb3f"><mark id="bdb3f"></mark></ruby><ruby id="bdb3f"></ruby>
                        <pre id="bdb3f"><pre id="bdb3f"><mark id="bdb3f"></mark></pre></pre><output id="bdb3f"></output><p id="bdb3f"></p><p id="bdb3f"></p>

                        <pre id="bdb3f"><del id="bdb3f"><progress id="bdb3f"></progress></del></pre>

                              <ruby id="bdb3f"></ruby>

                              哎呀哎呀视频在线观看