ajax

  1. function ajax(url) {
  2.   const p = new Promise((resolve, reject) => {
  3.     const xhr = new XMLHttpRequest()
  4.     xhr.open('GET', url, true)
  5.     xhr.onreadystatechange = function() {
  6.       if (xhr.readyState === 4) {
  7.         if (xhr.status === 200) {
  8.           resolve(JSON.parse(xhr.responseText))
  9.         } else if (xhr.status === 404) {
  10.           reject(new Error('404 not found'))
  11.         }
  12.       }
  13.     }
  14.     xhr.send(null)
  15.   })
  16.   return p
  17. }
  19. const url = '/a.json'
  20. ajax(url)
  21. .then(res => console.log(res))
  22. .catch(err => console.log(err))

ajax 的串行、并行、并发限制

  • 串行：一个异步请求完了之后再进行下一个请求
  • 并行：多个异步请求同时进行
  • 并发限制：每个时刻并发执行的异步请求数量是固定的

    串行

    ```javascript const createPromise = (time, id) => () => new Promise(resolve => setTimeout(() => {
    1. console.log("promise", id);
    2. resolve();
    }, time) );

let promiseArr = [ createPromise(3000, 1), createPromise(2000, 2), createPromise(1000, 3) ]

// 方法一 function execute() { if (promiseArr.length === 0) return const fn = promiseArr.shift() fn().then(() => { execute() }) }

execute()

// 方法二 !(async function () { for (let fn of promiseArr) { await fn() } })()

// 方法三 const [p1, p2, p3] = promiseArr

p1().then(() => { return p2() }).then(() => { return p3() }).then(() => { console.log(‘end’) })

  1. <a name="3lmD6"></a>
  2. ### 并行
  3. ```javascript
  5. const createPromise = (time, id) => () =>
  6.   new Promise(resolve =>
  7.     setTimeout(() => {
  8.       console.log("promise", id);
  9.       resolve();
  10.     }, time)
  11.   );
  13. let promiseArr = [
  14.   createPromise(3000, 1),
  15.   createPromise(2000, 2),
  16.   createPromise(1000, 3)
  17. ]
  19. Promise.all(promiseArr.map(fn => fn())).then(() => {
  20.     console.log('end')
  21. })

并发限制

整体采用递归调用来实现：最初发送的请求数量上限为允许的最大值，并且这些请求中的每一个都应该在完成时继续递归发送，通过传入的索引来确定了urls里面具体是那个URL，保证最后输出的顺序不会乱，而是依次输出。

  1. function multiRequest(urls = [], maxNum) {
  2.   // 请求总数量
  3.   const len = urls.length;
  4.   // 根据请求数量创建一个数组来保存请求的结果
  5.   const result = new Array(len).fill(false);
  6.   // 当前完成的数量
  7.   let count = 0;
  9.   return new Promise((resolve, reject) => {
  10.     // 请求maxNum个
  11.     while (count < maxNum) {
  12.       next();
  13.     }
  14.     function next() {
  15.       let current = count++;
  16.       // 处理边界条件
  17.       if (current >= len) {
  18.         // 请求全部完成就将promise置为成功状态, 然后将result作为promise值返回
  19.         !result.includes(false) && resolve(result);
  20.         return;
  21.       }
  22.       const url = urls[current];
  23.       console.log(`开始 ${current}`, new Date().toLocaleString());
  24.       fetch(url)
  25.         .then((res) => {
  26.           // 保存请求结果
  27.           result[current] = res;
  28.           console.log(`完成 ${current}`, new Date().toLocaleString());
  29.           // 请求没有全部完成, 就递归
  30.           if (current < len) {
  31.             next();
  32.           }
  33.         })
  34.         .catch((err) => {
  35.           console.log(`结束 ${current}`, new Date().toLocaleString());
  36.           result[current] = err;
  37.           // 请求没有全部完成, 就递归
  38.           if (current < len) {
  39.             next();
  40.           }
  41.         });
  42.     }
  43.   });
  44. }

事件绑定

  1. function bindEvent(elem, type, selector, fn) {
  2.   if (fn == null) {
  3.     fn = selector
  4.     selector = null
  5.   }
  6.   elem.addEventListener(type, event => {
  7.     const target = event.target
  8.     if (selector) {
  9.       // 代理绑定
  10.       if (target.matches(selector)) {
  11.         fn.call(target, event)
  12.       } 
  13.     } else {
  14.       // 普通绑定
  15.       fn.call(target, event)
  16.     }
  17.   })
  18. }
  20. // 普通绑定
  21. const btn1 = document.getElementById('btn1')
  22. bindEvent(btn1, 'click', event => {
  23.   console.log(event.target)
  24.   event.preventDefault()
  25.   alert(this.innerComments)
  26. })
  28. // 代理绑定
  29. const div3 = document.getElementById('div3')
  30. bindEvent(div3, 'click', 'a', event => {
  31.   event.preventDefault()
  32.   alert(this.innerComments)
  33. })

Call、apply、bind

call

  1. Function.prototype.myCall = function (context = window, ...args) {
  2.   context.fn = this
  3.   const result = context.fn(...args)
  4.   delete context.fn
  5.   return result
  6. }

apply

  1. Function.prototype.myApply = function (context = window, args) {
  2.   context.fn = this
  3.   const result = !args ? context.fn() : context.fn(...args)
  4.   delete context.fn
  5.   return result
  6. }

bind

  1. Function.prototype.myBind = function (context, ...args) {
  2.   const self = this
  3.   return function () {
  4.       return self.apply(context, args)
  5.   }
  6. }
  8. function fn1(a, b, c) {
  9.     console.log('this', this)
  10.     console.log(a, b, c)
  11.     return 'this is fn1'
  12. }
  14. const fn2 = fn1.myBind({x: 100}, 10, 20, 30)
  15. const res = fn2()
  16. console.log(res)

深拷贝

  1. /**
  2.  * 深拷贝
  3.  */
  5. const obj1 = {
  6.     age: 20,
  7.     name: 'xxx',
  8.     address: {
  9.         city: 'beijing'
  10.     },
  11.     arr: ['a', 'b', 'c']
  12. }
  14. const obj2 = deepClone(obj1)
  15. obj2.address.city = 'shanghai'
  16. obj2.arr[0] = 'a1'
  17. console.log(obj1.address.city)
  18. console.log(obj1.arr[0])
  20. /**
  21.  * 深拷贝
  22.  * @param {Object} obj 要拷贝的对象
  23.  */
  24. function deepClone(obj = {}) {
  25.     if (typeof obj !== 'object' || obj == null) {
  26.         // obj 是 null ，或者不是对象和数组，直接返回
  27.         return obj
  28.     }
  30.     // 初始化返回结果
  31.     let result
  32.     if (obj instanceof Array) {
  33.         result = []
  34.     } else {
  35.         result = {}
  36.     }
  38.     for (let key in obj) {
  39.         // 保证 key 不是原型的属性
  40.         if (obj.hasOwnProperty(key)) {
  41.             // 递归调用！！！
  42.             result[key] = deepClone(obj[key])
  43.         }
  44.     }
  46.     // 返回结果
  47.     return result
  48. }

全相等 isEqual

  1. const obj1 = {
  2.   a: 100,
  3.   b: {
  4.     x: 100,
  5.     y: 200,
  6.   }
  7. }
  9. const obj2 = {
  10.   a: 100,
  11.   b: {
  12.     x: 100,
  13.     y: 200
  14.   },
  15. }
  17. // 判断是否是对象或数组
  18. function isObject(obj) {
  19.   return typeof obj === 'object' && obj !== null
  20. }
  22. // 全相等
  23. function isEqual(obj1, obj2) {
  24.   if (!isObject(obj1) || !isObject(obj2)) return obj1 === obj2
  26.   if (obj1 === obj2) return true
  28.   // 两个都是对象或数组，而且不相等
  29.   // 1. 先取出 obj1 和 obj2 的 keys，比较个数
  30.   const obj1Keys = Object.keys(obj1)
  31.   const obj2Keys = Object.keys(obj2)
  32.   if (obj1Keys.length !== obj2Keys.length) {
  33.     return false
  34.   }
  35.   // 2. 以 obj1 为基准，和 obj2 依次递归比较
  36.   return obj1Keys.every(key => isEqual(obj1[key], obj2[key]))
  37. }
  39. console.log(isEqual(obj1, obj2))

jquery

  1. class jQuery {
  2.     constructor(selector) {
  3.         const result = document.querySelectorAll(selector)
  4.         const length = result.length
  5.         for (let i = 0; i < length; i++) {
  6.             this[i] = result[i]
  7.         }
  8.         this.length = length
  9.         this.selector = selector
  10.     }
  11.     get(index) {
  12.         return this[index]
  13.     }
  14.     each(fn) {
  15.         for (let i = 0; i < this.length; i++) {
  16.             const elem = this[i]
  17.             fn(elem)
  18.         }
  19.     }
  20.     on(type, fn) {
  21.         return this.each(elem => {
  22.             elem.addEventListener(type, fn, false)
  23.         })
  24.     }
  25.     // 扩展很多 DOM API
  26. }
  28. // 插件
  29. jQuery.prototype.dialog = function (info) {
  30.     alert(info)
  31. }
  33. // “造轮子”
  34. class myJQuery extends jQuery {
  35.     constructor(selector) {
  36.         super(selector)
  37.     }
  38.     // 扩展自己的方法
  39.     addClass(className) {
  41.     }
  42.     style(data) {
  44.     }
  45. }
  47. // const $p = new jQuery('p')
  48. // $p.get(1)
  49. // $p.each((elem) => console.log(elem.nodeName))
  50. // $p.on('click', () => alert('clicked'))

promise.all

  1. function promiseAll(promises) {
  2.   return new Promise((resolve, reject) => {
  3.     if (!Array.isArray(promises)) {
  4.       throw new Error('promises must be array')
  5.     }
  7.     let result = []
  8.     let count = 0
  9.     promises.forEach((promise, index) => {
  10.       promise.then((res) => {
  11.         result[index] = res
  12.         count++
  13.         count === promises.length && resolve(result)
  14.       }, (err) => {
  15.         reject(err)
  16.       })
  17.     })
  18.   })
  19. }
  21. // 测试用例
  22. let p1 = Promise.resolve(1),
  23.     p2 = Promise.resolve(2),
  24.     p3 = Promise.resolve(3);
  26. promiseAll([p1, p2, p3]).then(values => {
  27.   console.log(values)
  28. }, (err)=>{
  29.   console.log(err, 'err')
  30. })

promise

链式调用还需优化

  1. const STATUS_PENDING = 'pending'
  2. const STATUS_FULFILLED = 'fulfilled'
  3. const STATUS_REJECTED = 'rejected'
  4. class myPromise {
  5.   constructor(executor) {
  6.     this.status = STATUS_PENDING
  7.     this.value = ''
  8.     this.reason = ''
  10.     // 成功存放的数组
  11.     this.onResolvedCallbacks = [];
  12.     // 失败存放法数组
  13.     this.onRejectedCallbacks = [];
  15.     let resolve = value => {
  16.       if (this.status === STATUS_PENDING) {
  17.         this.status = STATUS_FULFILLED
  18.         this.value = value
  19.         // pending->fulfilled 按照成功清单执行
  20.         this.onResolvedCallbacks.forEach(fn => fn())
  21.       }
  22.     }
  23.     let reject = reason => {
  24.       if (this.status === STATUS_PENDING) {
  25.         this.status = STATUS_REJECTED
  26.         this.reason = reason
  27.         // pending->rejected 按照异常清单执行
  28.         this.onRejectedCallbacks.forEach(fn => fn());
  29.       }
  30.     }
  31.     try {
  32.       executor(resolve, reject);
  33.     } catch (err) {
  34.       reject(err);
  35.     }
  36.   }
  37.   then(onFulfilled = () => {}, onRejected = () => {}) {
  38.     if (this.status === STATUS_FULFILLED) {
  39.       onFulfilled(this.value)
  40.     }
  41.     if (this.status === STATUS_REJECTED) {
  42.       onRejected(this.reason)
  43.     }
  44.     // 忙碌状态,先记录老板吩咐的内容
  45.     if (this.status === STATUS_PENDING) {
  46.       // onFulfilled传入到成功数组
  47.       this.onResolvedCallbacks.push(() => onFulfilled(this.value))
  48.       // onRejected传入到失败数组
  49.       this.onRejectedCallbacks.push(() => onRejected(this.reason))
  50.     }
  51.   }
  53.   catch(fn){
  54.     return this.then(null,fn)
  55.   }
  56. }
  58. new myPromise((resolve, reject) => {
  59.   console.log('老板曰: 一秒做完手上的事来一下我办公室,做不完滚蛋')
  60.   setTimeout(() => {
  61.     if (false) { // 臣妾做不到啊
  62.       resolve('做完了手上的事,去老板办公室')
  63.     } else {
  64.       reject('做不完,滚蛋')
  65.     }
  66.   }, 1000)
  67. }).then(res => {
  68.   console.log(`1s 后:${res}`)
  69. }).catch(error => {
  70.   console.log(`1s 后:${error}`)
  71. })

防抖 debounce

  1. const input1 = document.getElementById('input1')
  3. // 防抖
  4. function debounce(fn, delay = 500) {
  5.     // timer 是闭包中的
  6.     let timer = null
  8.     return function () {
  9.         if (timer) {
  10.             clearTimeout(timer)
  11.         }
  12.         timer = setTimeout(() => {
  13.             fn.apply(this, arguments)
  14.             timer = null
  15.         }, delay)
  16.     }
  17. }
  19. input1.addEventListener('keyup', debounce(function (e) {
  20.     console.log(e.target)
  21.     console.log(input1.value)
  22. }, 600))

节流 throttle

  1. const div1 = document.getElementById('div1')
  3. // 节流
  4. function throttle(fn, delay = 100) {
  5.     let timer = null
  7.     return function () {
  8.         if (timer) {
  9.             return
  10.         }
  11.         timer = setTimeout(() => {
  12.             fn.apply(this, arguments)
  13.             timer = null
  14.         }, delay)
  15.     }
  16. }
  18. div1.addEventListener('drag', throttle(function (e) {
  19.     console.log(e.offsetX, e.offsetY)
  20. }))

数组 flat

  1. function flat(arr) {
  2.   // 验证 arr 中，是否还有深层数组
  3.   const isDeep = arr.some(v => v instanceof Array)
  4.   if (!isDeep) return arr
  6.   const res = Array.prototype.concat.apply([], arr)
  7.   return flat(res)
  8. }
  9. const arr = [1, 2, [3, 4, [10, 20, [100, 200]]], 5]
  10. console.log(flat(arr))

数组去重

  1. // 传统方式
  2. function unique(arr) {
  3.   const res = []
  4.   arr.forEach(item => {
  5.     if (res.indexOf(item) === -1) {
  6.       res.push(item)
  7.     }
  8.   })
  9.   return res
  10. }
  12. // 使用 Set
  13. function unique(arr) {
  14.   return [...new Set(arr)]
  15. }
  17. console.log(unique([1, 2, 2, 3, 4, 4]))

柯里化实现 add(1)(2)(3)

需要实现一个工具专门生成柯里化函数。主要思路是要判断当前传入函数的参数个数 (args.length) 是否大于等于原函数所需参数个数 (fn.length) ，如果是，则执行当前函数；如果是小于，则返回一个函数

  1. // 简易版
  2. const add = x => y => z => x + y + z;
  3. console.log(add(1)(2)(3));
  5. // 加强版，需要实现
  6. // add(1, 2, 3);
  7. // add(1, 2)(3);
  8. // add(1)(2, 3);
  9. const curry = (fn, ...args) => 
  10.     // 函数的参数个数可以直接通过函数数的.length属性来访问
  11.     args.length >= fn.length // 这个判断很关键！！！
  12.     // 传入的参数大于等于原始函数fn的参数个数，则直接执行该函数
  13.     ? fn(...args)
  14.     /**
  15.      * 传入的参数小于原始函数fn的参数个数时
  16.      * 则继续对当前函数进行柯里化，返回一个接受所有参数（当前参数和剩余参数） 的函数
  17.     */
  18.     : (..._args) => curry(fn, ...args, ..._args);
  20. function add1(x, y, z) {
  21.     return x + y + z;
  22. }
  23. const add = curry(add1);
  24. console.log(add(1, 2, 3));
  25. console.log(add(1)(2)(3));
  26. console.log(add(1, 2)(3));
  27. console.log(add(1)(2, 3));

大数相加

  1. let a = "9007199254740991";
  2. let b = "1234567899999999999";
  4. function add(a ,b){
  5.    //取两个数字的最大长度
  6.    let maxLength = Math.max(a.length, b.length);
  7.    //用0去补齐长度
  8.    a = a.padStart(maxLength , 0);//"0009007199254740991"
  9.    b = b.padStart(maxLength , 0);//"1234567899999999999"
  10.    //定义加法过程中需要用到的变量
  11.    let t = 0;
  12.    let f = 0;   //"进位"
  13.    let sum = "";
  14.    for(let i=maxLength-1 ; i>=0 ; i--){
  15.       t = parseInt(a[i]) + parseInt(b[i]) + f;
  16.       f = Math.floor(t/10);
  17.       sum = t%10 + sum;
  18.    }
  19.    if(f == 1){
  20.       sum = "1" + sum;
  21.    }
  22.    return sum;
  23. }
  25. add(a,b)

千位分隔符

方法一：

  • 将数字转换为字符数组（需考虑小数点）
  • 倒序字符数组，进行遍历，每三位加一个逗号

  • 遍历完成后，再将字符数组倒序回来，再合并成字符串即可 ```javascript function numFormat(num) { num = num.toString().split(‘.’) // 分隔小数点 const arr = num[0].split(‘’).reverse() // 转换为字符数组，并倒序 const res = []

    for (let i = 0; i < arr.length; i += 1) {

    1.   if (i % 3 === 0 && i !== 0) {
    2.       res.push(',')
    3.   }
    4.   res.push(arr[i])

    } res.reverse() // 再次倒序恢复正常顺序 if (num[1]) {

    1.   return `${res.join('')}.${num[1]}`

    } else {

    1.   return res.join('')

    } }

const a = 1234567894532; const b = 673439.4542; console.log(numFormat(a)); // “1,234,567,894,532” console.log(numFormat(b)); // “673,439.4542”

  1. 方法二：
  3. - 使用JS自带的函数 [toLocaleString](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString)
  4. ```javascript
  5. const a = 1234567894532;
  6. const b = 673439.4542;
  8. console.log(a.toLocaleString());  // "1,234,567,894,532"
  9. console.log(b.toLocaleString());  // "673,439.454"  （小数部分四舍五入了）

方法三：

  • 使用 正则表达式 和 replace 函数
  • replace 语法：str.replace(regexp|substr, newSubStr|function) ```javascript function numFormat(num){ const res = num.toString().replace(/\d+/, function(n) { // 先提取整数部分
    1.  return n.replace(/(\d)(?=(\d{3})+$)/g, function($1) {
    2.     return $1+",";
    3.  });
    }) return res; }

const a = 1234567894532; const b = 673439.4542; console.log(numFormat(a)); // “1,234,567,894,532” console.log(numFormat(b)); // “673,439.4542” ```