ES6 特性

這篇具有很好參考價值的文章主要介紹了ES6 特性。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點(diǎn)擊"舉報違法"按鈕提交疑問。

一、ES6

1.1 ES6 概念

1.1.1 什么是 ES

ES 全稱 EcmaScript 是腳本語言的規(guī)范
JavaScript 是 EcmaScript 的一種實現(xiàn)
ES 新特性就是指 JavaScript 的新特性

1.1.2 為什么要使用 ES

語法簡單，功能豐富
框架開發(fā)應(yīng)用
前端開發(fā)職位要求

1.1.3 為什么要學(xué)習(xí) ES6

ES6 的版本變動最多，具有里程碑的意義
ES6 加入許多新的語法特性，編程實現(xiàn)更簡單，高效
ES6 是前端發(fā)展趨勢，就業(yè)必備技能

1.1.4 ES6 的兼容性

由于每個瀏覽器的發(fā)展不一樣，所以存在一定的兼容性的問題
可以在 http://kangax.github.io/compat-table/es6/ 查找瀏覽器是否兼容

1.2 let 關(guān)鍵字

1.2.1 let 聲明格式

let 關(guān)鍵字與 var 關(guān)鍵字類似，都可以聲明變量

let a=100;

let 關(guān)鍵字也可以同時聲明多個變量

let a,b,c;
let a=521,b='I Love You',c=[5,2,0];

1.2.2 let 關(guān)鍵字的特性

1、變量不能重復(fù)聲明

let 不像 var 那樣，重復(fù)聲明會被覆蓋
let 如果同時聲明了兩個重復(fù)的變量名，則會直接報錯
例如

let b=521;
let b=125;
console.log('let'+b);

ES6 特性,ES特性,es6,前端,ecmascript

2、塊級作用域

let 關(guān)鍵字定義的變量或函數(shù)只在該區(qū)域內(nèi)有效，在區(qū)域外部無法訪問
例如

{
  let a=1;
}
console.log(a);

ES6 特性,ES特性,es6,前端,ecmascript

3、不存在變量提升

變量提升是指會在代碼執(zhí)行前將變量的聲明部分提升到作用域頂部，即將變量聲明提前至函數(shù)或全局作用域的最前面
這意味著在代碼中可以在變量聲明前使用變量而不會報錯，因為變量已經(jīng)被提升到了作用域頂部
let 關(guān)鍵字聲明的變量不存在變量提升，則意味著必須先聲明了變量才可以調(diào)用
不可以在聲明變量之前調(diào)用變量

4、不影響作用域鏈

作用域鏈?zhǔn)?JavaScript 中用于查找變量的機(jī)制。
作用域鏈?zhǔn)怯啥鄠€執(zhí)行上下文的詞法環(huán)境組成的鏈?zhǔn)浇Y(jié)構(gòu)。
在訪問變量時，JavaScript 引擎首先在當(dāng)前執(zhí)行上下文的詞法環(huán)境中查找該變量。
如果變量未找到，引擎會繼續(xù)向上查找，即沿著作用域鏈向外層的詞法環(huán)境逐級查找。
作用域鏈的最終目標(biāo)是找到變量或抵達(dá)最外層的全局詞法環(huán)境。
變量的作用域鏈形成是在函數(shù)定義時確定的，并在函數(shù)執(zhí)行期間保持不變。
作用域鏈確保了變量的可訪問性和作用域的封閉性。
嵌套的函數(shù)可以通過作用域鏈訪問外層函數(shù)或全局作用域中的變量。
函數(shù)內(nèi)部聲明的變量會優(yōu)先在當(dāng)前作用域中查找，而不會影響外層作用域中同名的變量。

1.3 const 關(guān)鍵字

const 關(guān)鍵字用于聲明常量

1.3.1 const 聲明格式

使用 const 關(guān)鍵字來聲明常量

const NAME='蘭巧兒';

1.3.2 const 常量聲明注意事項

必須要有初始值
一般常量名使用大寫
常量的值不允許修改
const 也屬于塊及作用域
對于數(shù)組和對象的元素修改，不算做對常量的修改，不會報錯
- 例如我聲明了一個數(shù)組，在向其中添加元素，并不會報錯
- ```
const ARRAYS=[1,2,3];
ARRAYS.push(4);
console.log(ARRAYS)
```
- 因為本質(zhì)上數(shù)組的內(nèi)存地址并沒有修改
- 如果直接將數(shù)組的值改變，則會報錯，類似于這樣操作
- ```
const ARRAYS=[1,2,3];
ARRAYS=5;
```

1.4 變量的結(jié)構(gòu)賦值

1.4.1 結(jié)構(gòu)賦值的概念

解構(gòu)賦值是一種用于從數(shù)組或?qū)ο笾刑崛≈挡①x給變量的
ES6 允許按照一定模式從數(shù)組和對象中提取，對變量進(jìn)行賦值
ES6 的結(jié)構(gòu)賦值主要分為數(shù)組結(jié)構(gòu)賦值和對象結(jié)構(gòu)賦值

1.4.2 數(shù)組的結(jié)構(gòu)

數(shù)組的結(jié)構(gòu)賦值是按照變量的順序賦值的
也就是說，賦值的變量名與數(shù)組內(nèi)的元素按照順序?qū)?yīng)
示例

const NUMBERS=[5,2,1];
let [a,b,c]=NUMBERS;
console.log(a)
console.log(b)
console.log(c)

1.4.3 對象的結(jié)構(gòu)

對象的結(jié)構(gòu)賦值是按照變量的變量名賦值的
順序可以隨意，但是變量名必須于對象內(nèi)元素名相同，否則會報錯
示例

 const Lan={
    name:"蘭巧兒",
    age:17,
    show:function () {
      console.log("不務(wù)正業(yè)的男高")
    }
 };
 let {name,age,show}=Lan;
 console.log(name)
 console.log(age)
 show();

1.5 模板字符串

1.5.1 模板字符串的聲明

ES6 引入了一種新的字符串聲明
使用 `` 符號來聲明
示例

let str=`蘭巧兒`

1.5.2 模板字符串的特性

1、可以直接進(jìn)行換行

換行時不需要使用 + 符號來拼接，直接換行即可
例如

  let str=`<ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
           </ul>`

2、拼接字符串 ${}

拼接字符串可以使用 ${} 來直接進(jìn)行拼接
例如

  let str2=`你好`
  let str3=`${str2}世界`
  console.log(str3)

1.6 對象的簡化寫法

1.6.1 對象簡化寫法

ES6 中允許在對象的大括號內(nèi)直接寫入變量和函數(shù)，來作為對象的屬性和方法
使得書寫更為簡單
示例

  let name="蘭巧兒"
  let show=function () {
    console.log("大家好")
  }
  const SHCOOL={
    name,
    show
  }
  console.log(SHCOOL)

在聲明對象內(nèi)的方法時，也可以省略冒號以及 function
例如

 const SHCOOL={
    name:"云朵",
    show(){
      console.log("大家好")
    }
  }

1.7 箭頭函數(shù)

1.7.1 箭頭函數(shù)概述

ES6 中允許使用箭頭 => 來定義函數(shù)
使用箭頭聲明函數(shù) 語法

let fn = () =>{
    console.log("你好");
}

1.7.1 箭頭函數(shù)的特性

this 是靜態(tài)的

箭頭函數(shù)中，使用 this 關(guān)鍵字，始終指向聲明時所在作用域下的 this 的值
無論使用什么方式都無法改變 this 的值
代碼示例

function fn1() {
  console.log(this.name)
}
let fnJ2 = () => {
  console.log(this.name)
}
window.name="蘭巧兒"
let shcool={
  name:"巧克力"
}
fn1();
fnJ2();
fn1.call(shcool)
fnJ2.call(shcool)

不能作為構(gòu)造實例化對象
不能使用 arguments 變量

1.7.2 箭頭函數(shù)的簡寫

1、當(dāng)形參有且只有一個時

當(dāng)形參只有一個時，可以省略小括號
直接寫入?yún)?shù)即可
示例

let fn = n =>{
    return n+n
}
console.log(fn(3));

2、當(dāng)代碼中只有一條語句時

當(dāng)代碼當(dāng)中只存在一條語句，可以省略大括號
如果是時返回值，也需要省略 return 關(guān)鍵字

let fn = n => n*n
console.log(fn(3));

1.7.3 箭頭函數(shù)的適用場景

簡短的回調(diào)函數(shù)：箭頭函數(shù)對于作為回調(diào)函數(shù)傳遞給其他函數(shù)的簡短函數(shù)非常適用，尤其是在需要保持代碼簡潔性的情況下。
函數(shù)表達(dá)式：箭頭函數(shù)可以用作函數(shù)表達(dá)式（function expression），并且更容易閱讀和理解。
保持上下文：箭頭函數(shù)不會創(chuàng)建自己的 this 上下文，而是繼承父級作用域中的 this 值。這使得箭頭函數(shù)在處理上下文問題時更加方便。
簡化代碼塊：對于只包含一行代碼的函數(shù)體，箭頭函數(shù)可以通過省略大括號 {} 和 return 語句來簡化代碼。
避免 this 綁定問題：箭頭函數(shù)沒有自己的 this 值，所以可以避免在使用普通函數(shù)時經(jīng)常出現(xiàn)的 this 綁定問題。
方法的簡寫：當(dāng)定義對象方法時，使用箭頭函數(shù)可以更簡潔地定義方法，并且能夠正確綁定 this。

1.7.4 箭頭函數(shù)的不適用場景

對于需要使用 arguments 對象的函數(shù)：箭頭函數(shù)沒有自己的 arguments 對象，它繼承了父級作用域中的 arguments。如果你需要在函數(shù)內(nèi)部訪問函數(shù)的參數(shù)列表，那么箭頭函數(shù)將不適用。
對于需要動態(tài)綁定 this 的函數(shù)：箭頭函數(shù)繼承父級作用域中的 this 值，無法通過 call()、apply() 或 bind() 等方法來改變綁定的 this 值。如果你需要在函數(shù)中使用動態(tài)綁定的 this，則應(yīng)該使用普通函數(shù)。
對于需要在原型方法中使用的函數(shù)：箭頭函數(shù)沒有自己的 prototype 對象，因此不能用作構(gòu)造函數(shù)或原型方法。如果你需要在對象的原型方法中使用函數(shù)，并且希望通過 new 關(guān)鍵字實例化對象，則需要使用普通函數(shù)。
對于需要使用 yield 關(guān)鍵字的生成器函數(shù)：箭頭函數(shù)不能作為生成器函數(shù)使用，因為它們沒有內(nèi)部的迭代狀態(tài)和 yield 關(guān)鍵字。如果你需要定義生成器函數(shù)，那么只能使用普通函數(shù)。

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

1.8.1 給參數(shù)賦默認(rèn)值

在 ES6 中，運(yùn)行給參數(shù)賦予默認(rèn)值
示例

  function fn(a,b,c=10) {
    console.log(a+b+c)
  }
  fn(1,2)

這里給參數(shù) c 賦予了默認(rèn)值 10
則表示，如果不傳遞參數(shù) c 的值，則默認(rèn)為 10
如果傳遞了參數(shù) c 的值，則為用戶傳遞的值

1.8.2 參數(shù)的結(jié)構(gòu)賦值

參數(shù)也可以與結(jié)構(gòu)賦值結(jié)合
示例

function fn({host='127.0.0.1',username,password,port}) {
  console.log(host)
  console.log(username)
  console.log(password)
  console.log(port)
}
let connect={
  username:'root',
  password:'root',
  port:'3306'
}
fn(connect);

1.9 ES6 獲取函數(shù)實參

1.9.1 rest 參數(shù)

ES6 獲取函數(shù)的所有實參可以使用 rest 參數(shù)
用來代替 arguments 參數(shù)
示例

  function fn(...abc) {
    console.log(abc)
  }
  fn(1,2,3,4,5,6,7,8)

rest 參數(shù)的格式是在參數(shù)前面加上 ...
參數(shù)名可以隨意命名，例如 ...args、...abc、...ufo
rest 參數(shù)必須位于形參的最后一位
rest 參數(shù)返回的是一個數(shù)組

1.10 Symbol 類型

1.10.1 Symbol 概述

Symbol 是 ECMAScript 6 中引入的一種新的基本數(shù)據(jù)類型
使用 Symbol 作為屬性名可以創(chuàng)建具有唯一性的屬性，避免命名沖突。
Symbol 可以用于定義隱藏屬性，不容易被外部訪問或意外覆蓋。
Symbol 是不可變的，它的值不能被修改。
Symbol 的值不能與其他類型進(jìn)行運(yùn)算

1.10.2 Symbol 創(chuàng)建

Symbol 的創(chuàng)建主要有兩種方式

1、第一種：使用 Symbol() 函數(shù)

可以通過調(diào)用 Symbol() 函數(shù)來創(chuàng)建一個新的 Symbol 值
例如

const mySymbol = Symbol("描述");

括號內(nèi)的是對 Symbol 的一種描述信息

2、第二種：使用 Symbol.for() 函數(shù)

Symbol.for() 函數(shù)可以創(chuàng)建或檢索具有相同鍵（key）的全局 Symbol
如果已經(jīng)存在具有相同鍵的 Symbol，則返回已存在的 Symbol
否則創(chuàng)建一個新的 Symbol，并將其與給定的鍵關(guān)聯(lián)起來
例如

const mySymbol = Symbol.for('myKey');

1.10.3 `Symbol()` 創(chuàng)建與 `Symbol.for()` 的區(qū)別

使用 Symbol() 創(chuàng)建 Symbol：

使用 Symbol() 函數(shù)創(chuàng)建的每個 Symbol 都是唯一的，即使描述參數(shù)相同。
通過 Symbol() 創(chuàng)建的 Symbol 總是在本地作用域中有效，不會自動注冊為全局 Symbol。
在不同作用域中使用相同的 Symbol() 調(diào)用創(chuàng)建的 Symbol 值是不相等的。

使用 Symbol.for() 創(chuàng)建 Symbol：

使用 Symbol.for() 函數(shù)創(chuàng)建的 Symbol 可以在全局共享符號注冊表中查找或創(chuàng)建具有相同鍵的 Symbol。
調(diào)用 Symbol.for() 時，如果已經(jīng)存在具有相同鍵的 Symbol，則返回已存在的 Symbol，否則創(chuàng)建一個新的 Symbol 并注冊到全局符號注冊表中。
全局注冊表中的 Symbol 是全局唯一的，可以在不同的代碼塊、文件或執(zhí)行上下文中共享和訪問。

總結(jié)：

使用 Symbol() 創(chuàng)建的 Symbol 是本地作用域的唯一值。

使用 Symbol.for() 創(chuàng)建的 Symbol 可以在全局共享符號注冊表中查找或創(chuàng)建。

Symbol() 創(chuàng)建的 Symbol 是獨(dú)立的，而 Symbol.for() 創(chuàng)建的 Symbol 在全局共享注冊表中被共享。

Symbol.for() 更適合需要全局共享和識別的場景，而 Symbol() 則更適合局部使用的場景。

1.9.4 使用 Symbol 解決字符串耦合問題

假如現(xiàn)在存在一個班級對象，用于紀(jì)錄學(xué)生的成績，假設(shè)有兩個同學(xué)名字相同，但成績不同

假設(shè)兩個同學(xué)都為 “云朵”，使用正常的字符串解決
示例

  let grade={
    '李四':{css:100,js:89},
    '李四':{css:20,js:35}
  }
  console.log(grade)

這樣運(yùn)行必定存在一個問題，因為名字相同，則會導(dǎo)致最后聲明的覆蓋以前聲明的屬性
例如

ES6 特性,ES特性,es6,前端,ecmascript

可以聲明兩個對象，來代替字符串，且在對象中都添加一個 Symbol 來標(biāo)識唯一
示例

let user1={
  name:'李四',
  key:Symbol()
}
let user2={
  name:'李四',
  key:Symbol()
}

let grade={
  [user1.key]:{css:100,js:89},
  [user2.key]:{css:20,js:35}
}
console.log(grade)

[user.key] 必須要添加中括號，否則會將 Symbol 當(dāng)作字符串處理
這樣就會解決被覆蓋的問題了

ES6 特性,ES特性,es6,前端,ecmascript

如果不方便分清，也可以為 Symbol 添加描述

1.11 對象的傳播符

1.11.1 對象傳播符概念

對象傳播符使用三個點(diǎn)（...）語法，將一個對象的屬性“展開”到另一個對象中
通過對象傳播符，可以輕松復(fù)制一個對象的屬性到另一個對象
而無需像以前那樣使用 Object.assign() 或?qū)懸恍┤唛L的代碼來手動合并它們
例如

let object1={
  x:1,
  y:2
}
let object2={
  z:3
}
let object3={...object1,...object2}
console.log(object3)

對象傳播符將 obj1 和 obj2 的屬性“展開”到新對象中，并創(chuàng)建了一個包含三個屬性的新對象
如果存在重復(fù)的屬性名，則后面的屬性會覆蓋前面的屬性

1.11.2 對象傳播符與結(jié)構(gòu)賦值一起使用

對象傳播符也可以與對象解構(gòu)語法一起使用來選擇和重命名屬性
例如

  let object1={a:1,b:2,c:3}
  let {a,...obj2}=object1
  console.log(a)
  console.log(obj2)

使用對象傳播符和對象解構(gòu)語法來選擇 a 屬性并將其賦值給變量 a
然后將剩余屬性合并到 rest 對象中

1.12 數(shù)組

1.12.1 map() 方法

ES6 中的 Array 對象引入了 map() 方法
map() 方法用于創(chuàng)建一個新數(shù)組，數(shù)組中的元素是原始數(shù)組經(jīng)過指定函數(shù)處理后的結(jié)果
map() 方法接受一個回調(diào)函數(shù)作為參數(shù)，該回調(diào)函數(shù)會針對原數(shù)組的每個元素執(zhí)行，并將返回的結(jié)果組成一個新的數(shù)組
map() 的基本語法

const newArray = array.map(function(currentValue, index, array) {
  // 回調(diào)函數(shù)邏輯，返回經(jīng)過處理的元素
});

function：回調(diào)函數(shù)，用于處理每個數(shù)組元素的邏輯?；卣{(diào)函數(shù)可以接受三個參數(shù)：
- currentValue：當(dāng)前正在處理的元素。
- index（可選）：當(dāng)前元素的索引。
- array（可選）：原始數(shù)組對象。
newArray：由 map() 方法返回的新數(shù)組，其中包含原始數(shù)組經(jīng)過處理后的結(jié)果

1.12.2 reduce() 方法

reduce() 方法用于把數(shù)組中的所有元素按照指定的規(guī)則進(jìn)行累積計算，返回一個最終的累積結(jié)果
reduce() 方法的基本語法

array.reduce(function(callback[, initialValue]){
    
})

回調(diào)函數(shù)（callback）：
- 回調(diào)函數(shù)是 reduce() 方法的核心，用于對數(shù)組進(jìn)行累積操作。
- 回調(diào)函數(shù)接收四個參數(shù)：累加器（accumulator）、當(dāng)前值（currentValue）、當(dāng)前索引（currentIndex）和原數(shù)組（array）。
- 回調(diào)函數(shù)必須返回一個新的累積結(jié)果，作為下一次調(diào)用回調(diào)函數(shù)時的累加器（accumulator）的值。
初始值（initialValue）：
- 初始值是可選參數(shù)，表示作為第一次調(diào)用回調(diào)函數(shù)時的累加器（accumulator）的值。
- 如果沒有提供初始值，則使用數(shù)組的第一個元素作為初始值，并從第二個元素開始執(zhí)行累積操作。
- 如果數(shù)組為空且沒有提供初始值，或者數(shù)組只有一個元素且沒有提供初始值，則 reduce() 方法會拋出 TypeError。
- 提供初始值可以確保在空數(shù)組或只有一個元素的情況下也能正常執(zhí)行累積操作。
示例文章來源地址http://www.zghlxwxcb.cn/news/detail-732739.html

  var nums=[1,2,3,4,5,6,7,8,9]
  var sum=nums.reduce((a,b) => a + b);
  console.log(sum);

這里的第一個參數(shù) a，如果首次執(zhí)行，則代表數(shù)組內(nèi)的第一個數(shù)
往后的每次執(zhí)行，都代表之前數(shù)組元素相加的總和
參數(shù) b 表示當(dāng)前遍歷到的數(shù)組元素，也就是數(shù)組 nums 中的每個元素的值
() 方法的核心，用于對數(shù)組進(jìn)行累積操作。
- 回調(diào)函數(shù)接收四個參數(shù)：累加器（accumulator）、當(dāng)前值（currentValue）、當(dāng)前索引（currentIndex）和原數(shù)組（array）。
- 回調(diào)函數(shù)必須返回一個新的累積結(jié)果，作為下一次調(diào)用回調(diào)函數(shù)時的累加器（accumulator）的值。
初始值（initialValue）：
- 初始值是可選參數(shù)，表示作為第一次調(diào)用回調(diào)函數(shù)時的累加器（accumulator）的值。
- 如果沒有提供初始值，則使用數(shù)組的第一個元素作為初始值，并從第二個元素開始執(zhí)行累積操作。
- 如果數(shù)組為空且沒有提供初始值，或者數(shù)組只有一個元素且沒有提供初始值，則 reduce() 方法會拋出 TypeError。
- 提供初始值可以確保在空數(shù)組或只有一個元素的情況下也能正常執(zhí)行累積操作。
示例

  var nums=[1,2,3,4,5,6,7,8,9]
  var sum=nums.reduce((a,b) => a + b);
  console.log(sum);

這里的第一個參數(shù) a，如果首次執(zhí)行，則代表數(shù)組內(nèi)的第一個數(shù)
往后的每次執(zhí)行，都代表之前數(shù)組元素相加的總和
參數(shù) b 表示當(dāng)前遍歷到的數(shù)組元素，也就是數(shù)組 nums 中的每個元素的值

到了這里，關(guān)于ES6 特性的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！

一、ES6

1.1 ES6 概念

1.1.1 什么是 ES

1.1.2 為什么要使用 ES

1.1.3 為什么要學(xué)習(xí) ES6

1.1.4 ES6 的兼容性

1.2 let 關(guān)鍵字

1.2.1 let 聲明格式

1.2.2 let 關(guān)鍵字的特性

1.3 const 關(guān)鍵字

1.3.1 const 聲明格式

1.3.2 const 常量聲明注意事項

1.4 變量的結(jié)構(gòu)賦值

1.4.1 結(jié)構(gòu)賦值的概念

1.4.2 數(shù)組的結(jié)構(gòu)

1.4.3 對象的結(jié)構(gòu)

1.5 模板字符串

1.5.1 模板字符串的聲明

1.5.2 模板字符串的特性

1.6 對象的簡化寫法

1.6.1 對象簡化寫法

1.7 箭頭函數(shù)

1.7.1 箭頭函數(shù)概述

1.7.1 箭頭函數(shù)的特性

1.7.2 箭頭函數(shù)的簡寫

1.7.3 箭頭函數(shù)的適用場景

1.7.4 箭頭函數(shù)的不適用場景

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

1.8.1 給參數(shù)賦默認(rèn)值

1.8.2 參數(shù)的結(jié)構(gòu)賦值

1.9 ES6 獲取函數(shù)實參

1.9.1 rest 參數(shù)

1.10 Symbol 類型

1.10.1 Symbol 概述

1.10.2 Symbol 創(chuàng)建

1.10.3 Symbol() 創(chuàng)建與 Symbol.for() 的區(qū)別

1.9.4 使用 Symbol 解決字符串耦合問題

1.11 對象的傳播符

1.11.1 對象傳播符概念

1.11.2 對象傳播符與結(jié)構(gòu)賦值一起使用

1.12 數(shù)組

1.12.1 map() 方法

1.12.2 reduce() 方法

相關(guān)文章

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

微信掃一掃打賞

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)

二維碼1

二維碼2

1.10.3 `Symbol()` 創(chuàng)建與 `Symbol.for()` 的區(qū)別

支付寶掃一掃領(lǐng)取紅包，優(yōu)惠每天領(lǐng)