前端ES6 面試過關寶典

来源:https://www.cnblogs.com/lhx9527/archive/2022/09/25/16727125.html
-Advertisement-
Play Games

ES6 部分 Typescript 部分 前端工程面經(節流防抖、https、前端攻擊、性能優化...) https://juejin.cn/post/6844903734464495623 ES6面試 為什麼選擇 ES6 ? ES6是新一代的 JS 語言標準,規範了JS的使用標準(var標量提升) ...


  1. ES6 部分

  2. Typescript 部分

  3. 前端工程面經(節流防抖、https、前端攻擊、性能優化...)

https://juejin.cn/post/6844903734464495623

ES6面試

為什麼選擇 ES6 ?
  • ES6是新一代的 JS 語言標準,規範了JS的使用標準(var標量提升)、新增了 JS 原生方法更加優雅
ES5、ES6、ES2015區別
  • ES2015特指在2015年發佈的新一代JS語言標準,ES6泛指下一代JS語言標準,包含ES2015、ES2016、ES2017、ES2018等。現階段在絕大部分場景下,ES2015預設等同ES6。ES5泛指上一代語言標準。ES2015可以理解為ES5和ES6的時間分界線。
babel is what?
  • babel是一個 ES6 轉碼器,可以將 ES6 代碼轉為 ES5 代碼,以便相容那些還沒支持ES6的平臺。
String字元串類型的升級優化

優化:

  • 新增模板字元串,不需要再使用 + 拼接字元串,使用(${})取代以往字元串形式,可以保存空格、換行符等

升級:

  • 新增 includes 方法(以往只有indexOf、lastIndexOf查找字元位置)
  • 新增 startsWith()、endsWith()、padStart()、padEnd()、repeat()
Array數組類型的升級優化

優化:

  • 數組解構賦值 let [a,b,c] = [1,2,3]形式進行賦值
  • 擴展運算符 實現數組和鬆散序列的轉化 let args = [...arguments],輕鬆實現數組結構複製

升級:

  • 新增 find,且修複 [NaN].indexOf(NaN) === -1 的bug

    • 這裡的修複指傳 callback arr.find(item => isNaN(item))
  • copyWithin(target , start 【, end 預設length】),將數組 (s,end] 的內容複製到 target開始的地方,end為負數則就取start處的數據

  • includes() :可以用來改寫 條件1 && 條件2 && 條件3

  • fill() : new Array(10).fill(1)

  • flat() : [1,2,[2,3]].flat(),只能展開一層

Number數字類型的升級優化

優化:

  • 更加嚴謹安全
    • Number.isNaN:更為嚴格安全,isNaN()會將字元串先往Number類型轉換,再判斷
    • Number.isFinite(): Infinity、字元串、對象返回 false全局isFinite()同上
    • Number.isInteger(1.0) // true,判斷是否是整數
  • Math:
    • Math.cbrt(8) === 2,計算立方根
    • Math.hypot(3:,4) === 25,計算所有參數的平方的和的平方根
    • Math.sign():正數返回1,負數返回-1,非數字返回NaN
    • Math.trunc():先轉換為Number類型,正數、負數取整 / 非數字返回NaN
Object類型的升級優化

優化:

  • 對象屬性變數式聲明:
// 屬性名與對應value的變數名相同時可縮寫
let [apple, orange] = ['red appe', 'yellow orange'];
let myFruits = {apple, orange};    
// let myFruits = {apple: 'red appe', orange: 'yellow orange'};
  • 對象解構賦值
  • 對象的擴展運算符(...)let {...obj} = {'a' : 1 , 'b' : 2}
  • super關鍵字:同this總是指向當前函數所在的對象不同
    • super總是指向當前函數所在對象的原型對象

升級,ES6在Object原型上新增的方法

  • Object.is:做兩個目標對象的相等比較,修複NaN === NaN //falseObject.is(NaN,NaN) // true
  • Object.assign(onlyTarget , source1 ,...):合併覆蓋到onlyTarget
    • source中的自身屬性會被合併
    • source中的繼承屬性不可枚舉的屬性不會被合併
      • 且無法正確複製get和set屬性(會直接執行get/set函數,取return的值)
  • getOwnPropertyDescriptors(obj):獲取對象所有的自身屬性(配合defineProperties使用),ES5中getOwnPropertyDescriptor(obj,屬性名)只能單個獲取(配合defineProperty使用)
    • defineProperties( obj , {屬性1 : {配置文件} , 屬性2 :{配置文件} ... } )
    • defineProperty( obj , 屬性名 , {配置文件} )
  • getPropertypeOf()setProperTypeOf():獲取或設置當前對象的prototype對象
    • __proto__屬性只是各大瀏覽器私加過於廣泛而默許的屬性
      • 在非瀏覽器環境不一定可以使用
  • keys() / values() / entries():分別獲取對象 鍵 / 值 / 鍵值對數組
Function函數類型

優化:

  • 箭頭函數:箭頭函數內的 this 指向函數定義時所在的對象,而不是函數執行時所在的對象
    • 箭頭函數如果外層仍是箭頭函數,將繼續向更外層尋找
    • 箭頭函數不能用作構造函數,因為沒有自己的this,在new重定向this指向時,沒有屬於自己的this的可供綁定
    • 箭頭函數沒有this,也不存在arguments對象,不過對象擴展符獲取
      • var fn = (...arguments)=>{console.log(arguments)} ; fn(1,2,3) // [1,2,3]
  • 函數預設賦值,ES6之前無法通過形參給出預設賦值

升級部分

  • ES6新增了雙冒號運算符,用來取代bind、call和apply(瀏覽器暫不支持,Babel已經支持轉碼)
foo::bar;
// 等同於
bar.bind(foo);
foo::bar(...arguments);
// 等同於
bar.apply(foo, arguments);

Symbol是什麼
  • ES6引入的第7種基本數據類型,Symbol()生成的值都是獨一無二的
    • 解決對象屬性名太多導致的屬性名衝突問題
    • Symbol作對象屬性名無法被for infor ofObject.keys()Object.getOwnPropertyNames()JSON.stringify()遍歷到
      • Symbol() 不是對象的私有屬性,其它對象也可以使用它作屬性
let a = Symbol('a');
let obj = {} ;
obj[a] = 'xxx';
// obj = {a : 'xxx'} 的屬性名不是Symbol('a'),而是預設使用字元'a' 作屬性名
Set 是什麼
  • 成員唯一,可以用來去重,Array.from(new Set([1,2,3,3,3,4]))
    • 多個NaN被Set認為是相同的,+0-0也是相同的,undefined也會被存儲
  • .size().add().clear().delete().has()
    • 繼承自Object,.keys().values().entries().forEach()
Map 是什麼
  • new Map() | new Map([['key1' , 'v1'] , ['key2', 'v2']])
  • Map可以看作是Object的超集,打破傳統鍵值的限制
    • 出現原因:Object的key局限於字元串,可以是函數、對象、任意基本類型(甚至是NaN)
    • .size().clear()delete()entries()get(key)has(key)keys()set(key,value)values()
      • entries()返回迭代對象(遍歷:for...of... / next())
    • 遍歷Map:for (let [key, value] of myMap)myMap.forEach(function(value, key){}
Proxy 是什麼
  • Proxy可以攔截對象的get/set方法自由去處理
const handler = {
    get: function(obj, prop) {
        return prop in obj ? obj[prop] : 37;
    }
};
const p = new Proxy({}, handler);
Reflect 是什麼
  • 是將原生的一些零散分佈在Object、Function或者全局函數里的方法(如apply、delete、get、set等等),統一整合到Reflect上
    • Reflect.apply(target, thisArgument, argumentsList) 整合 apply方法
    • Reflect.defineProperty(target, propertyKey, attributes) 整合defineProperty方法
Promise 是什麼
  • 解決 JS 非同步機制中回調機制產生的回調地獄問題
    • 可以鏈式調用
Iterator 是什麼
  • 是一種標準、解決方案,Set、Map都不能用for迴圈遍歷

    • 要麼單獨為它倆設計,要麼統一規劃新的API(被採取)
  • 就好像JavaScript是ECMAScript標準的一種具體實現一樣,Iterator標準的具體實現是Iterator遍歷器

Iterator標準規定
  • 所有部署了key值為[Symbol.iterator],且[Symbol.iterator]的value是標準的Iterator介面函數
    • 該函數必須返回一個對象
    • 對象中包含next方法
    • 執行next()能返回包含value/done屬性的Iterator對象)的對象,都稱之為可遍歷對象
    • next()後返回的Iterator對象也就是Iterator遍歷器
//obj.[Symbol.iterator]() 就是Iterator遍歷器
let obj = {
  data: [ 'hello', 'world' ],
  [Symbol.iterator]() {
    const self = this;
    let index = 0;
    return {
      next() {
        if (index < self.data.length) {
          return {
            value: self.data[index++],
            done: false
          };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};
  • ES6規定,所有部署了Iterator介面的對象(可遍歷對象)都可以用for...of遍歷
    • 擴展運算符本質上也是由for...of的一種實現
//Array
let array = ['red', 'green', 'blue'];
array[Symbol.iterator]() //Iterator遍歷器
array[Symbol.iterator]().next() //{value: "red", done: false}

//String
let string = '1122334455';
string[Symbol.iterator]() //Iterator遍歷器
string[Symbol.iterator]().next() //{value: "1", done: false}

//set
let set = new Set(['red', 'green', 'blue']);
set[Symbol.iterator]() //Iterator遍歷器
set[Symbol.iterator]().next() //{value: "red", done: false}

//Map
let map = new Map();
let obj= {map: 'map'};
map.set(obj, 'mapValue');
map[Symbol.iterator]().next()  {value: Array(2), done: false}
for...of 來由
  • 由上可知出現了統一的遍歷方法
  • ES6規定,所有部署了Iterator介面的對象(可遍歷對象)都可以用for...of遍歷
    • 擴展運算符本質上也是由for...of的一種實現
Generator 函數

Generator函數可以說是Iterator介面的具體實現方式

  • yeild 相當於 next() 方法
// 註意 * 貼著function
function* generator(){
  yeild 1;
  yeild 2;
}
async 函數

Generator函數可以說是Iterator介面的具體實現方式

  • async函數可以理解為內置自動執行器的Generator函數語法糖,它配合ES6的Promise近乎完美的實現了非同步編程解決方案
Class、extends 是什麼

作為ES5生成實例對象的語法糖,使對象實例化的過程更像面向對象編程

  • Class內部定義的所有方法都是不可枚舉的
// ES5 玩法
function MyClass(data , props){
    this.data = data
    this.props = props
    return this
}
MyClass.prototype.toString = function(){
    return this.data + ',' + this.props
}
var mc = new MyClass('a','b')
// ES6 玩法
class MyClass{
    constructor(data,props){
        this.data = data
        this.props = props
    }
    toString(){
        return this.data + ',' + this.props
    }
}
Object.keys(MyClass.prototype) // []
  • ES6的構造函數必須使用new,ES5不使用new也可以執行
  • Class不存在變數提升,必須先聲明Class才能使用,ES5中可以先實例化、再聲明
  • ES5的繼承實質:先創造子類的實例化對象this,再將父對象的方法掛載到this上
    • ES6則是先將父類實例對象的方法、屬性掛載到this(super),再用子類構造函數進一步實例化this
// ES5方法
function Parent(){ }
function Child(){ }
// 方法1
var child1 = new Child()
child1.prototype = new Parent() // 這樣 child1 就可以訪問 Parent 上的方法了
// 方法2
function Child(){ 
    Parent.call(this , arguments) 
}

// ES6方法
class Child extends Parent{
    constructor(props){
        super(props) // 可以在父類中列印數據
        this.props = props
    }
}
module、export、import 是什麼
  • module、export、import是ES6用來統一前端模塊化方案的設計思路和實現方案
    • import引入的模塊是靜態載入(編譯階段載入)而不是動態載入(運行時載入)
      • 靜態載入優點:引入巨集(macro)類型檢驗(type system)
      • 將來瀏覽器的新 API 就能用模塊格式提供,不再必要做成全局變數或者navigator對象的屬性
      • 不再需要對象作為命名空間(比如Math對象),未來這些功能可以通過模塊提供
    • import引入export導出的介面值是動態綁定關係,即通過該介面,可以取到模塊內部實時的值
編程中哪些適合用ES6優化/規範
  • 箭頭函數取代var self = this
  • let取代var
  • 常用數組/對象的解構賦值來命名變數
    • let { name , age } = { ...{name:'lhx' , age : 12 } }
  • 長字元串拼接可以使用模板字元串
  • Class取代傳統構造函數,實例化對象
  • 保持模塊化開發思維,常用 import、 export方法


Typescript 函數

參數部分
  • 基礎傳參 function fn(str1 : string , num1 : number)
  • 預設傳參 function fn(str1 : string = 'default' , num1 : number = 12)
  • 剩餘傳參 function fn(s1 : string . s2 : string , arr : string[] ) 調用=> fn('a','b','c','d','e')
  • 可選傳參 function fn(s1 : string , num1 ?: number )
函數重載
  • 先給出函數名相同、接收不同參數的函數聲明,再給出函數的定義
    • 不同參數定義:
      • 數量不同
      • 順序不同
      • 類型不同
function disp(s1:string):void; 
function disp(n1:number,s1:string):void; 
function disp(s1:string,n1:number):void; 
//  參數類型不同,應設置為any
function disp(x: string | number,y?:string | number):void {
    console.log(x);
    console.log(y);
}
disp("abc")
disp(1,"xyz");
disp('a' , 100)



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

-Advertisement-
Play Games
更多相關文章
  • 使用Mysql的zip壓縮包解壓版,下載之後需進行一定的配置,才能使用它。 下麵對Mysql壓縮包版的安裝方法進行詳細的描述,如有疑問或錯誤,望及時反饋。 首先,mysql的官方下載地址點我進行下載 1. 根據你要下載的電腦相應版本,點擊Download跳轉到下載界面。 2. 之後你會看到讓你登陸或 ...
  • 主從複製 + 分庫分表 要講主從複製,首先來看看MySQL自帶的日誌文件。 日誌 錯誤日誌 錯誤日誌是 MySQL 中最重要的日誌之一,它記錄了當 mysqld 啟動和停止時,以及伺服器在運行過程中發生任何嚴重錯誤時的相關信息。當資料庫出現任何故障導致無法正常使用時,建議首先查看此日誌文件。 該日誌 ...
  • 聽不見、聽不清、聽不懂,這是全國上千萬聽障群體的真實寫照。由於聽力的局限,他們在求學、工作、就醫、出行等方面都面臨巨大挑戰。AI時代,全行業為信息無障礙建設形成強大合力,但聽障群體依然面臨著冷冰冰的現實:專業語言服務人員的稀缺、溝通輔助器具的不完備,甚至來自社會的偏見及誤解…… “聾人只要通過助聽設 ...
  • 如果有一天,周遭的世界突然變得很安靜,動聽美妙的音樂,在你看來只是沉寂;振奮人心的演講,對你而言只是默劇;大自然的千里鶯啼,於你來說也只是畫捲。你會不會感到害怕? 而有這麼一群人,每天都在與這世界無聲交流著,他們就是聽力障礙人士。據2006年第二次全國殘疾人抽樣調查顯示,我國的聽力殘疾人約2780萬 ...
  • 最基礎的指針如下: int a; int* p = &a; 答:p指向a的地址,&是取a的地址。*指的是指針中取內容的符號。 2.str[]和str*的區別: char str1[] = "abc"; char str2[] = "abc"; const char str3[] = "abc"; c ...
  • Array 對象 所有方法 concat() 方法 合併多個數組,返回一個新數組 join() 方法 將數組合併為字元串,用指定的字元分割 pop() 方法 刪除成員(從後) 並返回該被刪除的元素 shift() 方法 刪除成員(從前) 並返回該被刪除的元素 splice() 方法 刪除多個元素 並 ...
  • react腳手架創建幾種方式 node v16.17.0 npm 8.15.0 yarn 3.2.3 vite 3.1.3 配置less-loader npm 首先通過 npm 方式全局安裝 create-react-app npm install -g create-react-app 查看是否安 ...
  • ==面試題 ##1.vue2中的響應式原理簡述 響應式原理主要就是通過數據劫持,依賴收集,派發更新的方式來實現的 1.數據劫持,vue2是通過Object.defineProperty方法的get、set來將對對象進行遞歸劫持。 其中修改對象的屬性時 就會觸發set, 使用對象的屬性時就會觸發get ...
一周排行
    -Advertisement-
    Play Games
  • 不廢話,直接代碼 private Stack<Action> actionStack = new Stack<Action>(); private void SetCellValues() { var worksheet = Globals.ThisAddIn.Application.ActiveS ...
  • OpenAPI 規範是用於描述 HTTP API 的標準。該標準允許開發人員定義 API 的形狀,這些 API 可以插入到客戶端生成器、伺服器生成器、測試工具、文檔等中。儘管該標準具有普遍性和普遍性,但 ASP.NET Core 在框架內預設不提供對 OpenAPI 的支持。 當前 ASP.NET ...
  • @DateTimeFormat 和 @JsonFormat 是 Spring 和 Jackson 中用於處理日期時間格式的註解,它們有不同的作用: @DateTimeFormat @DateTimeFormat 是 Spring 框架提供的註解,用於指定字元串如何轉換為日期時間類型,以及如何格式化日 ...
  • 一、背景說明 1.1 效果演示 用python開發的爬蟲採集軟體,可自動抓取抖音評論數據,並且含二級評論! 為什麼有了源碼還開發界面軟體呢?方便不懂編程代碼的小白用戶使用,無需安裝python、無需懂代碼,雙擊打開即用! 軟體界面截圖: 爬取結果截圖: 以上。 1.2 演示視頻 軟體運行演示視頻:見 ...
  • SpringBoot筆記 SpringBoot文檔 官網: https://spring.io/projects/spring-boot 學習文檔: https://docs.spring.io/spring-boot/docs/current/reference/html/ 線上API: http ...
  • 作為後端工程師,多數情況都是給別人提供介面,寫的好不好使你得重視起來。 最近我手頭一些活,需要和外部公司對接,我們需要提供一個介面文檔,這樣可以節省雙方時間、也可以防止後續扯皮。這是就要考驗我的介面是否規範化。 1. 介面名稱清晰、明確 顧名思義,介面是做什麼的,是否準確、清晰?讓使用這一眼就能知道 ...
  • 本文介紹基於Python語言,遍歷文件夾並從中找到文件名稱符合我們需求的多個.txt格式文本文件,並從上述每一個文本文件中,找到我們需要的指定數據,最後得到所有文本文件中我們需要的數據的合集的方法~ ...
  • Java JUC&多線程 基礎完整版 目錄Java JUC&多線程 基礎完整版1、 多線程的第一種啟動方式之繼承Thread類2、多線程的第二種啟動方式之實現Runnable介面3、多線程的第三種實現方式之實現Callable介面4、多線的常用成員方法5、線程的優先順序6、守護線程7、線程的讓出8、線 ...
  • 實時識別關鍵詞是一種能夠將搜索結果提升至新的高度的API介面。它可以幫助我們更有效地分析文本,並提取出關鍵詞,以便進行進一步的處理和分析。 該介面是挖數據平臺提供的,有三種模式:精確模式、全模式和搜索引擎模式。不同的模式在分詞的方式上有所不同,適用於不同的場景。 首先是精確模式。這種模式會儘量將句子 ...
  • 1 為啥要折騰搭建一個專屬圖床? 技術大佬寫博客都用 md 格式,要在多平臺發佈,圖片就得有外鏈 後續如博客遷移,國內博客網站如掘金,簡書,語雀等都做了防盜鏈,圖片無法遷移 2 為啥選擇CloudFlare R2 跳轉:https://dash.cloudflare.com/ 有白嫖額度 免費 CD ...