博客 / 列表

ohoherror - 查找對象屬性的四種方法

1.Object.keys(..)會返回一個數組,包含所有可枚舉屬性( enumerable: true) 2.Object.getOwnPropertyNames(...)會返回一個數組,包含所有屬性,無論它們是否可枚舉 注:Object.keys(..)和Object.getOwnPropertyNames(..)都只會查找對象直接包含的屬性。 3.in操作符會檢查屬性是否在

in , object , 原型鏈 , 前端

ohoherror - CommonJS和ESM (ES6模塊)的區別

CommonJS和ESM (ES6模塊)都是JavaScript模塊標準,但是它們有一些區別,主要包括以下幾個方面: 語法差異:CommonJS使用require語法引入模塊,而ESM使用import語法引入模塊。 加載方式:CommonJS使用同步加載方式,即遇到require就執行代碼,並等待結果返回後再繼續執行;而ESM使用異步加載方式,它是通過Promise的方式異步加載模塊,遇到i

commonjs , 前端

ohoherror - async/await實現原理

async/await是ES2017帶來的異步編程語法糖,實現了讓異步代碼看起來像同步代碼的效果。 async/await 的本質是基於Promise,它並不是一種新的異步處理方式,而是Promise 的一種新的語法封裝升級。 下面是 async/await 的實現原理: async 函數本質上是一個 Generator 函數,返回一個 Promise 對象。 await 表達式本質上是一個 Pr

es7 , async , 前端

ohoherror - jest +ts +esm

Jest 是當下最主流的前端測試框架 首先初始化ts環境 yarn add typescript --dev npx tsc --init 第二步:安裝ts下的jest yarn add jest @types/jest --dev 第三步:新建tests文件夾 tests/index.spec.ts it('init',()={ expect(true).toB

jest , typescript , babel , 前端

ohoherror - 數組轉化為樹

將一個數組轉換為一棵樹可以通過遞歸實現。假設我們有一個包含父節點與子節點關係的數組,如下所示: const arr = [ { id: 1, name: 'A', parent_id: null }, { id: 2, name: 'B', parent_id: 1 }, { id: 3, name: 'C', parent_id: 2 }, { id: 4, na

數組 , 樹形結構 , 前端 , Javascript

ohoherror - 數組倒序有哪些方法

倒序排列數組的方法如下: 使用reverse()方法: const arr = [1, 2, 3, 4, 5]; const reversedArr = arr.reverse(); console.log(reversedArr); //[5, 4, 3, 2, 1] 使用for循環和unshift()方法: const arr = [1, 2, 3, 4, 5]; const re

數組 , 前端 , Javascript

ohoherror - useEffect底層實現原理,useEffect和useLayoutEffect的區別

useEffect鏈表 通過MountEffect方法把callback/依賴項加入到鏈表中 視圖更新完畢,基於UpdateEffect方法通過effect鏈表中的callback按照要求執行 useEffect和useLayoutEffect 組件渲染過程 1.基於react-app編譯,基於babel-preset-react-app把jsx編譯成createElement

react , hook , 前端

ohoherror - 遍歷數組的for..of循環語法

for..of循環首先會向被訪問對象請求一個迭代器對象,然後通過調用迭代器對象的next()方法來遍歷所有返回值。數組有內置的@@iterator,因此for..of可以直接應用在數組上。我們使用內置的@@iterator來手動遍歷數組,看看它是怎麼工作的: var myArray = [ 1, 2, 3 ]; var it = myArray[Symbol.ite

for循環 , 前端

ohoherror - forEach和map的異同

forEach和map都是用於迭代集合或數組的方法,但是forEach和map的主要區別在於它們的返回值和使用方式。 不同點: forEach方法是沒有返回值的,它只是對集合或數組進行迭代和操作。 map方法會返回一個新的數組,該數組包含通過對原始數組中的每個元素應用一個函數處理後得到的結果。 相同點: 兩者都可以用於遍歷集合或數組中的每個元素進行操作。 兩者都可以通過傳遞一個回調函

循環 , foreach , map , 前端 , Javascript

ohoherror - React的渲染原理

React的渲染原理可以用Virtual DOM和Reconciliation兩個概念來解釋: 1. Virtual DOM Virtual DOM是React用來描述真實DOM樹的一個JS對象樹,其結構和真實的DOM樹是一一對應的,通過Virtual DOM可以方便地操作和管理DOM樹,提高了組件的渲染效率。 它的基本原理是在組件狀態(state)發生變化時,React不直接操作真實的DOM樹

react , virtual-dom , 前端

ohoherror - componentWillUpdate可以直接修改state的值嗎

不應該在 componentWillUpdate 生命週期方法中直接修改 state 的值,因為這樣做可能導致錯誤。 在 componentWillUpdate 生命週期方法中,仍然可以訪問當前組件的 state 和 props,但是更改它們的值可能會導致不可預見的結果。這是因為該生命週期方法觸發時,組件的狀態正在被更新,如果在此時更改狀態會導致組件進入無限循環的狀態。 如果需要更改狀態,建議使用

react , 生命週期 , 前端

ohoherror - react 常用的hook

react最常用的hooks有,useState,useEffect,useMemo,useCallback 首先我們來先聊useState,設置和改變state,代替原來的state和setState import { useState } from "react"; import './index.css' export default () = { const [ count,

react , hooks , 前端