開發者們大家好👋

我希望每個人都做得很好。 Web 開發的格局不斷發展,帶來了新的工具和功能,可以增強開發人員的能力和使用者的體驗。最近,JavaScript 引入了幾種強大的方法來處理 Set 物件,現在所有主要瀏覽器都支援這些方法。這些新方法簡化了交集、並集和差集等常見操作,使集合操作更加有效率和直覺。同時,CSS 的進步擴展了漸層顏色插值選項,Chrome Canary 等瀏覽器中的實驗性功能正在透過內建 AI 功能突破界限。此外,ECMAScript 2024 的批准引入了處理 Promise 的創新方法,標誌著 JavaScript 開發又向前邁出了重要一步。在本文中,我們將探討這些令人興奮的更新以及它們對開發人員的意義。

  1. 新的SET方法被廣泛使用

JavaScript 中的集合物件現在附帶了許多有用的方法,所有主要瀏覽器都支援這些方法

當然,這裡是每種方法的完整範例:

intersection()

intersection方法傳回一個新集合,其中包含兩個集合中都存在的元素。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const intersectionSet = setA.intersection(setB);
// Set {2, 4, 6}
console.log(intersectionSet);

union()

union方法傳回一個新集合,其中包含兩個集合中的所有元素,沒有重複項。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const unionSet = setA.union(setB);
// Set {1, 2, 3, 4, 5, 6, 8, 10}
console.log(unionSet);

difference()

difference方法傳回一個新集合,其中包含第一個集合中存在但第二個集合中不存在的元素。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const differenceSet = setA.difference(setB);
// Set {1, 3, 5}
console.log(differenceSet);

isSupersetOf()

isSupersetOf方法傳回一個布林值,指示第一個集合是否是第二個集合的超集。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6]);

const isSuperset = setA.isSupersetOf(setB);
// true
console.log(isSuperset);

isDisjointFrom()

isDisjointFrom方法傳回一個布林值,指示兩個集合是否不相交(即沒有共同元素)。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([7, 8, 9, 10]);

const isDisjoint = setA.isDisjointFrom(setB);
// true
console.log(isDisjoint);

symmetricDifference()

symmetricDifference方法傳回一個新集合,其中包含兩個集合中都存在的元素。

const setA = new Set([1, 2, 3, 4, 5, 6]);
const setB = new Set([2, 4, 6, 8, 10]);

const symmetricDifferenceSet = setA.symmetricDifference(setB);
// Set {1, 3, 5, 8, 10}
console.log(symmetricDifferenceSet);

isSubsetOf()

isSubsetOf方法傳回一個布林值,指示第一個集合是否是第二個集合的子集。

const setA = new Set([2, 4, 6]);
const setB = new Set([1, 2, 3, 4, 5, 6, 8, 10]);

const isSubset = setA.isSubsetOf(setB);
// true
console.log(isSubset);

透過這些方法,您可以在 JavaScript 中方便地執行各種集合操作。

  1. Firefox中漸層的顏色插值

Firefox 是最後一個完全支援該功能的瀏覽器,您可以在不同空間的 CSS 漸層中插入顏色,而不僅僅是傳統的 RGB。

//before
.item {
     background: linear-gradient(to right, red, blue);
}
//now
.item {
     background: linear-gradient(in hst to right, red, blue);
}

魔術的圖像對嗎?

  1. 你的瀏覽器內建人工智慧嗎?

Google Chrome正在試驗一種新的 Web API,旨在在瀏覽器上提供可透過 JavaScript 存取的語言模型。該 API 已發佈到Chrome Canary版本。

// Assume inputText is a string containing the text you want to prompt the AI with.
const inputText = "What is the capital of France?";

async function useAI() {
    try {
        // Create a text session with the AI
        const session = await window.ai.createTextSession();

        // Get a streaming response from the AI
        const result = session.promptStreaming(inputText);

        // Initialize an empty string to collect the response
        let aiResponse = "";

        // Iterate over the streamed chunks of the result
        for await (const chunk of result) {
            // Append each chunk to the response
            aiResponse += chunk;
            // Optionally, you can log each chunk as it is received
            console.log(chunk);
        }

        // Log the complete response
        console.log("AI Response:", aiResponse);
    } catch (error) {
        console.error("Error using AI:", error);
    }
}

// Call the function to use the AI
useAI();

此範例執行以下操作:

  • 輸入文字:指定 AI 模型的輸入文字。

  • AI 會話建立:使用 window.ai.createTextSession() 建立與 AI 模型的會話。

  • 提示流:將輸入文字傳送到 AI 模型,並開始使用 session.promptStreaming(inputText) 接收分塊回應。

  • 收集回應:迭代串流傳輸區塊,將它們收集到單一回應字串中。

  • 記錄回應:記錄接收到的每個區塊以及接收到所有區塊後的完整回應。

  • 錯誤處理:包括一個 try-catch 區塊來處理過程中任何潛在的錯誤。

**提示:** 確保您擁有最新版本的 Chrome Canary,並且啟用了任何必要的實驗標誌或權限以使用此新 API。

  1. ECMAScript2024已獲批准!

一些新功能已被 ECMS General Assemble 批准作為正式 JavaScript 規範的一部分 - 包括聲明承諾的新方式

const { promise, resolve, reject } = Promise.withResolvers()

最後的圖片

隨著 Web 開發環境的不斷發展,保持最新功能和工具的更新對於開發人員來說至關重要。 JavaScript 中的新 Set 方法提供了強大且直觀的方法來處理集合操作,從而提高了程式碼效率和可讀性。 CSS 改進(例如漸層顏色插值)為設計師提供了更多創意控制。 Chrome Canary 中的實驗性 AI 集合成為互動式 Web 應用程式開啟了新的可能性。最後,ECMAScript 2024 的批准引入了有希望的增強功能,特別是在如何管理承諾方面。擁抱這些創新不僅可以簡化開發工作流程,還可以建立更動態且響應更快的 Web 應用程式。當我們期待未來的進步時,這些更新代表了朝著更強大、更通用的 Web 開發環境邁出的重要一步。

快樂編碼👋


原文出處:https://dev.to/mursalfk/whats-new-in-web-dev-this-month-1al8


共有 0 則留言