關於ES6

DlikeT發表於2020-11-10

1 什麼是es6

ES的全稱是ECMAScript，它是由ECMA國際標準化組織制定的一項指令碼語言的標準化規範。

2為什麼要使用es6

ES5不能滿足目前前端越來越複雜，龐大的現狀，可以說已經過時了，ES6是對ES5的增強和升級。
1.主流的瀏覽器都已經全面支援ES6
2.行業內較新的前端框架都已經全面使用ES6的語法
3.微信小程式,uni-app等都是基於ES6的語法
4.從就業出發，中小型公司，全棧，簡歷上多一個技能，試用期也能更快的上手。

3es6新特性

1. let和const宣告變數和常量 var
let//const 作用域只侷限於當前程式碼塊，var不同
let//const 宣告的變數不會被提升
let//const 在相同的作用域不能宣告相同的變數
let：for迴圈體現let的父子作用域（for同步，btn[i].οnclick=function(){} 非同步）
const：宣告變數時必須賦值（只可一次宣告）

2. 解構賦值
2.1變數用法(陣列)：let [name,age,sex] = [‘HHS’，21，‘男’]；
物件的解構賦值：
2.2陣列解構賦值( 兩邊對應即可 )：
基礎：let [name,age,sex] = [‘HHS’，21，‘男’]；
巢狀：let [name, [sex, age]] = [‘HHS’, [‘男’, 21]] ;
2.3基本型別解構賦值（瞭解即可，不常用）
let [a,b,c,d,e] = ‘我是中國人’；

3. 資料集-Set（類似陣列） set和array都是 [ ]
3.1與陣列的區別：無重複資料（重複是隻留一個） // 瞭解一個屬性，四個方法，呼叫都是用: 集合物件.屬性 / 方法（）
3.2建立一個集合 let set = new Set（[‘張三’，‘李四’]）；
3.3一個屬性 set.size //集合長度，重複資料不計算
3.4四個方法（add，delete，has，clear）
add （新增資料） set.add(‘劉德華’).add（‘黎明’） //支援鏈式呼叫，返回物件
delete（刪除資料） set.delete(‘劉德華’); //返回一個布林值
has（判斷是否存在） set.has(‘劉德華’); //返回一個布林值
clear（清空集合） set.clear( ); //返回一個undefined

4. 資料集合-Map（類似物件） map和物件都是 { }
4.1物件的key只能是string，map沒有要求（key唯一）
4.2建立一個map物件（key與value之間是（，），物件之間是（：））
4.3 size //map.size 長度 屬性
4.4 set（）/get（）/delete（）/has（）/clear（） 方法
map.set(‘friends’,[‘趙六’，‘李七’])；
map.get（‘name’）;
map.delete（‘name’）；
has/clear與Set類似
4.5 keys（），values（），entries（）
獲取所有key，所有value，兩個一起entry，，因為是全部所有都是複數
4.6遍歷map
Js中forEach語法： array.forEach(函式)，函式=function（value，index）{……}}
Value和index隨便取名，前面為值，後面為下標
5. 新增資料型別Symbol（瞭解）
ES5的物件屬性名都是字串，容易造成屬性名衝突
ES6引入新的元素資料型別Symbol表示獨一無二的值
6. 新增語法糖Class
在其他語言中物件導向的方式都是通過Class來建立
在我們js中卻是基於原型-建構函式來實現的（可能給開發者找出一定的誤導）
7. 內建物件擴充（瞭解）
8. 8. 延展操作符
將str中的字串，拆解成一個陣列
9. 函式新增方法
9.1形參設定預設值
ES5中，呼叫函式且未傳引數處理辦法
9.2延展操作符（函式擴充多樣化）
9.3箭頭函式（）=>{ }
與之前的函式功能差不多，只是寫法更加靈活

相關文章