你不知道的幾個JavaScript 高階技巧

来源:https://www.cnblogs.com/rjf1979/archive/2023/10/16/17767714.html
-Advertisement-
Play Games

三元運算符 基礎: let hungry = true; let eat; if (hungry true) { eat = 'yes'; } else { eat = 'no'; } 高階: let hungry = true; let eat = hungry true ? 'yes' : 'n ...


三元運算符

基礎:

let hungry = true;
let eat; 
if (hungry === true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

高階:

let hungry = true;
let eat = hungry === true ? 'yes' : 'no';

數字到字元串,字元串到數字

基礎:

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

高階:

let num = 15;
let s = num + ""; // number to string
let n = +s; // string to number

填充數組

基礎:

for(let i=0; i < arraySize; i++){
       filledArray[i] {'hello' : 'goodbye'};
}

高階:

let filledArray = new Array(arraysize).fill(null).map(()=> ({'hello' : 'goodbye'}));

對象中的動態屬性

基礎:

let dynamic = "value"; 
let user = {
     id: 1,
};
user[dynamic] = "other value";

高階:

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic]: "other value"
};

刪除重覆項

基礎:

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0; < array.length; j++) {
   for (k = 0; k < outputArray.length; k++) {
      if (array[j] == outputArray[k]) {
         flag = true;
       }
    }
    if (flag == false) {
      outputArray.push(array[j]);
     }
     flag = false;
}
//outputArray = [100, 23, 67, 45]

高階:

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = Array.from(new Set(array)); 
//outputArray = [100, 23, 67, 45]

數組轉對象

基礎:

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

高階:

let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

對象轉數組

基礎:

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in numbers) {
  if (number.hasOwnProperty(number)) {
     keys.push(number);
    }
}
// key = [ 'one', 'two' ]

高階:

let numbers = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

條件短路

基礎

if (docs) {
    goToDocs();
}

高階

docs && goToDocs()

使用 ^ 檢查數字是否不相等

//基礎
if(a!=123) 
  
//高階
if(a^123) 

迴圈訪問對象

const age = {
   Rahul: 20,  
   max: 16
};

// Solution 1 - Get 'keys' and loop over
const keys = Object.keys(age); 
keys.forEach(key => age[key]++);
con
sole.log(age); // { Rahul: 21, max: 17 }
// Solution 2 - for ..in loop
for(let key in age){
   age[key]++;
}
console.log(age); // { Rahul: 22, max: 18 }

Object keys 按插入順序存儲

const obj = {
  name: "Rahul", 
  age: 16, 
  address: "Earth", 
  profession: "Developer", 
}; 
console.log(Object.keys(obj)); // name, age, address, profession

檢查值是數組

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

初始化大小為n的數組,並用預設值填充

const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

雙等和三等的區別

//雙等號(==)只比較值是否相等。
//它本質上是做類型轉換。這意味著在比較數值之前,它將變數的類型轉換為相互匹配。
console.log(0 == '0'); // true

// 另一方面,三等號(===)不執行類型轉換。
// 它將驗證被比較的變數是否具有相同的值和相同的類型。
console.log(0 === '0'); // false

接收更好的傳參方式

function downloadData(url, resourceId, searchTest, pageNo, limit) {}

downloadData(...); // 需要記住傳參順序

更簡單的方法:

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "WebDev" }
);

null 和 undefined

null 是一個 value,然而 undefined 不是.

null 像一個空盒子,但 undefined 不是.

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

傳遞 null 時,不採用預設值。然而,當未定義或未傳遞任何內容時,將採用預設值。


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

-Advertisement-
Play Games
更多相關文章
  • 網橋的概念 在生活中,橋是一種結構,用於連接兩個地方,允許行人、車輛等安全地跨越障礙物(如河流或高速公路) 在電腦網路技術中,網橋是一種工作在數據鏈路層的物理或邏輯設備,可以用於連接兩個或多個區域網段。它基於MAC地址來轉發或過濾幀,從而有效地劃分廣播域。 在Linux中,網橋是一個邏輯設備,用於 ...
  • 1. 關閉正在運行的MySQL服務。【Win + r】,之後輸入【SERVICES.MSC】然後回車,會打開服務列表,在服務列表輸入【mysql】即可選中mysql對應服務,找到自己的mysql服務,我的是MYSQL57選中它【右鍵】單擊,然後點擊【停止】選項即可停止mysql服務。 2. 找到本地 ...
  • 近來在工作中處理JSON處理較多,深入研究了一下jq,之前對jq的使用一直停留在JSON數據格式化的層面,實際它的能力遠不止於此。 在處理JSON數據時,我們經常需要在命令行中進行過濾、查詢和編輯的操作。jq是一個強 ...
  • 本文介紹了MongoDB複製集的架構和特點,強調了使用複製集提供數據的高可用性和冗餘性的重要性。複製集由Primary節點和Secondary節點組成,確保數據一致性。複製集還具有數據分發、讀寫分離和異地容災等附加功能。使用MongoDB複製集可以提供穩定可靠的數據存儲和高可用性。 ...
  • 康師傅yyds MySQL的索引包括普通索引、唯一性索引、全文索引、單列索引、多列索引和空間索引等。 從 功能邏輯 上說,索引主要有 4 種,分別是普通索引、唯一索引、主鍵索引、全文索引。 按照 物理實現方式 ,索引可以分為 2 種:聚簇索引和非聚簇索引。 按照 作用欄位個數 進行劃分,分成單列索引 ...
  • tv屏中,最難處理的就是焦點問題,而複雜的焦點處理要屬應用列表模塊了 根據展示的列表,可以翻頁,預設焦點處於左上角第一個,此時通過遙控器上下左右可以控制焦點移動位置 焦點所在應用需要有個黃色邊框標識,往右移動到邊界,自動到下一行,繼續往右移動到邊界底部自動翻頁,往下移動到底部自動翻頁 長按應用彈出編 ...
  • 這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 很多時候在工作中會碰到完全由前端導出word文件的需求,因此特地記錄一下比較常用的幾種方式。 一、提供一個word模板 該方法提供一個word模板文件,數據通過參數替換的方式傳入word文件中,靈活性較差,適用於簡單的文件導出。需要依賴: ...
  • 前言 有關設計模式的學習資料中,大部分都是以 java 語言實現的,畢竟 java 作為老牌面向對象的語言最能說明設計模式的核心概念,所以 js 的相關設計模式的學習資料也大多使用 class 類實現,本文記錄下 js 使用函數實現策略模式和狀態模式設計模式的方式,更有助於理解策略模式和狀態模式如何 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...