這篇文章主要介紹了常用到的ES6語(yǔ)法有哪些,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
從網(wǎng)站建設(shè)到定制行業(yè)解決方案,為提供成都網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、外貿(mào)網(wǎng)站建設(shè)服務(wù)體系,各種行業(yè)企業(yè)客戶提供網(wǎng)站建設(shè)解決方案,助力業(yè)務(wù)快速發(fā)展。創(chuàng)新互聯(lián)將不斷加快創(chuàng)新步伐,提供優(yōu)質(zhì)的建站服務(wù)。什么是ES6?
ECMAScript 6(以下簡(jiǎn)稱ES6)是JavaScript語(yǔ)言的下一代標(biāo)準(zhǔn),已經(jīng)在2015年6月正式發(fā)布了。Mozilla公司將在這個(gè)標(biāo)準(zhǔn)的基礎(chǔ)上,推出JavaScript 2.0。
ECMAScript和JavaScript到底是什么關(guān)系?很多初學(xué)者會(huì)感到困惑,簡(jiǎn)單來(lái)說(shuō),ECMAScript是JavaScript語(yǔ)言的國(guó)際標(biāo)準(zhǔn),JavaScript是ECMAScript的實(shí)現(xiàn)。
一、let和const
在JavaScript中咱們以前主要用關(guān)鍵var來(lái)定義變量,ES6之后,新增了定義變量的兩個(gè)關(guān)鍵字,分別是let和const。
對(duì)于變量來(lái)說(shuō),在ES5中var定義的變量會(huì)提升到作用域中所有的函數(shù)與語(yǔ)句前面,而ES6中l(wèi)et定義的變量則不會(huì),let聲明的變量會(huì)在其相應(yīng)的代碼塊中建立一個(gè)暫時(shí)性死區(qū),直至變量被聲明。
let和const都能夠聲明塊級(jí)作用域,用法和var是類似的,let的特點(diǎn)是不會(huì)變量提升,而是被鎖在當(dāng)前塊中。
一個(gè)非常簡(jiǎn)單的例子:
function test() { if(true) { console.log(a)//TDZ,俗稱臨時(shí)死區(qū),用來(lái)描述變量不提升的現(xiàn)象 let a = 1 } } test() // a is not defined function test() { if(true) { let a = 1 } console.log(a) } test() // a is not defined
唯一正確的使用方法:先聲明,再訪問(wèn)。
function test() { if(true) { let a = 1 console.log(a) } } test() // 1
const
聲明常量,一旦聲明,不可更改,而且常量必須初始化賦值。
const雖然是常量,不允許修改默認(rèn)賦值,但如果定義的是對(duì)象Object,那么可以修改對(duì)象內(nèi)部的屬性值。
const type = { a: 1 } type.a = 2 //沒(méi)有直接修改type的值,而是修改type.a的屬性值,這是允許的。 console.log(type) // {a: 2}
const和let的異同點(diǎn)
相同點(diǎn):const和let都是在當(dāng)前塊內(nèi)有效,執(zhí)行到塊外會(huì)被銷毀,也不存在變量提升(TDZ),不能重復(fù)聲明。
不同點(diǎn):const不能再賦值,let聲明的變量可以重復(fù)賦值。
const實(shí)際上保證的,并不是變量的值不得改動(dòng),而是變量指向的那個(gè)內(nèi)存地址所保存的數(shù)據(jù)不得改動(dòng)。對(duì)于簡(jiǎn)單類型的數(shù)據(jù)(數(shù)值、字符串、布爾值),值就保存在變量指向的那個(gè)內(nèi)存地址,因此等同于常量。但對(duì)于復(fù)合類型的數(shù)據(jù)(主要是對(duì)象和數(shù)組),變量指向的內(nèi)存地址,保存的只是一個(gè)指向?qū)嶋H數(shù)據(jù)的指針,const只能保證這個(gè)指針是固定的(即總是指向另一個(gè)固定的地址),至于它指向的數(shù)據(jù)結(jié)構(gòu)是不是可變的,就完全不能控制了。因此,將一個(gè)對(duì)象聲明為常量必須非常小心。
塊級(jí)作用域的使用場(chǎng)景
除了上面提到的常用聲明方式,我們還可以在循環(huán)中使用,最出名的一道面試題:循環(huán)中定時(shí)器閉包的考題
在for循環(huán)中使用var聲明的循環(huán)變量,會(huì)跳出循環(huán)體污染當(dāng)前的函數(shù)。
for(var i = 0; i < 5; i++) { setTimeout(() => { console.log(i) //5, 5, 5, 5, 5 }, 0) } console.log(i) //5 i跳出循環(huán)體污染外部函數(shù) //將var改成let之后 for(let i = 0; i < 5; i++) { setTimeout(() => { console.log(i) // 0,1,2,3,4 }, 0) } console.log(i)//i is not defined i無(wú)法污染外部函數(shù)
在實(shí)際開(kāi)發(fā)中,我們選擇使用var、let還是const,取決于我們的變量是不是需要更新,通常我們希望變量保證不被惡意修改,而使用大量的const。使用const聲明,聲明一個(gè)對(duì)象的時(shí)候,也推薦使用const,當(dāng)你需要修改聲明的變量值時(shí),使用let,var能用的場(chǎng)景都可以使用let替代。
symbol
ES6 以前,我們知道5種基本數(shù)據(jù)類型分別是Undefined,Null,Boolean,Number以及String,然后加上一種引用類型Object構(gòu)成了JavaScript中所有的數(shù)據(jù)類型,但是ES6出來(lái)之后,新增了一種數(shù)據(jù)類型,名叫symbol,像它的名字表露的一樣,意味著獨(dú)一無(wú)二,意思是每個(gè) Symbol類型都是獨(dú)一無(wú)二的,不與其它 Symbol 重復(fù)。
可以通過(guò)調(diào)用 Symbol() 方法將創(chuàng)建一個(gè)新的 Symbol 類型的值,這個(gè)值獨(dú)一無(wú)二,不與任何值相等。
var mySymbol=Symbol(); console.log(typeof mySymbol) //"symbol"
二、字符串
ES6字符串新增的方法
UTF-16碼位:ES6強(qiáng)制使用UTF-16字符串編碼。關(guān)于UTF-16的解釋請(qǐng)自行百度了解。
codePointAt():該方法支持UTF-16,接受編碼單元的位置而非字符串位置作為參數(shù),返回與字符串中給定位置對(duì)應(yīng)的碼位,即一個(gè)整數(shù)值。
String.fromCodePoiont():作用與codePointAt相反,檢索字符串中某個(gè)字符的碼位,也可以根據(jù)指定的碼位生成一個(gè)字符。
normalize():提供Unicode的標(biāo)準(zhǔn)形式,接受一個(gè)可選的字符串參數(shù),指明應(yīng)用某種Unicode標(biāo)準(zhǔn)形式。
在ES6中,新增了3個(gè)新方法。每個(gè)方法都接收2個(gè)參數(shù),需要檢測(cè)的子字符串,以及開(kāi)始匹配的索引位置。
模板字符串
字符串是JavaScript中基本類型之一,應(yīng)該算是除了對(duì)象之外是使用最為頻繁的類型吧,字符串中包含了例如substr,replace,indexOf,slice等等諸多方法,ES6引入了模板字符串的特性,用反引號(hào)來(lái)表示,可以表示多行字符串以及做到文本插值(利用模板占位符)。
// 以前的多行字符串我們這么寫(xiě): console.log("hello world 1\n\ hello cala"); // "hello world // hello cala" //有了模板字符串之后 console.log(`hello world string text line 2`); // "hello world // hello cala"
可以用${}來(lái)表示模板占位符,可以將你已經(jīng)定義好的變量傳進(jìn)括弧中,例如:
var name="cala"; var age=22; console.log(`hello,I'am ${name},my age is ${age}`) //hello,I'am cala,my age is 22 includes(str, index):如果在字符串中檢測(cè)到指定文本,返回true,否則false。 let t = 'abcdefg' if(t.includes('cde')) { console.log(2) } //true startsWith(str, index):如果在字符串起始部分檢測(cè)到指定文本,返回true,否則返回false。 let t = 'abcdefg' if(t.startsWith('ab')) { console.log(2) } //true endsWith(str, index):如果在字符串的結(jié)束部分檢測(cè)到指定文本,返回true,否則返回false。 let t = 'abcdefg' if(t.endsWith('fg')) { console.log(2) } //true
如果你只是需要匹配字符串中是否包含某子字符串,那么推薦使用新增的方法,如果需要找到匹配字符串的位置,使用indexOf()。
三、函數(shù)
函數(shù)的默認(rèn)參數(shù)
在ES5中,我們給函數(shù)傳參數(shù),然后在函數(shù)體內(nèi)設(shè)置默認(rèn)值,如下面這種方式。
function a(num, callback) { num = num || 6 callback = callback || function (data) {console.log('ES5: ', data)} callback(num * num) } a() //ES5: 36,不傳參輸出默認(rèn)值 //你還可以這樣使用callback a(10, function(data) { console.log(data * 10) // 1000, 傳參輸出新數(shù)值 })
在ES6中,我們使用新的默認(rèn)值寫(xiě)法
function a(num = 6, callback = function (data) {console.log('ES6: ', data)}) { callback(num * num) } a() //ES6: 36, 不傳參輸出默認(rèn)值 a(10, function(data) { console.log(data * 10) // 1000,傳參輸出新數(shù)值 })
四、箭頭函數(shù)(=>)
(箭頭函數(shù)比較重要,現(xiàn)在簡(jiǎn)單提一下,遲一點(diǎn)有空專門(mén)寫(xiě)一篇箭頭函數(shù)的文章。)
const arr = [5, 10] const s = arr.reduce((sum, item) => sum + item) console.log(s) // 15
箭頭函數(shù)中this的使用跟普通函數(shù)也不一樣,在JavaScript的普通函數(shù)中,都會(huì)有一個(gè)自己的this值,主要分為:
普通函數(shù):
1、函數(shù)作為全局函數(shù)被調(diào)用時(shí),this指向全局對(duì)象
2、函數(shù)作為對(duì)象中的方法被調(diào)用時(shí),this指向該對(duì)象
3、函數(shù)作為構(gòu)造函數(shù)的時(shí)候,this指向構(gòu)造函數(shù)new出來(lái)的新對(duì)象
4、還可以通過(guò)call,apply,bind改變this的指向
箭頭函數(shù):
1、箭頭函數(shù)沒(méi)有this,函數(shù)內(nèi)部的this來(lái)自于父級(jí)最近的非箭頭函數(shù),并且不能改變this的指向。
2、箭頭函數(shù)沒(méi)有super
3、箭頭函數(shù)沒(méi)有arguments
4、箭頭函數(shù)沒(méi)有new.target綁定。
5、不能使用new
6、沒(méi)有原型
7、不支持重復(fù)的命名參數(shù)。
箭頭函數(shù)的簡(jiǎn)單理解
1、箭頭函數(shù)的左邊表示輸入的參數(shù),右邊表示輸出的結(jié)果。
const s = a => a console.log(s(2)) // 2
2、在箭頭函數(shù)中,this屬于詞法作用域,直接由上下文確定,對(duì)于普通函數(shù)中指向不定的this,箭頭函數(shù)中處理this無(wú)疑更加簡(jiǎn)單,如下:
//ES5普通函數(shù) function Man(){ this.age=22; return function(){ this.age+1; } } var cala=new Man(); console.log(cala())//undefined //ES6箭頭函數(shù) function Man(){ this.age=22; return () => this.age+1; } var cala=new Man(); console.log(cala())//23
3、箭頭函數(shù)中沒(méi)有arguments(我們可以用rest參數(shù)替代),也沒(méi)有原型,也不能使用new 關(guān)鍵字,例如:
//沒(méi)有arguments var foo=(a,b)=>{return arguments[0]*arguments[1]} console.log(foo(3,5)) //arguments is not defined //沒(méi)有原型 var Obj = () => {}; console.log(Obj.prototype); // undefined //不能使用new 關(guān)鍵字 var Obj = () => {"hello world"}; var o = new Obj(); // TypeError: Obj is not a constructor
4、箭頭函數(shù)給數(shù)組排序
const arr = [10, 50, 30, 40, 20] const s = arr.sort((a, b) => a - b) console.log(s) // [10,20,30,40,50]
尾調(diào)用優(yōu)化
尾調(diào)用是指在函數(shù)return的時(shí)候調(diào)用一個(gè)新的函數(shù),由于尾調(diào)用的實(shí)現(xiàn)需要存儲(chǔ)到內(nèi)存中,在一個(gè)循環(huán)體中,如果存在函數(shù)的尾調(diào)用,你的內(nèi)存可能爆滿或溢出。
ES6中,引擎會(huì)幫你做好尾調(diào)用的優(yōu)化工作,你不需要自己優(yōu)化,但需要滿足下面3個(gè)要求:
1、函數(shù)不是閉包
2、尾調(diào)用是函數(shù)最后一條語(yǔ)句
3、尾調(diào)用結(jié)果作為函數(shù)返回
尾調(diào)用實(shí)際用途——遞歸函數(shù)優(yōu)化
在ES5時(shí)代,我們不推薦使用遞歸,因?yàn)檫f歸會(huì)影響性能。
但是有了尾調(diào)用優(yōu)化之后,遞歸函數(shù)的性能有了提升。
//新型尾優(yōu)化寫(xiě)法 "use strict"; function a(n, p = 1) { if(n <= 1) { return 1 * p } let s = n * p return a(n - 1, s) } //求 1 x 2 x 3的階乘 let sum = a(3) console.log(sum) // 6
五、ES6對(duì)象新增方法
Object.assign()
Object.assign()方法用于將所有可枚舉屬性的值從一個(gè)或多個(gè)源對(duì)象復(fù)制到目標(biāo)對(duì)象。它將返回目標(biāo)對(duì)象。
Object.assign 方法只會(huì)拷貝源對(duì)象自身的并且可枚舉的屬性到目標(biāo)對(duì)象。該方法使用源對(duì)象的[[Get]]和目標(biāo)對(duì)象的[[Set]],所以它會(huì)調(diào)用相關(guān) getter 和 setter。因此,它分配屬性,而不僅僅是復(fù)制或定義新的屬性。如果合并源包含getter,這可能使其不適合將新屬性合并到原型中。為了將屬性定義(包括其可枚舉性)復(fù)制到原型,應(yīng)使用Object.getOwnPropertyDescriptor()和Object.defineProperty() 。
String類型和 Symbol 類型的屬性都會(huì)被拷貝。
合并對(duì)象
var o1 = { a: 1 }; var o2 = { b: 2 }; var o3 = { c: 3 }; var obj = Object.assign(o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 } console.log(o1); // { a: 1, b: 2, c: 3 }, 注意目標(biāo)對(duì)象自身也會(huì)改變。
合并具有相同屬性的對(duì)象
var o1 = { a: 1, b: 1, c: 1 }; var o2 = { b: 2, c: 2 }; var o3 = { c: 3 }; var obj = Object.assign({}, o1, o2, o3); console.log(obj); // { a: 1, b: 2, c: 3 }
六、Map和Set
Map和Set都叫做集合,但是他們也有所不同。Set常被用來(lái)檢查對(duì)象中是否存在某個(gè)鍵名,Map集合常被用來(lái)獲取已存的信息。
Set是有序列表,含有相互獨(dú)立的非重復(fù)值。
Array和Set對(duì)比
都是一個(gè)存儲(chǔ)多值的容器,兩者可以互相轉(zhuǎn)換,但是在使用場(chǎng)景上有區(qū)別。如下:
Array的indexOf方法比Set的has方法效率低下
Set不含有重復(fù)值(可以利用這個(gè)特性實(shí)現(xiàn)對(duì)一個(gè)數(shù)組的去重)
Set通過(guò)delete方法刪除某個(gè)值,而Array只能通過(guò)splice。兩者的使用方便程度前者更優(yōu)
Array的很多新方法map、filter、some、every等是Set沒(méi)有的(但是通過(guò)兩者可以互相轉(zhuǎn)換來(lái)使用)
Object和Map對(duì)比
Object是字符串-值,Map是值-值
Object鍵為string類型,Map的鍵是任意類型
手動(dòng)計(jì)算Object尺寸,Map.size可以獲取尺寸
Map的排序是插入順序
Object有原型,所以映射中有一些缺省的鍵??梢岳斫鉃镸ap=Object.create(null)
Set操作集合
let set = new Set() // Set轉(zhuǎn)化為數(shù)組 let arr = Array.from(set) let arr = [...set] // 實(shí)例屬性(繼承自Set) set.constructor === Set set.size // 操作方法 set.add(1) // 添加一個(gè)值 set.delete(1) //刪除一個(gè)值 set.has(1) //判斷是否有這個(gè)值(Array中的indexOf) set.clear() //清除所有值 // 獲取用于遍歷的成員方法(Set的遍歷順序就是插入順序) set.keys() // 返回鍵名的遍歷器 set.values() // 返回鍵值得遍歷器 set.entries() // 返回鍵值對(duì)的遍歷器 set.forEach() // 循環(huán)遍歷每個(gè)值(和Array的方法一致) for (let key of set.keys()){} for (let val of set.values()){} for (let entry of set.entries()){} // 使用數(shù)組方法來(lái)處理set值 set = new Set(arr) set = new Set([...set].map((x) => x = x * 2)) set = new Set([...set].filter((x) => x > 2))
Map的方法集合
let map = new Map() // 實(shí)例屬性(繼承自Map) map.constructor === Map map.size // 操作方法 map.set(1,2) map.get(1) map.delete(1) map.has(1) map.clear() // 遍歷方法 map.keys() map.values() map.entries() map.forEach() // Map和數(shù)組的轉(zhuǎn)換 map = new Map([['key','val'],[2,1]]) // 要求雙成員數(shù)組 let arr = [...map] // 值得注意的是Map的鍵是跟內(nèi)存綁定的 map.set([1], 's') map.get([1]) let arr = [1] let arr1 = [1] map.set(arr, 's') map.get(arr) map.set(arr1, 's') map.get(arr1)
七、迭代器(Iterator)
1、entries() 返回迭代器:返回鍵值對(duì)
//數(shù)組 const arr = ['a', 'b', 'c']; for(let v of arr.entries()) { console.log(v) } // [0, 'a'] [1, 'b'] [2, 'c'] //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.entries()) { console.log(v) } // ['a', 'a'] ['b', 'b'] ['c', 'c'] //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.entries()) { console.log(v) } // ['a', 'a'] ['b', 'b']
2、values() 返回迭代器:返回鍵值對(duì)的value
//數(shù)組 const arr = ['a', 'b', 'c']; for(let v of arr.values()) { console.log(v) } //'a' 'b' 'c' //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.values()) { console.log(v) } // 'a' 'b' 'c' //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.values()) { console.log(v) } // 'a' 'b'
3、keys() 返回迭代器:返回鍵值對(duì)的key
//數(shù)組 const arr = ['a', 'b', 'c']; for(let v of arr.keys()) { console.log(v) } // 0 1 2 //Set const arr = new Set(['a', 'b', 'c']); for(let v of arr.keys()) { console.log(v) } // 'a' 'b' 'c' //Map const arr = new Map(); arr.set('a', 'a'); arr.set('b', 'b'); for(let v of arr.keys()) { console.log(v) } // 'a' 'b'
雖然上面列舉了3種內(nèi)建的迭代器方法,但是不同集合的類型還有自己默認(rèn)的迭代器,在for of中,數(shù)組和Set的默認(rèn)迭代器是values(),Map的默認(rèn)迭代器是entries()。
for of循環(huán)解構(gòu)
對(duì)象本身不支持迭代,但是我們可以自己添加一個(gè)生成器,返回一個(gè)key,value的迭代器,然后使用for of循環(huán)解構(gòu)key和value。
const obj = { a: 1, b: 2, *[Symbol.iterator]() { for(let i in obj) { yield [i, obj[i]] } } } for(let [key, value] of obj) { console.log(key, value) } // 'a' 1, 'b' 2
字符串迭代器
const str = 'abc'; for(let v of str) { console.log(v) } // 'a' 'b' 'c'
ES6給數(shù)組添加了幾個(gè)新方法:find()、findIndex()、fill()、copyWithin()
1、find():傳入一個(gè)回調(diào)函數(shù),找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素,返回它,并且終止搜索。
const arr = [1, "2", 3, 3, "2"] console.log(arr.find(n => typeof n === "number")) // 1
2、findIndex():傳入一個(gè)回調(diào)函數(shù),找到數(shù)組中符合當(dāng)前搜索規(guī)則的第一個(gè)元素,返回它的下標(biāo),終止搜索。
const arr = [1, "2", 3, 3, "2"] console.log(arr.findIndex(n => typeof n === "number")) // 0
3、fill():用新元素替換掉數(shù)組內(nèi)的元素,可以指定替換下標(biāo)范圍。
arr.fill(value, start, end)
4、copyWithin():選擇數(shù)組的某個(gè)下標(biāo),從該位置開(kāi)始復(fù)制數(shù)組元素,默認(rèn)從0開(kāi)始復(fù)制。也可以指定要復(fù)制的元素范圍。
arr.copyWithin(target, start, end) const arr = [1, 2, 3, 4, 5] console.log(arr.copyWithin(3)) // [1,2,3,1,2] 從下標(biāo)為3的元素開(kāi)始,復(fù)制數(shù)組,所以4, 5被替換成1, 2 const arr1 = [1, 2, 3, 4, 5] console.log(arr1.copyWithin(3, 1)) // [1,2,3,2,3] 從下標(biāo)為3的元素開(kāi)始,復(fù)制數(shù)組,指定復(fù)制的第一個(gè)元素下標(biāo)為1,所以4, 5被替換成2, 3 const arr2 = [1, 2, 3, 4, 5] console.log(arr2.copyWithin(3, 1, 2)) // [1,2,3,2,5] 從下標(biāo)為3的元素開(kāi)始,復(fù)制數(shù)組,指定復(fù)制的第一個(gè)元素下標(biāo)為1,結(jié)束位置為2,所以4被替換成2
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“常用到的ES6語(yǔ)法有哪些”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司,關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計(jì)公司行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、網(wǎng)站設(shè)計(jì)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。