[toc] #### 1.js數據類型，區別 1.基本數據類型 + string + number + null + undefined + boolean + Symbol ```javascript 唯一數 let sym = Symbol('描述') ``` + BigInt 大整數 ```js js最大支持53位數，為了表示最大精度以外的數，新增了BigInt類型 let num = 123n typeof num // bigint 可以進行加減乘除 如果除法有小數，會被舍棄小數部分 ``` 2.引用數據類型 + Object + Function + Array #### 2.Object.assign(target, source) 將后面的對象key以及內容覆蓋到target對象上 #### 3.constructor #### 4.手寫map ```js Array.prototype._map = function(callback) { let res = [] for (let i=0; i<this.length; i++) { res.push(callback(this[i], i, this)) } return res } ``` #### 5. for of 能遍歷對象嗎？ 不能，只能遍歷可迭代的對象，如 Array, Map, Set 等 #### 6.instanceOf 作用，手寫一個 instanceOf 主要用于判斷一個實例是否屬于某種類型 `left instanceOf rightClass`，右邊的prototype在左邊的原型鏈上即可 ```js function instance_of(l, r) { let o = r.prototype // 獲取 r 的原型 let pL = l.__proto__ // 獲取 l 的原型 // 尋找 l 的原型鏈，看是否存在 o，直到原型指向 null while(true) { if (pL === null) { return false } if (o === pL) { // 找到 l 的原型鏈上存在 等于 l return true } pL = pL.__proto__ } } ``` #### 7.數組去重 1. new Set(arr) 方法 2. 遍歷法，includes判斷 3. Map方法，把值存在 Map對象的 key上，遍歷arr，判斷Map是否存在該item，如果不存在則push到新數組 ```js // set function uni(arr) { return [...new Set(arr)] } // Map 遍歷法 function uni2(arr) { let map = new Map() let res = [] arr.forEach(item => { if (!map.has(item)) { map.set(item, true) res.push(item) } }) return res } // 雙指針修改原數組 function uni3(arr) { let i = 0, // 非重復位置 j = 0; // 指針 // 指針j開始移動 for (0; j<arr.length; j++) { // 如果j和i項不一樣，則i+1，將j的值賦給i, j繼續+1 // 如果一樣，i不動，j++ // 所以 i的位置就是非重復數組的最后一個位置 if (arr[i] !== arr[j]) { i++ arr[i] = arr[j] } } return arr.slice(0, i+1) } let arr = [1, 1, 2, 2, 3, 3] console.log(uni(arr)); console.log(uni2(arr)); console.log(uni3(arr)); ``` #### 8.類數組與數組區別，轉換 1.類數組 + 通過class類名，或者標簽名獲取dom，得到的就是類數組 + 函數內arguments代替參數 + 手動實現 ```js let al1 = { length: 5, 0: 0, 1: 1, 3: 3, 4: 4, 5: 5, }; ``` 2.類數組轉化為數組 + Array.from + Array.prototype.slice.call(objArr) ```js console.log(Array.from(objArr)); console.log(Array.prototype.slice.call(objArr)); ``` #### 9.手寫發布訂閱 原理：創建一個發布訂閱 class，用event對象{}存儲事件名，以及回調函數 on，訂閱，指的是創建事件名對應的回調函數，或者往callbacks數組中push方法 off，解除訂閱，指的是callbacks數組中刪除某個方法，或者清空 emit, 觸發訂閱事件，指的是遍歷執行callbacks數組中的方法，但是注意args傳參，以及this指向 ```js class EventPubSub { constructor() { this.event = {} // 事件集合 } // 訂閱 // type: 事件名, callback: 回調函數 on(type, callback) { // 如果訂閱的事件不存在 if(!this.event[type]) { this.event[type] = [callback] // 發布訂閱需要執行的callback是一個callback數組 } else { this.event[type].push(callback) } } // 解除訂閱，解除的是callback一樣的某一個 off(type, callback) { if(!this.event[type]) { return } if (callback) { this.event[type] = this.event[type].filter(item => { return item !== callback }) } else { this.event[type] = [] } } // 發布，執行 emit(type, ...args) { if (!this.event[type]) { return } this.event[type].forEach(callback => { callback.apply(this, args) }) } } let event = new EventPubSub event.on('click', (args) => { console.log('觸發click方法', args); }) event.emit('click', 1) ``` #### 10.手寫數組轉成樹 ```js // 例如將 input 轉成output的形式 let input = [ { id: 1, val: '學校', parentId: null }, { id: 2, val: '班級1', parentId: 1 }, { id: 3, val: '班級2', parentId: 1 }, { id: 4, val: '學生1', parentId: 2 }, { id: 5, val: '學生2', parentId: 2 }, { id: 6, val: '學生3', parentId: 3 }, ] let output = { id: 1, val: '學校', children: [{ id: 2, val: '班級1', children: [ { id: 4, val: '學生1', children: [] }, { id: 5, val: '學生2', children: [] } ] }, { id: 3, val: '班級2', children: [{ id: 6, val: '學生3', children: [] }] }] } ``` ```js function arrToTree(arr) { // 1.先定義 id 的 hashMap, id -> item // 2.再遍歷 arr，通過 parentId判斷將當前 item 掛到 hashMap下哪一個item的children中 let idMap = {} arr.forEach(item => { idMap[item.id] = item }) arr.forEach(item => { if (idMap[item.parentId]) { let parentItem = idMap[item.parentId] if (parentItem.children && parentItem.children.length >= 0) { parentItem.children.push(item) } else { parentItem.children = [item] } } }) // 3.獲取樹的最外層，即沒有parentId的那層 return arr.filter(item => !item.parentId) } ``` #### 11.Set, Map, WeakSet和WeakMap區別 + Set ```js 1.可以遍歷, forEach 2.類似不能重復的數組 new Set([1, 2, 3]) 3.add, delete, has ``` + WeakSet ```js 1.不可以遍歷 2.成員都是對象，引用類型 3.不能遍歷，add, delete, has，沒有size ``` + Map ```js 1.可以遍歷，forEach((value, key)) 2.類似對象，但是key可以是多種類型 3.set, delete, has, clear, size ``` + WeakMap ```js 弱引用類型 1.不可以遍歷，沒有size, values, keys等，key必須為對象,目的是為了不會被垃圾回收考慮，當WeakMap沒有被使用時會自動銷毀 2.set, delete ``` #### 12.js存在哪幾種內存泄露的情況 1. 意外的全局變量 2. 閉包 3. 未被清空的定時器 4. 未被銷毀的事件監聽 5. DOM引用 #### 13.js判斷數組 ```js 1.Array.isArray(arr) // true 2.arr instanceof Array // true 3.arr.constructor === Array // true 4.Object.prototype.toString.call(arr) === '[Object Array]' ```