JavaScript/TypeScript
文章平均质量分 94
JS/TS 相關知識
林cc
这个作者很懒,什么都没留下…
展开
-
JavaScript 中的正則表達式 RegExp
JavaScript 中的正則表達式 RegExp前言正文什麼是正則表達式?創建正則表達式元字符代表特殊含義的元字符代表次數 - 量詞元字符特殊情況正則的特性正則方法str.search(reg)reg.test(str)reg.exec(str)str.match(reg)str.replace(reg, [newStr, function])結語參考前言正則表達式這個東西一直都有聽過的,不管在學習什麼語言都有正則表達式的學習,無奈本人之前學習都有點不求甚解,所以對於正則表達式這個東西一直沒有很正文原创 2021-06-13 10:10:44 · 304 阅读 · 2 评论 -
淺談 TypeScript 泛型 Generic
淺談 TypeScript 泛型 Generic前言正文什麼是泛型?函數泛型接口泛型React + TS 泛型jsx 泛型組件結語參考前言也是最近除了 react 之外之外因應實習的技術棧要求,所以也在學習 ts 相關東西。這篇來說說對於 ts 泛型的一些比較基本,常用的用法吧!常常在看一些源代碼像是 react 源碼時,都會看到這樣的用法,但都不明所以,趁此機會補補下這方面的東西。正文什麼是泛型?在軟件開發中,我們不僅要創建一致的、定義良好的 API,同時也要考慮可重用性。我們希望組件不僅要能夠原创 2021-05-27 01:21:15 · 389 阅读 · 2 评论 -
關於 ES7 提案 Decorator
關於 ES7 提案 Decorator前言正文decorators 準備工作類的修飾方法的修飾函數的修飾core-decorators.js@autobind@readonly@override@deprecate (别名@deprecated)@suppressWarningsMixin 應用decorators 總結結語參考前言會寫這篇是因為這陣子正在學習 react,因此也學了一個 react 協助狀態管理的庫 MobX,而在 MobX 中就有一個東西叫做 decorators(裝飾器),覺得這個原创 2021-05-25 00:56:51 · 219 阅读 · 3 评论 -
JavaScript 函數式編程
JavaScript 函數式編程什麼是函數式編程概念純函數高階函數柯里化(Currying)什麼是函數式編程函數式編程英文是 functional programming,其實指的是一種編程範式(programming paradigm),也就是一套寫代碼的方法。其實主要的編程反式有三種:命令式編程聲明式編程函數式編程其實一般我們寫程序大多是命令式編程。函數式編程相比命令式編程來說,更加強調程序執行的結果而非執行的過程,通常是通過若干簡單的函數,或是說簡單的執行單元,讓計算結果不斷推進,一原创 2021-05-02 14:29:05 · 139 阅读 · 3 评论 -
關於 JavaScript ES6 Proxy
關於 JavaScript ES6 ProxyProxy 概念Proxy 使用get(target, propKey, receiver)set(target, propKey, value, receiver)apply(target, object, args)has(target, propKey)constuct(target, args)deleteProperty(target, propKey)defineProperty(target, propKey, propDesc)getOwnPro原创 2021-04-20 19:53:03 · 175 阅读 · 0 评论 -
JavaScript 數組常用 API 整理
JavaScript 數組常用 API 整理push(...args)popshiftunshift([...args])join('[args]')concat(args)slice(start[, end])splice(start, [deleteCount][, value1, value2 ...])reverse()sort()indexOf(target[, from])lastIndexOf(target[, from])includes(target[, from])find(functi原创 2021-04-08 13:14:27 · 201 阅读 · 0 评论 -
理解 JavaScript 中的 call apply bind
理解 JavaScript 中的 call apply bind前言正文call/apply/bind 概述call/apply/bind 區別call/apply/bind 用途結語前言在 js 中,當我們調用一個函數,默認都是傳入兩個參數,第二個我們平常就常常在使用,也就是 arguments,其實就是我們可選傳入的參數,第一個則是隱式的 this。在默認情況下,this 都指向調用函數的對象本身,但是有時候我們有可能需要改變 this 指向,這時候就會用到 call, apply, bind。建原创 2021-03-27 13:15:30 · 87 阅读 · 2 评论 -
理解 JavaScript 的內存模型
理解 JavaScript 的內存模型前言正文JS 原始類型變量聲明與賦值JS 內存模型JS 非原始類型變量聲明與賦值let vs const結語前言作為一名程序員,無論用什麼語言,每天我們都在聲明變量,初始化變量,給變量重新賦值,這都是我們的日常工作。但是,我們真的知道 js 如何在內部,在底層處理這些事情嗎?還是用完就無所謂了。要成為一名好的程序員,這些還是都要知道的,這篇就來談談 js 的內存模型以及其工作方式。正文以下分四個部分來探討這個問題:JS 原始類型變量聲明與賦值JS 內存模型原创 2021-03-23 17:09:46 · 72 阅读 · 0 评论 -
ES6 數據結構 Map
ES6 數據結構 MapMap 結構的目的和基本用法Map 屬性和操作方法size 屬性set(key, value)get(key)has(key)delete(key)clear()遍歷方法與其他數據結構相互轉換Map => 數組數組 => MapMap => ObjectObject => MapMap => JSONJSON => MapWeakMapMap 結構的目的和基本用法js 中的對象(Object),本質上是鍵值對的集合,但是一般只能用字符串當作鍵,原创 2021-03-22 20:21:20 · 107 阅读 · 1 评论 -
ES6 數據結構 Set
ES6 數據結構 SetSet 基本用法Set 實例的屬性和方法操作方法遍歷方法WeakSetSet 基本用法ES6 提供了新的數據結構 Set,其實就跟一般的數組很像,只是 Set 中的成員值都是唯一的,沒有重複的值。Set 本身其實是一個構造函數,就是用於生成 Set 數據結構。let set = new Set()[2, 3, 5, 4, 2, 3].map(x => set.add(x))for(let i of set) { console.log(i)}// 2原创 2021-03-20 16:21:06 · 53 阅读 · 0 评论 -
ES6 JavaScript 重新認識 Promise
ES6 JavaScript 重新認識 Promise前言正文js 同步/異步場景描述PromisePromise 鏈式調用結語前言之前自己寫過一篇關於 Promise 的文章,有興趣可以看看 搞懂 ES6 JavaScript 中的 Promise,當時可能以為自己完全搞明白了,就又再去看了async/await 的東西。但是在實際業務中才發現真的還是不太懂,所以這次這篇文章要談得更深入一點,希望把這部分的知識點真正累積起來。這篇會很多的文字,因為參雜了很多個人的思考過程,所以也會比較難看一點。正文原创 2021-03-19 02:07:14 · 102 阅读 · 0 评论 -
關於 JavaScript 的 Symbol
關於 JavaScript 的 Symboljs 數據類型Symbol 設計初衷Symbol 使用遍歷屬性名getOwnPropertySymbols()Reflect.ownKeys()Symbol.for()Symbol.keyFor()js 數據類型在進入本篇的正題之前,先介紹下 js 的基本數據類型:StringObjectNumberBooleanNullUndefined這六種相信大家都不陌生,且也都知道各自的用途。但是 ES6 為我們帶來了一種全新的數據類型,Symbol原创 2021-03-11 17:44:34 · 62 阅读 · 0 评论 -
JavaScript 理解深拷貝以及淺拷貝
JavaScript 理解深拷貝以及淺拷貝前言正文基本數據類型 vs 引用數據類型實現深拷貝初級版中級板高級版結語前言之前寫過一篇關於 Java 中的深拷貝以及淺拷貝,如果有興趣的歡迎看看 Java 理解深拷貝以及淺拷貝,所幸就一鼓作氣,把 js 中的拷貝也一起學了,之後應該也會寫寫關於 C++ 的拷貝問題。正文如何區分深拷貝以及淺拷貝,其實很簡單,就是假設 B 是 A 的一個拷貝,當修改 A 時,看看 B 有沒有變,如果 B 變了就是淺拷貝,反之則為深拷貝。直接看代碼,舉個例子:let a =原创 2021-03-10 13:56:42 · 120 阅读 · 1 评论 -
關於 JavaScript 的 Prototype
關於 JavaScript 的 Prototype前言正文為甚麼要有 prototype?prototype 是甚麼?請勿修改原生的原型關於建構子原型串鏈(Prototype Chain)Q1 到底是誰的屬性?Q2 到底是誰的實例?Q3 原型鏈的終點?結語前言在 ES6 之前,js 並不像 C++, Java, 這些語言都有所謂的 class(類) 以及 instance(實例)的概念,但是 js 並不具有這樣表達面向對象的能力。而 js 的世界中,可以說是萬物都是函數,因此,我們就來談談到底如何使用原创 2021-02-24 15:41:56 · 64 阅读 · 0 评论 -
關於 JavaScript 的事件流
關於 JavaScript 的事件流前言正文甚麼是事件?甚麼是事件流?事件冒泡 vs 事件捕獲DOM事件分級DOM0 事件DOM2 事件結語前言再看這篇前,建議各位可以先去看看 關於 JavaScript 事件循環,當然對於已經了解的人們就不用啦!這篇要討論的是 js 的事件流。正文都知道, 當我們在網頁上做進行某些類型的操作,例如點擊,滑動等等,都會觸發一些相應的事件。也知道,整個網頁的構成其實會被瀏覽器解析成一棵 DOM 樹。而當一個節點產生一個事件時,該事件會在該節點與根結點之間按一定順序傳播原创 2021-02-07 23:26:33 · 2610 阅读 · 11 评论 -
搞懂 ES6 JavaScript 中的 Promise
搞懂 ES6 JavaScript 中的 Promise前言正文callbackcallback 是什麼callback hellpromisepromise 是甚麼promise 語法promise 的鏈式調用promise 與異步任務結語參考前言首先,這篇博客不會太短,因為要理解 js 的 promise 並不是特別容易的一件事情,在我個人看來,它算是 ES6 的一大進步,但也是學習上的一大門檻。ES6 promise 改善了以往使用 callback 所會造成的 “callback hell”,且原创 2020-06-14 10:05:56 · 205 阅读 · 0 评论 -
談談 JavaScript 中的閉包
談談 JavaScript 中的閉包前言正文先從作用域 (scope) 談起靜態作用域 (static scope)動態作用域 (dynamic scope)閉包 (closure)閉包是什麼?閉包有甚麼用?結語前言其實寫這篇關於 js 的閉包不是沒有原因的。原因就是本人之前想說就好玩去投了字節跳動前端開發的實習崗位,然後在面試時被問到 “你知道什麼是閉包嗎?”,“你能說說 js 的閉包嗎?”。當下實在覺得難受,只能說不知道,看來還是太菜了。所以馬上就趕緊來補補知識的盲區。正文先從作用域 (scop原创 2020-06-12 22:45:05 · 224 阅读 · 2 评论 -
JavaScript 中的 hoisting 到底是甚麼 ?
JavaScript 中的 hoisting 到底是甚麼 ?前言正文到底什麼是 hoisting?let const 與 hoisting為什麼要有 hoisting?hoisting 到底是怎麼運作的?結語前言寫這篇最大的一個原因在於,有一次聽到幾位大佬們在談關於 JS 中的 hoisting,也就是狀態提升,本人實在難以聽懂他們發表的看法,因此就開始上網搜搜相關文章。結果發現,這貌似不是一個一時片刻可以弄清楚的東西,於是著手開始這篇博客,希望能再攻破 JS 的又一個知識點。這篇文章不會太短,且字會較原创 2020-06-08 18:08:49 · 254 阅读 · 0 评论 -
ES6 JavaScript 箭頭函數以及對 this 的影響
ES6 JavaScript 箭頭函數以及對 this 的影響前言正文甚麼是箭頭函數?箭頭函數跟一般函數對 this 的區別例子1例子2例子3結語前言箭頭函數(Arrow function)可以說是 ES6 一個很重要的東西,所以覺得來整理一下加強這邊的印象還是挺有必要的。對於那些大神們見笑啦,但對於像我一樣的小白,一起看看吧!正文甚麼是箭頭函數?首先先來看以往的函數我們會怎麼寫:function sayHI() { console.log('hello')}sayHI()但是原创 2020-06-07 21:45:50 · 151 阅读 · 0 评论 -
關於 JavaScript 事件循環
關於 JavaScript 事件循環前言正文單線程的 js同步任務 vs 異步任務宏任務 vs 微任務結語前言會寫這篇是因為關於 js 的事件這一大板塊,實在是一個非常重要的知識點,無論是在面試,考試,或是實際代碼端中都無法避開,是一個非常重要卻又龐大的知識點。為了更清楚的搞明白,也為了日後方便自己查閱資料所需,就自己動手寫了這篇。在這篇中,著重於事件循環來講,其中又會再對不同知識點做更多講解。之後會對事件流再寫一篇。正文單線程的 js首先我們知道,js 是單線程語言,所謂單線程就是說 js 引擎原创 2021-02-06 00:31:00 · 323 阅读 · 3 评论 -
淺談 JavaScript 中的 this
搞清楚 JavaScript 中的 this前言正文Global Object (Window物件)Method in Object關於 JavaScript this 的一個 bug要怎麼解決這個 bug 呢?結語前言前幾天突然想起一直都沒真正搞明白 js 中的 this 到底是個什麼玩意,所幸開始看看文章,開始寫一篇自己的博客,還是希望可以一勞永逸吧,對於 this 這個東西。如果你和我一樣菜的話,那就一起看看這篇文章吧!正文Global Object (Window物件)馬上來看看我們在瀏覽原创 2020-06-06 22:39:41 · 217 阅读 · 0 评论 -
ES6 JavaScript 模板字符串與標籤模板
ES6 JavaScript 模板字符串與標籤模板前言正文模板字符串(template-literals)的基本使用在模板字符串中嵌入變數進階:標籤模板(tagged template)結語前言在ES6中多了一個很好用的模板字符串(template-literals)。我們常常會需要在js中「放入HTML」,或者要在一個字符串中嵌入一些變數,又或者,需要很長的字串,且包含換行。這時候,模板字符串會是很棒的工具!正文模板字符串(template-literals)的基本使用比起一般的字符串我們用的是原创 2020-06-05 22:40:35 · 189 阅读 · 0 评论