JavaScript之ES6常用基礎(chǔ)知識(shí)有哪些

這篇文章主要介紹了JavaScript之ES6常用基礎(chǔ)知識(shí)有哪些，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

為海豐等地區(qū)用戶(hù)提供了全套網(wǎng)頁(yè)設(shè)計(jì)制作服務(wù)，及海豐網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)制作、網(wǎng)站設(shè)計(jì)、海豐網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專(zhuān)業(yè)、用心的態(tài)度為用戶(hù)提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶(hù)的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

ES6 let與const及其相關(guān)

塊級(jí)作用域

ES6新增了塊級(jí)作用域，總結(jié)一句話大致就是：大括號(hào){}包起來(lái)的代碼塊基本山都可以當(dāng)做塊級(jí)作用域。

常見(jiàn)的有

直接使用{}包起來(lái)：

 {
 var a = 4
 }

函數(shù)體大括號(hào)，if-else大括號(hào)，for循環(huán)大括號(hào)，switch大括號(hào)，try-catch大括號(hào)等。 需要注意的是，for循環(huán)，每一次循環(huán)時(shí)的{}都是一個(gè)獨(dú)立的塊級(jí)作用域。

 for(let i=0; a < 5; i++){
  let j = i
 }

上面代碼循環(huán)了五次，實(shí)際上有五個(gè)獨(dú)立的j。

日常開(kāi)發(fā)中，我們就可以利用這個(gè)特性，來(lái)創(chuàng)建塊級(jí)作用域了。

塊級(jí)作用域變量let與const

使用let或const聲明的變量只在當(dāng)前塊級(jí)作用域生效，出了這個(gè)代碼塊，就無(wú)法訪問(wèn)。

 {
  let a = 5
 }
console.log(a) 
// Uncaught ReferenceError: a is not defined

日常開(kāi)發(fā)中，塊級(jí)作用域中使用的變量，盡量使用let或者const聲明。

需要注意的問(wèn)題:

let和const變量一定要先聲明，再使用，避免出錯(cuò)。不要試圖利用變量提升的特性。
const聲明變量時(shí)，一定要初始化，否則會(huì)報(bào)錯(cuò)。let建議也在聲明時(shí)初始化。
const聲明的變量一旦初始化，以后就不可以在進(jìn)行賦值操作，但可以對(duì)其引用的對(duì)象進(jìn)行更改。

 const noChangeMe; 
 // Uncaught SyntaxError: Missing initializer in const declaration
 const noChangeMe = [1,2,4]
 noChangeMe = [2, 3] 
 // Uncaught TypeError: Assignment to constant variable
 noChangeMe[100] = 100 // everything is OK

let和const聲明的變量不能再重復(fù)聲明。 雖然var可以無(wú)限次重復(fù)聲明，但是并不適用于這兩個(gè)新的聲明方式。

 let a = 1
 let a = 2 
 // Identifier 'a' has already been declared

不要用window.xxx去調(diào)用let與const聲明的變量 ES6規(guī)定，let、const、class聲明的全局變量，不屬于頂層對(duì)象的屬性。

String

使用反引號(hào)”`”
使用``將字符串包起來(lái)，可以解決下面的問(wèn)題:

字符串不能換行，如果換行只能使用+號(hào)
字符串中的引號(hào)如果和最外層相同，需要進(jìn)行轉(zhuǎn)義
字符串中插入變量，需要用+號(hào) 以前這樣的寫(xiě)法:

 var name = 'world'
 var str = "小明說(shuō):\"hello, " + name + "\""  // 小明說(shuō):"hello, world"

現(xiàn)在可以方便的寫(xiě)作：

 var name = 'world'
 str str = `小明說(shuō)："hello, ${name}"`

總的來(lái)說(shuō)，有三個(gè)好處:

不怕字符串中出現(xiàn)的引號(hào)；
不怕?lián)Q行，反引號(hào)包起來(lái)的字符串可以隨便換行；
使用${}將變量或表達(dá)式包起來(lái)直接放在字符串中，不用寫(xiě)很多+

ES6 遍歷字符串

使用for...of代替for循環(huán):

 var string = 'string'
 for(var i of string) {
 console.log(i)
 }

includes(),startsWidth(),endsWidth()
不用使用indexOf()判斷字符串中是否包含某個(gè)值了，使用includes():

 var string = 'string'
 string.includes('i'， 0)  // true

includes第二個(gè)參數(shù)表示查找的起始索引。 還可以使用startsWidth()和endsWidth()判斷字符串是否以某些字符開(kāi)始或結(jié)尾。

ES6 函數(shù)

參數(shù)的默認(rèn)值

方便地設(shè)置函數(shù)參數(shù)的默認(rèn)值

 function print( a = 2 ){
 console.log(a)
 }
 print() //2

ES6 擴(kuò)展運(yùn)算符…獲取其余參數(shù)

可以使用...加上變量名保存其他參數(shù)全部數(shù)量。 當(dāng)只知道函數(shù)的前幾個(gè)具體參數(shù)，不確定之后會(huì)有多少個(gè)參數(shù)傳入時(shí)，可以使用...把其他傳入的參數(shù)保存到一個(gè)數(shù)組中。

 function print(value1, value2, ...values){
 console.log(values.join('--'))
 }
 print(1, 2, '參數(shù)3') // 參數(shù)3
 print(1, 2, '參數(shù)3', '參數(shù)4', '參數(shù)5') // print(1, 2, '參數(shù)3', '參數(shù)4', '參數(shù)5')

ES6 使用箭頭函數(shù)

使用箭頭函數(shù)有兩個(gè)好處:

代碼更加簡(jiǎn)潔
靜態(tài)綁定this 箭頭函數(shù)中，this指向的是定義箭頭函數(shù)的對(duì)象中的this。

 var name = 'outer'
 var obj = {
  name: 'inner',
  func: () => {
  console.log(this.name)
  }
 }
 var obj2 = {
   name: 'inner',
   func: function() {
     console.log(this.name)
   }
 }
 obj.func() // "outer"
 obj2.func() // "inner"

第一個(gè)使用了箭頭函數(shù)，由于箭頭函數(shù)的this與其所在環(huán)境中的this相同，也就是與obj的this相同，而obj處于全局環(huán)境的活動(dòng)對(duì)象中，this指向全局對(duì)象，這里指window，所以輸出outer。 注意:obj對(duì)象的this與它的屬性中的this不一樣。 第二個(gè)使用了尋常函數(shù)，作為obj2的一個(gè)屬性，func方法中的this指向了所在的對(duì)象。輸出inner。

ES6 數(shù)組

使用Array.from()把類(lèi)數(shù)組對(duì)象轉(zhuǎn)為數(shù)組

一般來(lái)說(shuō)，含有l(wèi)ength屬性的對(duì)象就可以當(dāng)作類(lèi)數(shù)組對(duì)象。平時(shí)獲取多個(gè)DOM對(duì)象后，不能使用數(shù)組中的很多方法。我們可以使用Array.from方便的轉(zhuǎn)換為數(shù)組,。

 var divs = Array.from(document.querySelectorAll('div'))
 divs.forEach((value, index) => {})

使用fill()初始化數(shù)組

想要以某個(gè)值初始化數(shù)組，需要遍歷。而使用fill()方法，就方便了很多。

 var arr = new Array(100) // 建立一個(gè)100元素的數(shù)組
 arr.fill('初始值', 0, arr.length)

第一個(gè)參數(shù)是要填充的值，后面兩個(gè)與一般的數(shù)組方法一樣，起始索引和結(jié)束索引(不包括)。

使用includes方法

和字符串的includes方法一樣，看數(shù)組中是否有給定值。

對(duì)象
使用簡(jiǎn)單的屬性表示和方法表示

 var name = 'John'
 var a = {
 name: name,
 sayName: function(){ console.log(this.name) }
 }

改寫(xiě)為:

 var name = 'John'
 var a = {
 name,
 sayName () { console.log(this.name) }
 }

記得Object.is()這個(gè)方法
其與===的差別:

 NaN === NaN // false
 Object.is(NaN, NaN) // true

 -0 === +0  //true
 Object.is(+0, -0) // false
 Object.is(+0, 0) / true
 Object.is(-0, 0) / false

可以這樣理解,遵循的原則: 是同一個(gè)東西就要相等。 NaN與NaN就是一個(gè)東西，而-0帶了個(gè)負(fù)號(hào)，和0與+0不一樣。0和+0相同就像1和+1相同一樣。

使用Object.assign()合并多個(gè)對(duì)象

Object.assign()是用來(lái)合并對(duì)象的。assign，譯作分配,指派。這個(gè)方法本意是將某些對(duì)象自己的屬性拷貝到目標(biāo)對(duì)象上。它不回去復(fù)制繼承來(lái)的屬性。 比如可以在定義某個(gè)配置的時(shí)候，定義一個(gè)基礎(chǔ)配置，在定義兩個(gè)不同情況下的配置。使用時(shí)，進(jìn)行合并。

 var pathConfig = {
 path: 'style/images'
 }
 var devConfig = {
 baseUrl: 'http://localhost:8080/'
 }
 var buildConfig = {
 baseUrl: 'https://192.128.0.2'
 }
 // 使用時(shí)，合并
 var mode = 'dev'
 var config = Object.assign({}, pathConfig, mode === 'dev' ? devConfig : buildConfig)

只是舉個(gè)例子。

Object.keys()，Object.values()，Object.entries
這三個(gè)方法返回對(duì)象自身的，可枚舉的，屬性名為字符串的屬性相關(guān)的東西，分別為：

Object.keys(): 屬性名組成的數(shù)組
Object.values()： 屬性值組成的數(shù)組
Object.entries: ["key", "value"]組成的數(shù)組。
 var john = {
 name: 'John',
 age: 12
 }
 Object.keys(john) // ["name", "age"]
 Object.values(john) // ["John", 12]
 Object.entries(john) // [["name", "John"], ["age", 12]]

ES6 ...運(yùn)算符

前面在函數(shù)的剩余參數(shù)處理中提到了...擴(kuò)展運(yùn)算符。總結(jié)了一下，感覺(jué)有兩個(gè)用法:

用來(lái)讀取數(shù)組或者對(duì)象的時(shí)候，是把數(shù)組或?qū)ο蠼o擴(kuò)展開(kāi)；
用來(lái)給對(duì)象或者數(shù)組賦值的時(shí)候，自動(dòng)給對(duì)象或數(shù)組添加屬性或元素。
用來(lái)讀取
讀取的時(shí)候就是把數(shù)組或者對(duì)象給擴(kuò)展開(kāi)來(lái)。

 var a = [...[1,2,3], 4] // 把數(shù)組的每一項(xiàng)都展出來(lái)
 a // [1, 2, 3, 4]
 var obj = {
 name: 'John',
 age: 12
 }
 var newObj = {...obj, job: 'teacher' } // 把某個(gè)屬性展出來(lái)
 newObj // {name: "John", age: 12, job: "teacher"}

所以可以很方便的用來(lái)擴(kuò)展，合并數(shù)組或?qū)ο蟆?/p>

用作賦值

用作賦值的時(shí)候，是用作解構(gòu)賦值，含義就是把等號(hào)右邊表達(dá)式的剩余屬性或數(shù)組項(xiàng)都放到...后面的變量里。

var a, restB
 [a, ...restB] = [1, 3, 5]
 a // 1
 restB // [3, 5]

 var c, restD
 { name, ...restD } = {name: 'John', age: 12, job: 'teacher'}
 name // "John" 是一個(gè)屬性的值
 restD // { c, ...restD } = {name: 'John', age: 12, job: 'teacher'} 是一個(gè)對(duì)象

對(duì)于對(duì)象的解構(gòu)賦值，會(huì)把對(duì)應(yīng)不到的屬性全部放進(jìn)...后面的變量對(duì)象中。

注意：因?yàn)槭前咽Ｏ聸](méi)人要的屬性或者數(shù)組項(xiàng)都收下，所以...應(yīng)該放在數(shù)組或者對(duì)象中的最后，且只能有一個(gè)。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“JavaScript之ES6常用基礎(chǔ)知識(shí)有哪些”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

名稱(chēng)欄目：JavaScript之ES6常用基礎(chǔ)知識(shí)有哪些
鏈接URL：http://muchs.cn/article36/ppjspg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站設(shè)計(jì)公司、企業(yè)建站、搜索引擎優(yōu)化、ChatGPT、動(dòng)態(tài)網(wǎng)站、虛擬主機(jī)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)