[toc]
#### 1.手寫 forEach
forEach((item, index, arr)),無返回值
```js
Array.prototype.mForEach = function (calback) {
for (let i = 0; i < this.length; i++) {
calback(this[i], i, this);
}
};
```
#### 2.手寫 map
map((item, index, arr)),返回新數組
```js
Array.prototype.mMap = function (callback) {
let res = [];
for (let i = 0; i < this.length; i++) {
res.push(callback(this[i], i, this)); // 每次都往 res push callback的返回值
}
return res;
};
```
#### 3.手寫filter
filter 返回所有滿足條件的值
```js
// filter
Array.prototype.mFilter = function (callback) {
let res = [];
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this) && res.push(this[i]);
}
return res;
};
```
#### 4.手寫every
全部滿足則返回true,有一項不滿足則return false,中斷遍歷
```js
Array.prototype.mEvery = function (callback) {
for (let i = 0; i < this.length; i++) {
if (!callback(this[i], i, this)) {
return false;
}
}
return true;
};
```
#### 5.手寫some
只要有一個為 true ,則返回 true,中斷
```js
Array.prototype.mSome = function (callback) {
for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) return true;
}
return false;
};
```
#### 6.手寫 find
找到第一位
```js
Array.prototype.mFind = function (callback) {
for (let i=0; i<this.length; i++) {
if(callback(this[i], i, this)) return this[i]
}
}
```
#### 7.手寫 findIndex
找到第一位的index
```js
Array.prototype.mFindIndex = function (callback) {
for (let i=0; i<this.length; i++) {
if(callback(this[i], i, this)) return i
}
}
```
#### 8.手寫reduce
cur 從第一項開始
每次將 callback 中的返回值作為下一次的 pre
如果傳了第二個參數,則 pre 從傳的參開始, cur 從第0項開始
如果沒傳第二個參數,則 pre 從第0項開始,cur 從第0項開始
返回最終的 pre
```js
Array.prototype.mReduce = function (callback, ...args) {
let start = 0
prev = null
if (args.length === 0) {
prev = this[0]
start = 1
} else {
pre = args[0]
}
for (let i=start; i<this.length; i++) {
prev = callback(prev, this[i], i, this)
}
return prev
}
```
#### 9.手寫fill
fill(value, start, end) 會修改原數組,也會返回新數組
如果end為負數,則表示倒數第幾位
```js
Array.prototype.mFill = function (initValue, start=0, end=this.length) {
// 從倒數開始
if (end < 0) {
end = this.length + end
}
for (let i=start; i<end; i++) {
this[i] = initValue
}
return this
}
```
#### 10.join
```js
Array.prototype.mJoin = function(s = ',') {
let str = ''
for(let i=0; i<this.length; i++) {
if (i === this.length - 1) {
str = str + this[i]
} else {
str = str + this[i] + s
}
}
return str
}
```
#### 11.拍平 flat
```js
let arr = [1, 2, [3, 4], [5, 6, [7, 8]]];
Array.prototype.mFlat = function (num = Infinity) {
let arr = this
let i = 0 // 展開層級
while(arr.some(item => Array.isArray(item))) {
arr = [].concat(...arr)
i++
if (i>=num) {
break
}
}
return arr
}
```
- JavaScript
- 1.數組
- 1.數組Api
- 2.判斷是否為數組
- 3.手寫forEach, map, filter, every, some, reduce
- 4.類數組轉化為數組
- 5.reduce實現compose函數
- 7.sort實現與排序
- 2.類型
- 1. let, const, var
- 1. Number 數字
- 3. Boolean 布爾值
- 4. undefined和null
- 2. String 字符串
- 1. 字符串方法
- 2. 操作字符串實例
- 3. startWith&字符串模板
- 5. 類型轉換
- 4.深拷貝與淺拷貝
- 7.Symbol類型
- typeof 和 instanceof
- Set
- Map
- 3.this,原型,原型鏈
- 1.this
- 2.手寫call, apply, bind
- 3.模擬new操作符
- 4.手寫Object.create
- 4.對象
- proxy代理
- defineProperty數據劫持
- 4.模塊化
- 5.http
- ECMAScript
- 0. 調試&兼容性&錯誤處理
- 3. 運算
- 4. 對象(三種引用類型&正則)
- 1. 數組
- 1. 數組的六種遍歷方法
- 2. 數組的增刪查改
- 3. 操作數組(展開、join、排序...)
- 4. 補充五種ES6方法
- 2. 函數
- 3. JSON
- 4. 正則
- 附:正則表達式特殊字符
- 5. 面向對象
- es6的繼承
- 6. 控制語句
- 7. ajax
- 8. promise
- 9. 閉包
- 1. 閉包產生三個相同隨機數
- 2. 閉包實現點贊
- 10.箭頭函數
- _isEmpty
- Object.assign(target, obj, obj)
- Math.ceil, round,
- DOM
- 3.1 節點
- 3.2 DOM操作元素
- 3.3 fragment DOM碎片
- 5. 事件
- BOM
- 1. window
- 2. navigation檢測訪問類型
- 3. screen窗口大小內容大小
- 4. history
- promise
- 1.promise使用
- 2.手寫promise
- 3.手寫promise.all
- 生成器generator
- 1.generator的使用
- 2.簡單實現generator
- 手寫async await
- async/await
- 5.防抖節流
- 難點深入
- 1. 瀏覽器&js特點
- 2. JS堆棧與深淺拷貝
- 3. 詳解a++和++a的區別
- 4. JS&jQuery獲取元素的方法
- 5. NodeList和HTMLCollection區別
- 6. var與let的區別
- 7. this 與 bind call apply
- 8. get與post請求的區別
- 9. 閉包
- Dom demo
- 1. JQuery--頁面點擊切換效果
- 2. JQuery-load實現頭尾封裝
- 3. JS--添加移除屬性名
- 4. jQuery--eq()與index()
- 5. table隔行變色
- 6. 改變函數this的指向
- 7. jQuery each遍歷
- ECMAScript demo
- 1. 斐波那契數列
- 2. 數組去重
- 3. 自調用函數生成隨機數
- 瀏覽器、DOM
- 1.從輸入url到頁面加載的全過程
- 2.http與https
- 3.v8垃圾回收機制
- 4.dom事件
- 5.跨域
- 6.強緩存和協商緩存
- 3.eventloop,宏任務和微任務
- 1.什么是任務
- 2.執行順序例題
- 3.執行順序例題,添加script
- 4.執行順序,多個宏任務
- 4.HTTP
- 1.經典五層模型
- 2.http發展歷史
- 3.http三次握手
- 4.URI,URL,URN
- 1.http協議
- 2.https
- http狀態碼
- 5.script標簽defer和async區別
- cookie
- connect: keep-alive