貢獻者508
粉絲0
宏任務和微任務的隊列入門知識，可以參考之前的文章： JavaScript的事件循環機制 宏任務和微任務在前端面試中，被經常提及到，包括口頭和筆試題 async await概念 async 使用async關鍵字聲明的函數，是AsyncFunction構造函數的實例，在async函數體內，可以使用await接收promise實例 async和await關鍵字，在開發過程中，可以簡潔地去做
昵稱 程序猿布歐
我們知道在 JS 中，刪除數組元素有兩個方法：pop 與 shift，分別可以刪除末尾與開頭的元素。 然而同樣是刪除元素，它們的執行時間確實不同的。 當數組項目較多時，shift 的執行時間明顯長於 pop。 const test = (arrLength) = { let arr1 = [] console.time(`${arrLength}-arr1`) for (let i =
昵稱 清隆
假設你正在爬樓梯。需要 n 階你才能到達樓頂。 每次你可以爬 1 或 2 個台階。你有多少種不同的方法可以爬到樓頂呢？ 示例 1： 輸入：n = 2 輸出：2 解釋：有兩種方法可以爬到樓頂。 1. 1 階 + 1 階 2. 2 階 示例 2： 輸入：n = 3 輸出：3 解釋：有三種方法可以爬到樓頂。 1. 1 階 + 1 階 + 1 階 2. 1 階 + 2 階 3. 2 階 + 1 階
昵稱 雲綺棠兮
js遞歸遍歷數組並判斷數組中的每一項如果都不為空則返回true，只要有一項為空則返回false。一開始看到這樣的場景我就覺得很簡單沒難度，可真正上手才發現並不那麼簡單，而且想要讓代碼健壯就又複雜了些。於是經過一個小時的努力加不斷修改、增補，總算實現了自己想要的一個方法。 代碼如下： const isArrayEmpty = arr = { if (!Array.isArray(arr) ||
昵稱 豫見世家公子
兩種方案 1、數組打平，根據搜索字符在打平數組裏去filter出滿足條件的node節點，但此時被篩選的節點只有子節點，然後再通過被篩選出的子節點去找對應的父節點，然後拿到結果後轉成tree結構 優點：思路簡單，打平數組用了遞歸，好理解 缺點：找父節點的時候相對麻煩。 2、寫一個遞歸算法，滿足條件就返回tree 比如有一個簡單個tree const treeData = [ {
昵稱 健兒
場景1：從樹中查找查找符合條件的節點（一個） const findNodeById = (nodes, id) = { // 遍歷當前層的所有數組元素 for (const node of nodes) { // 找到目標節點，直接返回，遞歸結束 if (node.id === id) { // 這裏會有兩種情況： // 1. 如果這裏不是在遞歸中，
昵稱 熱飯班長
瀏覽器的進程和線程 前言 要理解瀏覽器的進程和線程，首先需要理解一句話：進程是CPU分配資源的最小單位，線程是CPU調度的最小單位。 應用程序在運行時，CPU會分配一塊可獨立運行的內存，即進程，他是應用程序運行的載體。進程一般由程序，數據集合和進程控制塊三部分組成。程序用於描述進程要完成的功能，是控制進程執行的指令集；數據集合是程序在執行時所需要的數據和工作區；程序控制塊包含進程的描述信息
昵稱 瘋狂的金桔
完整閲讀本文大約需要5分鐘。 開始閲讀之前，先上一道面試題： CSRF攻擊和XSS攻擊之間，有什麼聯繫？ 什麼是CSRF攻擊 CSRF攻擊即Cross-site request forgery，跨站請求偽造，直白來説就是惡意網站偽裝成用户，向被害網站發起操作請求。 為了方便理解，做了一張圖，攻擊流程如下： 用户登錄受害網站，瀏覽器把獲取的身份憑證保存在本地cookie中； 用户被誘導打開黑
昵稱 前端私教年年
圖片來自：https://bz.zzzmh.cn/ 本文作者： cgt 背景: 如何解耦大前端與服務端的適配層依賴 談到 BFF，相信大家都不會太陌生，過去在雲音樂，前後端的協作架構一直維持比較傳統的前後端協作模式。各個端所需要的接口完全依賴服務端提供，服務端同學除了需要完成微服務的業務邏輯外，還需要針對前端頁面調度各個領域的微服務，根據前端的數據訴求進行一定程度的組裝和適配。 在年初
昵稱 雲音樂技術團隊
本文是 2021 年 12 月 26 日，第三十五屆 - 前端早早聊【前端搞 Node.js】專場，來自預測科技的技術總監 —— 芋頭的分享。感謝 AI 的發展，藉助 GPT 的能力，最近我們終於可以非常高效地將各位講師的精彩分享文本化後，分享給大家。（完整版含演示請看錄播視頻）：https://www.zaozao.run/video/c35 完整版高清 PPT 請添加小助手「zzleva」獲取
昵稱 前端早早聊
GraphQL 工具 本文章，會列舉一些好用的 GraphQL 工具，他們可以大大提升你在開發中使用 GraphQL 的效率哦！ Prisma 你可以這麼理解，Prisma 是一個 ORM 的庫，讓你使用 GraphQL 查詢時，可以使用對象的形式去查詢，而不需要使用查詢語句去查詢，非常方便，而且 Prisma 還擁有以下特點： Prisma 支持很多數據庫，比如 Mysql、Postgre
昵稱 倔強的鉛筆
近幾年來，互聯網技術趨向於採用前端 JavaScript 框架來構建更好的網頁和移動應用用户體驗。這種變化真的很棒🔥，我個人非常喜歡這些框架給我們帶來的靈活性。 但是，這種靈活性是否已經過頭了呢… 為了真正理解這種情況，我們不妨回顧一下，在 JavaScript 框架誕生之前，應用是如何構建的。 ⏳ JavaScript 出現之前的時代… 在最初的幾個前端框架（最著名的包括 Angular
昵稱 倔強的鉛筆
GraphQL是一種現代的API查詢語言，它在現代Web應用中得到了廣泛的應用，因為它提供了一種高效、靈活且強大的方式來獲取數據 GraphQL基礎快速應用示例： 1. 後端設置（使用graphql-yoga） 首先，我們需要創建一個GraphQL服務器。安裝graphql-yoga並創建一個簡單的GraphQL schema： npm init -y npm install graphql yo
昵稱 天涯學館
最近重新梳理了一下原型的知識,想分享一下，希望對那些被原型，原型鏈，構造函數，實例對象等關係滿頭包的童鞋有些幫助~~~ 廢話不説了 上代碼 //原型 prototype function Man(name,age){ this.name=name, this.age=age } let Pers
昵稱 大白白
前言 原文來自MDN JavaScript主題的高階教程部分，一共5篇。分別涉及繼承與原型、嚴格模式、類型數組、內存管理、併發模型和事件循環。本篇是第一部分，關於繼承和原型。 原文鏈接請點我 下面是正文部分： 對於熟悉基於類的編程語言（例如 Java 和 C++）的開發者來説，JavaScript 會讓他們感到困惑，因為 JS 的動態性以及其本身並不提供class的實現（ES2015 中提出的c
昵稱 小志Chris
從關係圖中可以看出來，ECMAScript中創建一個對象是通過new構造函數實現的，而本質上來説這個對象其實是以構造函數的屬性prototype指向的對象為基本模板的，因此新對象的__proto__屬性表明了自己來源於誰。 prototype 該屬性用來指向創建一個對象的基本模板，默認指向new構造函數，也可以修改，或者通過改屬性為新對象添加屬性。 需要注意的是，該屬性只有函數才有。 //構造函
昵稱 你好2007
前言 上文對原型和原型鏈做了一些簡單的概念介紹和解析，本文將淺析一些原型鏈的擴展。 javaScript原型和原型鏈 http://lewyon.xyz/prototype.html 擴展原型鏈 使用new操作符 利用原型是對象的特性，實例化對象的時候，繼承多個構造函數的屬性和方法 兼容性：支持目前以及所有可想象到的瀏覽器 (IE5.5 都可以使用) function parent1(
昵稱 程序猿布歐
繼續補檔，發現這塊內容其實蠻多的。後面估計還會有兩篇（怎麼還有兩篇啊喂！），分別是 JavaScript執行原理·補 和 JavaScript部分特性，這周不知道能不能搞定。 先看 JS 原型鏈吧。 JS 繼承機制設計 1994年，網景公司（Netscape）發佈了 Navigator v0.9，轟動一時。但當時的網頁不具備交互功能，數據的交互全部依賴服務器端，這浪費了時間與服務器資源。 網景公司
昵稱 阿菇kinoko
AST 是 Abstract Syntax Tree 的縮寫，即 “抽象語法樹”.它是以樹狀的形式表現編程語言的語法結構. webpack 打包 JS 代碼的時候，webpack 會在我們的原有代碼基礎上新增一些代碼， 例如我們可以在打包JS 代碼的時候將高級代碼轉為低級代碼，就是通過 AST 語法樹來完成的 AST在線生成地址 babel插件查看使用地址 AST生成過程由源碼-詞法分
昵稱 HeiYanjing
前言 Babel 是一個通用的多功能的 JavaScript 編譯器，讓一些新版本的語法或者語法糖可以在低版本的瀏覽器上跑起來。 它有三個主要處理步驟 Parse - Transform - Generate。 在 Transform 轉換過程中通過將插件（或預設）應用到配置文件來啓用代碼轉換。 AST 編寫 Babel 插件非常複雜，需要有相當的基礎知識，在講插件之前必須得提起 AS
昵稱 小皇帝James
1 介紹 AST 打開前端項目中的 package.json，會發現眾多工具已經佔據了我們開發日常的各個角落，例如 JavaScript 轉譯、CSS 預處理、代碼壓縮、ESLint、Prettier 等。這些工具模塊大都不會交付到生產環境中，但它們的存在於我們的開發而言是不可或缺的。 Babel，Webpack，Vue-cli 和 EsLint 等很多的工具和庫的核心都是通過 Abstract
昵稱 京東雲開發者
Promise 詳解及常用方法對比 1. Promise 原理詳解 1.1 Promise 基本概念 Promise 是 JavaScript 中用於處理異步操作的對象，它代表一個異步操作的最終完成（或失敗）及其結果值。 // Promise 的三種狀態 const promise = new Promise((resolve, reject) = { // Pending 狀態（進行中）
昵稱 Feng_Fanfan
需求描述 需求：根據傳入的動態數組生成一個節點數為數組長度的 slider 組件。要求節點直接長度一致，但是顯示的值為傳入數組的值。 示例： 傳入值為[5], 因為只有一個值，slider 無法拖動，顯示如下 傳入值為[5，10，20，30，40，50，55]， 數值之間差值不一定相等，顯示如下 實現邏輯： UI： 先畫一條線作為滑動條，再根據傳入數
昵稱 Emon
前言 如果我們選擇不使用任何框架的情況下來進行前端開發，那麼針對一個完整的網頁，我們需要開發以下代碼： HTML 代碼 CSS 代碼 JavaScript 代碼 就幾年之前來説，HTML 部分的代碼基本不存在複用的可能，這就導致我們可能需要開發大量重複的 HTML 代碼，即使使用 CV 法，代碼的冗餘卻是不可避免的。 Web Components 誕生的背景 近幾年，我們在使用前端框架（
昵稱 編程三昧
