JavaScript 操作符

来源:https://www.cnblogs.com/yuzhihui/archive/2023/04/19/17122071.html
-Advertisement-
Play Games

JavaScript 操作符/運算符 在 JavaScript 中,有一些操作符可以使代碼更簡潔、易讀和高效。以下是一些常見的操作符: 1、可選鏈操作符(optional chaining operator) ?.是可選鏈操作符(optional chaining operator)。?. 可選鏈操 ...


JavaScript 操作符/運算符

在 JavaScript 中,有一些操作符可以使代碼更簡潔、易讀和高效。以下是一些常見的操作符:

1、可選鏈操作符(optional chaining operator)

?.可選鏈操作符(optional chaining operator)?. 可選鏈操作符用於訪問可能為空或未定義的屬性或方法,它允許我們安全地訪問嵌套對象的屬性,如果中間的屬性為空或未定義,則不會拋出錯誤,而是返回 undefined。例如:

const obj = {
  foo: {
    bar: 123
  }
};

// 普通訪問屬性的方式
const x = obj.foo.bar; // x = 123

// 使用可選鏈操作符
const y = obj?.foo?.bar; // y = 123

// 如果對象未定義,則返回 undefined
const z = undefined?.foo?.bar; // z = undefined

2、空值合併操作符(nullish coalescing operator)

??空值合併操作符(nullish coalescing operator)?? 空值合併操作符用於檢查一個變數是否為 null 或 undefined,如果是,則返回一個預設值,否則返回該變數的值。與傳統的邏輯運算符 || 不同,?? 只會在左側的值為 null 或 undefined 時返回右側的預設值,對於其他假值(如空字元串、0、false 等)並不會返回預設值,而是會返回它本身。例如:

const x = undefined ?? 'default'; // x = 'default'

const y = null ?? 'default'; // y = 'default'

const z = 'value' ?? 'default'; // z = 'value'

const a = '' ?? 'default'; // a = ''

const b = '' || 'default'; // b = 'default'

需要註意的是,?? 操作符需要在 ES11 及以上的版本才能使用。

3、箭頭函數(Arrow Function)

使用箭頭(=>)可以更簡潔地定義函數。例如:

const add = (a, b) => a + b;
console.log(add(1, 2)); // 3
const obj = {
  x: 1,
  add(y) {
    return this.x + y;
  },
  double: () => this.x * 2,
};
console.log(obj.add(2)); // 3
console.log(obj.double()); // NaN

註意,箭頭函數中的 this 指向的是定義時的上下文,而不是調用時的上下文。

4、模板字面量(Template Literals)

使用反引號(`)可以定義包含變數、表達式和換行符的字元串。例如:

const name = "Alice";
const age = 20;
console.log(`My name is ${name}, and I am ${age} years old.`);
// 'My name is Alice, and I am 20 years old.'

5、展開操作符(Spread Operator)

使用三個點(...)可以將數組或對象展開為一個列表或多個參數。例如:

const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // [1, 2, 3, 4, 5, 6]

const obj1 = { x: 1, y: 2 };
const obj2 = { z: 3 };
const obj3 = { ...obj1, ...obj2 };
console.log(obj3); // { x: 1, y: 2, z: 3 }

6、短路求值(Short-circuit Evaluation)

使用邏輯運算符&&||可以進行短路求值,簡化條件分支的寫法。例如:

const obj = { prop: "value" };
const propValue = obj.prop || "default";
console.log(propValue); // 'value'

const arr = [];
const firstValue = arr[0] && arr[0].prop;
console.log(firstValue); // undefined

7、簡寫的條件語句(Conditional (Ternary) Operator)

使用問號和冒號(?:)可以簡化 if-else 語句的寫法。例如:

const age = 20;
const message = age >= 18 ? "You are an adult" : "You are not an adult";
console.log(message); // 'You are an adult'

8、簡寫的自增和自減操作符(Short-circuit Evaluation)

使用雙加號(++)和雙減號(--)可以簡化變數的自增和自減操作。例如:

let count = 0;
count++;
console.log(count); // 1

let num = 5;
const result = --num;
console.log(result); // 4

9、簡寫的賦值操作符(Assignment Operator)

使用加等號(+=)、減等號(-=)、乘等號(*=)、除等號(/=)等可以簡化複合賦值操作。例如:

let count = 0;
count += 1;
console.log(count); // 1

let num = 5;
num *= 2;
console.log(num); // 10

10、雙重否定運算符(Double NOT Operator)

雙重否定運算符(Double NOT Operator)即為兩個連續的嘆號("!!"),也稱為邏輯非非運算符。它可以將一個值轉換為其對應的布爾值。例如:

const x = "hello";
console.log(!!x); // true

const y = 0;
console.log(!!y); // false

需要註意的是,使用!!運算符進行布爾值轉換時,要註意避免隱式類型轉換帶來的副作用,以免導致意外的行為。

11、?: 在 TypeScript 中表示可選屬性

在 TypeScript 中,可以使用 ? 表示一個屬性是可選的。例如:

interface Person {
  name: string;
  age?: number;
}

const person1: Person = { name: "Alice" };
const person2: Person = { name: "Bob", age: 20 };

在上面的例子中,Person 介面有一個可選屬性 age,這意味著可以創建一個 Person 類型的對象,其中 age 屬性是可選的。

作者:飛仔FeiZai

出處:https://www.cnblogs.com/yuzhihui/p/17122071.html

聲明:歡迎任何形式的轉載,但請務必註明出處!!!


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • GreatSQL社區原創內容未經授權不得隨意使用,轉載請聯繫小編並註明來源。 GreatSQL是MySQL的國產分支版本,使用上與MySQL一致。 作者: 奧特曼愛小怪獸 文章來源:GreatSQL社區原創 往期回顧 MySQL8.0 優化器介紹(一) MySQL8.0 優化器介紹(二) 本篇將進一 ...
  • 承蒙大家的支持,剛上市的《MySQL實戰》已經躍居京東自營資料庫圖書熱賣榜第 1 名,收到的反饋也普遍不錯。對該書感興趣的童鞋可通過右邊的鏈接購買。目前,京東自營有活動,只需 5 折。 主從延遲作為 MySQL 的痛點已經存在很多年了,以至於大家都有一種錯覺:有 MySQL 複製的地方就有主從延遲。 ...
  • 前言:ETL(是Extract-Transform-Load的縮寫,即數據抽取、轉換、裝載的過程),對於企業應用來說,我們經常會遇到各種數據的處理、轉換、遷移的場景。今天特地給大家彙總了一些目前市面上比較常用的ETL數據遷移工具,希望對你會有所幫助。 ...
  • 如圖,引導開始,球從上落下,同時淡入文字,然後文字開始輪播,最後一頁時停止,點擊進入首頁。 在來看看效果圖。 重力球先不講,主要歡迎輪播簡單實現 首先新建一個類 TextTranslationXGuideView,用於動畫展示 文本是類似的,最後會有個圖片箭頭動畫,佈局很簡單,就是一個 TextVi ...
  • 一. 問題描述 使用華為推送服務下發IM消息時,下發消息請求成功且code碼為80000000,但是手機總是收不到消息; 在華為推送自助分析(Beta)平臺查看發現,消息發送觸發了頻控。 二. 問題原因及背景 2023年1月05日起,華為推送服務對咨詢營銷類消息做了單個設備每日推送數量上限管理,具體 ...
  • 在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處於上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過?就是它的諸多怪異的設定讓你每每用的時候,都可能不小心踩坑。造成程式意外出錯,卻一下子找不到問題出處,那叫一個煩透了…… 下麵,我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ...
  • 實現文字跑馬燈效果,首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下: 實現代碼如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...