免费国产h视频在线观看,特黄一级视频,精品国产人成在线

[轉帖]js 常用簡寫技巧（干貨滿滿）

當前位置：點晴教程→知識管理交流 →『技術文檔交流』

freeflydom

2023年5月25日 18:1 本文熱度 638

分享一些自己常用的js簡寫技巧，長期更新，會著重挑選一些實用的簡寫技巧，使自己的代碼更簡潔優雅~

另外推薦一個只用一行代碼實現一個方法的實用網站1loc.dev

If-Else 用 || 或 ?? 運算符進行簡化

邏輯或操作符||，這里要注意的是0和''也會認為是false

這是常用的邏輯或操作符，會把0 '' false null undefined全部當成false處理

function(obj){
  var a = obj || {}
}
// 等價于 =>>
function(obj){
  var a;
  if(
    obj === 0 || 
    obj === "" || 
    obj === false || 
    obj === null || 
    obj === undefined
  ){
     a = {}
   } else {
     a = obj;
  }
}

空值合并操作符??如果沒有定義左側返回右側。如果是，則返回左側。

這種方法非常實用，有時候僅僅只是想判斷一個字段有沒有值，而不是把空字符串或者0也當做false處理

function(obj){
  var a = obj ?? {}
}
// 等價于 =>>
function(obj){
  var a;
  if(
    obj === null || 
    obj === undefined
  ){
     a = {}
   } else {
     a = obj;
  }
}

輸入框非空的判斷（有時候不想把0當成false可以用此方法。比如分數0也是個值，這種情況就不能認為是false）

if(value !== null && value !== undefined && value !== ''){}
// 等價于 ==>
if((value ?? '') !== ''){}

includes的正確使用姿勢

在上面邏輯或操作符||代碼段里有一個if判斷比較長，這時候就可以用includes去簡化代碼

if(
  obj === 0 || 
  obj === "" || 
  obj === false || 
  obj === null || 
  obj === undefined
){
  // ...
}

// 使用includes簡化
if([0, '', false, null, undefined].includes(obj)){
  // ...
}

防止崩潰的可選鏈(?.)

可選鏈操作符?. 如果訪問未定義的屬性，則會產生錯誤。這就是可選鏈的用武之地。在未定義屬性時使用可選鏈運算符，undefined將返回而不是錯誤。這可以防止你的代碼崩潰。

const student = {
  name: "Matt",
  age: 27,
  address: {
    state: "New York"
  },
};

// LONG FORM
console.log(student && student.address && student.address.ZIPCode); // Doesn't exist - Returns undefined
// SHORTHAND
console.log(student?.address?.ZIPCode); // Doesn't exist - Returns undefined

邏輯空賦值(??=)

邏輯空賦值??= 邏輯空賦值運算符(x ??= y)僅在 x 是 nullish (null 或 undefined) 時對其賦值。

const a = { duration: 50 };

a.duration ??= 10;
console.log(a.duration);
// expected output: 50

a.speed ??= 25;
console.log(a.speed);
// expected output: 25

快速生成1-10的數組

生成0-9，利用了數組的下標值

// 方法一
const arr1 = [...new Array(10).keys()]
// 方法二
const arr2 = Array.from(Array(10), (v, k) => k)

生成1-10，通過map的特性

const arr2 = [...Array(10)].map((v, i) => i + 1)

快速生成10個0的數組

const arr = new Array(10).fill(0)

快速生成10個[]的數組（二維數組）

注意： 二維數組不能直接寫成new Array(10).fill([])（也就是fill方法不能傳引用類型的值，[]換成new Array()也不行）,因為fill里傳入引用類型值會導致每一個數組都指向同一個地址，改變一個數據的時候其他數據也會隨之改變，詳見mdn官方說明

// 錯誤寫法
const arr = new Array(10).fill([]) // 注意這是錯誤寫法，不要這么寫
// 正確寫法
const arr = new Array(10).fill().map(() => new Array())

從數組中刪除重復項

在 Javascript 中，Set 是一個集合，它允許你僅存儲唯一值。這意味著刪除任何重復的值。

因此，要從數組中刪除重復項，你可以將其轉換為集合，然后再轉換回數組。

const numbers = [1, 1, 20, 3, 3, 3, 9, 9];
const uniqueNumbers = [...new Set(numbers)]; // -> [1, 20, 3, 9]

它是如何工作的？

new Set(numbers)從數字列表中創建一個集合。創建集合會自動刪除所有重復值。
展開運算符...將任何可迭代對象轉換為數組。這意味著將集合轉換回數組。[...new Set(numbers)]

在沒有第三個變量的情況下交換兩個變量

在 Javascript 中，你可以使用解構從數組中拆分值。這可以應用于交換兩個變量而無需第三個

let x = 1;
let y = 2;

// LONGER FORM
let temp = x;
x = y;
y = temp;

// SHORTHAND
[x, y] = [y, x];

將對象的值收集到數組中

用于Object.values()將對象的所有值收集到一個新數組中

const info = { name: "Matt", country: "Finland", age: 35 };

// LONGER FORM
let data = [];
for (let key in info) {
  data.push(info[key]);
}

// SHORTHAND
const data = Object.values(info);

指數運算符（用的不多）

你Math.pow()習慣把一個數字提高到一個冪嗎？你知道你也可以使用**運算符嗎？

雖然可以簡寫，不過我還是建議寫成Math.pow()方法，代碼更有語義化。

// LONGER FORM
Math.pow(4,2); // 16
Math.pow(2,3); // 8

// SHORTHAND
4**2 // 16
2**3 // 8

Math.floor() 簡寫（用的不多）

四舍五入Math.floor()并不是什么新鮮事。但是你知道你也可以使用~~運算符嗎？

同上雖然可以簡寫，不過我還是建議寫成Math.floor()方法，代碼更有語義化。

// LONG FORM
Math.floor(5.25) // -> 5.0

// SHORTHAND
~~5.25 // -> 5.0

——————————————————————————
原文鏈接：https://juejin.cn/post/7236664417308524581

該文章在 2023/5/25 18:02:10 編輯過

關鍵字查詢

常用

技巧

正在查詢...

點晴ERP是一款針對中小制造業的專業生產管理軟件系統,系統成熟度和易用性得到了國內大量中小企業的青睞。

點晴PMS碼頭管理系統主要針對港口碼頭集裝箱與散貨日常運作、調度、堆場、車隊、財務費用、相關報表等業務管理，結合碼頭的業務特點，圍繞調度、堆場作業而開發的。集技術的先進性、管理的有效性于一體，是物流碼頭及其他港口類企業的高效ERP管理信息系統。

點晴WMS倉儲管理系統提供了貨物產品管理,銷售管理,采購管理,倉儲管理,倉庫管理,保質期管理,貨位管理,庫位管理,生產管理,WMS管理系統,標簽打印,條形碼,二維碼管理,批號管理軟件。

點晴免費OA是一款軟件和通用服務都免費，不限功能、不限時間、不限用戶的免費OA協同辦公管理系統。

欧美成人精品手机在线观看_69视频国产_动漫精品第一页_日韩中文字幕网 - 日本欧美一区二区