JavaScript語(yǔ)言不斷發(fā)布一些新特性，感覺(jué)要上天的節(jié)奏啊。本文搜集整理了一些它的高級(jí)概念和用法，來(lái)看看你是否都了解？代碼這樣寫(xiě)是不是更優(yōu)雅了？
閉包是Javascript中的一項(xiàng)重要技術(shù)，內(nèi)部函數(shù)始終可以訪問(wèn)其外部函數(shù)的變量和參數(shù)，即使在外部函數(shù)返回后也是如此。我們使用閉包來(lái)保護(hù)我們不想向外部范圍公開(kāi)的數(shù)據(jù)。
//<button onclick=”increaseCounter()”>Increase Counter</button>//1. 全局變量，變量會(huì)被意外修改let counter = 0;function increaseCounter() { counter++;}//2. 局部變量，每次調(diào)用都重置為0function increaseCounter() { let counter = 0; counter++;}//3. 閉包函數(shù)，符合要求const increaseCounter = (function() { let counter = 0; return function() { counter = counter + 1; console.log(counter); };})();在上下文丟失時(shí)，this將無(wú)法被確定，可以通過(guò)函數(shù)綁定解決。
// 1. 與預(yù)期不符，得到undefinedlet book = { title: 'Learn JavaScript’, printTitle() { console.log(`Book’s title: ${this.title}`); }}setTimeout(book.printTitle, 1000); // Book’s title: undefined// 2. 利用函數(shù)綁定，符合預(yù)期let book = { title: 'Learn JavaScript’, printTitle() { console.log(`Book’s title: ${this.title}`); }}let printTitle = book.printTitle.bind(book);setTimeout(printTitle, 1000); // Book’s title: JavaScript使用命名空間可以防止代碼沖突。
// 1. move、jump函數(shù)在animal命名空間下，需要通過(guò)animal.move()來(lái)調(diào)用let animal = { move: () => { console.log('Move!’); }, jump: () => { consle.log('Jump!’); }};// 2. 真實(shí)項(xiàng)目中，可能會(huì)按如下方式使用命名空間if (typeof APP === 'undefined') { APP = {}; APP.ANIMAL = {};}APP.ANIMAL.move = () => { console.log('Move’);};APP.ANIMAL.jump = () => { console.log('Jump’);};APP.ANIMAL.move(); // MoveAPP.ANIMAL.jump(); // Jump使用in關(guān)鍵字可以判斷對(duì)象中是否存在某個(gè)屬性。
const person = { id: '123', name: '張三'}console.debug('id' in person) //trueconsole.debug('age' in person) //false利用解構(gòu)賦值表達(dá)式，可以將屬性、值從對(duì)象、數(shù)組中取出，賦值給其它變量，非常方便。
const { address: addressLine } = { address: '長(zhǎng)安街20號(hào)', postcode: '518118' };console.warn(addressLine); // 長(zhǎng)安街20號(hào)const [first, second] = [1, 2, 3, 4]console.warn(first, second) // 1 2//動(dòng)態(tài)解構(gòu)const extractKey = 'postcode'const { [extractKey]: youbian } = { address: '長(zhǎng)安街20號(hào)', postcode: '518118' };console.log(youbian) //518118使用Object.entries可以遍歷對(duì)象的屬性和值。
const data = { address: '長(zhǎng)安街20號(hào)', postcode: '518118' };Object.entries(data).forEach(([key,value]) => { if (['address', 'postcode'].includes(key)) { console.log('key:', key , 'value:', value) }})//輸出結(jié)果如下key: address value: 長(zhǎng)安街20號(hào)key: postcode value: 518118利用數(shù)組的filter、some對(duì)數(shù)組進(jìn)行篩選。
const fruits = ['apple', null, 'mongo', undefined, '']const filted = fruits.filter(Boolean)console.debug(filted) //(2) ['apple', 'mongo']const any = fruits.some(Boolean)console.log(any) //trueconst fruits = ['apple', null, 'mongo', 'apple', '']const uniqued = [...new Set(fruits)]console.debug(uniqued) //(4) ['apple', null, 'mongo', '']利用Array.isArray，而不是typeof判斷。
const fruits = ['apple', null, 'mongo', 'apple', '']console.debug(typeof fruits) //objectconsole.error(Array.isArray(fruits)) //trueconst text = '12345'console.debug('text:', +text, 'typeof:', typeof(+text)) //text:12345 typeof:numberconst num = 123456console.debug('number:', num+'', 'typeof:', typeof(num+'')) //number:123456 typeof:string利用!!運(yùn)算符可以將其它類型轉(zhuǎn)換為Boolean類型。
console.log(!!null, typeof(!!null)) //false, booleanconsole.log(!!'', typeof(!!'')) //false, booleanconsole.log(!!undefined, typeof(!!undefined)) //false, booleanconsole.log(!!null, typeof(!!null)) //false, booleanconsole.log(!!true, typeof(!!true)) //true, booleanconsole.log(!!false, typeof(!!false)) //false, booleanconsole.log(!!{id:'', name:''}, typeof(!!{id:'', name:''})) //true, boolean可選鏈 ?. 是一種訪問(wèn)嵌套對(duì)象屬性的安全的方式，可避免在對(duì)象或?qū)傩圆豢捎脮r(shí)拋出異常。由于JavaScript不是類型化語(yǔ)言，該特性還是很有用。
//未使用可選鏈接，將拋出異常const contactInfos = { address: '長(zhǎng)安街20號(hào)' };console.warn(contactInfos.user.phoneNumber)// 以上語(yǔ)句將報(bào)錯(cuò)：Cannot read properties of undefined (reading 'phoneNumber')//使用可選鏈接，將打印undefinedconst contactInfos = { address: '長(zhǎng)安街20號(hào)' };console.warn(contactInfos.user?.phoneNumber) // undefined合并運(yùn)算符的寫(xiě)法為兩個(gè)問(wèn)號(hào) ??，對(duì)于該運(yùn)算符連接的兩個(gè)參數(shù)，如果第一個(gè)參數(shù)不是 null，也不是undefined，則返回第一個(gè)參數(shù)，否則返回第二個(gè)參數(shù)。
const contactInfos = { address: '長(zhǎng)安街20號(hào)' };console.warn(contactInfos.user?.phoneNumber ?? '') // ''const contactInfos = { address: '長(zhǎng)安街20號(hào)', addressNumber: 0 };console.warn(contactInfos.addressNumber || undefined) // undefinedconsole.warn(contactInfos.addressNumber ?? undefined) // 0使用...擴(kuò)展語(yǔ)法，可以僅當(dāng)某個(gè)條件成立時(shí)，才為對(duì)象添加某個(gè)屬性。
const moreInfos = { info: '請(qǐng)開(kāi)車前往.' }return { address: '長(zhǎng)安街20號(hào)', postcode: '518118', ...(moreInfos !== undefined && { moreInfos }) //僅當(dāng)moreInfos不是undefined時(shí)，才添加moreInfos屬性}以下寫(xiě)法讓處理異步調(diào)用異常的代碼變得更為簡(jiǎn)潔。
const results = await getPosts().catch((err) => { return { type: 'error', message: err.message }});console.warn(results) // { type: 'error', message: 'cannot get posts from this endpoint' }Weakmap不同于Map，它的鍵必須是引用對(duì)象，不能是基礎(chǔ)類型，如果沒(méi)有對(duì)該鍵對(duì)象引用時(shí)，該對(duì)象將被從Map和內(nèi)存中移除。
const videoSegments = new WeakMap()let options = { id: '1234', timeStart: 1653831957378, size: 10000 }const segment = { data: new Uint8Array(200) }videoSegments.set(options, segment)console.warn(videoSegments.get(options)) // { data: new Uint8Array(200) }//以下當(dāng)options被賦值為null后，該對(duì)象將被移除和回收options = nullconsole.warn(videoSegments.has(options)) // false, the `options` key object is deleted from the WeakMapReflect是一個(gè)全局對(duì)象，它為元編程提供了一些有用的靜態(tài)方法。
const person = { name: 'Bob', [Symbol('email')]: 'bob@evil.com' };Reflect.get(person, 'name'); // = BobReflect.has(person, 'email'); // = trueReflect.has(person, 'phone'); // = falseReflect.getPrototypeOf(person); // = { constructor ... }Reflect.getOwnPropertyDescriptor( person, 'name'); // = { value: 'Bob', writable: true, enumerable: true, configurable: true }Reflect.ownKeys(person); // name, Symbol(email)Reflect.defineProperty(person, 'phone', { writable: true });Reflect.has(person, 'phone'); // = trueReflect.set(person, 'phone', '123456789');Reflect.deleteProperty(person, 'phone');Reflect.has(person, 'phone'); // = false柯里化（Currying）是一種關(guān)于函數(shù)的高階技術(shù)，它是指將一個(gè)函數(shù)從可調(diào)用的 f(a, b, c) 轉(zhuǎn)換為可調(diào)用的 f(a)(b)(c)。柯里化不會(huì)調(diào)用函數(shù)，它只是對(duì)函數(shù)進(jìn)行轉(zhuǎn)換。
// 完成銀行轉(zhuǎn)賬交易函數(shù)，余額+轉(zhuǎn)入金額-費(fèi)用const transaction = (fee, balance, amount) => ( balance + amout - fee;);// 簡(jiǎn)單實(shí)現(xiàn)的柯里化函數(shù)const curry = (fn, ...args) => ( (..._arg) => ( fn(...args, ..._arg) ));// 復(fù)用了transaction函數(shù)的免交易費(fèi)函數(shù)const freeTransaction = curry(transaction, 0);freeTransaction(10, 90); // = 100組合是一種技術(shù)，其中一個(gè)函數(shù)的結(jié)果被傳遞到下一個(gè)函數(shù)，該函數(shù)被傳遞到下一個(gè)函數(shù)，依此類推......直到執(zhí)行最終函數(shù)并計(jì)算出一些結(jié)果。函數(shù)組合可以由任意數(shù)量的函數(shù)組成。
//f 和 g 都是函數(shù)，x 是在它們之間通過(guò)“管道”傳輸?shù)闹祐ar compose = function(f,g) { return function(x) { return f(g(x)); };};var toUpperCase = function(x) { return x.toUpperCase(); };var exclaim = function(x) { return x + '!'; };var shout = compose(exclaim, toUpperCase);shout('send in the clowns'); //=> 'SEND IN THE CLOWNS!'// 組合函數(shù)const compose = (...fns) => x => fns.reduce((y, f) => f(y), x); // 原函數(shù)const addFee = amount => amount + 2;const addDiscount = amount => amount - 5;// 函數(shù)組合const composition = compose(addFee, addDiscount)(100);console.log(composition) //97聯(lián)系客服
