Hello, I'm EarlGrey, who insists on sharing dry goods, and has translated and published technical books such as "Python Programming Without Teachers" and "Python Parallel Computing Handbook".
If my sharing is helpful to you, please follow me and strike up together.
Some JavaScript APIs may be less commonly used, so let's take a look at how they are used and used in the following sections.
As for the title, the main thing is to let you come in and take a look, bros, don't hit me!
Blob API
The Blob API is used to process binary data, which makes it easy to convert data into or read data from Blob objects.
// 创建一个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);
Use case: In a web application, you may need to upload or download binary files, which can be conveniently processed using the Blob API.
WeakSet
A WeakSet is similar to a Set, but can store weakly referenced objects. This means that if there are no other references to an object, then the object can be collected by the garbage collector without having to manually remove it from the WeakSet.
const myWeakSet = new WeakSet();
const obj1 = {};
const obj2 = {};
myWeakSet.add(obj1);
myWeakSet.add(obj2);
console.log(myWeakSet.has(obj1)); // true
obj1 = ;
console.log(myWeakSet.has(obj1)); // false
Use case: In some cases, you may need to store some temporary objects, but you don't want them to take up too much memory. These objects can be conveniently managed using WeakSet.
TextEncoder 和 TextDecoder
TextEncoder and TextDecoder are used to handle conversions between strings and byte sequences. They can conveniently encode strings into byte sequences or decode byte sequences into strings.
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!"
Use case: In a web application, you may need to convert strings to binary data, or binary data to strings. These conversions can be conveniently done using TextEncoder and TextDecoder.
Proxy API
The Proxy API can be used to create proxy objects, which can intercept operations such as reading and assigning properties to objects. This feature can be used to implement metaprogramming, data hijacking, etc.
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
Usage scenarios: In some cases, it may be necessary to intercept operations such as reading and assigning values to object properties to achieve more advanced functions. These features can be conveniently implemented using the 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]
Use case: In some cases, you may need to get an enumerable property or property value for an object. These features can be easily implemented using Object.entries() and Object.values().
IntersectionObserver
IntersectionObserver can be used to detect if an element has entered the viewport, and can be used for features such as infinite scrolling, lazy loading, etc.
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);
Usage scenario: In a web application, you may need to implement functions such as infinite scrolling and lazy loading, which can be easily implemented by using IntersectionObserver.
Symbol
Symbol can be used to create a unique identifier that can be used to define an object's private properties or methods.
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"
Use cases: In some cases, you may need to define private properties or methods for objects, which can be conveniently implemented by using Symbol.
Reflect API
The Reflect API can be used to implement metaprogramming, such as dynamically calling methods or constructors of objects.
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!"
Use cases: In some cases, you may need to dynamically call an object's methods or constructors, which can be easily implemented using the Reflect API.
Generator API
The Generator API can be used to generate iterators, which can be used to implement asynchronous operations or lazy computations.
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); // "!"
Use cases: In some cases, it may be necessary to implement asynchronous operations or lazy computation, which can be conveniently implemented using the Generator API.
Web Workers
Web Workers can be used to execute JavaScript code in background threads, which can be used to improve performance or implement complex calculations.
// 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!");
};
Use case: In a web application where you may need to handle a large number of compute-intensive tasks or perform long-running operations, using Web Workers can improve performance or avoid clogging up the user interface.
AudioContext
The AudioContext can be used to process audio, and can be used to implement functions such as audio playback and sound effect processing.
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();
});
Usage scenario: In a web application, you may need to implement functions such as audio playback and sound effect processing, which can be easily implemented by using AudioContext.
summary
The above web APIs and their use cases, these APIs can help us to implement various functions of web applications more conveniently. Of course, in addition to these APIs, there are many other useful APIs and tools that we recommend you explore to better meet the challenges of web development.
-EDF-
I've seen this in the article, don't forget to click "like" and "watching" in the lower right corner to encourage~
Recommended Click on the title to jump
1. Python project engineering best practices
2. Python can be faster than C!
3. streamlit, a super powerful Python library
4. Douban's C++ classic with a score of 8.9 is free to give!
5. What changes have been made in Python 3.12?
Recently, I opened a Taobao store, called [Breaking Barriers], which focuses on the sharing of paid materials and tools related to program development to help you reduce trial and error and use costs. Everyone is welcome to pay attention.
Reply to the keyword "pybook03", receive the electronic version of "Think Python 2e" translated by Attack Grey and his friends reply keyword "Book List 02", and receive the electronic version of 10 Python primers organized by Attack Grey
Tell you more details
Welcome to my circle of friends
👆 Update your thoughts and understandings every day