- 一種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>
由圖可知: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…
場景二:
代碼示例:
<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…
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>
解構賦值分類:
數組的解構賦值
對象的解構賦值
字符串的解構賦值
數字以及布爾值的解構賦值
函數參數的解構賦值
解構賦值的情況
兩種情況:
完全解構
不完全解構
不完全解構
代碼如下:
<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類似于對象辅愿,鍵名的值可以是各種類型的值智亮。
聲明
使用new Set()構造函數來聲明Set;
使用new Set()構造函數來聲明Map点待。
使用for...of來遍歷數組中的值
操作方法
共有的方法:delete刪除阔蛉,has有無,clear清空癞埠。對于Set的添加操作是add()状原,而Map是set設置和get獲取。 mmbiz.qpic.cn/mmbiz/giajG…
has是用來判斷Set或者是Map中是否包含元素苗踪。 mmbiz.qpic.cn/mmbiz/giajG…
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的擴展
它主要分三種:
函數的擴展
對象的擴展
數組的擴展
函數的擴展
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…
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