实际常用

节流函数throttle

预定一个函数只有在大于等于执行周期时才执行，周期内调用不执行。就好像你在淘宝抢购某一件限量热卖商品时，你不断点刷新点购买，可是总有一段时间你点上是没有效果，这里就用到了节流，就是怕点的太快导致系统出现bug。

  1. function throttle(fn, delay = 500) {
  2.   let isCall = true;
  3.   return function (...args) {
  4.     if (!isCall) return;
  5.       isCall = false; // 不能进来了
  6.       setTimeout(() => {
  7.         fn.apply(this, args);
  8.         isCall = true;
  9.       }, delay); // 第一次不调用
  10.   };
  11. }
  12. // 这种第一次会调用
  13. function throttle2(fn, delay = 500) {
  14.   let oldTime = 0;
  15.   return function (...args) {
  16.     if (oldTime + delay <= Date.now()) {
  17.       oldTime = Date.now();
  18.       fn.apply(this, args);
  19.     }
  20.   };
  21. }

防抖函数debounce

在函数需要频繁触发时，只有当有足够空闲的时间时，才执行一次。就好像在百度搜索时，每次输入之后都有联想词弹出，这个控制联想词的方法就不可能是输入框内容一改变就触发的，他一定是当你结束输入一段时间之后才会触发。

  1. function debounce(fn, delay = 500) {
  2.   let timer;
  3.   return function (...args) {
  4.     if (timer) {
  5.       clearTimeout(timer);
  6.     }
  7.     timer = setTimeout(() => {
  8.       fn.apply(this, args);
  9.     }, delay);
  10.   };
  11. }

深拷贝

  1. function deepClone(obj,type=1){
  2.     // 如果不是Object类型或者没有值 直接原样返回
  3.     if (typeof obj !== "object" || obj==null) {
  4.         return obj
  5.     }
  6.     if(type==1){
  7.         return JSON.parse(JSON.stringify(obj));
  8.     }else if(type==2){
  9.         // 初始化result
  10.         let result=null;
  11.         if(obj instanceof Array){
  12.             // 如果是数组
  13.             result=[];
  14.         }else{
  15.             // 不是数组那就是对象了
  16.             result={};
  17.         }
  18.         for(let key in obj){
  19.             // 判断key是否为obj自身属性值
  20.             if(obj.hasOwnProperty(key)){
  21.                 result[key]=deepClone(obj[key],2);
  22.             }
  23.         }
  24.         return result;
  25.     }
  26. }
  27. let a = {
  28.     name:'小明',
  29.     age:15,
  30.     address:"九龙广场",
  31.     fun:["零食","羽毛球","篮球"],
  32.     parent:{
  33.         father:{
  34.             name:"小明爸爸",
  35.             age:32
  36.         },
  37.         mother:{
  38.             name:"小明妈妈",
  39.             age:34
  40.         }
  41.     }
  42. }
  43. let b = a;
  44. // 查看当前a和b的原始数据
  45. console.log('a',a);
  46. // 使用json方式克隆
  47. let c = deepClone(a,2);
  48. a.name="小红";
  49. console.log('a',a)
  50. console.log('c',c)
  51. console.log('修改a的父母信息');
  52. a.parent.father="小红爸爸";
  53. a.parent.mother="小红妈妈";
  54. console.log('查看b和c')
  55. console.log('b',b)
  56. console.log('c',c)

简单的jquery, 考虑插件和扩展性

  1. class Jquery{
  2.     constructor(selector){
  3.         let result=null;
  4.         if(selector.startsWith('.')){
  5.             result=document.getElementsByClassName(selector.slice(1))
  6.         }else{
  7.             result = document.querySelectorAll(selector);
  8.         }
  10.         let length = result.length;
  11.         for(let i = 0;i<length;i++){
  12.             this[i]=result[i];
  13.         }
  14.         this.length=length;
  15.         this.selector=selector;
  17.     }
  18.     get(index){
  19.         return this[index];
  20.     }
  21.     each(fun){
  22.         for(let i=0;i<this.length;i++){
  23.             fun(this[i]);
  24.         }
  25.     }
  26.     on(type,fun){
  27.        return this.each(elem=>{
  28.            elem.addEventListener(type,fun,false);
  29.        })
  30.     }
  32. }

深拷贝( 破解递归爆栈 )

其实破解递归爆栈的方法有两条路，第一种是消除尾递归，但在这个例子中貌似行不通，第二种方法就是干脆不用递归，改用循环

用循环遍历一棵树，需要借助一个栈，当栈为空时就遍历完了，栈里面存储下一个需要拷贝的节点

首先我们往栈里放入种子数据，key用来存储放哪一个父元素的那一个子元素拷贝对象

然后遍历当前节点下的子元素，如果是对象就放到栈里，否则直接拷贝

  1. function cloneLoop(x) {
  2.     const root = {};
  4.     // 栈
  5.     const loopList = [
  6.         {
  7.             parent: root,
  8.             key: undefined,
  9.             data: x,
  10.         }
  11.     ];
  13.     while(loopList.length) {
  14.         // 深度优先
  15.         const node = loopList.pop();
  16.         const parent = node.parent;
  17.         const key = node.key;
  18.         const data = node.data;
  20.         // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
  21.         let res = parent;
  22.         if (typeof key !== 'undefined') {
  23.             res = parent[key] = {};
  24.         }
  26.         for(let k in data) {
  27.             if (data.hasOwnProperty(k)) {
  28.                 if (typeof data[k] === 'object') {
  29.                     // 下一次循环
  30.                     loopList.push({
  31.                         parent: res,
  32.                         key: k,
  33.                         data: data[k],
  34.                     });
  35.                 } else {
  36.                     res[k] = data[k];
  37.                 }
  38.             }
  39.         }
  40.     }
  42.     return root;
  43. }

深拷贝( 破解循环引用 )

引入一个数组uniqueList用来存储已经拷贝的数组，每次循环遍历时，先判断对象是否在uniqueList中了，如果在的话就不执行拷贝逻辑了

find是抽象的一个函数，其实就是遍历uniqueList

  1. // 保持引用关系
  2. function cloneForce(x) {
  3.     // =============
  4.     const uniqueList = []; // 用来去重
  5.     // =============
  7.     let root = {};
  9.     // 循环数组
  10.     const loopList = [
  11.         {
  12.             parent: root,
  13.             key: undefined,
  14.             data: x,
  15.         }
  16.     ];
  18.     while(loopList.length) {
  19.         // 深度优先
  20.         const node = loopList.pop();
  21.         const parent = node.parent;
  22.         const key = node.key;
  23.         const data = node.data;
  25.         // 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
  26.         let res = parent;
  27.         if (typeof key !== 'undefined') {
  28.             res = parent[key] = {};
  29.         }
  31.         // =============
  32.         // 数据已经存在
  33.         let uniqueData = find(uniqueList, data);
  34.         if (uniqueData) {
  35.             parent[key] = uniqueData.target;
  36.             continue; // 中断本次循环
  37.         }
  39.         // 数据不存在
  40.         // 保存源数据，在拷贝数据中对应的引用
  41.         uniqueList.push({
  42.             source: data,
  43.             target: res,
  44.         });
  45.         // =============
  47.         for(let k in data) {
  48.             if (data.hasOwnProperty(k)) {
  49.                 if (typeof data[k] === 'object') {
  50.                     // 下一次循环
  51.                     loopList.push({
  52.                         parent: res,
  53.                         key: k,
  54.                         data: data[k],
  55.                     });
  56.                 } else {
  57.                     res[k] = data[k];
  58.                 }
  59.             }
  60.         }
  61.     }
  63.     return root;
  64. }
  66. function find(arr, item) {
  67.     for(let i = 0; i < arr.length; i++) {
  68.         if (arr[i].source === item) {
  69.             return arr[i];
  70.         }
  71.     }
  73.     return null;
  74. }
  77. // 测试
  78. var b = {};
  79. var a = {a1: b, a2: b};
  81. a.a1 === a.a2 // true
  83. var c = cloneForce(a);
  84. c.a1 === c.a2 // true

使用setTimeout模拟setInterval

  1. function mySetInterval(cb,t){
  2.   setTimeout (function () {
  3.     cb()
  4.     setTimeout (arguments.callee, t)
  5.   }, t)
  6. }
  9. // return timer 使得定时器是可以取消的
  10. function mySetInterval(cb,t){
  11.  return setTimeout (function () {
  12.     cb()
  13.     setTimeout (arguments.callee, t)
  14.   }, t)
  15. }

js实现一个继承方法

  1. // 借用构造函数继承实例属性
  2. function Child () {
  3.   Parent.call(this)
  4. }
  5. // 寄生继承原型属性
  6. (function () {
  7.   let Super = function () {}
  8.   Super.prototype = Parent.prototype
  9.   Child.prototype = new Super()
  10. })()

手写ajax

  1. //1.简单流程
  2. //实例化
  3. let xhr = XMLHttpRequest()
  4. //初始化
  5. xhr.open(method,url,async)
  6. //发送请求
  7. xhr.send(data)
  8. //设置状态变化回调处理请求结果
  9. xhr.onreadystatechange = ()=>{
  10.     if(xhr.readyState === 4 && xhr.state === 200){
  11.       console.log(xhr.responseText)
  12.   }
  13. }
  14. //2.基于promise实现
  15. function ajax(options) {
  16.     //请求地址
  17.   const url = options.url,
  18.   //请求方法
  19.   const method = options.method.toLocaleLowerCase() || 'get'
  20.   //默认为异步
  21.   const async = options.async
  22.   //请求参数
  23.   const data = options.data
  24.   //实例化
  25.     const xhr = new XMLHtmlRequset()
  26.   //请求超时
  27.   if(options.timeout && options.timeout > 0) {
  28.       xhr.timeout = options.timeout
  29.   }
  30.   //返回一个promise实例
  31.   xhr.ontimeout = ()=> reject && reject('请求超时')
  32.   //监听状态变化回调
  33.   xhr.onreadystatechange = ()=> {
  34.       if(xhr.readyState == 4){
  35.       //200--300 表示请求成功   304  资源未变  取缓存
  36.         if(xhr.status >= 200 && xhr.status < 300 ||  xhr.status == 304){
  37.          resolve && resolve(xhr.responseText)
  38.       }else{
  39.           reject && reject()
  40.       }
  41.     }
  42.   }
  43.   // 错误回调
  44.   xhr.onerror = err => reject && reject(err)
  46.   let paramArr = []
  47.   let encodeData
  48.   //处理请求参数 {a:1,b:'1212'}  处理成  a=1&b=1212
  49.   if(data instanceof Object){
  50.      for(let key in data){
  51.          //参数拼接需要通过 encodeURIComponent 进行编码
  52.        paramArr.push(encodeURIComponent(key)+'='+encodeURIComponent(data[key]))
  53.      }
  54.     encodeData = paramArr.join('&')
  55.   }
  56.   if(method === 'get'){
  57.       //检测url中是否已存在 '?' 及其位置    
  58.   }
  60.   //初始化
  61.   xhr.open(method,url,async)
  63.   //发送请求
  64.   if(method === 'get') xhr.send(null)
  65.   else{
  66.       //post需要设置请求头
  67.     xhr.setRequestHeader('Content-Type','appliction/x-www-form-urlencoded;charset=UTF-8')
  68.     xhr.send(encodeData)
  69.   }
  70. }

http请求封装

使用XMLHttpRequest 和 fetch 等原生方法

Content-Type 类型 application/x-www-form-urlencoded 纯文本传输 multipart/form-data 可用于上传文件

  1. const baseUrl = 'http://localhost:3000'
  3. export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
  4.   type = type.toUpperCase();
  5.   url = baseUrl + url;
  7.   if (type == 'GET') {
  8.     let dataStr = ''; //数据拼接字符串
  9.     Object.keys(data).forEach(key => {
  10.       dataStr += key + '=' + data[key] + '&';
  11.     })
  13.     if (dataStr !== '') {
  14.       dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
  15.       url = url + '?' + dataStr;
  16.     }
  17.   }
  19.   if (window.fetch && method == 'fetch') {
  20.     let requestConfig = {
  21.       credentials: 'include',
  22.       method: type,
  23.       headers: {
  24.         'Accept': 'application/json',
  25.         'Content-Type': 'application/json'
  26.       },
  27.       mode: "cors",
  28.       cache: "force-cache"
  29.     }
  31.     if (type == 'POST') {
  32.       Object.defineProperty(requestConfig, 'body', {
  33.         value: JSON.stringify(data)
  34.       })
  35.     }
  37.     try {
  38.       const response = await fetch(url, requestConfig);
  39.       const responseJson = await response.json();
  40.       return responseJson
  41.     } catch (error) {
  42.       throw new Error(error)
  43.     }
  44.   } else {
  45.     return new Promise((resolve, reject) => {
  46.       let requestObj;
  47.       if (window.XMLHttpRequest) {
  48.         requestObj = new XMLHttpRequest();
  49.       } else {
  50.         requestObj = new ActiveXObject;
  51.       }
  53.       let sendData = '';
  54.       if (type == 'POST') {
  55.         sendData = JSON.stringify(data);
  56.       }
  58.       requestObj.open(type, url, true);
  59.       requestObj.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  60.       requestObj.send(sendData);
  62.       requestObj.onreadystatechange = () => {
  63.         if (requestObj.readyState == 4) {
  64.           if (requestObj.status == 200) {
  65.             let obj = requestObj.response
  66.             if (typeof obj !== 'object') {
  67.               obj = JSON.parse(obj);
  68.             }
  69.             resolve(obj)
  70.           } else {
  71.             reject(requestObj)
  72.           }
  73.         }
  74.       }
  75.     })
  76.   }
  77. }

注意一下 vue 中 mixins 的优先级，component > mixins > extends。

  1. export function mergeOptions(
  2. parent: Object,
  3.  child: Object,
  4.  vm?: Component
  5. ): Object {
  6.   ...
  7.   // 如果有 child.extends 递归调用 mergeOptions 实现属性拷贝
  8.   const extendsFrom = child.extends
  9.   if (extendsFrom) {
  10.     parent = mergeOptions(parent, extendsFrom, vm)
  11.   }
  12.   // 如果有 child.mixins 递归调用 mergeOptions 实现属性拷贝
  13.   if (child.mixins) {
  14.     for (let i = 0, l = child.mixins.length; i < l; i++) {
  15.       parent = mergeOptions(parent, child.mixins[i], vm)
  16.     }
  17.   }
  18.   // 申明 options 空对象，用来保存属性拷贝结果
  19.   const options = {}
  20.   let key
  21.   // 遍历 parent 对象，调用 mergeField 进行属性拷贝
  22.   for (key in parent) {
  23.     mergeField(key)
  24.   }
  25.   // 遍历 parent 对象，调用 mergeField 进行属性拷贝
  26.   for (key in child) {
  27.     if (!hasOwn(parent, key)) {
  28.       mergeField(key)
  29.     }
  30.   }
  31.   // 属性拷贝实现方法
  32.   function mergeField(key) {
  33.     // 穿透赋值，默认为 defaultStrat
  34.     const strat = strats[key] || defaultStrat
  35.     options[key] = strat(parent[key], child[key], vm, key)
  36.   }
  37.   return options
  38. }

介绍下深度优先遍历和广度优先遍历，如何实现？

  1. 深度优先遍历——是指从某个顶点出发，首先访问这个顶点，然后找出刚访问这个结点的第一个未被访问的邻结点，然后再以此邻结点为顶点，继续找它的下一个顶点进行访问。重复此步骤，直至所有结点都被访问完为止。
  3. 广度优先遍历——是从某个顶点出发，首先访问这个顶点，然后找出刚访问这个结点所有未被访问的邻结点，访问完后再访问这些结点中第一个邻结点的所有结点，重复此方法，直到所有结点都被访问完为止。
  6. ```js
  7. //1.深度优先遍历的递归写法
  8. function deepTraversal(node) {
  9.   let nodes = []
  10.   if (node != null) {
  11.     nodes.push[node]
  12.     let childrens = node.children
  13.     for (let i = 0; i < childrens.length; i++) 
  14.       deepTraversal(childrens[i])
  15.   }
  16.   return nodes
  17. }
  18. //2.深度优先遍历的非递归写法
  19. function deepTraversal(node) {
  20.   let nodes = []
  21.   if (node != null) {
  22.     let stack = [] //同来存放将来要访问的节点
  23.     stack.push(node)
  24.     while (stack.length != 0) {
  25.       let item = stack.pop() //正在访问的节点
  26.       nodes.push(item)
  27.       let childrens = item.children
  28.       for (
  29.         let i = childrens.length - 1;
  30.         i >= 0;
  31.         i-- //将现在访问点的节点的子节点存入stack，供将来访问
  32.       )
  33.         stack.push(childrens[i])
  34.     }
  35.   }
  36.   return nodes
  37. }
  38. //3.广度优先遍历的递归写法
  39. function wideTraversal(node) {
  40.   let nodes = [],
  41.     i = 0
  42.   if (node != null) {
  43.     nodes.push(node)
  44.     wideTraversal(node.nextElementSibling)
  45.     node = nodes[i++]
  46.     wideTraversal(node.firstElementChild)
  47.   }
  48.   return nodes
  49. }
  50. //4.广度优先遍历的非递归写法
  51. function wideTraversal(node) {
  52.   let nodes = [],
  53.     i = 0
  54.   while (node != null) {
  55.     nodes.push(node)
  56.     node = nodes[i++]
  57.     let childrens = node.children
  58.     for (let i = 0; i < childrens.length; i++) {
  59.       nodes.push(childrens[i])
  60.     }
  61.   }
  62.   return nodes
  63. }
  2. <a name="g74YS"></a>
  3. #### 使用Promise封装AJAX请求
  4. ```javascript
  5. // promise 封装实现：
  6. function getJSON(url) {
  7.   // 创建一个 promise 对象
  8.   let promise = new Promise(function(resolve, reject) {
  9.     let xhr = new XMLHttpRequest();
  10.     // 新建一个 http 请求
  11.     xhr.open("GET", url, true);
  12.     // 设置状态的监听函数
  13.     xhr.onreadystatechange = function() {
  14.       if (this.readyState !== 4) return;
  15.       // 当请求成功或失败时，改变 promise 的状态
  16.       if (this.status === 200) {
  17.         resolve(this.response);
  18.       } else {
  19.         reject(new Error(this.statusText));
  20.       }
  21.     };
  22.     // 设置错误监听函数
  23.     xhr.onerror = function() {
  24.       reject(new Error(this.statusText));
  25.     };
  26.     // 设置响应的数据类型
  27.     xhr.responseType = "json";
  28.     // 设置请求头信息
  29.     xhr.setRequestHeader("Accept", "application/json");
  30.     // 发送 http 请求
  31.     xhr.send(null); // 参数data为携带的数据
  32.   });
  33.   return promise;
  34. }

实现sleep函数（使用Promise封装setTimeout）

  1. function timeout(delay) {
  2.   return new Promise(resolve => {
  3.     setTimeout(resolve, delay)
  4.   })
  5. };

使用 setTimeout 实现 setInterval

  1. function mySetInterval(fn, timeout) {
  2.   // 控制器，控制定时器是否继续执行
  3.   var timer = {
  4.     flag: true
  5.   };
  6.   // 设置递归函数，模拟定时器执行。
  7.   function interval() {
  8.     if (timer.flag) {
  9.       fn();
  10.       setTimeout(interval, timeout);
  11.     }
  12.   }
  13.   // 启动定时器
  14.   setTimeout(interval, timeout);
  15.   // 返回控制器
  16.   return timer;
  17. }

判断对象是否存在循环引用

循环引用对象本来没有什么问题，但是序列化的时候就会发生问题，比如调用JSON.stringify()对该类对象进行序列化，就会报错: Converting circular structure to JSON.

  1. const isCycleObject = (obj,parent) => {
  2.   const parentArr = parent || [obj];
  3.   for(let i in obj) {
  4.     if(typeof obj[i] === 'object') {
  5.       let flag = false;
  6.       parentArr.forEach((pObj) => {
  7.         if(pObj === obj[i]){
  8.           flag = true;
  9.         }
  10.       })
  11.       if(flag) return true;
  12.       flag = isCycleObject(obj[i],[...parentArr,obj[i]]);
  13.       if(flag) return true;
  14.     }
  15.   }
  16.   return false;
  17. }
  20. const a = 1;
  21. const b = {a};
  22. const c = {b};
  23. const o = {d:{a:3},c}
  24. o.c.b.aa = a;
  26. console.log(isCycleObject(o))

手写一个观察者模式

  1. class Subject{ // 被观察者的类  被观察者 需要将观察者收集起来
  2.   constructor(name){
  3.     this.name = name;
  4.     this.state = '非常开心'
  5.     this.observers = [];
  6.   }
  7.   attach(o){ // 进行收集
  8.     this.observers.push(o); // on
  9.   }
  10.   setState(newState){
  11.     this.state = newState;
  12.     this.observers.forEach(o=>o.update(this.name,newState)) // emit
  13.   }
  14. }
  15. class Observer{ // 观察者
  16.   constructor(name){
  17.     this.name = name;
  18.   }
  19.   update(s,state){
  20.     console.log(this.name+":" + s + '当前'+state);
  21.   }
  22. }
  23. // vue 数据变了（状态） 视图要更新 （通知依赖的人）  
  24. let s = new Subject('小宝宝');
  25. let o1 = new Observer('爸爸');
  26. let o2 = new Observer('妈妈');
  27. s.attach(o1)
  28. s.attach(o2)
  29. s.setState('不开心了')
  30. s.setState('开心了')

手写一个观察者模式

  1. class Subject{ // 被观察者的类  被观察者 需要将观察者收集起来
  2.     constructor(name){
  3.         this.name = name;
  4.         this.state = '非常开心'
  5.         this.observers = [];
  6.     }
  7.     attach(o){ // 进行收集
  8.         this.observers.push(o); // on
  9.     }
  10.     setState(newState){
  11.         this.state = newState;
  12.         this.observers.forEach(o=>o.update(this.name,newState)) // emit
  13.     }
  14. }
  15. class Observer{ // 观察者
  16.     constructor(name){
  17.         this.name = name;
  18.     }
  19.     update(s,state){
  20.         console.log(this.name+":" + s + '当前'+state);
  21.     }
  22. }
  23. // vue 数据变了（状态） 视图要更新 （通知依赖的人）  
  24. let s = new Subject('小宝宝');
  25. let o1 = new Observer('爸爸');
  26. let o2 = new Observer('妈妈');
  27. s.attach(o1)
  28. s.attach(o2)
  29. s.setState('不开心了')
  30. s.setState('开心了')

手写去重

使用闭包实现每隔一秒打印 1,2,3,4

  1. // 使用闭包实现
  2. for (var i = 0; i < 5; i++) {
  3.   (function(i) {
  4.     setTimeout(function() {
  5.       console.log(i);
  6.     }, i * 1000);
  7.   })(i);
  8. }
  10. // 使用 let 块级作用域
  12. for (let i = 0; i < 5; i++) {
  13.   setTimeout(function() {
  14.     console.log(i);
  15.   }, i * 1000);
  16. }

手写一个 jsonp

  1. function jsonp(url, params, callback) {
  2.   // 判断是否含有参数
  3.   let queryString = url.indexOf("?") === -1 ? "?" : "&";
  5.   // 添加参数
  6.   for (var k in params) {
  7.     if (params.hasOwnProperty(k)) {
  8.       queryString += k + "=" + params[k] + "&";
  9.     }
  10.   }
  12.   // 处理回调函数名
  13.   let random = Math.random()
  14.   .toString 
  15.   .replace(".", ""),
  16.       callbackName = "myJsonp" + random;
  18.   // 添加回调函数
  19.   queryString += "callback=" + callbackName;
  21.   // 构建请求
  22.   let scriptNode = document.createElement("script");
  23.   scriptNode.src = url + queryString;
  25.   window[callbackName] = function() {
  26.     // 调用回调函数
  27.     callback(...arguments);
  29.     // 删除这个引入的脚本
  30.     document.getElementsByTagName("head")[0].removeChild(scriptNode);
  31.   };
  33.   // 发起请求
  34.   document.getElementsByTagName("head")[0].appendChild(scriptNode);
  35. }

详细资料可以参考：《原生 jsonp 具体实现》《jsonp 的原理与实现》

实现 compose 函数

compose（组合）函数特点：

  • compose 的参数是函数，返回的也是一个函数
  • 因为除了第一个函数的接受参数，其他函数的接受参数都是上一个函数的返回值，所以初始函数的参数是多元的，而其他函数的接受值是一元的
  • compsoe 函数可以接受任意的参数，所有的参数都是函数，且执行方向是自右向左的，初始函数一定放到参数的最右面
  1. 实现
  2. ```js
  3. function compose(...fns) {
  4.     let isFirst = true
  5.     return (...args) => {
  6.     return fns.reduceRight((result, fn) => {
  7.         if (!isFirst) return fn(result)
  8.         isFirst = false
  9.         return fn(...result)
  10.     }, args)
  11.     }
  12. }

测试

  1. const greeting = (firstName, lastName) => 'hello, ' + firstName + ' ' + lastName
  2. const toUpper = str => str.toUpperCase()
  3. const fn = compose(toUpper, greeting)
  4. console.log(fn('jack', 'smith')) // HELLO, JACK SMITH
  2. <a name="FaW6h"></a>
  3. #### 格式化金钱，每千分位加逗号
  4. ```javascript
  5. // 1
  6. function format(str) {
  7.   let s = ''
  8.   let count = 0
  9.   for (let i = str.length - 1; i >= 0; i--) {
  10.     s = str[i] + s
  11.     count++
  12.     if (count % 3 == 0 && i != 0) {
  13.       s = ',' + s
  14.     }
  15.   }
  16.   return s
  17. }
  20. // 2
  21. function format(str) {
  22.   return str.replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
  23. }

请用js去除字符串空格

  1. ## 去除所有空格
  2. str.replace(/\s/g, '')
  4. ## 去除两边空格
  5. str.replace(/^\s+|\s+$/g, '')
  6. // 原生方法
  7. str.trim()

反转数组

要求

input: I am a student output: student a am I 输入是数组 输出也是数组不允许用 split splice reverse

  1. // 1
  2. function reverseArry(arr) {
  3.     const result = []
  4.     while (arr.length) {
  5.         result.push(arr.pop())
  6.     }
  8.     return result
  9. }
  11. console.log(reverseArry(['I', 'am', 'a', 'student']))
  12. // ["student", "a", "am", "I"]
  15. // 2
  16. function reverseArry(arry) {
  17.     const result = []
  18.     const distance = arry.length - 1
  19.     for (let i = distance; i >= 0; i--) {
  20.         result[distance - i] = arry[i]
  21.     }
  23.     return result
  24. }

将金额12345转成中文金额表示

要求

12345 => 一万两千三百四十五 10086 => 一万零八十六 100010001 => 一亿零一万零一 100000000 => 一亿 单位支持到亿

  1. function numToString(num) {
  2.     if (num > 999999999) throw '超过金额上限，最大单位为亿'
  3.     const unitMap = ['', '十', '百', '千', '万', '十', '百', '千', '亿']
  4.     const stringMap = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九']
  5.     const n = num + ''
  6.     const len = n.length
  7.     let lastIndex = len - 1
  8.     let result = ''
  9.     for (let i = 0; i < len; i++) {
  10.         if (i > 0 && n[i] == '0') {
  11.             if (n[i - 1] != '0') result += '零'
  12.         } else {
  13.             result += stringMap[n[i]] + unitMap[lastIndex]
  14.         }
  16.         lastIndex--
  17.     }
  19.     lastIndex = result.length - 1
  20.     if (result[lastIndex] == '零') return result.slice(0, lastIndex)
  21.     return result
  22. }
  24. console.log(numToString(12345)) // 一万二千三百四十五
  25. console.log(numToString(10086)) // 一万零八十六
  26. console.log(numToString(100010001)) // 一亿零一万零一
  27. console.log(numToString(100000000)) // 一亿

异步求和

要求

提供一个异步 add 方法如下，需要实现一个 await sum(…args) 函数： function asyncAdd(a, b, callback) { setTimeout(function() { callback(null, a + b) }, 1000) }

  1. function sum(...args) {
  2.     let start = 0
  3.     let result = 0
  4.     let count = 0 // 用于计算开启了多少个 Promise
  6.     function _sum(resolve) {
  7.     count++
  8.     new Promise((r, j) => {
  9.         let a = args[start++]
  10.         let b = args[start++]
  11.         a = a !== undefined? a : 0
  12.         b = b !== undefined? b : 0 // 如果访问的元素超出了数组范围，则转为 0
  13.         asyncAdd(a, b, (context, sum) => {
  14.         r(sum)
  15.         })
  17.         if (start < args.length) {
  18.         _sum(resolve)
  19.         }
  20.     })
  21.     .then(sum => {
  22.         result += sum
  23.         count--
  24.         if (count == 0) resolve(result) // 所有的 Promise 执行完毕，返回结果
  25.     })
  26.     }
  28.     return new Promise((resolve, reject) => {
  29.     if (!args || !args.length) return resolve(0)
  30.     if (args.length == 1) return resolve(args[0])
  31.     _sum(resolve)
  32.     })
  33. }
  36. // 测试
  37. sum(1,2,3,4,5,6,7,8,9,10,11).then(sum => console.log(sum)) // 66
  38. // or
  39. async function test() {
  40.     console.log(await sum(1,2,3,4,5,6,7,8,9,10,11))
  41. }
  43. test() // 66

数字集转换成字母集

要求

a~z 有 26个字母，按照 1~26 编码，现在给定一个数字字符串，输出所有可能的解码结果，如：输入 1234，输出 [‘awd’, ‘abcd’, ‘lcd’]

  1. const map = [0,'a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z']
  2. function getDecodes(num) {
  3.     if (!num) return []
  4.     num += ''
  5.     const result = []
  6.     _getDecodes(num, 0, [], result)
  7.     return result
  8. }
  10. function _getDecodes(num, start, path, result) {
  11.     if (start == num.length) return result.push([...path])
  12.     let c = num[start++]
  13.     path.push(map[c])
  14.     _getDecodes(num, start, path, result)
  15.     path.pop()
  17.     if (start == num.length) return
  18.     c += num[start]
  20.     if (c > 26) return
  21.     path.push(map[c])
  22.     _getDecodes(num, start + 1, path, result)
  23.     path.pop()
  24. }