前端面試必備技能全方面總結

一種Symbol類型可以通過使用Symbol()函數生成；
Symbol()函數可以接收一個字符串作為參數

實例代碼：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let s1 = Symbol('web')
let s2 = Symbol('web')
console.log(s1==s2)
console.log(typeof s2)
console.log(typeof s1)
復制代碼</pre>

mmbiz.qpic.cn/mmbiz/giajG…

image

由圖可知：Symbol()函數接收的參數相同，其變量的值也不同，s1和s2是Symbol類型的變量枕扫，因為變量的值不同，所以打印的結果為false先蒋。使用typeof來獲取相應的類型职恳，所以打印的結果都為symbol。

2.Symbol可以通過三種方式作為對象屬性名蛹屿。

第一種：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代碼：
let symbol = Symbol();
let a = {};
a[symbol] = 'web';
復制代碼</pre>

由代碼可知：首先聲明了一個Symbol類型的變量symbol屁奏，一個空的對象為a，通過a[symbol]給a對象賦值一個web的字符串错负。表示symbol作為對象屬性名坟瓢，web作為它的屬性值勇边。

第二種：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代碼
let symbol = Symbol();
let a = {
[symbol]:'web'
};
復制代碼</pre>

由代碼可知：首先聲明了一個Symbol類型的變量symbol，接著在聲明對象a的同時通過[symbol]給a對象性賦值為web的字符串折联。

第三種：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 示例代碼：
let symbol = Symbol();
let a = {};
Object.defineProperty(a, symbol, {value: 'web'});
復制代碼</pre>

由代碼可知：首先聲明了一個Symbol類型的變量symbol粒褒，一個空對象為a，通過Object.defineProperty()方法給a對象賦值為web的字符串诚镰。

Symbol的值作為對象屬性名奕坟，是不能用點運算符的。

3.Symbol使用場景

有兩種使用場景：

因為Symbol的值是均不相等的清笨，所以Symbol類型的值作為對象屬性名月杉，不會出現重復。
代碼形成強耦合的某一個具體的字符串抠艾。

Symbol獲取

通過Object.getOwnPropertySymbols()方法苛萎，可以獲取指定對象的所有Symbols屬性名。

let和const

let是ES6規(guī)范中定義用于聲明變量的關鍵字检号。
使用let聲明的變量有一個塊級作用域范圍腌歉。

為什么需要塊級作用域？

為什么會添加這個塊級作用域齐苛，就得了解ES5沒有塊級作用域時出現的問題翘盖。

場景一是內層變量可能會覆蓋外層變量。
場景二是在if或者是for循環(huán)中聲明的變量會泄漏成為全局變量脸狸。

場景一： mmbiz.qpic.cn/mmbiz/giajG…

image

場景二：

代碼示例：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">if(true) {
var web = 'web';
}
console.log(web); // web 沒在iF塊中也可以訪問
復制代碼</pre>

塊級作用域的前提是進行l(wèi)et變量聲明

獨立的一對大括號最仑，兩個大括號之間就是變量的塊級作用域的范圍。
條件語句炊甲，函數聲明語句泥彤，循環(huán)語句等的一對大括號中就是變量的塊級作用域范圍。

const聲明一個只讀的常量卿啡。const一旦聲明常量吟吝，其值不能被改變。

const和let只在聲明的塊級作用域內有效颈娜。否則會報錯剑逃。

const命令聲明的常量只能在聲明的位置后面使用。 mmbiz.qpic.cn/mmbiz/giajG…

image

const聲明的常量官辽，與let一樣不可重復聲明蛹磺。

變量的解構賦值

在ES6中可以從數組和對象中提取值，對變量進行賦值同仆，稱為解構賦值萤捆。

解構賦值就是只要等號兩邊的模式相同，左邊的變量就會被對應賦值。

示例代碼：

let [x,y='b'] = ['a', undefined];
console.log(y); // b

let [x,y='b'] = ['a', null];
console.log(y); // null
復制代碼</pre>

解構賦值分類：

數組的解構賦值
對象的解構賦值
字符串的解構賦值
數字以及布爾值的解構賦值
函數參數的解構賦值

解構賦值的情況

兩種情況：

完全解構
不完全解構

不完全解構

代碼如下：

<pre class="prettyprint hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let [a = 1, b] = [];
// a = 1, b = undefined
復制代碼</pre>

數組的解構賦值

代碼如下：

解構賦值允許指定默認值俗或。

代碼如下：

在使用默認值的時候市怎，應該注意undefined，因為undefined是不能賦值的辛慰。

代碼如下：

let [x = 1] = [null];
x // null
復制代碼</pre>

對象解構

代碼如下：

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let { bar, foo } = { foo: 'aaa', bar: 'bbb' };
foo // "aaa"
bar // "bbb"

let { baz } = { foo: 'aaa', bar: 'bbb' };
baz // undefined
復制代碼</pre>

通過解構区匠，我們可以很容易的把對象的方法復制給變量。

代碼如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const { log } = console;
log('hello') // hello
或者是：

const { log:minelog } = console;
minelog ('hello') // hello
復制代碼</pre>

當我們使用解構賦值的時候帅腌，需要注意聲明變量的作用域問題：

// 錯誤的寫法

// 正確的寫法
let x;

({x} = {x: 1});
復制代碼</pre>

數組中是一個特殊的對象

<pre class="prettyprint hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let arr = [1, 2, 3];
let {0 : first, [arr.length - 1] : last} = arr;
first // 1
last // 3
復制代碼</pre>

不完全解構

<pre class="prettyprint hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let obj = {p: [{y: 'world'}] };
let {p: [{ y }, x ] } = obj;
// x = undefined
// y = 'world'
復制代碼</pre>

剩余運算符

解構默認值

字符串解構

字符串本身也是一個對象驰弄，有時候，可以當成一個數組解構

代碼如下：

<pre class="prettyprint hljs awk" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const [a, b, c, d, e] = 'hello';
a // "h"
b // "e"
c // "l"
d // "l"
e // "o"
復制代碼</pre>

當做一個對象解構

剩余運算符

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let [a, ...b] = [1, 2, 3];
//a = 1
//b = [2, 3]
函數參數的解構賦值
function add([x, y]){
return x + y;
}

add([1, 2]); // 3
復制代碼</pre>

計算函數任意個參數之和：代碼：

<pre class="prettyprint hljs matlab" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function sum(...num){
var sumNum = 0;
for(let i=0;i<num.length;i++){
sumNum += parseInt(num[i])
}
console.log(sumNum)
}
復制代碼</pre>

Set和Map

Set類似于數組狞膘，但是成員的值都是唯一的揩懒，沒有重復的值。

Set使用add()方法添加元素挽封，不會添加重復的值已球，所以Set可以對數組進行去重操作。

Map類似于對象辅愿，鍵名的值可以是各種類型的值智亮。

聲明

使用new Set()構造函數來聲明Set；
使用new Set()構造函數來聲明Map点待。

使用for...of來遍歷數組中的值

mmbiz.qpic.cn/mmbiz/giajG…

image

操作方法

共有的方法：delete刪除阔蛉，has有無，clear清空癞埠。對于Set的添加操作是add()状原，而Map是set設置和get獲取。 mmbiz.qpic.cn/mmbiz/giajG…

image

mmbiz.qpic.cn/mmbiz/giajG…

image

has是用來判斷Set或者是Map中是否包含元素苗踪。 mmbiz.qpic.cn/mmbiz/giajG…

image

mmbiz.qpic.cn/mmbiz/giajG…

image

set可以用來新增或者是修改Map中的元颠区，只有Map有。

遍歷方法

有keys通铲，values毕莱，entries，forEach颅夺。

keys獲取所有鍵朋截，values獲取所有值，entries獲取所有鍵和值吧黄，forEach遍歷所有鍵和值部服。

箭頭函數

ES6中使用箭頭函數(=>)來定義函數。

帶參數的箭頭函數

代碼：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">var single = a => a
single('web')
復制代碼</pre>

沒有參數的箭頭函數

代碼：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">var log = () => {
alert('web')
}
復制代碼</pre>

多個參數的箭頭函數

代碼：

es6相對于es5的擴展

它主要分三種：

函數的擴展
對象的擴展
數組的擴展

函數的擴展

es6中函數的擴展包含：默認值拗慨，剩余運算符饲宿，擴展運算符厦酬。

默認值

在es5中胆描，函數的默認值設定是瘫想，通過“||”進行設定的，當函數參數為undefine時昌讲，取默認值国夜。

在es6中，函數的默認值是寫在參數定義的后面短绸。

代碼示例如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// es5
function log(x,y) {
y = y || 'web';
console.log(x,y);
}

function log(x,y="web"){
console.log(x,y);
}
復制代碼</pre>

剩余運算符

剩余運算符表示語句：...arrr表示參數车吹，指定的是可以有多個參數。

代碼示例如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function web(...arr) {
for(let item of arr) {
console.log(item);
}
}
web(1,3,4,5,6);
復制代碼</pre>

擴展運算符

示例代碼如下：

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function add(a,b,c) {
console.log(a);
console.log(b);
console.log(c);
}
var arr = [1,2,3];
add(...arr);
復制代碼</pre>

對象的擴展 es6中允許向對象直接寫入變量和函數醋闭，作為對象的屬性和方法窄驹。

es6中允許使用表達式作為對象的屬性，并且函數名稱定義也可以采用相同的方式证逻。

setter和getter乐埠。JavaScript對象的屬性是由名字，值和一組特性構成的囚企。

es6中對象的操作方法：

Object.is()：比較兩個值是否相等丈咐。Object.assign()：用于將對象進行合并榆纽。Object.getOwnPropertyDescriptor：返回對象屬性的描述白修。Object.keys()返回一個數組，包含對象自身所有的可枚舉屬性悼吱。

數組的擴展

copyWithin(target,start,end)：在當前數組內部银酗，將指定位置的成員復制到其他位置辆影，然后返回當前數組。

target表示從該位置開始替換數據黍特。如果是負值蛙讥，表示倒數。

start表示從該位置開始讀取數據衅澈，默認為0键菱。如果為負值，表示倒數今布。

end表示到該位置前停止讀取數據经备，默認等于數組長度。如果負值部默，表示倒數侵蒙。

find()表示用于找出第一個符號條件的數組成員。

findIndex()表示返回第一個符合條件的數組成員的位置傅蹂，如果所有成員都不符合條件纷闺，則返回-1算凿。

fill()表示填充一個數組，fill()方法用于空數組的初始化犁功。

includes()表示該方法返回一個布爾值氓轰，表示某個數組是否包含給定的值。

es6高級操作 Promise對象用于表示一個異步操作的最終狀態(tài)浸卦，完成或是失敗署鸡。

Promise是異步編程的一種解決方案，將異步操作以同步操作的流程表現出來限嫌，避免了多層回調函數嵌套問題靴庆。

一個Promise有幾種狀態(tài)：

pending初始狀態(tài)，既不是成功狀態(tài)怒医，也不是失敗狀態(tài)炉抒。
fulfilled表示操作成功完成。
rejected表示操作失敗稚叹。

當其中任何一種情況出現時焰薄，Promise對象的then()方法綁定的處理方法就會被調用。

then()方法包含兩個參數入录，onfulfilled和onrejected蛤奥，他們都是function類型。

當Promise為fulfilled狀態(tài)時僚稿，調用then()方法的onfulfilled凡桥，當Promise為rejected狀態(tài)時，調用then()方法的onrejected蚀同。

Promise.prototype.then和Promise.prototype.catch方法返回Promise對象缅刽，所以它們可以被鏈式調用。

Iterator

Iterator遍歷器是一種接口蠢络，為各種不同的數據結構提供統(tǒng)一的訪問機制衰猛。

任何數據結構只要部署了Iterator接口，就可以完成遍歷操作刹孔。

Iterator的作用：

為各種數據結構啡省，提供一個統(tǒng)一的，簡便的訪問接口髓霞。
使得數據結構的成員能夠按某種次序排列卦睹。
ES6創(chuàng)造了一種新的遍歷命令for...of循環(huán)。

原生具備Iterator接口的數據結構方库，數組结序，某些類似數組的對象，Set結構和Map結構纵潦。 mmbiz.qpic.cn/mmbiz/giajG…

image

Generator

Generator是es6提供的一種異步編程解決方案徐鹤，在語法上垃环，可以把它理解為一個狀態(tài)機，內部封裝了多種狀態(tài)返敬。

執(zhí)行Generator遂庄，會生成并返回一個遍歷器對象。返回的遍歷器對象救赐，可以依次遍歷Generator函數的每一個狀態(tài)涧团。

Generator函數是一個普通的函數。

function關鍵字與函數名之間有一個*號经磅。
函數體內使用yield表達式來遍歷狀態(tài)。

代碼如下：

<pre class="prettyprint hljs php" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function* newGenerator() {
yield 'web';
yield 'it';
return 'ending';
}
復制代碼</pre>

代碼理解钮追，執(zhí)行Generator函數之后预厌，并不會被立即執(zhí)行，返回的也不是函數運行結果元媚，而是一個指向內部狀態(tài)的指針對象轧叽。

使用遍歷器對象的Next()方法，使指針移向下一個狀態(tài)刊棕。每一次調用next()方法炭晒，內部指針就會從函數頭部或上一次停下的地方開始執(zhí)行，直到遇到下一個yield表達式位置甥角。

Generator是分段執(zhí)行的网严，yield表達式是暫停執(zhí)行的標志，而next()方法可以恢復執(zhí)行嗤无。

next()函數帶參數震束，該參數作為上一次yield表達式的返回值，因為yield本身是沒有返回值的当犯。

Class

ES6引入Class類這個概念垢村，使用Class關鍵字可以定義類。

示例代碼：

<pre class="prettyprint hljs kotlin" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person {
constructor(name,age){
this.name = name;
this.age = age;
}
say() {
return '名字：'+this.name+'年齡'+this.age+"歲";
}
}
var obj = new Person('web',12);
console.log(obj.say());
復制代碼</pre>

簡單數據類型

ES5中有5中簡單數據類型嚎卫，Undefined, Null, Boolean, Number, String.

Set

成員不能重復
只有健值嘉栓，沒有健名，有點類似數組拓诸。
可以遍歷侵佃，方法有add, delete,has

Set 實例屬性

constructor：構造函數
size：元素數量

代碼如下：

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; word-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let set = new Set([1, 2, 3, 2, 1])

console.log(set.length) // undefined
console.log(set.size) // 3
復制代碼</pre>

Set 實例方法

操作方法

add(value)：新增，相當于 array里的push
delete(value)：存在即刪除集合中value
has(value)：判斷集合中是否存在 value
clear()：清空集合

遍歷方法

keys()：返回一個包含集合中所有鍵的迭代器

values()：返回一個包含集合中所有值得迭代器

entries()：返回一個包含Set對象中所有元素得鍵值對迭代器

forEach(callbackFn, thisArg)：用于對集合成員執(zhí)行callbackFn操作

Map

本質上是鍵值對的集合恰响，類似集合
可以遍歷趣钱，方法很多可以跟各種數據格式轉換

Set 和 Map 主要的應用場景在于數據重組和數據儲存

Set 是一種叫做集合的數據結構，Map 是一種叫做字典的數據結構

有想了解更多的朋友可以

一胚宦、搜索QQ群首有，前端學習交流群：1093606290

二燕垃、https://jq.qq.com/?_wv=1027&k=MlDBtuEG

前端面試必備技能 全方面總結

2.Symbol可以通過三種方式作為對象屬性名蛹屿。

3.Symbol使用場景

Symbol獲取

let和const

變量的解構賦值

不完全解構

數組的解構賦值

解構賦值允許指定默認值俗或。

在使用默認值的時候市怎，應該注意undefined，因為undefined是不能賦值的辛慰。

對象解構

通過解構区匠，我們可以很容易的把對象的方法復制給變量。

當我們使用解構賦值的時候帅腌，需要注意聲明變量的作用域問題：

Set和Map

遍歷方法

箭頭函數

es6相對于es5的擴展

函數的擴展

一個Promise有幾種狀態(tài)：

Iterator的作用：

Generator

Generator函數是一個普通的函數。

Class

ES6引入Class類這個概念垢村，使用Class關鍵字可以定義類。

簡單數據類型

ES5中有5中簡單數據類型嚎卫，Undefined, Null, Boolean, Number, String.

Set

Set 實例屬性

Set 實例方法

操作方法

Map

前端面試必備技能全方面總結