JavaScript 一直在更新變得越來(lái)越好用。從 ES6 開(kāi)始加入了很多新寫(xiě)法能讓你的代碼更短、更清楚也常常運(yùn)行得更快。掌握這些技巧不僅能讓你寫(xiě)代碼更快還能讓代碼更容易讓別人看懂和維護(hù)代碼質(zhì)量也更好。下面直接介紹 25 個(gè)現(xiàn)代 JavaScript 中很實(shí)用的技巧和寫(xiě)法學(xué)會(huì)它們寫(xiě)代碼真的會(huì)輕松很多1. 三元運(yùn)算符一行搞定簡(jiǎn)單判斷用 ? : 代替簡(jiǎn)單的 if/else代碼更緊湊。// 老方法let age 18;let canVote;if (age 18) {canVote Yes;} else {canVote No;}console.log(canVote);//輸出: Yes//新方法 (三元運(yùn)算符)let age 18;let canVote (age 18) ? Yes : No;//一行搞定console.log(canVote);//輸出: Yes2. || 設(shè)置默認(rèn)值防 undefined/null如果變量可能是 null、undefined、0、 或 false用 || 給它一個(gè)后備值。// 老方法 (檢查空值)functiongreet(name) {let displayName;if (name null || name undefined || name ) {displayName Guest;} else {displayName name;}console.log(Hello, ${displayName}!);}//新方法 (|| 短路)functiongreet(name) {const displayName name || Guest;// name為假值就用 Guestconsole.log(Hello, ${displayName}!);}greet(Alice);// Hello, Alice!greet(null);// Hello, Guest!greet();// Hello, Guest! (注意空字符串也被認(rèn)為是假值)3. 條件執(zhí)行滿足條件才做事用 只在條件為真時(shí)才執(zhí)行后面的代碼適合簡(jiǎn)單的操作。// 老方法let isAdmin true;if (isAdmin) {console.log(Admin privileges granted.);}//新方法 ( 短路)let isAdmin true;isAdmin console.log(Admin privileges granted.);//輸出: Admin privileges granted.let isGuest false;isGuest console.log(Guest access.);//沒(méi)輸出因?yàn)?isGuest 是 false4. 模板字符串拼接變量超方便用反引號(hào) 包裹字符串里面用 ${變量} 插入變量或表達(dá)式告別一堆加號(hào)。// 老方法 (加號(hào)拼接)const name Bob;const age 30;console.log(My name is name and I am age years old.);//新方法 (模板字符串)const name Bob;const age 30;console.log(My name is ${name} and I am ${age} years old.);//輸出: My name is Bob and I am 30 years old.5. 箭頭函數(shù)寫(xiě)函數(shù)更簡(jiǎn)短寫(xiě)法 (參數(shù)) 表達(dá)式 比 function 短尤其適合做回調(diào)。注意箭頭函數(shù)沒(méi)有自己的 this它會(huì)用外面函數(shù)的 this。// 老方法const numbers [1, 2, 3];const doubled numbers.map(function(num) {return num * 2;});//新方法 (箭頭函數(shù))const numbers [1, 2, 3];const doubled numbers.map(num num * 2);//一行自動(dòng)返回結(jié)果console.log(doubled);//輸出: [2, 4, 6]// this的區(qū)別 (重要)functionTimer() {this.seconds 0;//普通函數(shù)里面的 this 可能指向 window 或 undefined (嚴(yán)格模式)setInterval(function() {// console.log(this.seconds); //錯(cuò)誤this 不對(duì)}, 1000);//箭頭函數(shù)里面的 this 就是 Timer 實(shí)例的 thissetInterval(() {this.seconds;console.log(this.seconds);//正確每秒1}, 1000);}const myTimer new Timer();6. 解構(gòu)數(shù)組快速取元素直接從數(shù)組里把值提取到變量里還能跳過(guò)某些元素。// 老方法const colors [red, green, blue];const firstColor colors[0];const secondColor colors[1];//新方法 (數(shù)組解構(gòu))const colors [red, green, blue];const [firstColor, secondColor] colors;//按順序提取console.log(firstColor, secondColor);//輸出: red greenconst [,, thirdColor] colors;//跳過(guò)前兩個(gè)console.log(thirdColor);//輸出: blue7. 解構(gòu)對(duì)象快速取屬性直接從對(duì)象里把屬性值提取到變量里還能給屬性換名字。// 老方法const user { name: Charlie, age: 25, city: NYC };const userName user.name;const userAge user.age;//新方法 (對(duì)象解構(gòu))const user { name: Charlie, age: 25, city: NYC };const { name, age } user;//提取 name 和 ageconsole.log(name, age);//輸出: Charlie 25const { name: fullName, city } user;//把 name 提取到 fullName 變量console.log(fullName, city);//輸出: Charlie NYC8. ... 展開(kāi)數(shù)組復(fù)制和合并用 ... 輕松復(fù)制數(shù)組或把多個(gè)數(shù)組合成一個(gè)新數(shù)組。// 老方法const arr1 [1, 2];const arr2 [3, 4];const copiedArr arr1.slice();//復(fù)制const combinedArr arr1.concat(arr2);//合并//新方法 (展開(kāi)語(yǔ)法 ...)const arr1 [1, 2];const arr2 [3, 4];const copiedArr [...arr1];//復(fù)制 arr1const combinedArr [...arr1, ...arr2];//合并 arr1 和 arr2console.log(copiedArr, combinedArr);//輸出: [1, 2] [1, 2, 3, 4]9. ... 展開(kāi)對(duì)象復(fù)制和合并用 ... 輕松復(fù)制對(duì)象或把多個(gè)對(duì)象屬性合并到一個(gè)新對(duì)象里。后面的屬性會(huì)覆蓋前面的同名屬性。// 老方法const obj1 { a: 1, b: 2 };const obj2 { c: 3, d: 4 };const copiedObj Object.assign({}, obj1);//復(fù)制const mergedObj Object.assign({}, obj1, obj2);//合并//新方法 (展開(kāi)語(yǔ)法 ...)const obj1 { a: 1, b: 2 };const obj2 { c: 3, d: 4 };const copiedObj { ...obj1 };//復(fù)制 obj1const mergedObj { ...obj1, ...obj2 };//合并 obj1 和 obj2console.log(copiedObj, mergedObj);//輸出: {a:1, b:2} {a:1, b:2, c:3, d:4}//覆蓋屬性const original { x: 1, y: 2 };const updated { ...original, y: 3, z: 4 };//覆蓋 y, 添加 zconsole.log(updated);//輸出: {x:1, y:3, z:4}10. ... 剩余參數(shù)收集多個(gè)參數(shù)函數(shù)定義時(shí)用 ...參數(shù)名可以把傳進(jìn)來(lái)的多個(gè)參數(shù)自動(dòng)收集到一個(gè)數(shù)組里。// 老方法 (用 arguments)functionsumAll() {let total 0;for (let i 0; i arguments.length; i) {total arguments[i];}return total;}//新方法 (剩余參數(shù) ...)functionsumAll(...numbers) {// numbers是個(gè)數(shù)組return numbers.reduce((total, num) total num, 0);//用 reduce 求和}console.log(sumAll(1, 2, 3, 4));//輸出: 1011. 默認(rèn)參數(shù)參數(shù)沒(méi)傳就用默認(rèn)值直接在函數(shù)參數(shù)后面用 默認(rèn)值如果調(diào)用時(shí)沒(méi)傳這個(gè)參數(shù)或者傳了 undefined就用默認(rèn)值。// 老方法 (用 ||)functiongreet(name, greeting) {name name || Guest;greeting greeting || Hello;console.log(${greeting}, ${name}!);}//新方法 (默認(rèn)參數(shù))functiongreet(name Guest, greeting Hello) {console.log(${greeting}, ${name}!);}greet();//輸出: Hello, Guest! (兩個(gè)都用默認(rèn)值)greet(Frank);//輸出: Hello, Frank! (greeting 用默認(rèn)值)greet(Grace, Hi);//輸出: Hi, Grace! (都不用默認(rèn)值)12. ?. 可選鏈安全訪問(wèn)深層屬性用 ?. 訪問(wèn)可能不存在的對(duì)象屬性(null 或 undefined)避免代碼報(bào)錯(cuò)崩掉返回 undefined。// 老方法 (層層檢查)const user {profile: {address: {street: Main St}}};let streetName;if (user user.profile user.profile.address) {streetName user.profile.address.street;}console.log(streetName);//輸出: Main Stconst invalidUser {};//沒(méi)有 profilelet invalidStreet;//下面如果直接訪問(wèn) invalidUser.profile.address 會(huì)報(bào)錯(cuò)!if (invalidUser invalidUser.profile invalidUser.profile.address) {invalidStreet invalidUser.profile.address.street;//不會(huì)執(zhí)行到這里}console.log(invalidStreet);//輸出: undefined//新方法 (可選鏈 ?.)const streetName user.profile?.address?.street;//安全訪問(wèn)console.log(streetName);//輸出: Main Stconst invalidStreet invalidUser.profile?.address?.street;//遇到 null/undefined 就停返回 undefinedconsole.log(invalidStreet);//輸出: undefined13. ?? 空值合并只關(guān)心 null/undefined用 ?? 判斷只有左邊是 null 或 undefined 時(shí)才用右邊的默認(rèn)值。和 || 不同0、、false 這些有效值不會(huì)被覆蓋。// || 的問(wèn)題 (會(huì)把 0, , false 也當(dāng)成無(wú)效值)const count 0;const defaultCount_OR count || 10;// 0是假值所以用了 10console.log(defaultCount_OR);//輸出: 10 (但 0 可能是有效值)// ??正確解決const count 0;const defaultCount_NC count ?? 10;// 0不是 null/undefined保留 0console.log(defaultCount_NC);//輸出: 0const emptyString ;const defaultString_NC emptyString ?? Default;// 不是 null/undefined保留 console.log(defaultString_NC);//輸出: const undefinedValue undefined;const defaultValue_NC undefinedValue ?? Fallback;// undefined是 nullish用 Fallbackconsole.log(defaultValue_NC);//輸出: Fallback14. forEach遍歷數(shù)組每個(gè)元素比 for 循環(huán)更簡(jiǎn)潔地遍歷數(shù)組對(duì)每個(gè)元素做點(diǎn)事情。// 老方法 (for 循環(huán))const items [apple, banana, cherry];for (let i 0; i items.length; i) {console.log(items[i]);}//新方法 (forEach)const items [apple, banana, cherry];items.forEach(item console.log(item));//對(duì)每個(gè) item 執(zhí)行 console.log//輸出:// apple// banana// cherry15. map把數(shù)組變形成新數(shù)組遍歷原數(shù)組對(duì)每個(gè)元素進(jìn)行轉(zhuǎn)換把所有轉(zhuǎn)換結(jié)果放入一個(gè)新數(shù)組返回。// 老方法 (for 循環(huán) push)const numbers [1, 2, 3];const squaredNumbers [];for (let i 0; i numbers.length; i) {squaredNumbers.push(numbers[i] * numbers[i]);}//新方法 (map)const numbers [1, 2, 3];const squaredNumbers numbers.map(num num * num);//計(jì)算平方console.log(squaredNumbers);//輸出: [1, 4, 9]16. filter按條件篩選數(shù)組元素遍歷原數(shù)組只把滿足條件的元素放入一個(gè)新數(shù)組返回。//老方法(for循環(huán)ifpush)constages [10, 20, 15, 30];constadults [];for(leti0;iages.length;i) {if(ages[i] 18) {adults.push(ages[i]);}}//新方法(filter)constages [10, 20, 15, 30];constadultsages.filter(ageage18);//只保留18的console.log(adults);//輸出: [20, 30]17. reduce把數(shù)組“壓縮”成一個(gè)值遍歷數(shù)組把元素逐個(gè)和一個(gè)“累加器”進(jìn)行計(jì)算(比如累加、拼接、找最大值)最終得到一個(gè)結(jié)果值。功能很強(qiáng)大。// 老方法 (for 循環(huán)求和)const prices [10, 20, 5];let totalPrice 0;for (let i 0; i prices.length; i) {totalPrice prices[i];}//新方法 (reduce 求和)const prices [10, 20, 5];const totalPrice prices.reduce((sum, price) sum price, 0);//從0開(kāi)始累加console.log(totalPrice);//輸出: 35//復(fù)雜例子: 拍平數(shù)組 (把二維數(shù)組變一維)const nestedArrays [[1, 2], [3, 4], [5]];const flattened nestedArrays.reduce((acc, currentArray) [...acc, ...currentArray],//把當(dāng)前數(shù)組展開(kāi)拼接到累加器后面[]//初始累加器是空數(shù)組);console.log(flattened);//輸出: [1, 2, 3, 4, 5]18. Object.keys/values/entries操作對(duì)象屬性方便地獲取對(duì)象的鍵、值或者鍵值對(duì)數(shù)組用來(lái)遍歷對(duì)象。const car {make: Toyota,model: Camry,year: 2020};//獲取所有屬性名 (keys)console.log(Object.keys(car));//輸出: [make, model, year]//獲取所有屬性值 (values)console.log(Object.values(car));//輸出: [Toyota, Camry, 2020]//獲取鍵值對(duì)數(shù)組 (entries) - 每個(gè)元素是 [key, value]console.log(Object.entries(car));/*輸出:[[make, Toyota],[model, Camry],[year, 2020]]*///用 entries 遍歷對(duì)象Object.entries(car).forEach(([key, value]) {console.log(${key}: ${value});});/*輸出:make: Toyotamodel: Camryyear: 2020*/19. 箭頭函數(shù)隱式返回省略 return當(dāng)箭頭函數(shù)只有一行表達(dá)式時(shí)可以省略 {} 和 return 關(guān)鍵字直接寫(xiě)表達(dá)式它會(huì)自動(dòng)返回這個(gè)表達(dá)式的結(jié)果。注意返回對(duì)象字面量時(shí)需要用小括號(hào) () 包裹對(duì)象 {}。// 顯式返回const add (a, b) {return a b;};//隱式返回 (一行表達(dá)式)const add (a, b) a b;//自動(dòng)返回 a b 的結(jié)果console.log(add(5, 3));//輸出: 8//隱式返回對(duì)象 (必須加括號(hào))const createUser (name, age) ({ name, age });//返回 {name: name, age: age}console.log(createUser(Dora, 28));//輸出: { name: Dora, age: 28 }20. !! 轉(zhuǎn)布爾值快速判斷真假用兩個(gè)感嘆號(hào) !! 可以把任何類型的值快速轉(zhuǎn)換成真正的布爾值 (true 或 false)。第一個(gè) ! 把值轉(zhuǎn)成布爾值再取反第二個(gè) ! 再取反一次就得到原值的真實(shí)布爾等價(jià)。// 老方法 (if 判斷賦值)const value hello;let isTruthy;if (value) {isTruthy true;} else {isTruthy false;}//新方法 (!! 轉(zhuǎn)換)const value1 hello;const isTruthy1 !!value1;// !!hello - trueconsole.log(isTruthy1);//輸出: trueconst value2 0;const isTruthy2 !!value2;// !!0 - falseconsole.log(isTruthy2);//輸出: falseconst value3 null;const isTruthy3 !!value3;// !!null - falseconsole.log(isTruthy3);//輸出: false21. 轉(zhuǎn)數(shù)字字符串變數(shù)字最快方法在表示數(shù)字的字符串前面加一個(gè) 號(hào)能快速把它轉(zhuǎn)換成真正的數(shù)字類型。// 老方法 (parseInt/parseFloat)const numStr 123;const num parseInt(numStr, 10);//新方法 ( 轉(zhuǎn)換)const numStr 123;const num numStr;//字符串轉(zhuǎn)整數(shù)console.log(num, typeof num);//輸出: 123 numberconst floatStr 123.45;const floatNum floatStr;//字符串轉(zhuǎn)浮點(diǎn)數(shù)console.log(floatNum, typeof floatNum);//輸出: 123.45 number22. 屬性簡(jiǎn)寫(xiě)變量名即屬性名當(dāng)對(duì)象的屬性名和要賦值的變量名完全一樣時(shí)可以只寫(xiě)變量名省略冒號(hào)和值。// 老方法const firstName John;const lastName Doe;const age 40;const user {firstName: firstName,//屬性名: 變量名lastName: lastName,age: age};//新方法 (屬性簡(jiǎn)寫(xiě))const firstName John;const lastName Doe;const age 40;const user {firstName,//等同于 firstName: firstNamelastName,//等同于 lastName: lastNameage//等同于 age: age};console.log(user);//輸出: { firstName: John, lastName: Doe, age: 40 }23. for...of 循環(huán)直接遍歷值直接遍歷數(shù)組、字符串等可迭代對(duì)象里的值不需要操作索引 i。// 老方法 (for 循環(huán)遍歷值)const fruits [apple, banana, orange];for (let i 0; i fruits.length; i) {console.log(fruits[i]);}//新方法 (for...of)const fruits [apple, banana, orange];for (const fruit of fruits) {// fruit直接是數(shù)組元素console.log(fruit);}/*輸出:applebananaorange*///遍歷字符串for (constchar of hello) {console.log(char);}/*輸出:hello*/24. 交換變量不用臨時(shí)變量用數(shù)組解構(gòu)一行代碼直接交換兩個(gè)變量的值。// 老方法 (需要 temp 變量)let a 1;let b 2;let temp a;a b;b temp;//新方法 (解構(gòu)交換)let a 1;let b 2;[a, b] [b, a];//右邊創(chuàng)建 [2, 1], 左邊解構(gòu)賦值給 a, bconsole.log(a, b);//輸出: 2 125. console.table()表格打印數(shù)據(jù)調(diào)試神器把對(duì)象數(shù)組或者對(duì)象本身在瀏覽器控制臺(tái)里用清晰的表格打印出來(lái)一目了然。constusers [{ id:1, name:Alice, age:28 },{ id:2, name:Bob, age:35 },{ id:3, name:Charlie, age:22 }];console.table(users);/*瀏覽器控制臺(tái)輸出類似表格:(index)|id|name|age--------|----|---------|----0|1|Alice|281|2|Bob|352|3|Charlie|22*/constperson {firstName:Jane,lastName:Doe,occupation:Developer};console.table(person);/*瀏覽器控制臺(tái)輸出類似表格:(index)|Value-----------|-----------firstName|JanelastName|Doeoccupation|Developer*/寫(xiě)在最后這 25 個(gè) JavaScript 技巧都是現(xiàn)代開(kāi)發(fā)中天天能用上的好東西。學(xué)會(huì)它們能實(shí)實(shí)在在地幫你省下敲代碼的時(shí)間讓代碼看起來(lái)更整潔寫(xiě)起來(lái)也更順手。它們代表了 JavaScript 高效編程的核心方法。