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

  • 一種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可以通過三種方式作為對象屬性名蛹屿。

  1. 第一種:

<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作為它的屬性值勇边。

  1. 第二種:

<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的字符串折联。

  1. 第三種:

<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使用場景

有兩種使用場景:

  1. 因為Symbol的值是均不相等的清笨,所以Symbol類型的值作為對象屬性名月杉,不會出現重復。

  2. 代碼形成強耦合的某一個具體的字符串抠艾。

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中可以從數組和對象中提取值,對變量進行賦值同仆,稱為解構賦值萤捆。

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

示例代碼:

<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 [x,y='b'] = ['a'];
console.log(y); // b

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

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

解構賦值分類:

  1. 數組的解構賦值

  2. 對象的解構賦值

  3. 字符串的解構賦值

  4. 數字以及布爾值的解構賦值

  5. 函數參數的解構賦值

解構賦值的情況

兩種情況:

  1. 完全解構

  2. 不完全解構

不完全解構

代碼如下:

<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>

數組的解構賦值

代碼如下:

<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, [b], d] = [1, [2, 3], 4];
a // 1
b // 2
d // 4
復制代碼</pre>

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

代碼如下:

<pre class="prettyprint hljs nginx" 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 [foo = true] = [];
foo // true
復制代碼</pre>

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

代碼如下:

<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 [x = 1] = [undefined];
x // 1

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>

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

// 錯誤的寫法

<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 x;
{x} = {x: 1};

// 正確的寫法
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 groovy" 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, ...rest} = {a: 10, b: 20, c: 30, d: 40};
// a = 10
// b = 20
// rest = {c: 30, d: 40}
復制代碼</pre>

解構默認值

<pre class="prettyprint hljs delphi" 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 = 10, b = 5} = {a: 3};
// a = 3; b = 5;
let {a: aa = 10, b: bb = 5} = {a: 3};
// aa = 3; bb = 5;
復制代碼</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 nginx" 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 {length : len} = 'hello';
len // 5
復制代碼</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類似于對象辅愿,鍵名的值可以是各種類型的值智亮。

聲明

  1. 使用new Set()構造函數來聲明Set;

  2. 使用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>

多個參數的箭頭函數

代碼:

<pre class="hljs dockerfile" 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 0.75em; 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 add = (a,b) => a+b add(1,2) 復制代碼</pre>

es6相對于es5的擴展

它主要分三種:

  1. 函數的擴展

  2. 對象的擴展

  3. 數組的擴展

函數的擴展

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):

  1. pending初始狀態(tài),既不是成功狀態(tài)怒医,也不是失敗狀態(tài)炉抒。

  2. fulfilled表示操作成功完成。

  3. 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的作用:

  1. 為各種數據結構啡省,提供一個統(tǒng)一的,簡便的訪問接口髓霞。

  2. 使得數據結構的成員能夠按某種次序排列卦睹。

  3. 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函數是一個普通的函數。

  1. function關鍵字與函數名之間有一個*號经磅。

  2. 函數體內使用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

  1. 成員不能重復

  2. 只有健值嘉栓,沒有健名,有點類似數組拓诸。

  3. 可以遍歷侵佃,方法有add, delete,has

Set 實例屬性

  1. constructor:構造函數

  2. 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

  1. 本質上是鍵值對的集合恰响,類似集合

  2. 可以遍歷趣钱,方法很多可以跟各種數據格式轉換

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

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

有想了解更多的朋友可以

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

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

?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市井联,隨后出現的幾起案子卜壕,更是在濱河造成了極大的恐慌,老刑警劉巖烙常,帶你破解...
    沈念sama閱讀 210,914評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轴捎,死亡現場離奇詭異,居然都是意外死亡蚕脏,警方通過查閱死者的電腦和手機侦副,發(fā)現死者居然都...
    沈念sama閱讀 89,935評論 2 383
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來驼鞭,“玉大人秦驯,你說我怎么就攤上這事≌踝兀” “怎么了译隘?”我有些...
    開封第一講書人閱讀 156,531評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長洛心。 經常有香客問我固耘,道長,這世上最難降的妖魔是什么词身? 我笑而不...
    開封第一講書人閱讀 56,309評論 1 282
  • 正文 為了忘掉前任厅目,我火速辦了婚禮,結果婚禮上偿枕,老公的妹妹穿的比我還像新娘璧瞬。我一直安慰自己,他們只是感情好渐夸,可當我...
    茶點故事閱讀 65,381評論 5 384
  • 文/花漫 我一把揭開白布嗤锉。 她就那樣靜靜地躺著,像睡著了一般墓塌。 火紅的嫁衣襯著肌膚如雪瘟忱。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,730評論 1 289
  • 那天苫幢,我揣著相機與錄音访诱,去河邊找鬼。 笑死韩肝,一個胖子當著我的面吹牛触菜,可吹牛的內容都是我干的。 我是一名探鬼主播哀峻,決...
    沈念sama閱讀 38,882評論 3 404
  • 文/蒼蘭香墨 我猛地睜開眼涡相,長吁一口氣:“原來是場噩夢啊……” “哼哲泊!你這毒婦竟也來了?” 一聲冷哼從身側響起催蝗,我...
    開封第一講書人閱讀 37,643評論 0 266
  • 序言:老撾萬榮一對情侶失蹤切威,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后丙号,有當地人在樹林里發(fā)現了一具尸體先朦,經...
    沈念sama閱讀 44,095評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,448評論 2 325
  • 正文 我和宋清朗相戀三年犬缨,在試婚紗的時候發(fā)現自己被綠了喳魏。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,566評論 1 339
  • 序言:一個原本活蹦亂跳的男人離奇死亡遍尺,死狀恐怖截酷,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情乾戏,我是刑警寧澤,帶...
    沈念sama閱讀 34,253評論 4 328
  • 正文 年R本政府宣布三热,位于F島的核電站鼓择,受9級特大地震影響,放射性物質發(fā)生泄漏就漾。R本人自食惡果不足惜呐能,卻給世界環(huán)境...
    茶點故事閱讀 39,829評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望抑堡。 院中可真熱鬧摆出,春花似錦、人聲如沸首妖。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,715評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽有缆。三九已至象踊,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間棚壁,已是汗流浹背杯矩。 一陣腳步聲響...
    開封第一講書人閱讀 31,945評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留袖外,地道東北人史隆。 一個月前我還...
    沈念sama閱讀 46,248評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像曼验,于是被迫代替她去往敵國和親泌射。 傳聞我的和親對象是個殘疾皇子粘姜,可洞房花燭夜當晚...
    茶點故事閱讀 43,440評論 2 348