記錄--使用率比較低的10個Web API

来源:https://www.cnblogs.com/smileZAZ/archive/2023/05/23/17426062.html
-Advertisement-
Play Games

這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助 avaScript中有些API可能使用率比較低,下麵我們逐一介紹它們的用法和使用場景。 至於標題,主要是想讓你進來看看,兄弟們別打我! Blob API Blob API 用於處理二進位數據,可以方便地將數據轉換為Blob對象或從Blob ...


這裡給大家分享我在網上總結出來的一些知識,希望對大家有所幫助

avaScript中有些API可能使用率比較低,下麵我們逐一介紹它們的用法和使用場景。

至於標題,主要是想讓你進來看看,兄弟們別打我!

Blob API

Blob API 用於處理二進位數據,可以方便地將數據轉換為Blob對象或從Blob對象讀取數據。

// 創建一個Blob對象
const myBlob = new Blob(["Hello, world!"], { type: "text/plain" });

// 讀取Blob對象的數據
const reader = new FileReader();
reader.addEventListener("loadend", () => {
  console.log(reader.result);
});
reader.readAsText(myBlob);

使用場景:在Web應用中,可能需要上傳或下載二進位文件,使用Blob API可以方便地處理這些數據。

WeakSet

WeakSet 類似於Set,但可以存儲弱引用的對象。這意味著,如果沒有其他引用指向一個對象,那麼這個對象可以被垃圾回收器回收,而不需要手動從WeakSet中刪除。

const myWeakSet = new WeakSet();
const obj1 = {};
const obj2 = {};

myWeakSet.add(obj1);
myWeakSet.add(obj2);

console.log(myWeakSet.has(obj1)); // true

obj1 = null;

console.log(myWeakSet.has(obj1)); // false

使用場景:在某些情況下,可能需要存儲一些臨時的對象,但又不希望這些對象占用太多的記憶體。使用WeakSet可以方便地管理這些對象。

TextEncoder 和 TextDecoder

TextEncoder 和 TextDecoder 用於處理字元串和位元組序列之間的轉換。它們可以方便地將字元串編碼為位元組序列或將位元組序列解碼為字元串。

const encoder = new TextEncoder();
const decoder = new TextDecoder();

const myString = "Hello, world!";
const myBuffer = encoder.encode(myString);

console.log(myBuffer); // Uint8Array(13) [72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33]

const decodedString = decoder.decode(myBuffer);

console.log(decodedString); // "Hello, world!"

使用場景:在Web應用中,可能需要將字元串轉換為二進位數據,或將二進位數據轉換為字元串。使用TextEncoder和TextDecoder可以方便地進行這些轉換。

Proxy API

Proxy API 可以用於創建代理對象,可以攔截對象屬性的讀取、賦值等操作。這個功能可以用於實現元編程、數據劫持等功能。

const myObject = {
  name: "John",
  age: 30,
};

const myProxy = new Proxy(myObject, {
  get(target, property) {
    console.log(`Getting property ${property}`);
    return target[property];
  },
  set(target, property, value) {
    console.log(`Setting property ${property} to ${value}`);
    target[property] = value;
  },
});

console.log(myProxy.name); // "John"

myProxy.age = 31; // Setting property age to 31

使用場景:在某些情況下,可能需要攔截對象屬性的讀取、賦值等操作,以實現更高級的功能。使用Proxy API可以方便地實現這些功能。

Object.entries() 和 Object.values()

Object.entries() 用於獲取對象的可枚舉屬性和值的數組,Object.values() 用於獲取對象的可枚舉屬性值的數組。

const myObject = {
  name: "John",
  age: 30,
};

console.log(Object.entries(myObject)); // [["name", "John"], ["age", 30]]
console.log(Object.values(myObject)); // ["John", 30]

使用場景:在某些情況下,可能需要獲取對象的可枚舉屬性或屬性值。使用Object.entries()和Object.values()可以方便地實現這些功能。

IntersectionObserver

IntersectionObserver 可以用於檢測元素是否進入視口,可以用於實現無限滾動、懶載入等功能。

const myObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      console.log(`${entry.target.id} is now visible`);
      observer.unobserve(entry.target);
    }
  });
});

const myElement = document.getElementById("myElement");
myObserver.observe(myElement);

使用場景:在Web應用中,可能需要實現無限滾動、懶載入等功能,使用IntersectionObserver可以方便地實現這些功能。

Symbol

Symbol 可以用於創建唯一標識符,可以用於定義對象的私有屬性或方法。

const mySymbol = Symbol("mySymbol");

const myObject = {
  [mySymbol]: "This is a private property",
  publicProperty: "This is a public property",
};

console.log(myObject[mySymbol]); // "This is a private property"
console.log(myObject.publicProperty); // "This is a public property"

使用場景:在某些情況下,可能需要定義對象的私有屬性或方法,使用Symbol可以方便地實現這些功能。

Reflect API

Reflect API 可以用於實現元編程,例如動態調用對象的方法或構造函數。

class MyClass {
  constructor(value) {
    this.value = value;
  }

  getValue() {
    return this.value;
  }
}

const myObject = Reflect.construct(MyClass, ["Hello, world!"]);
const myMethod = Reflect.get(myObject, "getValue");
const myValue = myMethod.call(myObject);

console.log(myValue); // "Hello, world!"

使用場景:在某些情況下,可能需要動態調用對象的方法或構造函數,使用Reflect API可以方便地實現這些功能。

Generator API

Generator API 可以用於生成迭代器,可以用於實現非同步操作或惰性計算。

function* myGenerator() {
  yield "Hello";
  yield "world";
  yield "!";
}

const myIterator = myGenerator();

console.log(myIterator.next().value); // "Hello"
console.log(myIterator.next().value); // "world"
console.log(myIterator.next().value); // "!"

使用場景:在某些情況下,可能需要實現非同步操作或惰性計算,使用Generator API可以方便地實現這些功能。

Web Workers

Web Workers 可以用於在後臺線程中執行JavaScript代碼,可以用於提高性能或實現複雜的計算。

// main.js
const myWorker = new Worker("worker.js");

myWorker.postMessage("Hello, worker!");

myWorker.onmessage = (event) => {
  console.log(`Message received from worker: ${event.data}`);
};

// worker.js
onmessage = (event) => {
  console.log(`Message received in worker: ${event.data}`);
  postMessage("Hello, main!");
};

使用場景:在Web應用中,可能需要處理大量計算密集型任務或執行長時間運行的操作,使用Web Workers可以提高性能或避免阻塞用戶界面。

AudioContext

AudioContext 可以用於處理音頻,可以用於實現音頻播放、音效處理等功能。

const audioContext = new AudioContext();

fetch("https://example.com/audio.mp3")
  .then((response) => response.arrayBuffer())
  .then((arrayBuffer) => audioContext.decodeAudioData(arrayBuffer))
  .then((audioBuffer) => {
    const source = audioContext.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(audioContext.destination);
    source.start();
  });

使用場景:在Web應用中,可能需要實現音頻播放、音效處理等功能,使用AudioContext可以方便地實現這些功能。

總結

以上Web API和它們的使用場景,這些API可以幫助我們更方便地實現Web應用的各種功能。當然,除了這些API之外,還有很多其他有用的API和工具,建議大家多多探索,以便更好地應對Web開發的各種挑戰。

本文轉載於:

https://juejin.cn/post/7221813031813054501

如果對您有所幫助,歡迎您點個關註,我會定時更新技術文檔,大家一起討論學習,一起進步。

 


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

-Advertisement-
Play Games
更多相關文章
  • 雖然之前弄到過《高中作文範例大全ACCESS資料庫》、《初中作文範例大全ACCESS資料庫》、《小學作文範例大全ACCESS資料庫》、《中考高考作文指導大全ACCESS資料庫》、《中小學生作文大全寶典ACCESS資料庫》等作文資料庫,但是都沒有點評的內容感覺缺少些什麼,而今天這份作文資料庫就較為全面 ...
  • 今天這份作文資料庫是採集自滿分作文網(https://www.zuowenwang.net/)的數據,一共有24萬5千多條,包含大小分類,且段落分明。具體查看截圖,截圖包含所有欄位。 MDB文件有400M,大類包含:小學作文(174075)、初中作文(7110)、高中作文(2267)、其他作文(60 ...
  • 按步驟走,不帶腦子式安裝(註意4.0版本mongodb官方已經不再支持,以下代碼中可以修改mongodb版本號安裝,目前最新版為6.0,如果懶得改直接用也可以,文章後邊第三章第一條代碼會直接升級為最新版本mongodb): **1.導入包管理系統使用的公鑰** ```powershell wget ...
  • 你是否在春節只能複製別人的祝福簡訊來發送?你是否在節日期間為給朋友送祝福無從下手?你是否在特殊日子和朋友打不開對話的開頭?其實,很多情況下我們都需要一堆不同與別的人祝福語,用在節日上、用在交際上等日常備用。今天這一份數據就是祝福語大全,有節日、祝福兩大類,子分類有50多個。 節日大類包含:除夕(22 ...
  • 雖然已經有很多詩詞類的資料庫,最近又再次找了一下古詩詞類的數據,又發現了一些,可是真的是各有各的優點,各有各的特色,之後不再重找詩詞類的數據了。 今天這個詩詞鑒賞數據也不錯,有分類TAG,也有譯文、註釋、品析、朝代,但是又有些不足,詳見下麵說明: 朝代記錄統計:金朝(15)、近代(8)、兩漢(143 ...
  • 這是從一個中藥大全查詢系統中破解提取出來的中藥驗方大全,整理出了數以萬計的各家經方、時方、驗方以及秘方的用藥方劑組成,用法用量以及每組方劑的功效性能、主治應用等。有了這樣一套完善的醫學資料你可以節省很多查閱資料的時間可以更方便快捷的查閱你需要的信息。 加味涼血退斑湯 組成:鮮生地30克,鮮蘆根30克 ...
  • 中國出海中東和北非地區的策略類手游《蘇丹的復仇》(Revenge of Sultans,ROS)和華為HMS生態深度合作,為本地用戶帶來創新游戲體驗,成為當地廣受歡迎的游戲之一,下載量居應用市場前列。2023年5月10日,在阿聯酋迪拜舉辦的HUAWEI P60系列及旗艦產品發佈會中,ONEMT中東G ...
  • 本文主要介紹在業務複雜化背景下,京東零售購物車團隊努力踐行工匠精神,通過全非同步化改造提升系統性能、提升用戶體驗。通過本文,讀者可以瞭解購物車中台進行全非同步化改造的總體方案,以及方案落地過程中遇到的問題及解決方法,讀者可重點關註文中提到的多分頁並行後,分頁精細控制及底層RPC異常信息問題。 ...
一周排行
    -Advertisement-
    Play Games
  • 下麵是一個標準的IDistributedCache用例: public class SomeService(IDistributedCache cache) { public async Task<SomeInformation> GetSomeInformationAsync (string na ...
  • 這個庫提供了在啟動期間實例化已註冊的單例,而不是在首次使用它時實例化。 單例通常在首次使用時創建,這可能會導致響應傳入請求的延遲高於平時。在註冊時創建實例有助於防止第一次Request請求的SLA 以往我們要在註冊的時候實例單例可能會這樣寫: //註冊: services.AddSingleton< ...
  • 最近公司的很多項目都要改單點登錄了,不過大部分都還沒敲定,目前立刻要做的就只有一個比較老的項目 先改一個試試手,主要目標就是最短最快實現功能 首先因為要保留原登錄方式,所以頁面上的改動就是在原來登錄頁面下加一個SSO登錄入口 用超鏈接寫的入口,頁面改造後如下圖: 其中超鏈接的 href="Staff ...
  • Like運算符很好用,特別是它所提供的其中*、?這兩種通配符,在Windows文件系統和各類項目中運用非常廣泛。 但Like運算符僅在VB中支持,在C#中,如何實現呢? 以下是關於LikeString的四種實現方式,其中第四種為Regex正則表達式實現,且在.NET Standard 2.0及以上平... ...
  • 一:背景 1. 講故事 前些天有位朋友找到我,說他們的程式記憶體會偶發性暴漲,自己分析了下是非托管記憶體問題,讓我幫忙看下怎麼回事?哈哈,看到這個dump我還是非常有興趣的,居然還有這種游戲幣自助機類型的程式,下次去大玩家看看他們出幣的機器後端是不是C#寫的?由於dump是linux上的程式,剛好win ...
  • 前言 大家好,我是老馬。很高興遇到你。 我們為 java 開發者實現了 java 版本的 nginx https://github.com/houbb/nginx4j 如果你想知道 servlet 如何處理的,可以參考我的另一個項目: 手寫從零實現簡易版 tomcat minicat 手寫 ngin ...
  • 上一次的介紹,主要圍繞如何統一去捕獲異常,以及為每一種異常添加自己的Mapper實現,並且我們知道,當在ExceptionMapper中返回非200的Response,不支持application/json的響應類型,而是寫死的text/plain類型。 Filter為二方包異常手動捕獲 參考:ht ...
  • 大家好,我是R哥。 今天分享一個爽飛了的面試輔導 case: 這個杭州兄弟空窗期 1 個月+,面試了 6 家公司 0 Offer,不知道問題出在哪,難道是杭州的 IT 崩盤了麽? 報名面試輔導後,經過一個多月的輔導打磨,現在成功入職某上市公司,漲薪 30%+,955 工作制,不咋加班,還不捲。 其他 ...
  • 引入依賴 <!--Freemarker wls--> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> ...
  • 你應如何運行程式 互動式命令模式 開始一個互動式會話 一般是在操作系統命令行下輸入python,且不帶任何參數 系統路徑 如果沒有設置系統的PATH環境變數來包括Python的安裝路徑,可能需要機器上Python可執行文件的完整路徑來代替python 運行的位置:代碼位置 不要輸入的內容:提示符和註 ...