教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载賦值是程式設計中最常見的操作之一。對許多「懶惰的開發者」而言反覆敲打冗長的賦值語句非常耗時本篇文章以 jstips 第 35 期「賦值運算子」英文版見 assignment-shorthands為核心骨架系統整理 JavaScript 中最實用的賦值簡寫複合賦值運算子、前綴/後綴遞增遞減、三元運算子、||預設值技巧以及陣列與物件的字面值表示法。讀完本文你將能一眼看懂並熟練運用這些簡寫寫出更精簡、可讀性更高的 JavaScript 程式碼。複合賦值運算子Compound Assignment Operators賦值的常見寫法是「變數 變數 運算子 值」例如x x 23。JavaScript 提供了對應的複合賦值運算子把「取值、運算、賦值」壓縮成一行x 23; // x x 23; y - 15; // y y - 15; z * 10; // z z * 10; k / 7; // k k / 7; p % 3; // p p % 3; d ** 2; // d d ** 2; m 2; // m m 2; n 2; // n n 2; n; // n n 1; n--; // n n - 1;逐項拆解如下簡寫完整寫法說明x 23x x 23加法賦值最常用y - 15y y - 15減法賦值z * 10z z * 10乘法賦值k / 7k k / 7除法賦值注意浮點數除法非整數除法p % 3p p % 3餘數賦值常用於判斷整除或週期性歸零d ** 2d d ** 2指數賦值ES2016 新增d ** 2即d的平方m 2m m 2位元右移賦值帶符號右移等同整數除以 2 的冪n 2n n 2位元左移賦值等同整數乘以 2 的冪其中與--是單次遞增/遞減的特殊簡寫行為與前述複合運算子略有不同值得單獨深入探討。與--運算子前綴與後綴的差異與--是特殊的遞增、遞減運算子關鍵在於運算子放在變數之前還是之後回傳值完全不同。透過範例可以清楚解釋var a 2; var b a; // 現在 a 是 3 然後 b 是 2a後綴遞增依序執行以下操作回傳a的數值此例為2將a加 1a變成3因此賦值給b的是遞增前的舊值。如果我們想要「先遞增、再取新值」呢很簡單把運算子放到變數之前var a 2; var b a; // 現在 a 和 b 都是 3a前綴遞增的執行順序相反將a加 1a變成3回傳a的新值3--運算子同理只是把「加 1」換成「減 1」a--回傳舊值後遞減--a先遞減再回傳新值。實務提醒在單獨一行使用時如迴圈中的i前綴與後綴結果相同但一旦混入賦值、函式參數或運算式如arr[a]回傳舊值與新值的差異就會產生實際影響容易成為隱性 bug 的來源。若追求極致的可讀性也可用n 1取代n語意更明確。用三元運算子取代 If-else當「根據條件為兩個變數賦值」時傳統寫法需要完整的if/else結構var newValue; if (value 10) newValue 5; else newValue 2;使用三元運算子可以壓縮成一行讓意圖一目了然var newValue (value 10) ? 5 : 2;三元運算子的語法為條件 ? 成立時的值 : 不成立時的值本質上是if語句的捷徑。jstips 第 81 期「What is the JavaScript ternary operator?」也以飲料選擇為例做了完整示範let age 26; let drink (age 21) ? Beer : Juice; // 等價於 if/else 兩段賦值使用建議三元運算子適合「單一條件、兩個分支」的簡單賦值一旦出現巢狀三元a ? b : c ? d : e可讀性會迅速惡化此時應回歸if/else或抽成函式。Null、Undefined、Empty 確認用||一行搞定實務上常需要「若變數為空則給預設值」。直覺的寫法是一串if判斷if (variable1 ! null || variable1 ! undefined || variable1 ! ) { var variable2 variable1; }簡化後只需要一行var variable2 variable1 || ;背後的原理是 JavaScript 的短路求值short-circuit evaluation||會依序評估每個運算元回傳第一個 truthy 值若全部為 falsy則回傳最後一個值。所以variable1為null、undefined、、0、NaN、false等 falsy 值時variable2會安全地取得預設值。jstips 第 27 期「Short circuit evaluation in JS」還展示了同技巧的另外兩種用途// 為函式參數設定預設值 function theSameOldFoo(name){ name name || Bar; console.log(My best friends name is name); } theSameOldFoo(); // My best friends name is Bar theSameOldFoo(Bhaskar); // My best friends name is Bhaskar // 避免對 undefined 取屬性時丟例外 dog dog.bark(); // 只有 dog 已定義時才呼叫 dog.bark()兩點實務提醒P.S.假設 variable1 是數字||首先會檢查是否為 0。0是 falsy因此var n 0 || 會得到若你希望保留0這個合法數值就不能用||做預設值。回頭看原始if寫法variable1 ! null || variable1 ! undefined這三個!判斷用||串接時任何值都必然滿足其中至少一個條件整體永遠為真——這正是它會被簡寫取代的根本原因。簡寫不只更短還真正實現了「空值時落入預設值」的語意。若想進一步理解 truthy/falsy 的完整邊界可參考 jstips 第 30 期「將 truthy 和 falsy 轉換成布林值」其中整理了、0、null、undefined、NaN皆為 falsy而hello、1、{}、[]皆為 truthy 的完整對照。陣列字面值表示法告別new Array()建立陣列時不必先new再逐項賦值var a new Array(); a[0] myString1; a[1] myString2;改用陣列字面值array literal一行完成var a [myString1, myString2];陣列字面值的好處寫法更短、結構一目了然、初始化即完成賦值也避免new Array(3)這類「傳入單一數字卻建立長度為 3 的空陣列」的經典陷阱。這是 jstips 賦值簡寫精神在資料結構建立上的直接延伸。關聯陣列 → 物件字面值對「鍵值對key-value」資料不應使用Array搭配字串索引var skillSet new Array(); skillSet[Document language] HTML5; skillSet[Styling language] CSS3;正確且簡潔的寫法是使用物件字面值object literalvar skillSet { Document language : HTML5, Styling language : CSS3 };技術上new Array()搭配字串鍵其實是「在 Array 物件上塞屬性」陣列的length不會跟著變化、for迴圈也遍歷不到這些鍵屬於誤用 Array 的反模式。JavaScript 中鍵值對容器應優先使用物件字面值若需要保持鍵的插入順序jstips 第 32 期「Map()救援為物件屬性加入順序」則提供了Map的現代化方案。總結本期的賦值簡寫技巧可濃縮為一張速查表場景冗長寫法簡寫加減乘除、餘數、指數、位元運算後賦值x x 運算子 值x 運算子 值遞增/遞減n n 1/n n - 1n/n--或n/--n條件賦值if (c) { v a; } else { v b; }v c ? a : b空值預設多行if判斷v variable1 || 陣列建立new Array()逐項賦值[myString1, myString2]鍵值對建立new Array()加字串鍵物件字面值{ key: value }這些技巧的共同點是用更少的字元表達相同的語意讓程式碼更乾淨、更易於掃讀。搭配本倉庫中關於嚴格相等、短路求值與 truthy/falsy 轉布林等期數一起閱讀你將能完整掌握 JavaScript 運算子與賦值的進階語意。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐CTF-Wiki 密碼學專題ARXAdd-Rotate-Xor運算原理與 2018 \*ctf primitive 實戰解析CTF Wiki 密碼學專題ARXAdd Rotate Xor運算原理與 2018 \ ctf primitive 實戰解析 導讀 本文基於 CTF Wi文档网络安全教程HuLa 发布流程中的生产配置注入GitHub Actions Secrets 与 production.yaml 实战指南HuLa 发布流程中的生产配置注入GitHub Actions Secrets 与 production.yaml 实战指南 本文档以 HuLa 仓库 doc教程JS 赋值技巧Assignment Shorthands用更少的代码写出更清晰的赋值逻辑JS 赋值技巧Assignment Shorthands用更少的代码写出更清晰的赋值逻辑 本文整理自 jstips 仓库 中文技巧 35赋值技巧 htt教程上一篇Bilibili-Evolved DevClient 本地开发工具完全指南自动更新与样式热重载原理下一篇终极NSwag模板开发指南如何创建自定义代码生成逻辑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 jstips 賦值運算子（Assignment Shorthands）實戰指南：讓 JavaScript 程式碼更乾淨的簡寫技巧
教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载賦值是程式設計中最常見的操作之一。對許多「懶惰的開發者」而言反覆敲打冗長的賦值語句非常耗時本篇文章以 jstips 第 35 期「賦值運算子」英文版見 assignment-shorthands為核心骨架系統整理 JavaScript 中最實用的賦值簡寫複合賦值運算子、前綴/後綴遞增遞減、三元運算子、||預設值技巧以及陣列與物件的字面值表示法。讀完本文你將能一眼看懂並熟練運用這些簡寫寫出更精簡、可讀性更高的 JavaScript 程式碼。複合賦值運算子Compound Assignment Operators賦值的常見寫法是「變數 變數 運算子 值」例如x x 23。JavaScript 提供了對應的複合賦值運算子把「取值、運算、賦值」壓縮成一行x 23; // x x 23; y - 15; // y y - 15; z * 10; // z z * 10; k / 7; // k k / 7; p % 3; // p p % 3; d ** 2; // d d ** 2; m 2; // m m 2; n 2; // n n 2; n; // n n 1; n--; // n n - 1;逐項拆解如下簡寫完整寫法說明x 23x x 23加法賦值最常用y - 15y y - 15減法賦值z * 10z z * 10乘法賦值k / 7k k / 7除法賦值注意浮點數除法非整數除法p % 3p p % 3餘數賦值常用於判斷整除或週期性歸零d ** 2d d ** 2指數賦值ES2016 新增d ** 2即d的平方m 2m m 2位元右移賦值帶符號右移等同整數除以 2 的冪n 2n n 2位元左移賦值等同整數乘以 2 的冪其中與--是單次遞增/遞減的特殊簡寫行為與前述複合運算子略有不同值得單獨深入探討。與--運算子前綴與後綴的差異與--是特殊的遞增、遞減運算子關鍵在於運算子放在變數之前還是之後回傳值完全不同。透過範例可以清楚解釋var a 2; var b a; // 現在 a 是 3 然後 b 是 2a後綴遞增依序執行以下操作回傳a的數值此例為2將a加 1a變成3因此賦值給b的是遞增前的舊值。如果我們想要「先遞增、再取新值」呢很簡單把運算子放到變數之前var a 2; var b a; // 現在 a 和 b 都是 3a前綴遞增的執行順序相反將a加 1a變成3回傳a的新值3--運算子同理只是把「加 1」換成「減 1」a--回傳舊值後遞減--a先遞減再回傳新值。實務提醒在單獨一行使用時如迴圈中的i前綴與後綴結果相同但一旦混入賦值、函式參數或運算式如arr[a]回傳舊值與新值的差異就會產生實際影響容易成為隱性 bug 的來源。若追求極致的可讀性也可用n 1取代n語意更明確。用三元運算子取代 If-else當「根據條件為兩個變數賦值」時傳統寫法需要完整的if/else結構var newValue; if (value 10) newValue 5; else newValue 2;使用三元運算子可以壓縮成一行讓意圖一目了然var newValue (value 10) ? 5 : 2;三元運算子的語法為條件 ? 成立時的值 : 不成立時的值本質上是if語句的捷徑。jstips 第 81 期「What is the JavaScript ternary operator?」也以飲料選擇為例做了完整示範let age 26; let drink (age 21) ? Beer : Juice; // 等價於 if/else 兩段賦值使用建議三元運算子適合「單一條件、兩個分支」的簡單賦值一旦出現巢狀三元a ? b : c ? d : e可讀性會迅速惡化此時應回歸if/else或抽成函式。Null、Undefined、Empty 確認用||一行搞定實務上常需要「若變數為空則給預設值」。直覺的寫法是一串if判斷if (variable1 ! null || variable1 ! undefined || variable1 ! ) { var variable2 variable1; }簡化後只需要一行var variable2 variable1 || ;背後的原理是 JavaScript 的短路求值short-circuit evaluation||會依序評估每個運算元回傳第一個 truthy 值若全部為 falsy則回傳最後一個值。所以variable1為null、undefined、、0、NaN、false等 falsy 值時variable2會安全地取得預設值。jstips 第 27 期「Short circuit evaluation in JS」還展示了同技巧的另外兩種用途// 為函式參數設定預設值 function theSameOldFoo(name){ name name || Bar; console.log(My best friends name is name); } theSameOldFoo(); // My best friends name is Bar theSameOldFoo(Bhaskar); // My best friends name is Bhaskar // 避免對 undefined 取屬性時丟例外 dog dog.bark(); // 只有 dog 已定義時才呼叫 dog.bark()兩點實務提醒P.S.假設 variable1 是數字||首先會檢查是否為 0。0是 falsy因此var n 0 || 會得到若你希望保留0這個合法數值就不能用||做預設值。回頭看原始if寫法variable1 ! null || variable1 ! undefined這三個!判斷用||串接時任何值都必然滿足其中至少一個條件整體永遠為真——這正是它會被簡寫取代的根本原因。簡寫不只更短還真正實現了「空值時落入預設值」的語意。若想進一步理解 truthy/falsy 的完整邊界可參考 jstips 第 30 期「將 truthy 和 falsy 轉換成布林值」其中整理了、0、null、undefined、NaN皆為 falsy而hello、1、{}、[]皆為 truthy 的完整對照。陣列字面值表示法告別new Array()建立陣列時不必先new再逐項賦值var a new Array(); a[0] myString1; a[1] myString2;改用陣列字面值array literal一行完成var a [myString1, myString2];陣列字面值的好處寫法更短、結構一目了然、初始化即完成賦值也避免new Array(3)這類「傳入單一數字卻建立長度為 3 的空陣列」的經典陷阱。這是 jstips 賦值簡寫精神在資料結構建立上的直接延伸。關聯陣列 → 物件字面值對「鍵值對key-value」資料不應使用Array搭配字串索引var skillSet new Array(); skillSet[Document language] HTML5; skillSet[Styling language] CSS3;正確且簡潔的寫法是使用物件字面值object literalvar skillSet { Document language : HTML5, Styling language : CSS3 };技術上new Array()搭配字串鍵其實是「在 Array 物件上塞屬性」陣列的length不會跟著變化、for迴圈也遍歷不到這些鍵屬於誤用 Array 的反模式。JavaScript 中鍵值對容器應優先使用物件字面值若需要保持鍵的插入順序jstips 第 32 期「Map()救援為物件屬性加入順序」則提供了Map的現代化方案。總結本期的賦值簡寫技巧可濃縮為一張速查表場景冗長寫法簡寫加減乘除、餘數、指數、位元運算後賦值x x 運算子 值x 運算子 值遞增/遞減n n 1/n n - 1n/n--或n/--n條件賦值if (c) { v a; } else { v b; }v c ? a : b空值預設多行if判斷v variable1 || 陣列建立new Array()逐項賦值[myString1, myString2]鍵值對建立new Array()加字串鍵物件字面值{ key: value }這些技巧的共同點是用更少的字元表達相同的語意讓程式碼更乾淨、更易於掃讀。搭配本倉庫中關於嚴格相等、短路求值與 truthy/falsy 轉布林等期數一起閱讀你將能完整掌握 JavaScript 運算子與賦值的進階語意。赞分享教程【免费下载链接】jstipsThis is about useful JS tips!项目地址https://gitcode.com/gh_mirrors/js/jstips点击查看免费下载相关推荐CTF-Wiki 密碼學專題ARXAdd-Rotate-Xor運算原理與 2018 \*ctf primitive 實戰解析CTF Wiki 密碼學專題ARXAdd Rotate Xor運算原理與 2018 \ ctf primitive 實戰解析 導讀 本文基於 CTF Wi文档网络安全教程HuLa 发布流程中的生产配置注入GitHub Actions Secrets 与 production.yaml 实战指南HuLa 发布流程中的生产配置注入GitHub Actions Secrets 与 production.yaml 实战指南 本文档以 HuLa 仓库 doc教程JS 赋值技巧Assignment Shorthands用更少的代码写出更清晰的赋值逻辑JS 赋值技巧Assignment Shorthands用更少的代码写出更清晰的赋值逻辑 本文整理自 jstips 仓库 中文技巧 35赋值技巧 htt教程上一篇Bilibili-Evolved DevClient 本地开发工具完全指南自动更新与样式热重载原理下一篇终极NSwag模板开发指南如何创建自定义代码生成逻辑创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考