1.0 ES6語法糖 [重點(diǎn)]
1.1數(shù)組的解構(gòu)賦值
// 聲明多個(gè)變量 let [a,b,c] = [1,2,3] ? let a=1，b=2； // 交換數(shù)值 [a,b] = [b,a] ?2
?1.12?函數(shù)的參數(shù)結(jié)構(gòu)
?文章來源：http://www.zghlxwxcb.cn/news/detail-432729.html
?
1.2對(duì)象的解構(gòu)
?
對(duì)象存在鍵值對(duì)，如果需要解構(gòu)對(duì)象，你需要使用對(duì)象的鍵名為變量名
let data = {
? ?code:200,
? ?msg:'哥你請(qǐng)求通了',
? ?dataList:{
? ? ? ?res:[],
? ? ? ?data:{}
? }
}
let {需要結(jié)構(gòu)的鍵名} = 需要結(jié)構(gòu)的對(duì)象
let {code,dataList} = data
?
?
?
1.3 展開運(yùn)算符
字符串的展開
? ?// 字符串的展開
? ?const str = 'hello world!'
?
? ?console.log(...str); h e l l o w o r l d !
? ?console.log([...str]); // 相當(dāng)于split
? ?console.log({ ...str });
?
數(shù)組的展開
? ?// 數(shù)組的展開
? ?const arr = [1, 2, 3, 4, 5]
? ?const arr1 = [666, 666, 66, 5, 777]
? ?console.log(...arr); 1 2 3 4 5
? ?console.log([...arr]); ?// 數(shù)組的淺拷貝
? ?console.log([...arr, ...arr1]); // 合并數(shù)組
?
const list = document.querySelectorAll('ul li')
? ?console.log('list', [...list]); ?// 將偽數(shù)組轉(zhuǎn)為數(shù)組
?
?
對(duì)象的展開
?
? ?// 對(duì)象的展開
? ?const obj = {
? ? ? ?name: '小明',
? ? ? ?age: 66,
? ? ? ?like: '金花寶寶'
? }
?
? ?// console.log(...obj); // 報(bào)錯(cuò)
? ?// console.log([...obj]);// 報(bào)錯(cuò)
? ?console.log({ ...obj }); // 淺拷貝
? ?console.log({ ...obj, ...{ name: '二狗', sex: '男' }, phone: 123123 }); // 對(duì)象的合并
1.4 模板字符串
`${xxx}`
1.5 對(duì)象簡明寫法
對(duì)象的簡明寫法1:
// 如果對(duì)象中鍵名與鍵值（變量）是一樣的，可以簡寫成一個(gè)
let name = '張無忌'
const data = [123]
const obj ={
? ?name，
? ?data，
}
對(duì)象的簡明寫法2：
// 對(duì)象中的方法（函數(shù)），可以簡寫，去掉：及function
const obj = {
? ?fn:function(){
? ? ? ?// 函數(shù)體
? }，
? ?// 簡寫為：
? ?fn(){
? ? ? ?// 函數(shù)體
? }
}
?
2.0 class類
2.1 什么是類？
具有相同特征的一類事物的抽象
2.2 類的實(shí)現(xiàn)
1、使用class關(guān)鍵字
2、類的動(dòng)態(tài)屬性定義在構(gòu)造器中(constructor)，如果沒有定義構(gòu)造器，瀏覽器會(huì)自動(dòng)生成一個(gè)空的構(gòu)造器
3、類的方法直接定義在類種，自動(dòng)掛載到原型對(duì)象上
4、靜態(tài)方法以static關(guān)鍵字開頭，只能構(gòu)造函數(shù)自己調(diào)用，實(shí)例對(duì)象不可以調(diào)用
?
2.3 類的繼承
1、類的繼承通過關(guān)鍵字extends 來實(shí)現(xiàn)繼承關(guān)系
2、子類必須在構(gòu)造器中調(diào)用關(guān)鍵字super(),super就代表父類、超類、基類
3、子類的動(dòng)態(tài)屬性需在調(diào)用父類super之后
3.0 es6的模塊化
模塊化優(yōu)點(diǎn)：【重點(diǎn)】
解決命名沖突，易于維護(hù)，責(zé)任單一
模塊化的特點(diǎn)：【了解】
*一個(gè)JS文件，就是一個(gè)獨(dú)立的模塊，模塊之間，可以相互地導(dǎo)入和導(dǎo)出*。
語法：
import : 用于導(dǎo)入其他模塊提供的功能
export : 用于暴露該內(nèi)容，以便其他地方導(dǎo)入
寫法一：
導(dǎo)出：
export 你要導(dǎo)出的內(nèi)容1；
export 你要導(dǎo)出的內(nèi)容2；
export 你要導(dǎo)出的內(nèi)容3；
export 你要導(dǎo)出的內(nèi)容4；
? ?
導(dǎo)入：
import { ?你要導(dǎo)入內(nèi)容1，你要導(dǎo)入內(nèi)容2，你要導(dǎo)入內(nèi)容3，... } from '路徑名/文件名'
?
寫法二：
導(dǎo)出 ：
export default 你要導(dǎo)出的內(nèi)容
導(dǎo)入 ：
import 變量名 from '路徑名/文件名'
?
?
?
#a.js 定義需要暴露的內(nèi)容
const data = 100
export default { data, isShow: true }
?
#b.js 引入需要使用的內(nèi)容
// 默認(rèn)導(dǎo)出
import 變量 from './a.js'
console.log(變量);
?
#在html文件中引入b.js
<script src="./module/b.js" type="module"></script>
?
# 一定要記得加上type 為 module
# 啟動(dòng)時(shí)要用虛擬服務(wù)器
?文章來源地址http://www.zghlxwxcb.cn/news/detail-432729.html
到了這里，關(guān)于es6的語法糖，展開運(yùn)算符，類的實(shí)現(xiàn)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
