JavaScript 一直在更新變得越來越好用。從 ES6 開始加入了很多新寫法能讓你的代碼更短、更清楚也常常運(yùn)行得更快。掌握這些技巧不僅能讓你寫代碼更快還能讓代碼更容易讓別人看懂和維護(hù)代碼質(zhì)量也更好。下面直接介紹 25 個(gè)現(xiàn)代 JavaScript 中很實(shí)用的技巧和寫法學(xué)會(huì)它們寫代碼真的會(huì)輕松很多1. 三元運(yù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í)行后面的代碼適合簡單的操作。// 老方法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.);//沒輸出因?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ù)寫函數(shù)更簡短寫法 (參數(shù)) 表達(dá)式 比 function 短尤其適合做回調(diào)。注意箭頭函數(shù)沒有自己的 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ù)組里把值提取到變量里還能跳過某些元素。// 老方法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;//跳過前兩個(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. ... 展開數(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);//合并//新方法 (展開語法 ...)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. ... 展開對(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);//合并//新方法 (展開語法 ...)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)來的多個(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ù)沒傳就用默認(rèn)值直接在函數(shù)參數(shù)后面用 默認(rèn)值如果調(diào)用時(shí)沒傳這個(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. ?. 可選鏈安全訪問深層屬性用 ?. 訪問可能不存在的對(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 {};//沒有 profilelet invalidStreet;//下面如果直接訪問 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;//安全訪問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ì)被覆蓋。// || 的問題 (會(huì)把 0, , false 也當(dāng)成無效值)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)更簡潔地遍歷數(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開始累加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ù)組展開拼接到累加器后面[]//初始累加器是空數(shù)組);console.log(flattened);//輸出: [1, 2, 3, 4, 5]18. Object.keys/values/entries操作對(duì)象屬性方便地獲取對(duì)象的鍵、值或者鍵值對(duì)數(shù)組用來遍歷對(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)鍵字直接寫表達(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. 屬性簡寫變量名即屬性名當(dāng)對(duì)象的屬性名和要賦值的變量名完全一樣時(shí)可以只寫變量名省略冒號(hào)和值。// 老方法const firstName John;const lastName Doe;const age 40;const user {firstName: firstName,//屬性名: 變量名lastName: lastName,age: age};//新方法 (屬性簡寫)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)里用清晰的表格打印出來一目了然。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*/寫在最后這 25 個(gè) JavaScript 技巧都是現(xiàn)代開發(fā)中天天能用上的好東西。學(xué)會(huì)它們能實(shí)實(shí)在在地幫你省下敲代碼的時(shí)間讓代碼看起來更整潔寫起來也更順手。它們代表了 JavaScript 高效編程的核心方法。