10 個被嚴重低估的 JS 特性,直接少寫 500 行代碼
前言 最近逛 Reddit 的時候,看到一個關於最被低估的 JavaScript 特性的討論,我對此進行了總結,和大家分享一下。 Hi,我是冴羽,學習前端,歡迎圍觀我的“網頁版朋友圈”、踏上“前端大佬成長之路”。 1. Set:數組去重 + 快速查找,比 filter 快 3 倍 提到數組去重,很多人第一反應是 filter + indexOf,但這種寫法的時間複雜度是 O (n²),而 Set
昵稱 冴羽
貢獻者35
粉絲0
前言 最近逛 Reddit 的時候,看到一個關於最被低估的 JavaScript 特性的討論,我對此進行了總結,和大家分享一下。 Hi,我是冴羽,學習前端,歡迎圍觀我的“網頁版朋友圈”、踏上“前端大佬成長之路”。 1. Set:數組去重 + 快速查找,比 filter 快 3 倍 提到數組去重,很多人第一反應是 filter + indexOf,但這種寫法的時間複雜度是 O (n²),而 Set
昵稱 冴羽
前言 大家好,我是林三心,相信大家都聽過前端的三座大山:閉包,原型鏈,作用域,這三個其實都只是算基礎。而我一直覺得基礎是進階的前提,所以不能因為是基礎就忽視他們。今天我就以我的方式講講原型鏈吧,希望大家能牢固地掌握原型鏈知識 很多文章一上來就扔這個圖,但是我不喜歡這樣,我覺得這樣對基礎不好的同學很不好,我喜歡帶領大家去從零實現這個圖,在實現的過程中,不斷地掌握原型鏈的所有知識!!!來吧!!!跟着我
昵稱 Sunshine_Lin
完整高頻題庫倉庫地址:https://github.com/hzfe/aweso... 完整高頻題庫閲讀地址:https://febook.hzfe.org/ 相關問題 關於 ES5 和 ES6 的繼承問題 原型鏈概念 回答關鍵點 原型鏈繼承 構造函數繼承 ES6 類繼承 繼承是指子類型具備父類型的屬性和行為,使代碼得以複用,做到設計上的分離。JavaScript 中的繼承主要通過原型鏈和
昵稱 HZFEStudio
定義 類是構造函數、原型鏈的語法糖。 定義類有兩種方式 class Student { } var Student = class { } 某些瀏覽器可能無法解析es6及以上的語法,這時候需要通過babel將代碼解析成瀏覽器可識別的語法,定義類的語法通過babel編譯之後就是通過function定義的構造函數。 類和構造函數是一樣的,通過new關鍵字創建,具有prototype屬性 class
昵稱 一顆冰淇淋
前言 距離上一篇js的繼承系列已經過去了四年,時不時還有新的讀者評論和回覆,開心之餘也想着更新一下內容,因為當時的內容裏沒有涉及到es6的 extend 實現,所以現在抽空補上。 當然,如果是0基礎的同學或者對於基本的繼承有些遺忘的同學,可以先回顧一下前兩篇: 詳解js中的繼承(一) 詳解js中的繼承(二) 正文 基礎回顧 預備知識 為了使後面的學習過程更絲滑,在開始之前,一起再回顧一下這個構造
昵稱 安歌
這是很小的一件事。 但是我花了至少兩個小時的時間。 起因是這樣的: 我需要一個異步函數的原型 const AsyncFunction = Object.getPrototypeOf(async function(){}).constructor 這個原型是用來生成 new AsyncFunction(str)的。 運行環境下,一點問題都沒有。 但是打包出來,總是報錯。 因為new AsyncFun
昵稱 陳其文
CommonJs、ADM、CMD 什麼是模塊 將一個複雜的程序依據一定的規則(規範)封裝成幾個塊(文件), 並進行組合在一起 塊的內部數據與實現是私有的(閉包/封裝), 只是向外部暴露一些接口(方法)與外部其它模塊通信 模塊化的進化過程 全局function模式 : 將不同的功能封裝成不同的全局函數 代碼: 將不同的功能封裝成不同的全局函數 問題: 污染全局命名
昵稱 Bill
阮一峯在 ES6 入門 中提到 ES6 模塊與 CommonJS 模塊有一些重大的差異: CommonJS 模塊輸出的是一個值的拷貝,ES6 模塊輸出的是值的引用。 CommonJS 模塊是運行時加載,ES6 模塊是編譯時輸出接口。 再細讀上面阮老師提到的差異,會產生諸多疑問: 為什麼 CommonJS 模塊輸出的是一個值的拷貝?其具體細節是什麼樣子的? 什麼叫 運行時加載? 什麼
昵稱 局外人
前言 JS 中函數是高等公民,但是function 和 class 的區別你真的清楚嘛? 本文從PolyFill 實現,再到性能分析,再複習哈基礎篇的使用; 另外深圳前端求坑,有坑的大佬麻煩內推一下。 1. PolyFill 1.利用原生 js 擼一個簡單的 class; 2.根據上面的用法知道 class 必須通過 new 調用,不能直接調用; // 阻止直接()調用,
昵稱 火狼
ES5中的新增方法 ES5 中給我們新增了一些方法,可以很方便的操作數組或者字符串,這些方法主要包括: 數組方法 字符串方法 對象方法 1.1 數組方法 迭代(遍歷)方法:forEach()、map()、filter()、some()、every(); array.forEach(function(currentValue, index, arr)) 讓數組中每個元素都執行一次 fn
昵稱 sugar_coffee
前言 JS是前端的核心,但有些使用技巧你還不一定知道; 本文梳理了JS的41個技巧,幫助大家提高JS的使用技巧; 文章有點長,可以clone下源碼,直接擼,源碼地址請戳全部源碼,原創不易,歡迎star; 序列文章: Vue 開發必須知道的 36 個技巧 React 開發必須知道的 34 個技巧 Array 1.數組交集 普通數組 const arr1 = [1, 2
昵稱 火狼
Babel 是什麼 Babel 是一個工具鏈,主要用於將 ECMAScript 2015+ 版本的代碼轉換為向後兼容的 JavaScript 語法,以便能夠運行在當前和舊版本的瀏覽器或其他環境中。 Babel能用在哪裏 NodeJs 使用 npm 初始化項目 $ mkdir es6-to-es5 $ npm init -y 安裝Babel $ npm install --save-dev @ba
昵稱 xx小枱燈
underscore 官網 _.union([2,1,2]); // [2,1] lodash 官網 _.uniq([2,1,2]); [2,1] 不產生新數組 使用indexOf判斷和splice刪除。 const removeDuplicates = (nums) = { let len = nums.length - 1 for(let i = len; i=0; i--
昵稱 洋仔
調包 即引用其他項目或者文件。 之所以需要把這個模塊單獨拎出來,是因為,一個語言能不能成氣候的其中的一個關鍵點在於能否模塊化;一個項目能否形成一個可觀的體量也離不開模塊化,簡單來説就是不同文件或項目間能否互相調用,es5和es6中都有着不同風格的引用方式,開發時要注意自己的開發環境以及語法格式 es5 有着AMD、CMD、CommonJS三種的引用方式,其中AMD(Asynchrono
昵稱 小壞壞
javascript有八種類型的數據,其中沒有function,是因為function被object這個大類包含了。也就是説,所有函數都是object。 當我們自己聲明瞭一個類,我們拿到的引用是一個函數的引用,它默認繼承於內置的Object對象,但是由於javascript最頂層的父級(Object和Function)設計有點亂,並且不具有普適性,在這裏我們用兩個普通的類來演示繼承的實現。 將子類
昵稱 nqbefgvs
let math = { subject: '數學', children: [ { id: 1, title: '數一' }, { id: 2, title: '數二' }, { id: 3, title: '數三' }, { id: 0, title: '待定' } ] } // 取對象的屬性個數 Ob
昵稱 前端小菜
let math = { subject: '數學', children: [ { id: 1, title: '數一' }, { id: 2, title: '數二' }, { id: 3, title: '數三' }, { id: 0, title: '待定' } ] } // 添加新屬性 math
昵稱 前端小菜
1,方法一 concat() 實例:arrayA.concat(arrayB) 會生成新的數組。 let arrayA = ['ja', 'va']; let arrayB = ['scr', 'ipt']; // 合併數組A和B arrayA = arrayA .concat(arrayB); // 查看合併後的結果 console.log(arrayA); // ['ja',
昵稱 前端小菜
js解析url,將如下url中的參數解析為key-value對象 https://mp.weixin.qq.com/adva... 方法1,split() + 循環依次取出 parseURLParams(url) { let queryParams = {} // 判斷是否有參數 if (url.indexOf('?') 0) return queryPar
昵稱 前端小菜
"ngsw-bypass-true" 這個參數是與 Angular Service Worker (ngsw) 相關的一個選項,用於控制在 Service Worker 中是否繞過緩存,直接請求網絡資源。在 Angular 應用中,Service Worker 主要負責緩存應用的靜態資源,以提高應用的性能和用户體驗。 首先,讓我們瞭解一下 Angular Service Worker 的基本概念。
昵稱 註銷
在PWA(Progressive Web App)體系架構下,文件 hash 起着非常關鍵的作用,它主要用於緩存管理、版本控制以及確保 Web 應用程序的可靠性。在前端開發中,文件 hash 是文件的唯一標識符,通常是文件內容的哈希值,例如 MD5 或 SHA-256。以下是文件 hash 在 PWA 中的幾個關鍵作用: 1. 緩存管理: 文件 hash 在 PWA 中用於實現緩存策略,確保在更新
昵稱 註銷
文章目錄 一. this引用 1. this引用的介紹 this引用是成員方法的參數之一,不需要用户傳遞實現,由編譯器自動完成,也就是説,這個參數用户是看不到的,但用户可使用這個參數。 this引用指向當前對象(成員方法運行時調用該成員方法的對象),在成員方法中所有成員變量的操作,都是通過該引用去訪問。 只不過所有的操作對用户是透明的,即用户不需要來傳遞,編譯器自動完成。 this 引用的
昵稱 用户bPc1FjG
首先導入導出分為幾類 CommonJS導入CommonJS EsModule導入CommonJS EsModule導入EsModule 根據實現規則,簡單代碼樣例 // index.js // import log,{age} from "./log.js" // // let log = require('./log.js') // console.log('index.js內容')
昵稱 HeiYanjing
面向對象編程 Object Oriented Programming 面向對象編程用對象把數據和方法聚合起來。 面向對象編程的優點 能寫出模塊化的代碼 能使得代碼更靈活 能提高代碼的可重用性 面向對象編程的原則 繼承(inheritance):子類/派生類從父類/基類/超類中派生,形成繼承結構 封裝(encapsulation):代碼的實現對用户不可見,例如調用 toUpperCa
昵稱 Mitchell_C