JavaScript 一直在更新變得越來越好用。從 ES6 開始加入了很多新寫法能讓你的代碼更短、更清楚也常常運行得更快。掌握這些技巧不僅能讓你寫代碼更快還能讓代碼更容易讓別人看懂和維護代碼質(zhì)量也更好。下面直接介紹 25 個現(xiàn)代 JavaScript 中很實用的技巧和寫法學(xué)會它們寫代碼真的會輕松很多1. 三元運算符一行搞定簡單判斷用 ? : 代替簡單的 if/else代碼更緊湊。// 老方法let age 18;let canVote;if (age 18) {canVote Yes;} else {canVote No;}console.log(canVote);//輸出: Yes//新方法 (三元運算符)let age 18;let canVote (age 18) ? Yes : No;//一行搞定console.log(canVote);//輸出: Yes2. || 設(shè)置默認(rèn)值防 undefined/null如果變量可能是 null、undefined、0、 或 false用 || 給它一個后備值。// 老方法 (檢查空值)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í)行滿足條件才做事用 只在條件為真時才執(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.);//沒輸出因為 isGuest 是 false4. 模板字符串拼接變量超方便用反引號 包裹字符串里面用 ${變量} 插入變量或表達式告別一堆加號。// 老方法 (加號拼接)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ù)) 表達式 比 function 短尤其適合做回調(diào)。注意箭頭函數(shù)沒有自己的 this它會用外面函數(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);//一行自動返回結(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); //錯誤this 不對}, 1000);//箭頭函數(shù)里面的 this 就是 Timer 實例的 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;//跳過前兩個console.log(thirdColor);//輸出: blue7. 解構(gòu)對象快速取屬性直接從對象里把屬性值提取到變量里還能給屬性換名字。// 老方法const user { name: Charlie, age: 25, city: NYC };const userName user.name;const userAge user.age;//新方法 (對象解構(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ù)組或把多個數(shù)組合成一個新數(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. ... 展開對象復(fù)制和合并用 ... 輕松復(fù)制對象或把多個對象屬性合并到一個新對象里。后面的屬性會覆蓋前面的同名屬性。// 老方法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ù)收集多個參數(shù)函數(shù)定義時用 ...參數(shù)名可以把傳進來的多個參數(shù)自動收集到一個數(shù)組里。// 老方法 (用 arguments)functionsumAll() {let total 0;for (let i 0; i arguments.length; i) {total arguments[i];}return total;}//新方法 (剩余參數(shù) ...)functionsumAll(...numbers) {// numbers是個數(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ù)或者傳了 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! (兩個都用默認(rèn)值)greet(Frank);//輸出: Hello, Frank! (greeting 用默認(rèn)值)greet(Grace, Hi);//輸出: Hi, Grace! (都不用默認(rèn)值)12. ?. 可選鏈安全訪問深層屬性用 ?. 訪問可能不存在的對象屬性(null 或 undefined)避免代碼報錯崩掉返回 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 會報錯!if (invalidUser invalidUser.profile invalidUser.profile.address) {invalidStreet invalidUser.profile.address.street;//不會執(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 時才用右邊的默認(rèn)值。和 || 不同0、、false 這些有效值不會被覆蓋。// || 的問題 (會把 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ù)組每個元素比 for 循環(huán)更簡潔地遍歷數(shù)組對每個元素做點事情。// 老方法 (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));//對每個 item 執(zhí)行 console.log//輸出:// apple// banana// cherry15. map把數(shù)組變形成新數(shù)組遍歷原數(shù)組對每個元素進行轉(zhuǎn)換把所有轉(zhuǎn)換結(jié)果放入一個新數(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);//計算平方console.log(squaredNumbers);//輸出: [1, 4, 9]16. filter按條件篩選數(shù)組元素遍歷原數(shù)組只把滿足條件的元素放入一個新數(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ù)組“壓縮”成一個值遍歷數(shù)組把元素逐個和一個“累加器”進行計算(比如累加、拼接、找最大值)最終得到一個結(jié)果值。功能很強大。// 老方法 (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操作對象屬性方便地獲取對象的鍵、值或者鍵值對數(shù)組用來遍歷對象。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]//獲取鍵值對數(shù)組 (entries) - 每個元素是 [key, value]console.log(Object.entries(car));/*輸出:[[make, Toyota],[model, Camry],[year, 2020]]*///用 entries 遍歷對象Object.entries(car).forEach(([key, value]) {console.log(${key}: ${value});});/*輸出:make: Toyotamodel: Camryyear: 2020*/19. 箭頭函數(shù)隱式返回省略 return當(dāng)箭頭函數(shù)只有一行表達式時可以省略 {} 和 return 關(guān)鍵字直接寫表達式它會自動返回這個表達式的結(jié)果。注意返回對象字面量時需要用小括號 () 包裹對象 {}。// 顯式返回const add (a, b) {return a b;};//隱式返回 (一行表達式)const add (a, b) a b;//自動返回 a b 的結(jié)果console.log(add(5, 3));//輸出: 8//隱式返回對象 (必須加括號)const createUser (name, age) ({ name, age });//返回 {name: name, age: age}console.log(createUser(Dora, 28));//輸出: { name: Dora, age: 28 }20. !! 轉(zhuǎn)布爾值快速判斷真假用兩個感嘆號 !! 可以把任何類型的值快速轉(zhuǎn)換成真正的布爾值 (true 或 false)。第一個 ! 把值轉(zhuǎn)成布爾值再取反第二個 ! 再取反一次就得到原值的真實布爾等價。// 老方法 (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ù)字的字符串前面加一個 號能快速把它轉(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)浮點數(shù)console.log(floatNum, typeof floatNum);//輸出: 123.45 number22. 屬性簡寫變量名即屬性名當(dāng)對象的屬性名和要賦值的變量名完全一樣時可以只寫變量名省略冒號和值。// 老方法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ù)組、字符串等可迭代對象里的值不需要操作索引 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ù)組解構(gòu)一行代碼直接交換兩個變量的值。// 老方法 (需要 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)試神器把對象數(shù)組或者對象本身在瀏覽器控制臺里用清晰的表格打印出來一目了然。constusers [{ id:1, name:Alice, age:28 },{ id:2, name:Bob, age:35 },{ id:3, name:Charlie, age:22 }];console.table(users);/*瀏覽器控制臺輸出類似表格:(index)|id|name|age--------|----|---------|----0|1|Alice|281|2|Bob|352|3|Charlie|22*/constperson {firstName:Jane,lastName:Doe,occupation:Developer};console.table(person);/*瀏覽器控制臺輸出類似表格:(index)|Value-----------|-----------firstName|JanelastName|Doeoccupation|Developer*/寫在最后這 25 個 JavaScript 技巧都是現(xiàn)代開發(fā)中天天能用上的好東西。學(xué)會它們能實實在在地幫你省下敲代碼的時間讓代碼看起來更整潔寫起來也更順手。它們代表了 JavaScript 高效編程的核心方法。