数组扁平化

  1. //32手写
  2. //01.数组扁平化
  3. let arr = [1, [2, [3, [4, 5]]], 6];
  4. // => [1, 2, 3, 4, 5, 6]
  6. let res;
  7. res = arr.flat(Infinity);
  8. res = JSON.stringify(arr).replace(/\[|\]/g, "").split(",");
  9. res = JSON.parse("[" + JSON.stringify(arr).replace(/\[|\]/g, "") + "]");
  10. const flatten = arr => {
  11.     return arr.reduce((pre, cur) => {
  12.         return pre.concat(Array.isArray(cur) ? flatten(cur) : cur);
  13.     }, []);
  14. };
  15. res = flatten(res);
  16. const result = [];
  17. const f2 = arr => {
  18.     for (let i = 0; i < arr.length; i++) {
  19.         Array.isArray(arr[i]) ? f2(arr[i]) : result.push(arr[i]);
  20.     }
  21.     return result;
  22. };
  23. res = f2(arr);
  24. console.log(res);

数组去重

  1. // 02.数组去重
  2. arr = [1, 1, "1", 17, true, true, false, false, "true", "a", {}, {}];
  3. // => [1, '1', 17, true, false, 'true', 'a', {}, {}]
  5. res = [...new Set(arr)];
  6. const unique = arr => {
  7.     return arr.filter((item, idx) => {
  8.         return arr.indexOf(item) === idx;
  9.     });
  10. };
  11. res = unique(arr);
  12. console.log(res);

类数组转化为数组

  1. // 03.类数组转化为数组
  3. // const div = document.querySelector('div')
  4. const div = [1, 1]; //一般是 arguments 或是 dom 操作方法返回的数据
  5. res = Array.from(div);
  6. res = Array.prototype.slice.call(div);
  7. res = [...div];
  8. res = Array.prototype.concat.call(div);
  9. console.log(res);

Array.prototype.filter()

  1. //04.Array.prototype.filter()
  2. Array.prototype.fakeFilter = function(callback,thisArg){
  3.   if(this == undefined)throw new TypeError('this is null or undefined');
  4.   if(typeof callback !== "function")throw new TypeError(callback+'is not a function');
  6.   const res = [];
  7.   const O = Object(this)
  8.   const len = O.length >>> 0
  9.   for(let i = 0;i<len;i++){
  10.     if(i in O){
  11.       if(callback.call(thisArg,O[i],i,O)){
  12.         res.push(O[i])
  13.       }
  14.     }
  15.   }
  16.   return res
  17. }
  18. const arr =[-1,-1,11,1,1]
  19. console.log(arr.fakeFilter((item)=>{
  20.   return item > 0
  21. }))

Array.prototype.map()

  1. //05.Array.prototype.map()
  2. Array.prototype.myMap = function(callback,thisArg){
  3.   if(this == undefined)throw new TypeError('this is null or undefined');
  4.   if(typeof callback !== "function")throw new TypeError(callback+'is not a function');
  6.   const res = []
  7.   const O = Object(this)
  8.   const len  = O.length>>>0
  9.   for(let i =0;i<len;i++){
  10.     if( i in O){
  11.       res[i] = callback.call(thisArg,O[i],i,this)
  12.     }
  13.   }
  14.   return res
  15. }
  16. function arrDouble(i){
  17.   return i*2
  18. }
  19. res = arr.myMap(arrDouble)
  20. console.log(res);

Array.prototype.forEach()

  1. //06.Array.prototype.forEach()
  2. Array.prototype.myForEach = function(callback,thisArg){
  3.   if(this == undefined)throw new TypeError('this is null or undefined');
  4.   if(typeof callback !== "function")throw new TypeError(callback+'is not a function');
  6.   const O = Object(this)
  7.   const len  = O.length>>>0
  8.   let k =0
  9.   while(k < len){
  10.     if(k in O){
  11.       callback.call(thisArg,O[k],k,this)
  12.     }
  13.     k++
  14.   }
  15. }
  16. function clog(i){
  17.   console.log(i)
  18. }
  19. res.myForEach(clog)
  20. // console.log(res)

关于其中的in

Array.prototype.reduce()

  1. //07.Array.prototype.reduce()
  2. Array.prototype.myReduce = function(callback,initValue){
  3.   if (this == undefined) throw new TypeError("this is null or undefined");
  4.     if (typeof callback !== "function")
  5.         throw new TypeError(callback + "is not a function");
  7.   const O = Object(this)
  8.   const len = O.length >>> 0
  9.   let accumulator  = initValue
  10.   let k = 0
  11.   if(accumulator === undefined){
  12.     while(k < len && !(k in O))k++//找到数组的第一个有效值
  13.     if(k >= len)throw new TypeError('Reduce of empty array with no initial Value')
  14.     accumulator = O[k++]
  15.   }
  16.   while(k<len){
  17.     if(k in O)accumulator = callback.call(undefined,accumulator,O[k],k,O)
  18.     k++
  19.   }
  20.   return accumulator
  21. }
  22. const arr = [1,1,1,,4,5]
  23. function add(a,b){
  24.   return a+b
  25. }
  26. let res = arr.myReduce(add)
  27. // console.log(res)

Function.prototype.call

  3. //08.Function.prototype.call
  4. Function.prototype.myCall = function (context = window, ...args) {
  5.   if (typeof this !== 'function') throw new TypeError('Type Error')
  7.   const fn = Symbol('fn')
  8.   context[fn] = this
  10.   const res = context[fn](...args)
  11.   delete context[fn]
  12.   return res
  13. }
  14. const a = {
  15.   name: 'aaa',
  16.   sayName: function () {
  17.     console.log(this.name)
  18.   },
  19. }
  20. const b = {
  21.   name: 'bbb',
  22. }
  23. // a.sayName.myCall(b) //bbb
  24. function Parent(name) {
  25.   this.name = name
  26.   this.showName = function () {
  27.     console.log(this.name)
  28.   }
  29. }
  30. function Child(name) {
  31.   Parent.myCall(this, name)
  32. }
  33. const c = new Child('ccc')
  34. // c.showName() //ccc

Function.prototype.apply()

  1. //09.Function.prototype.apply()
  2. //与call不同的是 函数接收的参数是数组
  3. Function.prototype.myApply = function (context = window, args) {
  4.   if (typeof this !== 'function') throw new TypeError('Type Error')
  6.   const fn = Symbol('fn')
  7.   context[fn] = this
  9.   if (args) {
  10.     const res = context[fn](...args)
  11.   } else {
  12.     const res = context[fn]()
  13.   }
  14.   delete context[fn]
  15.   return res
  16. }
  17. // a.sayName.myApply(b) //bbb
  18. function C2(name) {
  19.   Parent.myApply(this, [name])
  20. }
  21. const c2 = new C2('c222')
  22. // c2.showName() //c222

Function.prototype.bind()

  1. //10.Function.prototype.bind
  2. Function.prototype.myBind = function (context, ...args) {
  3.   if (typeof this !== 'function') throw new TypeError('Type Error')
  5.   const fnToBind = this
  6.   const fuBound = function () {
  7.     return fnToBind.apply(context, [...args, ...arguments])
  8.   }
  9.   return fuBound
  10. }
  11. const boy = {
  12.   age: 18,
  13.   getAge() {
  14.     return this.age
  15.   },
  16. }
  17. const getX = boy.getAge.myBind(boy)
  18. // console.log(getX())//18
  19. function add(a, b) {
  20.   return a + b
  21. }
  22. // console.log(add.myBind(null, 10)(12, 1)) //22

深拷贝和浅拷贝最根本的区别在于是否真正获取一个对象的复制实体，而不是引用。 假设B复制了A，修改A的时候，看B是否发生变化：

如果B跟着也变了，说明是浅拷贝，拿人手短！（修改堆内存中的同一个值）

如果B没有改变，说明是深拷贝，自食其力！（修改堆内存中的不同的值） 浅拷贝（shallowCopy）只是增加了一个指针指向已存在的内存地址，

深拷贝（deepCopy）是增加了一个指针并且申请了一个新的内存，使这个增加的指针指向这个新的内存，

debounce

  1. //11 debounce
  2. const myDebounce = (fn, time) => {
  3.   let timeout = null
  4.   return function () {
  5.     clearTimeout(timeout)
  6.     timeout = setTimeout(() => {
  7.       fn.apply(this, arguments)
  8.     }, time)
  9.   }
  10. }

throttle

  1. //12. throttle
  2. const myThrottle = (fn, time) => {
  3.   let flag = true
  4.   return function () {
  5.     if (!flag) return
  6.     flag = false
  7.     setTimeout(() => {
  8.       fn.apply(this, arguments)
  9.       flag = true
  10.     }, time)
  11.   }
  12. }

函数柯里化

  1. //13.函数柯里化
  2. //实现add(1)(2)(3)(4)=10; 、 add(1)(1,2,3)(2)=9;
  3. //直接简单add版本
  4. function add2() {
  5.   const _args = [...arguments]
  6.   function inner() {
  7.     _args.push(...arguments)
  8.     return inner
  9.   }
  10.   inner.toString = function () {
  11.     return _args.reduce((sum, cur) => sum + cur)
  12.   }
  13.   return inner
  14. }
  15. const resAdd = add2(1)(2)(3)(4)
  16. // console.log(resAdd == 10) //true
  17. // console.log(resAdd === 10) //false
  18. // //实际上得到的 resAdd 是一个函数
  20. //参数定长柯里化
  21. function myCurry(fn) {
  22.   //获取原函数的参数长度
  23.   const argLen = fn.length
  25.   //保留预置参数
  26.   const presetArgs = [].slice.call(arguments, 1) //去掉传入的第一个参数(fn)
  27.   // console.log(presetArgs)
  28.   //返回新函数
  29.   return function () {
  30.     // const restArgs = [].slice.call(arguments)  //和下面的写法一样效果
  31.     const restArgs = [...arguments]
  32.     // console.log(restArgs)
  33.     const allArgs = [...presetArgs, ...restArgs]
  34.     // console.log(allArgs)
  35.     if (allArgs.length >= argLen) {
  36.       //如果参数够了，就执行原函数
  37.       // console.log(this)
  38.       // console.log(allArgs)
  39.       // console.log(fn.apply(this, [1, 2, 3]))
  40.       return fn.apply(null, allArgs)
  41.     } else {
  42.       //否则继续柯里化
  43.       return myCurry.call(null, fn, ...allArgs)
  44.     }
  45.   }
  46. }
  48. function add(a, b, c) {
  49.   return a + b + c
  50. }
  51. // 把函数传进去就可以了
  52. const addCurry = myCurry(add)
  53. // console.log(addCurry)
  54. // console.log(addCurry(1)(2)(3))
  55. // console.log(addCurry(1)(2, 3))
  56. // console.log(addCurry(1, 2, 4))
  57. // console.log(addCurry(1, 2)(3))
  59. //参数不定长柯里化
  60. function myCurry2(fn) {
  61.   const preset = [].slice.call(arguments, 1)
  62.   function curried() {
  63.     const rest = [].slice.call(arguments)
  64.     const all = [...preset, rest]
  66.     //新函数执行后仍然返回一个结果函数。
  67.     return myCurry2.call(null, fn, ...all)
  68.   }
  70.   //结果函数可以被Javascript引擎解析 ==> 重写toString
  71.   curried.toString = function () {
  72.     return fn.apply(null, preset)
  73.   }
  74.   return curried
  75. }
  76. function dynamicAdd() {
  77.   return [...arguments].reduce((prev, curr) => {
  78.     return prev + curr
  79.   }, 0)
  80. }
  81. const addPro = myCurry2(dynamicAdd) //经 curry处理，得到一个新函数，这一点不变。
  82. console.log(typeof addPro)
  83. // addPro(1)(2)(3)(4) // 10
  84. // addPro(1, 2)(3, 4)(5, 6) // 21

模拟new操作

  1. //模拟new操作
  2. function myNew(someConstructor, ...args) {
  3.   if (typeof someConstructor !== 'function') throw new TypeError('Type Error')
  5.   //以 someConstructor 为原型创建一个对象
  6.   const obj = Object.create(someConstructor.prototype)
  7.   //执行构造函数并将this绑定到新创建的对象上
  8.   const res = someConstructor.apply(obj, args)
  10.   //判断构造函数执行返回的结果是否是引用数据类型
  11.   //若是则返回构造函数返回的结果
  12.   //若不是则返回创建的对象
  13.   const isObj = typeof res === 'object' && res !== null
  14.   const isFuc = typeof res === 'function'
  15.   return isObj || isFuc ? res : obj
  16. }
  17. function Otest() {
  18.   this.a = 'a'
  19. }
  20. const o1 = myNew(Otest)
  21. // console.log(o1.a) //a

instanceof

  1. //15. instanceof
  2. //左侧是对象，右侧是函数
  3. const myInstanceof = (left, right) => {
  4.   //基本数据类型 false
  5.   if (typeof left !== 'object' || left === null) return false
  6.   let proto = Object.getPrototypeOf(left)
  7.   while (true) {
  8.     if (proto === null) return false
  9.     if (proto === right.prototype) return true
  10.     proto = Object.getPrototypeOf(proto)
  11.   }
  12. }
  13. function grandpa() {}
  14. function father() {}
  15. father.prototype = new grandpa()
  16. function son() {}
  17. son.prototype = new father()
  18. let xiaoming = new son()
  19. // console.log(myInstanceof(xiaoming, son)) //true
  20. // console.log(myInstanceof(xiaoming, father)) //true
  21. // console.log(myInstanceof(xiaoming, grandpa)) //true


  1. //16. 原型继承——寄生组合继承
  2. function Parent() {
  3.   this.name = 'parent'
  4. }
  5. function Child() {
  6.   Parent.call(this)
  7.   this.type = 'children'
  8. }
  9. Child.prototype = Object.create(Parent.prototype)
  10. Child.prototype.constructor = Child
  11. const c = new Child()
  12. // console.log(c.name) //parent
  13. // console.log(c.type) //children
  14. // console.log(c instanceof Parent) //true
  16. //17. Object.is
  17. /* 主要解决：
  18. 1. +0 === -0 //true
  19. 2. NaN === NaN //false
  20. */
  21. const myIs = (x, y) => {
  22.   if (x === y) {
  23.     return x !== 0 || y !== 0 || 1 / x === 1 / y
  24.   } else {
  25.     return x !== x && y !== y
  26.   }
  27. }
  28. // console.log(myIs(+0,-0))//false
  29. // console.log(myIs(NaN,NaN))//true

Object.assign

还没写呢

深拷贝

  1. //19. 深拷贝
  2. const myCloneDeep = (target, hash = new WeakMap()) => {
  3.   //对于传入参数进行处理
  4.   if (typeof target !== 'object' || target === null)
  5.     return target
  7.   //哈希表中存在则直接返回
  8.   if (hash.has(target)) return hash.get(target)
  10.   const cloneTarget = Array.isArray(target) ? [] : {}
  11.   hash.set(target, cloneTarget)
  13.   //针对Symbol属性
  14.   const symKeys = Object.getOwnPropertySymbols(target)
  15.   if (symKeys.length) {
  16.     symKeys.forEach((symKey) => {
  17.       if (
  18.         typeof target[symKey] === 'object' &&
  19.         target[symKey] !== null
  20.       ) {
  21.         cloneTarget[symKey] = myCloneDeep(target[symKey])
  22.       } else {
  23.         cloneTarget[symKey] = target[symKey]
  24.       }
  25.     })
  26.   }
  28.   for (const i in target) {
  29.     if (Object.prototype.hasOwnProperty.call(target, i)) {
  30.       cloneTarget[i] =
  31.         typeof target[i] === 'object' && target[i] !== null
  32.           ? myCloneDeep(target[i], hash)
  33.           : target[i]
  34.     }
  35.   }
  36.   return cloneTarget
  37. }
  38. const obj = {
  39.   a: 1,
  40. }
  41. const obj2 = myCloneDeep(obj)
  42. // console.log(obj2) //{a:1}
  43. // obj2.a = 2
  44. // console.log(obj) //{a:1}
  45. // console.log(obj2) //{a:2,b:2}

promise

Promise.all()会等待所有Promise完成，Promise.race()只会执行一个Promise。

  1. //20.promise
  2. // 模拟实现Promise
  3. // Promise利用三大手段解决回调地狱：
  4. // 1. 回调函数延迟绑定
  5. // 2. 返回值穿透
  6. // 3. 错误冒泡
  7. const PENDING = 'PENDING'
  8. const FULFILLED = 'FULFILLED'
  9. const REJECTED = 'REJECTED'
  10. class myPromise {
  11.   constructor(exector) {
  12.     //初始化状态
  13.     this.status = PENDING
  15.     //将成功、失败结果放在 this 上,便于then、catch 访问
  16.     this.value = undefined
  17.     this.reason = undefined
  19.     //成功态回调函数队列
  20.     this.onFulfilledCallbacks = []
  21.     //失败态回调函数队列
  22.     this.onRejectedCallback = []
  24.     const resolve = (value) => {
  25.       //只有进行中状态才能更改状态
  26.       if (this.status === PENDING) {
  27.         this.status = FULFILLED
  28.         this.value = value
  29.         //成功态函数依次执行
  30.         this.onFulfilledCallbacks.forEach((fn) =>
  31.           fn(this.value),
  32.         )
  33.       }
  34.     }
  36.     const reject = (reason) => {
  37.       if (this.status === PENDING) {
  38.         this.status = REJECTED
  39.         this.reason = reason
  40.         //失败态的函数依次执行
  41.         this.onRejectedCallback.forEach((fn) =>
  42.           fn(this.reason),
  43.         )
  44.       }
  45.     }
  46.     try {
  47.       //立即执行executor
  48.       //把内部的resolve和reject 传入executor,用户可调用resolve和reject
  49.       exector(resolve, reject)
  50.     } catch (e) {
  51.       //exrcutor 执行出错，将错误内容reject抛出去
  52.       reject(e)
  53.     }
  54.   }
  55.   then(onFulfilled, onRejected) {
  56.     onFulfilled =
  57.       typeof onFulfilled === 'function'
  58.         ? onFulfilled
  59.         : (value) => value
  61.     onRejected =
  62.       typeof onRejected === 'function'
  63.         ? onRejected
  64.         : (reason) => {
  65.             throw new Error(
  66.               reason instanceof Error
  67.                 ? reason.message
  68.                 : reason,
  69.             )
  70.           }
  71.     //保存this
  72.     const self = this
  73.     return new myPromise((resolve, reject) => {
  74.       if (self.status === PENDING) {
  75.         self.onFulfilledCallbacks.push(() => {
  76.           //try捕获错误
  77.           try {
  78.             //模拟微任务
  79.             setTimeout(() => {
  80.               const result = onFulfilled(self.value)
  81.               //分两种情况：
  82.               //1.回调函数返回值是 Promise 执行then操作
  83.               //2.如果不是Promise，调用新Promise的resolve函数
  84.               result instanceof myPromise
  85.                 ? result.then(resolve, reject)
  86.                 : resolve(result)
  87.             })
  88.           } catch (e) {
  89.             reject(e)
  90.           }
  91.         })
  92.         self.onRejectedCallback.push(() => {
  93.           try {
  94.             setTimeout(() => {
  95.               const result = onRejected(self.reason)
  96.               result instanceof myPromise
  97.                 ? result.then(resolve, reject)
  98.                 : resolve(result)
  99.             })
  100.           } catch (e) {
  101.             reject(e)
  102.           }
  103.         })
  104.       } else if (self.status === FULFILLED) {
  105.         try {
  106.           setTimeout(() => {
  107.             const result = onFulfilled(self.value)
  108.             result instanceof myPromise
  109.               ? result.then(resolve, reject)
  110.               : resolve(result)
  111.           })
  112.         } catch (e) {
  113.           reject(e)
  114.         }
  115.       } else if (self.status === REJECTED) {
  116.         try {
  117.           setTimeout(() => {
  118.             const result = onRejected(self.reason)
  119.             result instanceof myPromise
  120.               ? result.then(resolve, reject)
  121.               : resolve(result)
  122.           })
  123.         } catch (e) {
  124.           reject(e)
  125.         }
  126.       }
  127.     })
  128.   }
  129.   catch(onRejected) {
  130.     return this.then(null, onRejected)
  131.   }
  132.   static resolve(value) {
  133.     if (value instanceof myPromise) {
  134.       //如果是Promise实例，则直接返回
  135.       return value
  136.     } else {
  137.       //如果不是，则返回一个新的 Promise对象，状态为FULFILLED
  138.       return new myPromise((resolve, reject) =>
  139.         resolve(value),
  140.       )
  141.     }
  142.   }
  143.   static reject(reason) {
  144.     return new Promise((resolve, reject) => {
  145.       reject(reason)
  146.     })
  147.   }
  148.   //Promise.all是支持链式调用的，本质上就是返回了一个Promise实例，通过resolve和reject来改变实例状态。
  149.   static all(promiseArr) {
  150.     return new myPromise((resolve, reject) => {
  151.       const len = promiseArr.length
  152.       const values = new Array(len)
  153.       //记录已经成功执行的promise个数
  154.       let count = 0
  155.       for (let i = 0; i < len; i++) {
  156.         //Promise.resolve()处理，确保每一个都是promise实例
  157.         myPromise.resolve(promiseArr[i]).then(
  158.           (val) => {
  159.             values[i] = val
  160.             count++
  161.             //如果全部执行完，返回promise状态就可以改变
  162.             if (count === len) resolve(values)
  163.           },
  164.           (err) => reject(err),
  165.         )
  166.       }
  167.     })
  168.   }
  169.   //Promise.race(iterable) 方法返回一个 promise
  170.   //一旦迭代器中的某个promise解决或拒绝
  171.   //返回的 promise就会解决或拒绝。
  172.   static race(promiseArr) {
  173.     return new Promise((resolve, reject) => {
  174.       promiseArr.forEach((p) => {
  175.         Promise.resolve(p).then(
  176.           (val) => resolve(val),
  177.           (err) => reject(err),
  178.         )
  179.       })
  180.     })
  181.   }
  182. }

Promise并行限制

  1. //23. Promise并行限制
  2. class Scheduler {
  3.   constructor() {
  4.     this.queue = []
  5.     //最大并行个数
  6.     this.maxCount = 2
  7.     this.runCount = 0
  8.   }
  9.   //往队列中插入Promise Creator函数
  10.   add(promiseCreator) {
  11.     this.queue.push(promiseCreator)
  12.   }
  14.   //每次从队列中取出Promise Creator并执行
  15.   //此Promise执行完成之后
  16.   //应该递归调用request函数来执行下一个Promise
  17.   request() {
  18.     if (
  19.       !this.queue ||
  20.       !this.queue.length ||
  21.       this.runCount >= this.maxCount
  22.     ) {
  23.       return
  24.     }
  25.     this.runCount++
  26.     this.queue
  27.       .shift()()
  28.       .then(() => {
  29.         this.runCount--
  30.         this.request()
  31.       })
  32.   }
  33.   //启动函数，将队列中的两个Promise启动起来
  34.   taskStart() {
  35.     for (let i = 0; i < this.maxCount; i++) {
  36.       this.request()
  37.     }
  38.   }
  39. }
  40. //test
  41. const timeout = (time) =>
  42.   new Promise((resolve) => {
  43.     setTimeout(resolve, time)
  44.   })
  45. const scheduler = new Scheduler()
  46. const addTask = (time, order) => {
  47.   scheduler.add(() =>
  48.     timeout(time).then(() => console.log(order)),
  49.   )
  50. }
  51. addTask(800, '1')
  52. addTask(1100, '2')
  53. addTask(600, '3')
  54. addTask(300, '4')
  56. scheduler.taskStart()

image.png

JSONP(JSON with Padding)

  2. //24. JSONP(JSON with Padding)
  3. //jsonp的核心原理是利用script标签没有同源限制的方式，可以发送跨域的get请求（只能发送get请求）。
  4. const jsonp = ({ url, params, callbackName }) => {
  5.   //script标签中的src属性将请求参数和当前请求的回调函数名拼接在链接上。最终由服务端接收到请求之后拼接成前端可执行的字符串的形式返回。这个结果字符串最终会在前端的script标签中解析并执行。
  6.   const generateUrl = () => {
  7.     let dataSrc = ''
  8.     for (let key in params) {
  9.       if (
  10.         Object.prototype.hasOwnProperty.call(params, key)
  11.       ) {
  12.         dataSrc += `${key}=${params[key]}&`
  13.       }
  14.     }
  15.     dataSrc += `callback=${callbackName}`
  16.     return `${url}?${dataSrc}`
  17.   }
  19.   return new Promise((resolve, reject) => {
  20.     const scriptEle = document.createElement('script')
  21.     scriptEle.src = generateUrl()
  22.     document.body.appendChild(scriptEle)
  23.     window[callbackName] = (data) => {
  24.       resolve(data)
  25.       document.removeChild(scriptEle)
  26.     }
  27.   })
  28. }
  29. /* btn.addEventListener('click', () => {
  30.   jsonp({
  31.     url: 'http://localhost:3000/xxx',
  32.     params: {
  33.       name: 'xx',
  34.       age: 18,
  35.     },
  36.     callback: 'show',
  37.   }).then((data) => {
  38.     console.log(data)
  39.   })
  40. }) */

AJAX

  1. //25.AJAX
  2. // xhr 具有一个 open 方法，这个方法的作用类似于初始化，并不会发起真正的请求
  3. // open 方法具有 5 个参数，但是常用的是前 3 个
  4. // method： 请求方式 —— get / post
  5. // url：请求的地址
  6. // async：是否异步请求，默认为 true（异步）
  7. //xhr.open(method, url, async)
  9. // send 方法发送请求，并接受一个可选参数
  10. // 当请求方式为 post 时，可以将请求体的参数传入
  11. // 当请求方式为 get 时，可以不传或传入 null
  12. // 不管是 get 还是 post，参数都需要通过 encodeURIComponent 编码后拼接
  13. //xhr.send(data)
  15. //注意：XMLHttpRequest不是node内置的，需要安装
  16. //npm install xmlhttprequest
  17. // const XMLHttpRequest =
  18. //   require('xmlhttprequest').XMLHttpRequest
  19. //或者安装quokka browser插件jsdom-quokka-plugin可以在vscode中调试
  20. const ajax = function (options) {
  21.   const url = options.url
  22.   const method = options.method.toLowerCase() || 'get'
  23.   const async = options.async != false //默认为true
  24.   const data = options.data
  25.   //兼容IE
  26.   const xhr = XMLHttpRequest
  27.     ? new XMLHttpRequest()
  28.     : new ActiveXObject('Mscrosoft.XMLHttp')
  29.   if (options.timeout && options.timeout > 0) {
  30.     xhr.timeout = options.timeout
  31.   }
  32.   return new Promise((resolve, reject) => {
  33.     //处理超时
  34.     xhr.onTimeout = () => reject && reject('请求超时')
  36.     xhr.onreadystatechange = () => {
  37.       if (xhr.readyState !== 4) return
  38.       // HTTP 状态在 200-300 之间表示请求成功
  39.       // HTTP 状态为 304 表示请求内容未发生改变，可直接从缓存中读取
  40.       if (
  41.         (xhr.status >= 200 && xhr.status < 300) ||
  42.         xhr.status === 304
  43.       ) {
  44.         resolve && resolve(xhr.responseText)
  45.       } else {
  46.         reject && reject(new Error(xhr.responseText))
  47.       }
  48.     }
  49.     xhr.onerror = (err) => reject && reject(err)
  51.     let paramArr = []
  52.     let encodeData
  53.     if (data instanceof Object) {
  54.       for (let key in data) {
  55.         //通过encodeURIComponent编码后再拼接参数
  56.         paramArr.push(
  57.           `${encodeURIComponent(key)}=${encodeURIComponent(
  58.             data[key],
  59.           )}`,
  60.         )
  61.       }
  62.       encodeData = paramArr.join('&')
  63.     }
  64.     //看要不要处理url
  65.     if (method === 'get') {
  66.       //检测url中是否存在?以及其下标
  67.       const index = url.indexOf('?')
  68.       if (index === -1) url += '?'
  69.       else if (index !== url.length - 1) url += '&'
  70.       //拼接
  71.       url += encodeData
  72.     }
  73.     //初始化请求
  74.     xhr.open(method, url, async)
  76.     if (method === 'get') xhr.send(null)
  77.     else {
  78.       //post方法,设置请求头
  79.       xhr.setRequestHeader(
  80.         'Content-Type',
  81.         'application/x-www-form-urlencoded;charset=UTF-8',
  82.       )
  83.       xhr.send(encodeData)
  84.     }
  85.   })
  86. }
  87. //test
  88. ajax({
  89.   url: 'http://xxx',
  90.   method: 'get',
  91.   async: true,
  92.   timeout: 1000,
  93.   data: {
  94.     k1: 111,
  95.     k2: 211,
  96.   },
  97. }).then(
  98.   (res) => console.log('请求成功: ' + res),
  99.   (err) => console.log('请求失败: ' + err),
  100. )

event

  • on(eventName, func): 监听 eventName事件， 事件触发的时候调用 func函数
  • emit(eventName, arg1, arg2, arg3,arg4…) : 触发eventName 事件, 并且把参数 arg1, arg2, arg3,arg4…传给事件处理函数
  • off(eventName, func) : 停止监听某个事件

addListener是emitter.on(eventName, listener) 的别名。

  1. //26.event模块
  2. //events只对外暴露一个对象，就是EventEmitter,EventEmitter作用只有2个，分别是：事件的发射和事件的监听。
  3. class Event {
  4.   constructor() {
  5.     //储存事件的数据结构——字典
  6.     this.cache = new Map()
  7.   }
  9.   //绑定
  10.   on(type, func) {
  11.     //出于查找方便和节省空间将同一类型事件放到一个模拟队列的数组中
  12.     let fns = (this.cache[type] = this.cache[type] || [])
  13.     if (fns.indexOf(func) === -1) {
  14.       fns.push(func)
  15.     }
  16.     return this
  17.   }
  19.   //触发
  20.   emit(type, data) {
  21.     let fns = this.cache[type]
  22.     if (Array.isArray(fns)) {
  23.       fns.forEach((fn) => {
  24.         fn(data)
  25.       })
  26.     }
  27.     return this
  28.   }
  30.   //解绑
  31.   off(type, func) {
  32.     let fns = this.cache[type]
  33.     if (Array.isArray(fns)) {
  34.       if (func) {
  35.         let index = fns.indexOf(func)
  36.         if (index !== -1) {
  37.           fns.splice(index, 1)
  38.         }
  39.       } else {
  40.         //没指定就清空
  41.         fns.length = 0
  42.       }
  43.     }
  44.     return this
  45.   }
  46. }
  47. //test
  48. const events = new Event()
  49. events.on('test', (val) => {
  50.   console.log(val)
  51. })
  52. events.on('test2', (val) => {
  53.   console.log('@2' + val)
  54. })
  55. events.emit('test', 'runnnnn')
  56. events.emit('test2', 'runnnnn')
  57. events.off('test')
  58. events.emit('test', 'none')
  59. events.emit('test2', 'runnnnn')

image.png

图片懒加载

  2. //27. 图片懒加载
  3. //先设置一个临时的 data-src 属性进行src的占位
  4. const lazyLoad = () => {
  5.   const imgs = document.querySelectorAll('img')
  6.   const len = imgs.length
  8.   //窗口高度
  9.   const viewH = document.documentElement.clientHeight
  10.   //滚动条高度
  11.   const scrollH =
  12.     //这两者有个特点：同时只有一个值生效，另一个始终为0
  13.     document.documentElement.scrollTop +
  14.     document.body.scrollTop
  16.   for (let i = 0; i < len; i++) {
  17.     const offsetH = imgs[i].offsetTop
  18.     if (offsetH < viewH + scrollH) {
  19.       const src = imgs[i].dataset.src
  20.       imgs[i].src = src
  21.     }
  22.   }
  23. }
  24. //使用
  25. lazyLoad() //首屏加载
  26. window.addEventListener('scroll', lazyLoad)
  27. //还可以配合节流一起使用
  29. //28. 滚动加载
  30. window.addEventListener('scroll', () => {
  31.   const { clientHeight, scrollTop, scrollHeight } =
  32.     document.documentElement
  33.   //检测到滚动页面接近页面底部
  34.   if (clientHeight + scrollTop >= scrollHeight + 50) {
  35.     //加载后面的部分窗口
  36.   }
  37. })

渲染大数据

  1. //29.较大的数据量需要渲染时
  2. //合理使用createDocumentFragment和requestAnimationFrame，将操作切分为一小段一小段执行。
  3. setTimeout(() => {
  4.   //插入十万条数据
  5.   const total = 100000
  6.   //一次插入的数据
  7.   const once = 20
  8.   //插入数据需要的次数
  9.   const loopCount = Math.ceil(total / once)
  10.   let countOfRender = 0
  11.   const ul = document.querySelector('ul')
  13.   //添加数据
  14.   const add = () => {
  15.     //在虚拟节点对象上操作
  16.     const fragment = document.createDocumentFragment()
  17.     for (let i = 0; i < once; i++) {
  18.       const li = document.createElement('li')
  19.       li.innerText = Math.floor(Math.random * total)
  20.       fragment.appendChild(li)
  21.     }
  22.     //插入的实际操作
  23.     ul.appendChild(fragment)
  24.     countOfRender++
  25.     loop()
  26.   }
  27.   //刷新
  28.   const loop = () => {
  29.     if (countOfRender < loopCount) {
  30.       //window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行
  31.       window.requestAnimationFrame(add)
  32.     }
  33.   }
  34.   loop()
  35. }, 0)

获取当前页面html元素种类

  1. //30 当前页面html元素种类
  2. const printSpeciesOfHtml = () => {
  3.   return [
  4.     ...new Set(),
  5.     [...document.querySelectorAll('*')].map(
  6.       (el) => el.tagName,
  7.     ),
  8.   ].length
  9. }

将VirtualDom转换为真实DOM

  1. //31.将VirtualDom 转化为真实DOM结构
  2. // vnode结构：
  3. // {
  4. //   tag,
  5. //   attrs,
  6. //   children,
  7. // }
  8. //Virtual DOM => DOM
  9. const render = (vnode, container) => {
  10.   container.appendChild(_render(vnode))
  11. }
  12. const _render = (vnode) => {
  13.   //如果是数字类型就转化为字符串
  14.   if (typeof vnode === 'number ') {
  15.     vnode = String(vnode)
  16.   }
  17.   //字符串类型则直接作为文本节点
  18.   if (typeof vnode == 'string') {
  19.     return document.createTextNode(vnode)
  20.   }
  21.   //else就是
  22.   //普通DOM
  23.   const dom = document.createElement(vnode.tag)
  24.   if (vnode.attrs) {
  25.     //遍历属性
  26.     Object.keys(vnode.attrs).forEach((key) => {
  27.       const value = vnode.attrs[key]
  28.       dom.setAttribute(key, value)
  29.     })
  30.   }
  32.   //子数组进行递归操作
  33.   vnode.children.forEach((child) => render(child, dom))
  34.   return dom
  35. }

字符串解析

  1. //32.字符串解析问题
  2. const a = {
  3.   z: 123,
  4.   q: '123',
  5. }
  6. //实现函数使得将str字符串中的{}内的变量替换，如果属性不存在保持原样（比如{a.d}）
  7. //类似于模版字符串，但有一点出入，实际上原理大差不差
  8. const parseStr = (str, obj) => {
  9.   let res = ''
  10.   //标志位，标志前面是否有{
  11.   let flag = false
  12.   let start
  13.   for (let i = 0; i < str.length; i++) {
  14.     if (str[i] === '{') {
  15.       flag = true
  16.       start = i + 1
  17.       continue
  18.     }
  19.     if (!flag) res += str[i]
  20.     else {
  21.       if (str[i] === '}') {
  22.         flag = false
  23.         res += match(str.slice(start, i), obj)
  24.       }
  25.     }
  26.   }
  27.   return res
  28. }
  29. //对象匹配操作
  30. const match = (str, obj) => {
  31.   const keys = str.split('.').slice(1)
  32.   let index = 0
  33.   let o = obj
  34.   while (index < keys.length) {
  35.     const key = keys[index]
  36.     if (!o[jey]) return `{${str}}`
  37.     else o = o[key]
  38.     index++
  39.   }
  40.   return o
  41. }