## 前言梳理总结一遍面试比较经常碰到的 JavaScript 手撕题，方便面试的时候复习，同时也巩固一下 JS 的基本功。 ### 数据类型判断 ```js function type_of(obj) { return Object.prototype.toString.call(obj).slice(8, -1) } console.log('数据类型判断 :>> ', typeof1([])); // Array ``` ### 作用域安全的构造函数直接看代码： ```js function Person(name, age) { if (this instanceof Person) { this.name = name this.age = age } else { return new Person(name, age) } } ``` 上面例子中，Person 构造函数使用 this 给属性赋值。当和 new 关键字连用时会创建一个新的对象，问题在当没有使用 new 关键字的情况下，this 会映射到全局对象 window 上，导致错误对象属性增加。 ### 实现setInterval 原生的setInterval会出现两个问题： - 某些间隔会被跳过 - 多个定时器的代码执行之间的间隔可能会比预期的小。直接看代码： ```js setTimeout(function() { // 处理逻辑 setTimeout(arguments.callee, wait) }, wait) ``` 上述模式链式调用了 setTimeout，每次函数执行的时候会创建一个新的定时器，内部的 setTimeout 调用使用 arguments.callee 来获取对当前执行函数的引用，并为其设置另外一个定时器。在前一个定时器代码执行完之前，不会向队列插入新的定时器代码，确保不会缺失时间间隔。同时，也确保了下一次定时器执行之前，至少要等待指定的间隔，避免了连续的运行。 ### 惰性函数所谓惰性载入，指函数执行的分支只会发生一次。一般因为各浏览器之间的行为差异，经常会在函数中包含了大量的 if 语句，以检查浏览器特性，解决不同浏览器的兼容问题。方式一： ```js function createXHR() { if (typeof XMLHttpRequest !== 'undefined) { createXHR = function() {...} } else { createXHR = function() {...} } return createXHR() } ``` 方式二： ```js const createXHR = (function() { if (typeof XMLHttpRequest !== 'undefined) { return createXHR = function() {...} } else { return createXHR = function() {...} } }) ``` ### 继承原型链继承会出现子类在实例化的时候不能给父类构造函数传参；原型中包含的引用类型属性将被所有实例共享；借用构造器继承会出现子类不能继承父类原型上属性；组合式继承则会两次调用构造函数。最好的继承方式是寄生组合式继承。ES6 关键字`extends` 底层实现也是采用寄生组合式继承。所以这边只实现寄生组合继承，代码如下： ```js function People(name) { this.name = name } function ChinesePeople(name, age) { this.age = age People.call(this, name) } function _extends(parent, son) { function Middle() { this.constructor = son } Middle.prototype = parent.prototype let middle = new Middle() return middle } ChinesePeople.prototype = _extends(People, ChinesePeople) let chinesePeople = new ChinesePeople('lisi', 18) console.log('寄生组合式继承:', chinesePeople); // 寄生组合式继承: ChinesePeople { age: 18, name: 'lisi' } ``` ### 数组去重 ES5 实现： ```js function unique(arr) { let res = [] for(let i = 0; i< arr.length; i++) { if (res.indexOf(arr[i]) === -1) { res.push(arr[i]) } } return res } ``` ES6 实现: ```js const unique1 = (arr) => [...new Set(arr)] console.log('数组去重 :>> ', unique1([undefined,undefined,1,2,2,2,3,4,5])); // 数组去重 :>> [ undefined, 1, 2, 3, 4, 5 ] ``` ### 数组扁平化 ES5 实现： ```js function flatten(arr) { let res = [] for(let i = 0; i< arr.length; i++) { if (Array.isArray(arr[i])) { res = res.concat(flatten(arr[i])) } else { res.push(arr[i]) } } return res } console.log('数组扁平化 :>> ', flatten([1, [2,3]])); // [1,2,3] ``` ES6 实现： ```js function flatten(arr) { while (arr.some(item => Array.isArray(item))) { arr = [].concat(...arr); } return arr; } ``` ### 浅拷贝只拷贝第一层对象，深层次的属性改变，拷贝对象也会收到影响。 ```js function shallowCopy(obj) { if (typeof obj !== 'object') return obj let newObj = obj instanceof Array ? [] : {} for(let key in obj) { if (obj.hasOwnProperty(key)) { newObj[key] = obj[key] } } return newObj } let a = { a: 1, b: {b:2}, c: [3], d: Date } let b = shallowCopy(a) b.b.b = 100 console.log('浅拷贝 :>> ', b, a); // 浅拷贝 :>> { a: 1, b: { b: 100 }, c: [ 3 ], d: [Function: Date] } // { a: 1, b: { b: 100 }, c: [ 3 ], d: [Function: Date] } ``` ### 深拷贝每个对象属性都用新的变量空间存储，改变属性值不会相互影响。 ```js function deepClone (target, map = new Map()) { let constructor = target.constructor if (/^RegExp|Date$/i.test(constructor.name)) { return new constructor(target) } if (target && typeof target === 'object') { let clone = Array.isArray(target) ? [] : {} if (map.get(target)) { return map.get(target) } map.set(target, clone) for (let key in target) { clone[key] = deepClone(target[key], map) } return map.get(target) } else { return target } } let a1 = { a: 1, b: {b:2}, c: Symbol(3), d: new Date() } let b1 = deepClone(a1) b1.b.b = 100 console.log('深拷贝 :>> ', b1, a1); // 深拷贝 :>> { a: 1, b: { b: 100 }, c: Symbol(3), d: 2021-12-06T09:10:20.403Z } // { a: 1, b: { b: 2 }, c: Symbol(3), d: 2021-12-06T09:10:20.403Z } ``` ### 函数防抖触发高频事件 N 秒后只会执行一次，如果 N 秒内事件再次触发，则会重新计时。 ```js function debounce(fn, wait) { let timeoutId return function() { if (timeoutId) { const args = arguments const context = this clearTimeout(timeoutId) timeoutId = setTimeout(function(){ fn.apply(context, args) }, wait) } } } ``` ### 函数节流触发高频事件，且 N 秒内只执行一次。 ```js function throttle(fn, wait) { let timer return function() { if (timer) return const args = arguments const context = this timer = setTimeout(function() { fn.aplly(context, args) timer = null }, wait) } } ``` ### 实现instanceof ```js function instance_of(L, R) { let O = R.prototype L = L.__proto__ while(true) { if (L === null) return false if (L === O) return true L = L.__proto__ } } console.log('实现instanceof :>> ', instance_of([], String)); // 实现instanceof :>> false ``` ### 实现new ```js function objectFactory() { const obj = new Object() const constructor = [].shift.call(arguments) obj.__proto__ = constructor.prototype const ret = constructor.apply(obj, arguments) return typeof ret === 'object' ? ret : obj } ``` ### 实现call call做了什么: - 将函数设为对象的属性 - 执行&删除这个函数 - 指定this到函数并传入给定参数执行函数 - 如果不传入参数，默认指向为 window ```js Function.prototype.myCall = function(context) { var context = context || window context.fn = this const args = Array.prototype.slice.call(arguments, 1); let result = context.fn(...args) delete context.fn return result } function bar(name, age) { return { name, age } } console.log('模拟call', bar.myCall(this, 'lisi', 18)); // 模拟call { name: 'lisi', age: 18 } ``` ### 实现apply 跟call实现同理。 ```js Function.prototype.myApply = function(context, arr) { var context = context || window context.fn = this let result if (!arr) { result = context.fn() } else { result = context.fn(...arr) } delete context.fn return result } function bar(name, age) { return { name, age } } console.log('模拟apply', bar.myApply(this, ['lisi',18])); // 模拟apply { name: 'lisi', age: 18 } ``` ### 实现bind 简易版本实现： ```js Function.prototype.bind1 = function(context, ...args) { var context = context || window return (...newargs) => { return this.myCall(context, ...args, ...newargs) } } let binds = bar.bind(this, 'zhangsan', 20) console.log('模拟bind :>> ', binds()); // 模拟bind :>> { name: 'zhangsan', age: 20 } ``` ### 柯里化函数柯里化就是把接受多个参数的函数变换成接受一个单一参数的函数，并且返回接受余下参数返回结果的一种应用。 ```js function curry(fn, ...args) { return fn.length > args.length ? (...arguments) => curry(fn, ...args, ...arguments) : fn(...args) } let addSum = (a, b, c) => a+b+c let add = curry(addSum) console.log('柯里化函数',add(1)(2)(3), add(1, 2)(3), add(1,2,3)) // 柯里化函数 6 6 6 ``` ### 偏函数什么是偏函数？偏函数就是将一个 n 参的函数转换成固定 x 参的函数，剩余参数（n - x）将在下次调用全部传入。 ```js function partial(fn, ...args) { return (...newargs) => { return fn(...args, ...newargs) } } let partialAdd = partial(add, 1) console.log('偏函数 :>> ', partialAdd(2, 3)); // 偏函数 :>> 6 ``` ### 实现sleep 某个时间后就去执行某个函数，使用Promise封装。 ```js function sleep (fn, wait) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(fn) }, wait) }) } // let saySomething = (name) => console.log(`hello,${name}`) // async function autoPlay() { // let demo = await sleep(saySomething('张三'),1000) // let demo2 = await sleep(saySomething('李四'),1000) // let demo3 = await sleep(saySomething('xxs'),1000) // } // autoPlay() ``` ### 手写ajax ```js const getJSON = function(url) { return new Promise((resolve, reject) => { const xhr = new XMLHttpRequest(); xhr.open('GET', url, false); xhr.setRequestHeader('Accept', 'application/json'); xhr.onreadystatechange = function() { if (xhr.readyState !== 4) return; if (xhr.status === 200 || xhr.status === 304) { resolve(xhr.responseText); } else { reject(new Error(xhr.responseText)); } } xhr.send(); }) } ``` ### 实现trim 去掉首位多余的空格。 ```js String.prototype.trim = function(){ return this.replace(/^\s+|\s+$/g, '') } //或者 function trim(string){ return string.replace(/^\s+|\s+$/g, '') } console.log('trim :>> ', trim(' ssposc ')); // ssposc ``` ### 实现数组reduce 简易版本实现： ```js Array.prototype.myReduce = function(fn, initVal) { let result = initVal, i = 0 if (typeof initVal === 'undefined') { result = this[i] i++ } while(i < this.length) { result = fn(result, this[i]) i++ } return result } const result = [1,2,3].myReduce((a, b) => a + b , 1) console.log('reduce :>> ', result); ``` ### 实现Object.create ```js function create(proto) { function Fn() {}; Fn.prototype = proto; Fn.prototype.constructor = Fn; return new Fn(); } let demo = { c : '123' } let cc = Object.create(demo) ``` ### JSONP JSONP 核心原理：script 标签不受同源策略约束，所以可以用来进行跨域请求，优点是兼容性好，但是只能用于 GET 请求； ```js const jsonp = ({ url, params, callbackName }) => { const generateUrl = () => { let dataSrc = '' for (let key in params) { if (params.hasOwnProperty(key)) { dataSrc += `${key}=${params[key]}&` } } dataSrc += `callback=${callbackName}` return `${url}?${dataSrc}` } return new Promise((resolve, reject) => { const scriptEle = document.createElement('script') scriptEle.src = generateUrl() document.body.appendChild(scriptEle) window[callbackName] = data => { resolve(data) document.removeChild(scriptEle) } }) } ``` ### 事件总线 ```js class EventEmitter { constructor() { this.cache = {} } on(name, fn) { if (this.cache[name]) { this.cache[name].push(fn) } else { this.cache[name] = [fn] } } off(name, fn) { let tasks = this.cache[name] if (tasks) { const index = tasks.findIndex(f => f === fn || f.callback === fn) if (index >= 0) { tasks.splice(index, 1) } } } emit(name, once = false, ...args) { if (this.cache[name]) { // 创建副本，如果回调函数内继续注册相同事件，会造成死循环 let tasks = this.cache[name].slice() for (let fn of tasks) { fn(...args) } if (once) { delete this.cache[name] } } } } // 测试 let eventBus = new EventEmitter() let fn1 = function(name, age) { console.log(`${name} ${age}`) } let fn2 = function(name, age) { console.log(`hello, ${name} ${age}`) } eventBus.on('aaa', fn1) eventBus.on('aaa', fn2) eventBus.emit('aaa', false, 'lisi', 20) ``` ### 字符串模板 ```js function render(template, data) { const reg = /\{\{(\w+)\}\}/; // 模板字符串正则 if (reg.test(template)) { // 判断模板里是否有模板字符串 const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段 template = template.replace(reg, data[name]); // 将第一个模板字符串渲染 return render(template, data); // 递归的渲染并返回渲染后的结构 } return template; // 如果模板没有模板字符串直接返回 } ``` 测试： ```js let template = '我是{{name}}，年龄{{age}}，性别{{sex}}'; let person = { name: 'lisi', age: 20 } render(template, person); // 我是lisi，年龄20，性别undefined ``` ### 实现快速排序 ```js function sort(arr) { if (!arr.length) return quickSort(arr, 0, arr.length - 1) } function quickSort(arr, start, end) { if (start >= end) return let left = start, right = end let pivot = arr[Math.floor((left + end) / 2)] while (left <= right) { while (left <= right && arr[left] < pivot) { left++ } while (left <= right && arr[right] > pivot) { right-- } if (left <= right) { let temp = arr[left] arr[left] = arr[right] arr[right] = temp right-- left++ } } quickSort(arr, start, right) quickSort(arr, left, end) } ``` ## 实现冒泡排序 ```js function sortarr(arr) { for (let i = 0; i < arr.length - 1; i++) { for (let j = 0; j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { let temp = arr[j] arr[j] = arr[j + 1] arr[j + 1] = temp } } } return arr } ```