es新特性整理
let 用來(lái)申明變量的
- js中以前只有全局作用域和函數(shù)作用域，es6中新增了塊級(jí)作用域篡悟。
- 大括號(hào)之間的作用域就是塊級(jí)作用域
- 塊級(jí)作用域中使用let申明的變量匾寝，塊級(jí)作用域之外是無(wú)法獲取的艳悔，
- 使用let申明的變量不會(huì)有變量的作用域提升
const 用來(lái)申明常量的
- const申明的常量是不允許修改的，這里不允許修改抡锈，是不允許修改變量了所指向的內(nèi)存地址乔外。可以修改內(nèi)存中的屬性撇簿。
數(shù)組解構(gòu)
- 獲取制定下標(biāo)的數(shù)據(jù)四瘫，例如：
let arr = [1,2,3] const [,,third,more] = arr
對(duì)象的解構(gòu)
模版字符串
- 使用反引號(hào)欲逃， 使用${}加入插值表達(dá)式稳析，插入的內(nèi)容是標(biāo)準(zhǔn)的js語(yǔ)句（變量弓叛、表達(dá)式诚纸、函數(shù)返回值）
帶標(biāo)簽?zāi)０孀址?/h3>
let name = 'lily'
let sex = true
function stringFunc (string, name, sex) {
onsole.log(string, name, sex) //["my name is ", ", this is ", "", raw: Array(3)] "lily" true
}
let section = stringFunc`my name is ${name}, this is ${sex}`
let name = 'lily'
let sex = true
function stringFunc (string, name, sex) {
onsole.log(string, name, sex) //["my name is ", ", this is ", "", raw: Array(3)] "lily" true
}
let section = stringFunc`my name is ${name}, this is ${sex}`
可以對(duì)變量進(jìn)行判斷咬清，拿到返回值， 比如判斷變量中是否有非法字符影钉，做相關(guān)的翻譯
字符串?dāng)U展方法
- includes
- startWith
- endWith
函數(shù)參數(shù)
- 函數(shù)參數(shù)默認(rèn)值平委，應(yīng)放在函數(shù)參數(shù)的最后夺谁，形參是從前往后接收的
- 剩余所有參數(shù)匾鸥，以前只能通過(guò)arguments獲取，現(xiàn)在可以通過(guò) ...args馏艾，來(lái)拿到后面所有的實(shí)參
箭頭函數(shù)
- 簡(jiǎn)化了函數(shù)的寫(xiě)法
- 不會(huì)改變this的指向奴愉，或者說(shuō)箭頭函數(shù)的this锭硼，在申明的時(shí)候this就已經(jīng)確定
Object的方法
- Object.assgin //對(duì)象合并，返回目標(biāo)對(duì)象
- Object.is // 數(shù)值比較轰异， 可以區(qū)分+0 和 -0的區(qū)別鳖擒，平時(shí)開(kāi)發(fā)還是建議使用 ===
proxy對(duì)象代理基本用法
let person = {
name: '124',
age: 123
}
let personProxy = new Proxy(person, {
get(target, property) {
return 111
},
set(target, property, value) {
target[property] = value
}
})
proxy 和defineProperty
- proxy比defineProperty監(jiān)聽(tīng)的更多蒋荚，比如delete操作
- proxy 是非侵入式對(duì)象進(jìn)行監(jiān)聽(tīng)
Reflect 屬于靜態(tài)對(duì)象
- 提供了一系列的對(duì)象操作方法
- 提供了統(tǒng)一的一套操作對(duì)象的方法（價(jià)值所在）
const obj = {
name: 'yl',
age: 18
}
console.log('name' in obj)
console.log(delete obj.age)
console.log(Object.keys())
console.log(Reflect.has(obj, 'name'))
console.log(Reflect.deleteProperty(obj, 'age'))
console.log(Reflect.ownKeys(obj))
Promise異步編程解決方案
class 新增關(guān)鍵字期升，用來(lái)創(chuàng)建對(duì)象
extends 關(guān)鍵字，繼承
class Person {
constructor(name) {
this.name = name
}
say () {
console.log(`my name is ${this.name}`)
}
}
class Students extends Person {
constructor(name, number) {
super(name)
this.number = number
}
hello() {
super.say()
console.log(`my class NO is ${this.number}`)
}
}
let st = new Students('yuli', 28)
st.hello()
set 集合颂郎， 內(nèi)部成員不允許出現(xiàn)重復(fù)
map 鍵值對(duì)集合乓序，對(duì)象的鍵只能是字符串坎背，map的鍵可以是任意數(shù)據(jù)類型
symbol類型得滤，獨(dú)一無(wú)二的值，可以為對(duì)象添加私有屬性眨业。它屬于基礎(chǔ)數(shù)據(jù)類型
- 現(xiàn)階段數(shù)據(jù)類型一共有7中：number沮协、string慷暂、null、undefind就斤、object蘑辑、array、symbol
- bigInt（用來(lái)存儲(chǔ)更大的整數(shù)）現(xiàn)在處在stage4階段绷旗，預(yù)計(jì)落地后就有8種數(shù)據(jù)類型了
- 如果想要symbol的值相同可以使用for方法：
(需要注意的是這個(gè)方法里面維護(hù)的是字符串和symbol之間的對(duì)應(yīng)的關(guān)系衔肢，如果傳入的值不是string,方法會(huì)自動(dòng)轉(zhuǎn)換成string豁翎，tostring方法)
console.log(Symbol.for('foo') === Symbol.for('foo')) // true - 通過(guò)symbol為對(duì)象添加的屬性是無(wú)法用for in遍歷到的。 也無(wú)法用Object.keys()拿到背桐，JSON.stringify()也是會(huì)忽略symbol屬性蝉揍，獲取方法可以使用Object.getOwnPropertySymbols(obj),這個(gè)方法可以獲取到所有的symbol屬性
for.. of 循環(huán)（以后可作為遍歷所有數(shù)據(jù)結(jié)構(gòu)的統(tǒng)一方式）
- for 適合遍歷數(shù)組
- for .. in 適合遍歷對(duì)象
- forEach 數(shù)組對(duì)象的遍歷方法
- for...of中可以使用break關(guān)鍵字終止循環(huán)（適用對(duì)象：數(shù)組又沾、偽數(shù)組、set励饵、map）
- 內(nèi)部原理是：可迭代的數(shù)據(jù)都有一個(gè)Iterable接口挺勿，Iterable接口有一個(gè)Symbol.itrator方法,這個(gè)方法返回一個(gè)next函數(shù)不瓶，調(diào)用next函數(shù)，拿到當(dāng)前指針下的值和是否結(jié)束的done標(biāo)識(shí),簡(jiǎn)單實(shí)現(xiàn)如下：
const obj = {
store: ['foo', 'bar', 'baz'],
[Symbol.iterator]: function() {
let index = 0;
const _this = this;
return {
next: function() {
const result ={
value: _this.store[index],
done: index > _this.store.length
}
index++
return result
}
}
}
}
迭代器模式
- 構(gòu)建一個(gè)數(shù)據(jù)結(jié)構(gòu)熙参，給數(shù)據(jù)結(jié)構(gòu)添加一個(gè)對(duì)外的迭代器接口孽椰，外部不需要關(guān)心數(shù)據(jù)內(nèi)部的結(jié)構(gòu)是怎么樣的凛篙，只需要調(diào)用迭代器方法就能遍歷整個(gè)數(shù)據(jù)內(nèi)容
生成器函數(shù) Generator函數(shù)
function * foo() {
console.log('11111')
yield 100
console.log('22222')
yield 200
console.log('33333')
yield 300
}
const result = foo()
result.next() //{value: 100, done: fasle}
result.next()//{value: 200, done: fasle}
result.next()//{value: 300, done: fasle}
result.next()//{value: undefined, done: true}
一個(gè)生成器函數(shù)呛梆，被調(diào)用后返回的是一個(gè)生成器對(duì)象填物，調(diào)用這個(gè)對(duì)象的next方法才會(huì)讓這個(gè)函數(shù)的函數(shù)體開(kāi)始執(zhí)行。yield后面的值會(huì)作為結(jié)果返回升薯，特點(diǎn)為惰性執(zhí)行击困，調(diào)用一次執(zhí)行一段
使用生成器來(lái)實(shí)現(xiàn)迭代器接口
const obj = {
store: ['foo', 'bar', 'baz'],
[Symbol.iterator]: function * () {
const _this = this;
for(item of _this.store) {
yield item
}
}
}
for (item of obj) {
console.log(item)
}
es2016 是一個(gè)es的小版本，
- 數(shù)組的includes方法炮障， 可以用來(lái)查找數(shù)組中是否包含NaN
- 指數(shù)運(yùn)算符 2 ** 10 等同于 Math.pow(2, 10)
es2017
Object.values 拿到對(duì)象中所有值組成的數(shù)組
Object.entries() 將對(duì)象轉(zhuǎn)換成[key, value]形式的數(shù)組坤候，轉(zhuǎn)換后可直接使用for...of遍歷
-
Object.getOwnPropertyDescriptors 獲取對(duì)象的所有描述信息（主要是用來(lái)配合es2015新增的get和set使用）
const p1 = { firstName: "yu", laseName: "lei", get fullName() { return this.firstName + this.laseName } } console.log(p1.fullName) // yulei const p2 = Object.assign({}, p1) p2.firstName = 'yang' console.log(p2.fullName) //yulei const des = Object.getOwnPropertyDescriptors(p1) const p2 = Object.defineProperties({}, des) p2.firstName = 'yang' console.log(p2.fullName) //yanglei String.prototype.padStart和 String.prototype.padEnd白筹， 使用給定字符串去填充目標(biāo)字符串的開(kāi)始或者結(jié)束位置徒河，直到字符串達(dá)到指定長(zhǎng)度為止
在函數(shù)參數(shù)的最后以為添加一個(gè)偽逗號(hào)（很小的變化不影響實(shí)際開(kāi)發(fā)）
標(biāo)準(zhǔn)化了 async 送漠、 await，解決異步編程問(wèn)題
