--- highlight: androidstudio --- ## 基础题 **实现Object.create** ```js function create(obj) { function F() {} F.prototype = obj return new F() } ``` create本质上是构建一个构造函数，并将传入的对象赋给该构造函数的原型，同时返回构造函数的实例，本质上属于一种原型链继承 **实现Instanceof** ```js function myInstanceof(left, right) { let proto = Object.getPrototypeOf(left), // 获取对象的原型 prototype = right.prototype; // 获取构造函数的prototype对象 // 判断构造函数的prototype对象是否在对象的原型链上 while(true) { if (!proto) return false; if (proto === prototype) return true; proto = Object.getPrototypeOf(proto); } } ``` 通过原型链一直向上找，直到找到对应的构造函数的原型对象，说明该对象是目标构造函数的实例 **实现New操作符** ```js function New() { let newObj = null; let construtor = Array.prototype.shift.call(arguments); let result = null; // 判断参数是否是一个构造函数 if (typeof construtor !== 'function') { return; } // 新建一个空对象，对象的原型为构造函数的prototype对象 newObj = Object.create(construtor.prototype); // 对this指向新建对象，并执行函数 result = construtor.apply(newObj, arguments); // 判断返回对象 let flag = result && (typeof result === 'object' || typeof result === 'function'); return flag ? result : newObj; } ``` new一个对象分为三个步骤： 1. 新建一个对象，对象原型是目标new对象构造函数的prototype 2. 执行目标构造函数，将this指向新建对象 3. 判断构造函数返回值，如果是一个对象或函数，则将该对象返回，否则返回新建对象 **实现Promise.all** ```js function myPromiseAll(promises) { return new Promise(function(resolve, reject) => { if (!Array.isArray(promises)) { throw new TypeError('参数必须是Array') } let count = 0; let num = promises.length let resolveList = []; for (let i = 0; i < num; i++) { Promise.resolve(promises[i]).then(value => { count ++; resolveList[i] = value if (count === num) { return resolve(resolveList) } }).catch(err => { return reject(err) }) } }) } ``` 将每个promise resolve的值保存到一个数组中，最后将该数组作为resolve结果，如果出现某个promise失败，则直接reject该失败结果 **实现Promise.race** ```js function myPromiseRace(promises) { return new Promise((resolve, reject) => { if (Array.isArray(promises)) { return new TypeError('参数必须为Array') } for(let i = 0; i < promises.length; i++) { Promise.resolve(promises[i]).then(res => { return resolve(res) }).catch(err => { return reject(err) }) } }) } ``` race，即为竞赛，resolve最早有结果的promise，同时如果最早的promise rejected，则将rejected的结果包装到返回的promise reject中 **实现Promise.allSettled** ```js function myAllSettled(list) { return new Promise((resolve, reject) => { if (!Array.isArray(promises)) { return new TypeError('参数必须为Array') } let count = 0; let resolvedCount = 0; const result = []; for (const l of list) { let i = count; count ++; Promise.resolve(l).then(res => { resolvedCount ++; result[i] = { status: 'fullfilled', value: res, } }, (err => { resolvedCount ++; result[i] = { status: 'rejected', value: err } } )) .finally(() => { if (resolvedCount >= count) { resolve(result) } }) } }) } ``` 每个promise都有一个对应的result，不管resolve还是reject，并且保持原来的顺序将其存入到一个result数组中，最后等所有的promise都改变状态后将其返回。 **实现Promise.any** ```js function myPromiseAny(promises) { const rejectedArr = []; // 记录失败的结果 // let rejectedTimes = 0; // 记录失败的次数 return new Promise((resolve, reject) => { if(promises == null || promises.length == 0){ reject("无效的 any"); } for (let i = 0; i < promises.length; i++) { let p = promises[i]; // 处理promise if (p && typeof p.then === 'function') { p.then(res => { resolve(res) }, err => { // 如果失败了，保存错误信息；当全失败时，any 才失败 rejectedArr[i] = err; // rejectedTimes ++; if (rejectedArr.length === promises.length) { reject(rejectedArr) } }) } else { // 处理普通值直接成功 resolve(p) } } }) } ``` 这个和前面的Promise.all逻辑相反，all是不允许出现reject，否则自身reject，而any是允许reject，只要有一个resolve，自身resolve，除非所有的promise都reject，则自身reject。 **实现防抖** ```js function myFD(fn, delay) { let timer = null; return function() { let context = this, args = arguments; if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(context, args); }, delay) } } ``` 防抖基本是最常见的手写js题了，经典的闭包应用，内层函数保留对外层函数timer的引用，timer不会被销毁，每次触发目标函数都必须要等定时器到时间才会执行。 **实现节流** ```js function myJL(fn, delay) { let date = new Date().getTime(); return function() { let context = this; let args = arguments; if (new Date().getTime() - date >= delay) { date = new Date().getTime() fn.apply(context, args); } } } ``` 节流和上述防抖类似，只不过节流函数是一段时间内只执行一次目标函数，而防抖是频繁触发目标函数后过n秒才执行一次目标函数（有点像坐电梯，只要有人进去电梯门就永远关不上）。节流可以通过时间戳差值方法实现，也可以通过定时器方案实现。 **封装类型判断方法** ```js function myType(value) { if (value === null) { return value + ''; } // 判断数据是引用类型的情况 if (typeof value === 'object') { let type = Object.prototype.toString.call(value); const result = type.split(' ')[1].split(''); result.pop(); return result.join('').toLowerCase(); } else { return typeof value; } } ``` 常规的类型判断有typeof、instanceof和Object.prototype.toString.call，typeof无法细粒度判断对象类型，instanceof只能进行构造函数原型链判断，基本类型不适用，一般用Object.prototype.toString.call这种方法去判断，`Object.prototype.toString()` 是一个标准的 JavaScript 方法，用于返回一个对象的字符串表示形式。这个方法可以被所有对象继承，包括基本类型的包装对象（如 `Number`, `String`, `Boolean` 等），转换后的字符串信息包含具体类型，需要进行字符串解析。 **实现Object.freeze** ```js function deepFreeze(obj) { if (typeof obj !== 'object') { throw 'error' } const props = Object.getOwnPropertyNames(obj) props.forEach(item => { if (typeof obj[item] === 'object') { deepFreeze(obj[item]) } }) return Object.freeze(obj) } ``` **实现call** ```js function myCall(context) { // 判断调用对象 if (typeof this !== 'function') { console.error('type error') } // 获取参数 let args = [...arguments].slice(1); let result = null; // 判断context是否传入，没传则为window context = context || window; // 将调用函数设为对象的方法 context.fn = this; // 调用函数 result = context.fn(...args); delete context.fn; return result; } ``` call用于改变目标函数的this指向，具体原理通过传入的要指向的目标对象，将调用函数赋值给该目标对象的属性上，通过对象.函数属性的方式执行，这样this就会指向到目标对象上，进而修改了this指向。 **实现apply** ```js function myApply(context) { if (typeof this !== 'function') { console.error('type error'); } let result = null; context = context || window; context.fn = this; if (arguments[1]) { result = context.fn(...arguments[1]); } else { result = context.fn() } delete context.fn; return result; } ``` 和call类似，只是apply第二个参数必须是一个数组。 **实现bind** ```js function myBind(context) { // 判断调用对象是否是函数 if (typeof this !== 'function') { console.error('type error') } const args = [...arguments].slice(1) let fn = this; return function Fn() { const isNew = new.target !== undefined // 判断函数是否被new过 return fn.apply( isNew ? this : context, // this如果被new过，则该this指向可能发生修改 (这里还需要对new bind进行一个实现) args.concat(...arguments) ) } } ``` bind函数会返回一个新的函数，这个函数的this会被绑定到传入的目标对象上，因为new的优先级最高，因此使用new的话会改变bind返回函数里的this指向。(需要额外考虑new的情况) **实现柯里化函数** ```js function carry(fn, ...args) { if (args.length >= fn.length) { return fn(...args) } return (..._args) => { carry(fn, ...args, ..._args) } } ``` 判断传入的函数参数长度和rest参数长度，如果参数长度大于函数要接收的入参长度，则直接返回执行结果，否则继续递归执行carry函数，将额外的参数拼到carry rest参数部分（参数累加）。 **实现数组乱序** ```js function chaosArr(arr) { for (let i = 0; i < arr.length; i ++) { const randomIndex = Math.round(Math.random() * (arr.length - i - 1)) + i; [arr[i], arr[randomIndex]] = [arr[randomIndex], arr[i]] // 交换位置 } return arr; } ``` 随机索引核心算法是第三行，通过得到随机索引和当前索引交换位置，实现数组乱序。 **数组（含多维）求和** ```js // 数组求和 let arr = arr.reduce((pre, cur) => pre += cur, 0) // 多维数组求和 let arr = arr.toString().split(",").reduce((pre, cur) => pre += Number(cur), 0); ``` **数组扁平化** ```js // 第一种 function flatten(arr) { return arr.reduce((result, item) => { if (Array.isArray(item)) { result = result.concat(flatten(item)); } else { result.push(item); } return result; }, []); } // 第二种 function flatten(arr) { return arr.toString().split(','); } ``` 除此之外，方法还有很多，比如正则匹配、es6的flat等。 **实现数组push** ```js Array.prototype.push = function() { for (let i = 0; i < arguments.length; i++) { this[this.length] = arguments[i]; } return this.length; } ``` **实现数组filter** ```js Array.prototype.filter = function(fn) { if (typeof fn !== 'function') { throw Error('参数必须是一个函数') } const res = []; for (let i = 0; i < this.length; i ++) { fn(this[i]) && res.push(this[i]) } return res; } ``` **实现数组map** ```js Array.prototype.map = function(fn) { if (typeof fn !== 'function') { throw Error('参数必须是一个函数') } const res = []; for (let i = 0; i < this.length; i ++) { res.push(fn(this[i])) } return res; } ``` **实现数组reduce** ```js function myReduce(arr, callback, initialValue) { let accumulator = initialValue; // 初始值为传入的initialValue参数或者第一个元素 for (let i = 0; i < arr.length; i++) { if (!accumulator && !i) { accumulator = arr[i]; // 如果没有提供初始值，则将第一个元素设置为累加器 } else { accumulator = callback(accumulator, arr[i], i); // 调用callback函数来处理每个元素 } } return accumulator; } ``` **数组重复** ```js function repeatArr(n, s) { return (new Array(n + 1)).join(s) } ``` **0.1+0.2问题** ```js function funcAdd(x, y) { const num1 = x.toString().split('.')[1].length const num2 = y.toString().split('.')[1].length const pow = Math.pow(10, Math.max(num1, num2)) const result = (x * pow + y * pow) / pow return result } ``` **字符串反转** ```js function reverseStr(str) { return str.split('').reverse().join(''); } ``` **冒泡排序** ```js function sort(arr) { for (let i = 0; i < arr.length; i++) { for (let j = 0;j < arr.length - i - 1; j++) { if (arr[j] > arr[j + 1]) { const temp = arr[j]; arr[j] = arr[j + 1]; arr[j + 1] = temp; } } } return arr; } ``` **快速排序** ```js function quickSort(arr) { if (arr.length <= 1) { return arr; } let temp = arr[0]; // 基准取数组的第一个元素 const leftList = []; const rightList = []; for (let i = 0; i < arr.length; i++) { if (arr[i] > temp) { rightList.push(arr[i]) } else { leftList.push(arr[i]) } } return quickSort(leftList).concat([temp], quickSort(rightList)); } ``` **二分法** ```js function BinarySearch(arr, target) { let from = 0; let to = arr.length - 1; // from <= to 条件 while(from <= to) { mid = Math.floor((from + to) / 2); if (arr[mid] < target) { from = mid + 1; } else if (arr[mid] > target) { to = mid - 1; } else { return mid; } } return -1; } ``` **对象迭代器** ```js Object.prototype[Symbol.iterator] = function* iterators() { const keys = Object.keys(this) for (let i = 0;i < keys.length; i++) { const key = keys[i] yield this[key] } } ``` 使用生成器方式去实现迭代器，具备Symbol.iterator接口方法的对象具备可迭代性，可以使用for...of进行遍历。 **实现JSONP** ```js function addScript(src) { const js = document.createElement('script') js.src = src js.type = 'text/javascript' document.body.appendChild(js) } addScript('http://xxx.xxx.com/xxx.js?callback=handleRes') function handleRes(data) { console.log(data); } ``` JSONP 的原理是通过动态创建 `