[TOC]
>[success] # js 數據類型
1. js 數據類型有8個依次是 **'Undefined','Null','Boolean','Number','String','Object', 'BigInt','Symbol'**
2. **'Undefined'** -- 當值未定義的時候,例如函數**沒有明確返回值**,和**聲明變量沒有賦值**
'**Boolean**' -- 布爾類型(**true 和 false**)
'**String**' -- 字符串類型(用**單引號**或者**雙引號**表示)
'**Number**' -- 數字類型(**整數和小數**)
'**BigInt**' -- 表示**任意精度格式的整數**
'**Null**' -- 空類型,值只有一個:**null**,一個對象指向**為空**,此時**可以賦值為null**
'**Object**' -- 對象
'**Symbol**' -- 用來創建**匿名的對象屬性**
3. **基本類型**有**7**個 **'string','number','bigint','boolean','null','undefined','symbol'**
4. 引用數據類型(Object)又分,**Array - 數組對象**、**RegExp - 正則對象**、**Date - 日期對象**、**Math - 數學函數**、**Function - 函數對象**,和 **基本類型包裝對象**(除了 null 和 undefined之外,所有基本類型都有其對應的包裝對象)**String** - 為**字符串**基本類型、**Number** - 為**數值**基本類型、**BigInt** 為**大整數**基本類型、**Boolean** 為**布爾**基本類型 **Symbol** 為**字面量**基本類型 等等
5. '**基礎類型**'存儲在**棧內存**,被引用或拷貝時,會創建**一個完全相等的變量**;
6. '**引用類型**'存儲在**堆內存**,存儲的**是地址**,多個引用**指向同一個地址**
7. **函數對象參數** 傳遞是對象在 **堆中的地址**
>[info] ## null 和 undefined
1. 首先當我們聲明一個對象的變量的時候,如果沒有給其賦值最好設置為'null',例如: `var myObject = null`
2. 當使用 雙等時候 :`console.log(null == undefined) ` 結果為 'true' 但不建議這么使用
3. null 是 JavaScript 保留**關鍵字**,而undefined是全局**對象的一個屬性**。也就是說,它是全局作用域的一個變量。`undefined`的最初值就是原始數據類型`undefined`,`undefined`是一個不能被配置(**non-configurable**),不能被重寫(**non-writable**)的屬性,也要注意'**undefined不是一個保留字**'
[undefined](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/undefined)
>[danger] ##### undefined
1. `Undefined `是一個很特殊的數據類型,它**只有一個值**,也就是 `undefined`
2. 產生`undefined`幾種情況
2.1. 引用已聲明但**未初始化的變量**;
2.2. 引用**未定義**的對象屬性;
2.3. 執行**無返回值**函數;
2.4. 執行 **void 表達式**;
2.5. 全局常量 **window.undefined 或 undefined**。
~~~
var a; // undefined
var o = {}
o.b // undefined
(() => {})() // undefined
void 0 // undefined
window.undefined // undefined
~~~
3. void 表達式來得到 undefined 值,因為這種方式既簡并且比undefined長度少,不需要引用額外變量和屬性
在三目運算的時候表示不進行任何操作 `x>0 && x<5 ? fn() : void 0;`
4. `undefined`是全局對象的一個屬性',因此在非全局作用域下可以重新賦值
~~~
// 打印 'foo string' PS:說明undefined的值和類型都已經改變
(function() {
var undefined = 'foo';
console.log(undefined, typeof undefined)
})()
~~~
5. `undefined in window // true`
>[danger] ##### 關于對 undefined 類型的判斷
~~~
1.下面的三種形式都可以對 'undefined' 做判斷,但是推薦type of 的形式,原因:第一種對空字符串
數值0,null等情況都會有不僅僅針對undefined,第二種用'==='但是如果變量沒定義會報錯,導致程序
停止運行
~~~
~~~
// 方式1
if(!x) {
...
}
// 方式2
if(x===undefined) {
...
}
// 方式2
if(typeof x === 'undefined') {
...
}
~~~
>[info] ## Boolean 類型
1. 布爾類型只有兩個字面值:`true` 和 `false`, 并且**區分大小寫**,只能**小寫**表示
2. 如果想將其他值轉成布爾類型使用`Boolean()` -- 或者使用`!!`
3. 有時候可以看到一些言論說數字 **1是true** 或者 **0是false** 實際只是在 **if 條件語句中** 這些值自動執行了`Boolean` 方法上的轉化
4. 除了 **undefined、 null、 false、 ''、 0(包括 +0,-0)、 NaN** 轉換出來是 `false`,其他都是 `true`
>[danger] ##### 常見的類型轉化成boolean
| 數據類型 |轉化為true |轉化成false|
| --- | --- | --- |
| Boolean |true |false |
| String|任何非空字符|字符串length等于0(空字符)|
| Number |非0的數字(Infinity)包括無窮大 |0 和 NaN|
| Object |任何對象包括 {} 對象中沒值 /new Boolean(false) |null |
| Undefined |n/a(不使用的意思)|undefined |
~~~
console.log(Boolean(Infinity)) // true
~~~
>[info] ## Number 類型
1. 二進制:遇到2進一
2. 八進制:遇到8進一
3. 十進制:遇到10進一
4. 十六進制:遇到f進一
5. 數字類型分整數類型和浮點數值類型
6. NaN 表示非數值類型
7. 使用`Infinity / -Infinity`表示**無窮大/無窮小**
8. js 表示數字的 **最大值/最小值** 使用:`MAX_VALUE/MIN_VALUE`例如 `console.log(Number.MAX_VALUE)`
[toLocaleString 有意思](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
>[danger] ##### 進制問題
1. 十進制就是正常數字表示
2. 八進制的第一位必須是0,然后數字順序是(**0-7**),超出0-7前導0被忽略然后展示數字
3. 十六進制必須是**0x**開頭,后面跟著(**0-9**)及(**A-F**),字母大小寫不區分,超出同理八進制
4. 計算的時候會自動將**八進制和十六進制轉換成十進制**
~~~
var intNum = 10; // 十進制
var octalNumber1 = 070; // 八進制
var octalNumber2 = 080; // 錯誤的八進制只能在0-7中
var hexNumber1 = 0xA; // 十六進制
console.log(intNum, octalNumber1, octalNumber2, hexNumber1)
打印結果:
10 56 80 10
~~~
* 進制計算
~~~
var octalNumber1 = 070; // 八進制
var hexNumber1 = 0xA; // 十六進制
console.log(hexNumber1+octalNumber1) // 八進制56 + 十六進制10
打印結果:
66
~~~
>[danger] ##### 浮點數值
1. **浮點值內存空間是整數值的兩**倍,因此在特定情況下浮點值回被轉成整數,例如:`var a = 1.0` 打印的值就是**1**
2. 可以使用科學計數法來表示一些數值,表現形式就是**e前面的數值乘上后面10的次冪**,例如:`var a = 3.12e5` 相當于 3.12 * 10^5 因此 a 的結果是**312000**
3. 想用科學計數法表示小數則可以寫成:`var a = 3.12e-5` 打印結果**0.0000312**
4. 不要用**一個小數去求證一個小數** 例如 `0.1+0.2` 問題
>[danger] NaN -- 非數值(Not a Number)
1. `NaN` 不予任何值相等包括本身例如:`alert(NaN == NaN) // false`
2. 任何數值**除以非數值**都會返回`NaN`
3. 想判斷當前是不是數字用`isNaN() `方法,不是數字返回`true`,是數字返回`false`,這種判斷不準確因為`isNaN `接受的參數其實**是數字**,當然如果你傳入了其他類型參數你發現他依然可以執行,在規范中的解釋是'**Let num be ToNumber(number)**.' [tonumber參考](https://262.ecma-international.org/6.0/#sec-tonumber) 和 [isnan參考](https://262.ecma-international.org/6.0/#sec-isnan-number)
4. `isNaN()` 也可以驗證對象,但是會先調用對象的`valueOf()` 看返回的是不是一個數字,如果對象沒有這個方法,則調用`toString()` 方法,如果都沒有則為`true`,反之根據剛才兩方法的返回值來做判斷
5. 判斷一個值是不是數字`typeof value === 'number' && !isNaN(value)` ,因為 **NaN 的typeof 是number**
~~~
console.log(isNaN(NaN)) // true
console.log(isNaN('w')) // true
console.log(isNaN(10)) // false
console.log(isNaN('10')) // false
console.log(isNaN(true)) // false(true會被轉成1)
console.log(isNaN([]) )// false
console.log(isNaN([123]) )// false
console.log(isNaN(['123']))// false
~~~
>[danger] ##### Number() 方法
~~~
1.一般用于瀏覽器的隱式轉換中都會默認調用'Number([val])'例如下面幾種情況
1.1.數學運算,舉個例子 1+1 1-1,1-'1' 這一類的計算都是Number數字隱士轉換,當然相對數字加字符例如1+'1'
結果為字符串'11' 并不是數字的轉換,這類最通俗的記法加號可能是數學計算可能是字符串拼接,當數字和字符串
的時候最簡單方式就是統一作為拼接處理減少區分類型產生的可能性,相對來說減號只能做數學算法因此是轉換
Number 計算
1.2.isNaN檢測,isNaN 接受的參數其實是數字,在規范中的解釋是'Let num be ToNumber(number).',這也好解釋
為什么isNaN(true) 為false 原本認為true 作為Boolean值應該是在isNaN下是true才對但實際isNaN(Number(true)),
Number(true) 轉換之后為 1 因此變成了isNaN(1) 因此為false
1.3.==比較
~~~
~~~
console.log(Number(070))
console.log(Number(011))
console.log(Number('070'))
console.log(Number(NaN))
console.log(Number("sss"))
console.log(Number(undefined))
console.log(Number(null))
console.log(Number(''))
console.log(Number('0xf'))
~~~
~~~
56
9
70
NaN
NaN
NaN
0
0
15
~~~
* 強制轉換規則
~~~
1.隱士轉換都是調用了 Number() 方法,因此只要知道Number() 針對其他類型的轉換規則,即可針對這種得到轉換
結果
1.1.如果是字符串,遵循以下規則:如果字符串中只包含數字(或者是 0X / 0x 開頭的十六進制數字字符串,
允許包含正負號),則將其轉換為十進制;如果字符串中包含有效的浮點格式,將其轉換為浮點數值;
如果是空字符串,將其轉換為 0;如果不是以上格式的字符串,均返回 NaN;
1.2.如果是布爾值,true 和 false 分別被轉換為 1 和 0;
1.3.如果是 null,返回 0,如果是 undefined,返回 NaN;
1.4.Symbol無法轉換為數字,會報錯:Uncaught TypeError: Cannot convert a Symbol value to a number
1.5.BigInt去除'n'(超過安全數字的,會按照科學計數法處理)
1.6.把對象轉換為數字:
先調用對象的 'Symbol.toPrimitive' 這個方法,如果不存在這個方法
再調用對象的 'valueOf' 獲取原始值,如果獲取的值不是原始值
再調用對象的 'toString' 把其變為字符串
最后再把字符串基于'Number'方法轉換為數字
注對'Symbol.toPrimitive' 說明
xxx[Symbol.toPrimitive](hint){}
// hint:'number' / 'string' / 'default'
// + number:獲取當前對象的數字類型的原始值
// + string:獲取當前對象的字符串類型的原始值
// + default:根據操作獲取數字或者字符串類型的原始值
~~~
* 舉例說明1.6[Symbol.toPrimitive](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toPrimitive)
~~~
1.轉換 {} 為 Number ,const obj = {} ,console.log(Number(obj)) 結果是NaN
1.1.先調用'Symbol.toPrimitive'console.log(obj[Symbol.toPrimitive]) 結果是undefined
1.2.調用console.log(obj.valueOf()) 結果是 {}
1.3.調用 console.log(obj.toString()) 結果'[object Object]' 任何非數字字符串轉換結果都是NaN,即相當于
實際執行為Number('[object Object]')
2.轉換數組為Number 為例依舊是經過下面幾次得到結果
const arr = [10]
console.log(arr[Symbol.toPrimitive]); // undefined
console.log(arr.valueOf()); // [ 10 ]
console.log(arr.toString()); // "10"
console.log(Number("10")); // 10
// --------------分割 --------------------------------
const arr = [10, 20]
console.log(arr[Symbol.toPrimitive]) // undefined
console.log(arr.valueOf()) // [ 10, 20 ]
console.log(arr.toString()) // "10,20"
console.log(Number('10,20')) // NaN
3.轉換Date,當先查是否有'Symbol.toPrimitive' 屬性方法此時發現有就開始調用,調用時候傳參,如果想轉換
的為number類型,此時傳參為'number' 即可
const date = new Date(2015, 1, 1)
console.log(date[Symbol.toPrimitive]) // 存在這個屬性
console.log(date[Symbol.toPrimitive]('number')) // 1422720000000
4.自定義對象重寫'Symbol.toPrimitive' 方法
let obj = {
[Symbol.toPrimitive](hint) {
let result;
switch (hint) {
case 'number':
result = 0;
break;
case 'string':
result = JSON.stringify(obj);
break;
default:
result = "";
}
return result;
}
};
~~~
>[danger] ##### parseInt([val],[radix])
~~~
1.如果是整數正常解析
2.[val]值必須是一個字符串,如果不是則先轉換為字符串;然后從字符串左側第一個字符開始找,把找到的有效數字字
符最后轉換為數字「一個都沒找到就是NaN」;遇到一個非有效數字字符,不論后面是否還有有效數字字符,都不再查
找了
3.[radix]的范圍:2~36 不在這個范圍內,最后結果都是NaN
[radix]不寫或者寫零:默認值是10「特殊:如果[val]字符串是以0x開始的,默認值是16」
4.根據上面的結論所以可以得出為什么 'parseInt' 為什么可以把小數轉成整數,例
如1.1,從1開始找到后面發現點不是數字所以后面全丟棄得到 1
5.字符串的情況下,十六進制是不識別的,八進制會把前綴0舍去,要注意和'Number'
不同null 和 空字符都是 NaN
6.想讓parseInt 識別十六進制 和八進制字符串可以這么寫parseInt('AF',16) 第二個參數表示
幾進制
~~~
~~~
console.log(parseInt(070)) // 56
console.log(parseInt('-070 00')) // -70
console.log(parseInt(null)) // NaN
console.log(parseInt('AF')) // NaN
console.log(parseInt('AF',16)) // 175
console.log(parseInt('070',8)) // 56
console.log(parseInt("g10")); //NaN
~~~
>[danger] ##### parseFloat([val])
~~~
1.跟parseInt() 類似,只不過解釋所有里面浮點類型,不同點沒有第二個參數,無法把十六進制
和八進制字符串轉換,十六進制字符串統一被轉成 0
~~~
~~~
console.log(parseFloat("10"));//10
console.log(parseFloat("10afrswfdsf"));//10
console.log(parseFloat("g10"));//NaN
console.log(parseFloat("1fds0"));//1
console.log(parseFloat("10.98"));//10.98
console.log(parseFloat("10.98fdsfd"));//10.98
// -----------------------
// 在字符串中,找到所有符合二進制的內容 -> '10' ,因為3不是二進制中的因此到3截至了
// 把'10'看做二進制,轉換為十進制? 如何把其它機制的值轉換為十進制 “按權展開求和”
// 個位數權重0 十位數權重1 百位數權重2 依次類推 現在10 其中十位是 1 十位的權重為1,對應的公式
// 1*2^1 + 0*2^0 => 2 2的指數對應二進制當前位置1和0 前面乘法的是對應權重
console.log(parseInt('1030px', 2));
// ---------------------
let arr = [27.2, 0, '0013', '14px', 123];
// 等到結果原因要知道map 數組回調方法是可接受三個參數,parseInt 默認是兩個參數此時其實是
// parseInt(number,index) 因此會對應位置進制轉換
arr = arr.map(parseInt); // ?[27, NaN, 1, 1, 27]
~~~
>[danger] ##### 判斷是否為整數 -- Number.isInteger()
~~~
1.'Number.isInteger()' 方法用來判斷給定的參數是否為整數
~~~
* 舉個例子
~~~
Number.isInteger(0); // true
Number.isInteger(1); // true
Number.isInteger(-100000); // true
Number.isInteger(0.1); // false
Number.isInteger(Math.PI); // false
~~~
>[danger] ##### [關于trunc方法說明](https://blog.csdn.net/qq_37016928/article/details/80667247)重點
>[danger] ##### 數字類型轉化 總結
~~~
1.總結:想要轉整數用parseInt(),想要轉小數用parseFloat()想要轉數字:Number();
要比上面的兩種方式嚴格
~~~
>[info] ## 字符串String
1. toString()可以將所有的的數據都轉換為字符串,調用自身 `toString` 方法,但是要排除 `null` 和 `undefined`,也就是`false` 和 `true` 例如 `true.toString()`,包含在內,也可以做進制轉換例如:
~~~
二進制:.toString(2);
八進制:.toString(8);
十進制:.toString(10);
十六進制:.toString(16);
~~~
2. `String()` 可以將 `null` 和 `undefined`轉換為字符串,但是**沒法轉進制字符串轉換規則**
2.1. 基本類型拿字符串包起來,舉個例子`String(true)` => 結果 `true`
2.2. 對象則是調用 **Symbol.toPrimitive -> valueOf -> toString**, `Object.prototype.toString` 舉個例子`String(new Object)` => `(new Object).toString()` =>打印結果 **[object Object]**
>[info] ## Sysmbol 唯一值類型
1. ES6 引入了一種新的原始數據類型 `Symbol`,表示**獨一無二**的值。它是 JavaScript 語言的第七種數據類型
2. `Symbol`函數前**不能使用new命令**,否則會報錯。這是因為生成的 **Symbol 是一個原始類型的值,不是對象**。也就是說,由于 `Symbol `值不是對象,所以**不能添加屬性**。基本上,它是**一種類似于字符串的數據類型**。
3. `Symbol`函數可以接受一個字符串作為參數,表示對 Symbol 實例的描述,主要是為了在控制臺顯示,或者轉為字符串時,比較容易區分。
4. 很多JS底層的處理機制,就是基于這些屬性方法實現的
`Symbol.hasInstance\Symbol.toStringTag\Symbol.toPrimitive\Symbol.iterator...`
>[danger] ##### 給對象屬性設置sysmbol 值
~~~
const obj = {
name: 'w',
[Symbol()]: 'symbol',
}
// 打印是undefined ,原因是因為當前打印的symbol key
// 和聲明的symbol 毫無關系
console.log(obj[Symbol()])
// ---------------想獲取方法一------------------
const key = Symbol()
const obj = {
name: 'w',
[key]: 'symbol',
}
// 想獲取symbol 可以將symbol 作為統一的變量提取
console.log(obj[key])
// ---------------想獲取方法二------------------
const obj = {
name: 'w',
[key]: 'symbol',
}
let symbolKeys = Object.getOwnPropertySymbols(obj); //獲取當前對象所有Symbol類型的私有屬性,結果數組
symbolKeys.forEach(key => {
console.log(obj[key]);
});
~~~
>[info] ## BigInt
JS中在進行數學運算的時候,如果計算的數值超過**最大/最小安全數字**,計算出來的結果很可能是**不準確**,舉個例子查看數字最大安全值`Number.MAX_SAFE_INTEGER`和 最小安全值的方法`Number.MIN_SAFE_INTEGER`
~~~
const maxNumber = Number.MAX_SAFE_INTEGER
console.log(maxNumber)
const add = maxNumber + 10
console.log(add)
~~~
* 上面的打印結果在我的電腦如下:
~~~
9007199254740991
9007199254741000
~~~
可以發現當**超過了最大精度時候計算開始出現錯誤**,為了避免這種事情發生使用`BigInt`大數類型:**數字后面加個n**即使大數類型
~~~
const add = BigInt(maxNumber) + 10n
console.log(add)
~~~
打印結果**9007199254741001n**當在數字后面加n時候即轉換為大數類型
實際開發過程服務器端數據庫存儲,是有**longInt**類型,服務器返回給客戶端的**值超過安全數字**的一般會將數字返回**字符串作為參數返回**,但是如果前端想要**計算**此時就不能是單純轉換為數字類,需要`BigInt`,當計算完成后在將轉**換成字符串給到后臺**
- HTTP -- 初始
- HTTP -- 什么是HTTP
- HTTP -- 相關技術
- HTTP -- 相關的協議
- Emmet -- 語法
- HTML -- 補充
- iframe -- 補充
- checkbox 和 radio 細節
- form -- 補充
- html -- html5
- html -- 視頻音頻
- html -- html5 data-* 全局屬性
- css -- 重學
- css -- 單位
- css 知識補充 -- 導入
- css -- 顏色補充
- css --繼承性
- css - 元素隱藏
- 標簽元素--塊/行內/行內塊
- css -- 盒子陰影 – 在線查看
- css -邊框圖形
- css -- Web字體
- css -- 精靈圖
- css -- 屬性補充
- text-align -- 內容
- line-height -- 行高
- 文字換行
- overflow-溢出
- css -- 選擇器
- css -- 偽元素
- css -- 偽類選擇器
- 設置高度寬度 和 盒子模型
- css -- 文字溢出
- css -- white-space / text-overflow
- css -- 定位
- css -- 浮動
- 浮動 -- 案例
- flex -- 布局
- flex -- 解決等距布局
- flex -- 內容居中
- flex -- 導航欄
- Grid -- 布局
- css -- transform 形變
- css -- 垂直水平居中
- css -- transition 動畫
- css -- Animation 動畫
- css -- vertical-align
- css -- 函數
- css -- 媒體查詢
- 重學案例
- 重新 -- 鼠標常見樣式
- 重學 -- 透明邊框background-clip
- 重學 -- 多重邊框box-shadow
- css -- 預處理器
- 移動端適配
- 前端結構目錄說明
- 瀏覽器 加載過程
- 回流和重繪
- 雜七雜八 -- 小工具方法
- npm包比較網站
- IP定位
- 通過useragent獲取手機品牌型號
- 自啟本地服務
- BOM -- 常用知識點記錄
- window -- 認識
- windows -- 大小滾動
- BOM -- Location
- BOM -- URLSearchParams
- BOM -- history
- BOM -- navigator 和 screen
- 前端存儲 -- Cookie、LocalStorage、IndexedDB
- DOM -- 知識總結
- DOM -- 獲取元素
- DOM -- 節點屬性
- DOM -- 元素屬性
- 獲取元素style的讀取 - getComputedStyle
- DOM -- 元素的操作
- DOM -- 元素大小和滾動
- DOM -- 小練習
- Event -- 事件
- event -- 事件對象
- event -- 案例
- event -- 做一個樹
- js -- ajax
- 封裝一個ajax
- ajax -- 文件上傳
- 倒計時搶購案例
- axios -- 封裝
- 跨域
- 前端 -- Fetch API
- js -- 基礎篇
- 數據類型
- 數據類型檢測
- 類型小知識
- 原始類型的包裝類
- 類型轉換
- delete -- 運算符
- Date -- 對象
- 函數參數傳遞
- 對象某個屬性不存時候判斷
- 操作符
- 函數變量傳值
- 訪問對象通過點和[]
- 和if等同的一些寫法
- for -- 執行順序
- JS -- 執行過程
- JS中的堆(Heap)棧(Stack)內存
- JS -- 執行上下文
- Js -- ES3 和 ES5+ 后
- let const var
- ES3 -- 案例思考
- 閉包概念
- 淺拷貝和深拷貝
- JS -- 嚴格模式
- js -- 數組篇
- Array -- 數組基礎
- Array -- 小常識檢測數組
- Array -- 小技巧將數組轉成字符串
- Array -- 自帶方法
- Array -- 數組插入總結
- Array -- every是否都符合巧用
- js--Function篇
- Function -- length 屬性
- Function -- arguments
- Function -- 也是對象
- Function -- new Function 創建方法
- Function -- 函數作為返回值
- Function -- callee
- 匿名函數
- Function -- 閉包
- 閉包內存查看
- 閉包 -- 使用的案例
- 閉包 -- 使用的案例
- 箭頭函數不適用場景
- js -- this、call、apply
- this -- 指向
- call、apply -- 講解
- 總結 -- this
- 思考題
- Object -- 數據屬性/訪問器屬性
- 新增關于對象方法
- js -- 面向對象
- 對象到底是什么
- 到底什么是js的對象
- js --prototype、__proto__與constructor 1
- JS es5繼承
- JS 中的原型繼承說明
- JS -- Object是所有類的父類
- 總結
- Object -- 函數構造函數
- Object -- 手動實現一個new
- js -- 函數式編程(目前只是了解后面需要更多時間深入)
- 了解 -- 高階函數
- 了解 -- 純函數
- 了解 -- 函數柯里化
- 柯里化 -- 知識點
- 了解 -- 函數組合
- 了解 -- 函子
- js--小知識點
- url -- 將get請求連接參數變成對象
- event -- 一個函數處理多個事件
- try -- 處理異常
- Error -- 前段報錯信息傳給后臺
- JSON -- 序列化
- return -- 返回true和false
- for -- 循環里初始化變量
- 命名 -- get和set怎么命名
- 鏈式調用
- 利用遞歸代替循環思路
- JS -- 技巧篇
- 技巧 -- 代碼規范
- 技巧 -- 惰性載入函數
- 技巧 -- 防抖函數
- 技巧 -- 節流函數
- 插入補充(防抖/節流)
- 技巧 -- 定時器的使用
- 技巧 -- 回調函數
- 技巧 -- 分時函數
- 技巧 -- 除了return 我怎么跳出多層循環
- 技巧 -- switch 還是 if-else?
- 技巧 -- 將字符串轉成對象
- 技巧 -- 函數轉換
- 技巧 -- 工作記錄數組對象中相同項
- JS -- 數組小文章總結
- 數組類型判斷
- includes 和 indexOf
- for ... in,for ... of和forEach之間有什么區別
- map、filter、reduce、find 四種方法
- 多種形式處理數組思考方式
- for...in 和 Object.keys
- 各種知識點集合文章
- 創建數組 -- 總結
- 數組去重 -- 總結
- 獲取數組中不重復的元素 -- 總結
- 比較兩個數組元素相同 -- 總結
- 出現頻率最高的元素 -- 總結
- 兩數組交集 -- 總結
- 兩數組差集 -- 總結
- 工具方法 - 總結
- 扁平化數組
- JS -- 數組技巧篇 30s
- 30s Array -- 創建數組篇(一)
- 30s Array --過濾(查詢)篇章(一)
- 30s Array --過濾篇章(二)
- 30s Array -- 新增篇(一)
- 30s Array--比較篇(一)
- 30s Array -- 分組篇(一)
- 30 Array -- 刪除篇(一)
- 30s Array-- 其他篇(一)
- 30s Array -- 個人感覺不常用篇章
- JS -- 對象技巧篇30s
- 30s Object -- 查(一)
- 30s Object -- 增(一)
- 30s Object -- 工具類型小方法
- 30s Object -- 跳過沒看系列
- ES -- 新特性
- 變量篇章
- 變量 -- let/const/var聲明
- 變量 -- 詞法聲明和變量聲明
- 變量 -- var x = y = 100
- 變量 -- a.x = a = {n:2}
- 帶標簽的模板字符串
- 函數篇章
- 函數 -- 參數篇章
- 函數 -- 只能通過new創建實例
- 函數 -- 箭頭函數
- 函數 -- 尾調優化
- 對象篇章
- 對象 -- 字面量寫法的優化/新增方法
- 賦值篇章
- 解構賦值 -- 簡單概念
- 解構賦值 -- 對象解構
- 解構賦值 -- 數組解構
- 解構賦值 -- 函數參數
- Symbol 屬性
- Set 和 Map
- Set -- 去重/交、并、差集
- Map -- 集合
- 類class篇章
- ES6 和 ES5 的寫法比較
- es6 -- mixin函數繼承
- es6 -- 創建一個接口
- ES5 VS ES6 -- class 編譯
- 數組新功能
- 創建/轉換 -- 數組
- 迭代器和生成器
- es6 -- 迭代器
- es6 -- 生成器
- for-of 循環的是什么
- 做一個異步執行器
- 代理和反射
- Proxy -- 使用
- Reflect -- 使用
- Proxy 和 Reflect 結合使用
- 運算符 -- 展開運算符
- ES7 -- 新特性
- ES8 -- 新特性
- ES9 -- 新特性
- ES10 -- 新特性
- ES11 -- 新特性
- ES12 -- 新特性
- ES13 -- 新特性
- ES6 和 ES8 的異步
- js -- 異步、同步、阻塞、非阻塞
- js -- 如何做到異步的
- js -- 引擎線程,GUI渲染線程,瀏覽器事件觸發線程
- js -- 如何通過事件循環運行異步
- js -- 誤區任務回調就是異步
- js -- 宏任務和微任務
- 參考文章推薦閱讀
- js -- callback 還是 promise
- js -- Promise 初識
- js -- 自己實現一個Promise
- js -- Promise 更多用法
- 再來看setTimeout 和for
- js -- ES8 異步 async await
- js -- 紅綠燈問題
- js -- 倒計時
- 異步圖片預加載
- 手動觸發異步
- 異步題
- JS -- 模塊化
- CommonJS -- 在node服務器端
- AMD 模塊化規范
- ES Modules
- ES Modules -- 使用特點
- import 和 export 使用
- export 和 import -- 執行
- 其他用法
- systemjs
- 對比區別
- 使用babel 或webpack進行模塊打包
- Jq -- 細節
- JS -- 性能優化
- 圖片預加載
- js -- 正則
- 設計原則和編程技巧
- 設計原則 -- 單一職責
- js -- 設計模式
- 設計模式 -- 簡單理解
- 一、鴨子類型
- 1.1 多態概念
- 1.2 小章節記錄 -- 封裝
- 1.3.多態和鴨子
- 設計模式 -- 單例模式(透明、惰性)
- 單例模式 -- js單例和惰性單例
- ES6 -- 寫單例模式
- 設計模式 -- 策略模式
- 策略模式 -- 表單驗證
- 策略模式 -- 表單驗證多規則
- 策略模式和多態區別
- 設計模式 -- 代理模式(代理被代理相同方法)
- 代理模式 -- 分類
- 代理模式 -- 總結
- 設計模式 -- 迭代器模式
- 設計模式 -- 觀察者(發布訂閱)模式
- 觀察者 和 發布訂閱區別
- 發布訂閱模式 -- 現在通用模型
- 發布訂閱模式 -- 書中實際案例
- 發布訂閱模式--全局發布訂閱對象
- 發布訂閱模式 -- vue
- 設計模式 -- 命令模式(對象方法拆分指令)
- 命令模式 -- js 自帶
- 命令模式 -- 撤銷和重做
- 命令模式 -- 命令和策略的區別
- 設計模式 -- 組合模式(樹)
- 組合模式 -- 拆分了解
- 組合模式 -- java角度
- 組合模式 -- 書中案例掃描文件夾
- 組合模式 -- 注意點
- 組合模式 -- 引用父對象(書中案例)
- 組合模式 -- 小的案例
- 組合模式 -- 總結
- 設計模式 -- 模板方法(抽象類繼承)
- 模板方法 -- 前端角度思考
- 模板方法 -- java 思考方式
- 模板方法 -- js沒有抽象類
- 模板方法 -- 鉤子方法
- 模板方法 -- 用js方式來實現
- 設計模式 -- 享元模式
- 享元、單例、對象池
- 享元模式 -- 前端角度思考
- 享元模式 -- 代碼案例
- 享元模式 -- 適用和內外部狀態
- 額外擴展 -- 對象池
- 設計模式 -- 職責鏈模式
- 職責鏈 -- 前端角度
- 職責鏈和策略
- 職責鏈 -- 異步的職責鏈
- 職責鏈 -- AOP
- 職責鏈 -- 改造迭代器模式的代碼
- 設計模式 -- 中介者模式
- 中介者模式 -- 前端角度(一)
- 中介者模式 -- 前端角度(二)
- 中介者模式 -- 前端角度(三)
- 中介者模式 -- 總結
- 設計模式 -- 裝飾者模式
- 裝飾者模式 -- es5 解決方案
- 裝飾器模式 -- 和代理模式區別
- 設計模式 -- 狀態模式
- 狀態模式 -- 前端思想
- 狀態模式 -- 文件上傳案例
- 狀態模式 -- 和策略模式的區別
- 設計模式 -- 適配器模式
- js -- 代碼重構
- 重構 -- 方法封裝
- 重構 -- 抽象函數
- 高階函數 -- 范式
- 狀態管理方案
- Node -- 學習篇
- Node -- 服務端運行的js
- node -- Global(全局成員)
- node -- Buffer緩沖器
- node -- 路徑操作
- node -- 文件的讀寫
- node -- 目錄操作
- node -- HTTP
- HTTP -- 響應頭常見類型
- HTTP -- 處理Get
- HTTP -- 處理Post
- HTTP -- 簡單的案例
- Express
- Express -- 中間件
- Express -- 處理post/get
- Express -- 模板引擎
- Express -- 簡單案例和目錄搭建
- Express -- 數據庫service.js
- Express -- json/url
- Express -- 配合數據庫
- 配合數據庫 -- 簡單的登錄
- npm -- js包管理
- npm -- 淘寶鏡像
- nrm -- 更多鏡像的選擇
- yarn -- 包管理
- yarn -- 清理緩存
- WebPack -- 模塊化開發
- webPack -- 安裝、使用、打包
- webPack -- 使用配置文件
- 延伸 -- base64圖片優劣
- webPack -- 完整配置