JavaScript 进阶必会的几个技巧

1 函数柯里化

函数柯里化的是一个为多参函数实现递归降解的方式。其实现的核心是:

• 要思考如何缓存每一次传入的参数
• 传入的参数和目标函数的入参做比较

这里通过闭包的方式缓存参数，实现如下：

const curry = (fn) => {
        let params = []
        const next = (...args) => {
          console.log(`params: ${params}, args: ${args}`);
          params = [...params, ...args]
          // console.log(`params: ${params}`);
          if (params.length < fn.length) {
            return next
          } else {
            return fn.apply(fn, params)
          }
        }
        return next
      }

使用方式如下：

const sum=(a,b,c,d)=>{
  // console.log(`a:${a}, b:${b}, c:${c}, d:${d}`);
  return a + b + c + d
}
const fn = curry(sum)
// console.log(fn);
const res = fn(1)(2)(3)
console.log(`res: ${res}`)

👆这个问题，有必要去思考一下。其实利用函数柯里化这种思想，我们可以更好的实现函数的封装。
就比如有监听某一事件那么就会有移除该事件的操作，那么就可以利用柯里化的思想去封装代码了。
或者说一个输入 A 有唯一并且对应的输出 B，那么从更大的角度去思想这样的工程项目是更安全，独立的。也便于去维护。

2 关于数组

2.1 实现 map 方法

map() 方法根据回调函数映射一个新数组

Array.prototype.map = function(fn) {
  const result=[]
  for (let i = 0; i < this.length; i++) {
    if(!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    result.push(fn(this[i], i, this))
  }
  return result
}

// 使用
const arr=[1,2,3,,5]
const mapArr = arr.map(item=> item* 2)
console.log(mapArr);

2.2 实现 filter 方法

filter() 方法返回一个数组，返回的每一项是在回调函数中执行结果 true。

Array.prototype.filter = function(fn) {
  const result=[]
  for (let i = 0; i < this.length; i++) {
    if(!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    fn(this[i], i, this) && result.push(this[i])
  }
  return result
}

const arr=[1,2,3,,5]
const filterArr = arr.filter(item=> item > 2)
console.log(filterArr)

filter 和 map 的区别：filter 是映射出条件为 true 的 item，map 是映射每一个 item。

2.3 实现 reduce 方法

reduce() 方法循环迭代，回调函数的结果都会作为下一次的形参的第一个参数。

Array.prototype.reduce = function (fn, initValue) {
  let result = initValue ? initValue : this[0]
  for (let i = 0; i < this.length; i++) {
    if (!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    result = fn(result, this[i], i, this)
  }
  return result
}

// 使用
const arr = [1,2,3,,5]
const reduceArr = arr.reduce((a,b)=> a * b, 2)
console.log(reduceArr)

2.4 实现 every 方法

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试。它返回一个布尔值。

Array.prototype.every = function (fn) {
  let result = true
  for (let i = 0; i < this.length; i++) {
    if (!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    if (!fn(this[i], i, this)) {
      result = false
      break
    }
  }
  return result
}
// 使用
const arr = [1, 2, 3, 4, 5]
const everyArr = arr.every(item => item > 2)
console.log(everyArr)

2.5 实现 some 方法

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试。它返回的是一个 Boolean 类型的值。

Array.prototype.some = function (fn) {
  let result = false
  for (let i = 0; i < this.length; i++) {
    if (!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    if (fn(this[i], i, this)) {
      result = true
      break
    }
  }
  return result
}
// 使用
const arr = [1, 2, 3, 4, 5]
const someArr = arr.some(item => item > 3)
console.log(someArr);

2.6 实现 find 方法

find() 方法返回数组中满足提供的测试函数的第一个元素的值。否则返回 undefined。

Array.prototype.find = function (fn) {
  let result = false
  for (let i = 0; i < this.length; i++) {
    if (!this.hasOwnProperty(i)) continue; // 处理稀疏数组的情况
    if (fn(this[i], i, this)) {
      result = this[i]
      break
    }
  }
  return result
}

const arr = [1, 2, 3, 4, 5]
const findArr = arr.find(item => item > 3)
console.log(findArr)

2.7 实现拉平数组

将嵌套的数组扁平化，在处理业务数据场景中是频率出现比较高的。

• 利用 ES6 语法 flat(num) 方法将数组拉平。
  该方法不传参数默认只会拉平一层，如果想拉平多层嵌套的数组，需要传入一个整数，表示要拉平的层级。该返回返回一个新的数组，对原数组没有影响。

// 拉平数组
Array.prototype.flattening = function (num=1){
  if(!Array.isArray(this)) return
  return this.flat(num)
}
// 使用
const arr = [1,[ [2, 3], 4], 5]
const flatArr = arr.flattening(Infinity)
console.log(flatArr) // [1, 2, 3, 4, 5]

• 模拟栈实现数组拉平
  该方法是模拟栈，在性能上相对最优解。

Array.prototype.flattening = function() {
  if (!Array.isArray(this)) return
  const stack = [...this]
  console.log(`stack: ${stack}`)
  const res = []
  while (stack.length) {
    let value = stack.shift()
    Array.isArray(value) ? stack.push(...value) : res.push(value)
    console.log(`while stack: ${stack}`)
  }
  return res
}
// 使用
const arr = [1, [[2, 3], 4], 5]
const flatArr = arr.flattening()
console.log(flatArr); // [1, 5, 4, 2, 3]

3 实现懒加载

实现图片懒加载其核心的思想就是将 img 的 src 属性先使用一张本地占位符，或者为空。然后真实的图片路径再定义一个 data-set 属性存起来，待达到一定条件的时将 data-img 的属性值赋给 src。
如下是通过scroll滚动事件监听来实现的图片懒加载，当图片都加载完毕移除事件监听，并且将移除 html 标签。

const lazyLoad = function (imgs) {
  let count = 0
  const deleteImgs = []
  const handler = () => {
    imgs.forEach((img, index) => {
      const react = img.getBoundingClientRect()
      if (react.top < window.innerHeight) {
        img.src = datset.src
        count++
        deleteImgs.push(index)
        if (count === imgs.length) {
          document.removeEventListener('scroll', lazyLoad)
        }
      }
    })
    imgs = imgs.filter((_, index) => !deleteImgs.includes(index))
  }
  return handler()
}

scroll 滚动事件容易造成性能问题。那可以通过 IntersectionObserver 自动观察 img 标签是否进入可视区域。

实例化 IntersectionObserver 实例，接受两个参数：callback 是可见性变化时的回调函数，option 是配置对象（该参数可选）。

当 img 标签进入可视区域时会执行实例化时的回调，同时给回调传入一个 entries 参数，保存着实例观察的所有元素的一些状态，比如每个元素的边界信息，当前元素对应的 DOM 节点，当前元素进入可视区域的比率，每当一个元素进入可视区域，将真正的图片赋值给当前 img 标签，同时解除对其的观察。

const lazyLoad = function (imgs) {
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      entry.target.src = dataset.src
      observer.unobserve(entry.target)
    })
  })

  imgs.forEach((img, index) =>observer.observe(img))
}

如上是懒加载图片的实现方式。
值得思考的是，懒加载和惰性函数有什么不一样嘛？
答：我所理解的懒加载顾名思义就是需要了才去加载，懒加载正是惰性的一种，但惰性函数不仅仅是懒加载，它还可以包含另外一种方向。
惰性函数的另一种方向是在重写函数，每一次调用函数的时候无需在做一些条件的判断，判断条件在初始化的时候执行一次就好了，即下次在同样的条件语句不需要再次判断了，比如在事件监听上的兼容。

4 实现预加载

预加载顾名思义就是提前加载，比如提前加载图片。

let images = [...document.querySelectorAll('img')]

const loadImage = function (...imgs) {
  const imagesArr = []
  let count = 0
  for (let i = 0; i < imgs.length; i++) {
    const img = new Image()
    img.onload = function () {
      imgs[i].src = imagesArr[i]
      count++
      if (count === imagesArr.length) {
        console.log('加载完毕');
      }
    }
  }
  return {
    setSrc: function (...args) {
      imgs.forEach(img=> img.src='///loding.png')
      imagesArr = args
    }
  }
}

当用户需要查看时，可直接从本地缓存中取。预加载的优点在于如果一张图片过大，那么请求加载图片一定会慢，页面会出现空白的现象，用户体验感就变差了，为了提高用户体验，先提前加载图片到本地缓存，当用户一打开页面时就会看到图片。

5 实现节流 & 防抖

针对高频的触发的函数，我们一般都会思考通过节流或者防抖去实现性能上的优化。
节流实现原理是通过定时器以和时间差做判断。定时器有延迟的能力，事件一开始不会立即执行，事件结束后还会再执行一次；而时间差事件一开始就立即执行，时间结束之后也会立即停止。
结合两者的特性封装节流函数：

const throttle = (fn, waiting = 1000, options) => {
  let preTime = new Date(0).getTime()
  options = options || { firstTime: true, endTime: false }
  let timer

  let _throttle = (...args) => {
    let newTime = new Date().getTime()
    if (!options.firstTime) {
      if (timer) {
        return
      }
      timer = setTimeout(() => {
        fn.apply(fn, args)
        console.log(`!options.firstTime: ${!options.firstTime}`);
        timer = null
      }, waiting)
    } else if (newTime - preTime > waiting) {
      fn.apply(fn, args)
      console.log(`newTime - preTime > waiting: ${newTime - preTime}`);
      preTime = newTime
    } else if (options.endTime) {
      timer = setTimeout(() => {
        fn.apply(fn, args)
        console.log(`options.endTime: ${options.endTime}`);
        timer = null
      }, waiting)
    }
  }

  _throttle.cancel = () => {
    preTime = 0
    clearTimeout(timer)
    timer = null
  }

  return _throttle
}

// 使用
let print = () => {
  console.log('object');
}

let throttleFun = throttle(print)
window.onresize = throttleFun

函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数。

防抖实现原理是通过定时器，如果在规定时间内再次触发事件会将上次的定时器清除，即不会执行函数并重新设置一个新的定时器，直到超过规定时间自动触发定时器中的函数。

const debounce = function (fn, waiting = 500, immediate = true) {
  let timer
  let firstTime = immediate
  let _debounce = (...args) => {
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    if (firstTime) {
      firstTime = false
      fn.apply(fn, args)
    } else {
      timer = setTimeout(() => {
        fn.apply(fn, args)
        timer = null
      }, waiting)
    }
  }
  _debounce.cancel = () => {
    clearTimeout(timer)
    timer = null
  }

  console.log(_debounce);
  return _debounce
}

let print = () => {
  console.log('object');
}

window.onresize = debounce(print)

6 实现 new 关键字

6.1 new 操作中发生了什么？

当我们new一个构造器，主要有三步：

• 以构造器的prototype属性为原型，创建新对象；
• 将this(也就是上一句中的新对象)和调用参数传给构造器，执行；
• 如果构造器没有手动返回对象，则返回第一步创建的对象

// ES5构造函数
let Parent = function (name, age) {
    //1.创建一个新对象，赋予this，这一步是隐性的，
    // let this = {};
    //2.给this指向的对象赋予构造属性
    this.name = name;
    this.age = age;
    //3.如果没有手动返回对象，则默认返回this指向的这个对象，也是隐性的
    // return this;
};
const child = new Parent();

6.2 实现一个简单的 new 方法

// 自定义 new 函数
let new2 = function (fn, ...other) {
  // 1.以构造器的prototype属性为原型，创建新对象；
  const target = Object.create(fn.prototype)
  // 2.将this和调用参数传给构造器执行
  const res = fn.apply(target, other)
  if(res && (typeof res === 'object' || typeof res === 'function')){
    return res
  }
  // 3.如果没有手动返回对象，返回第一步的对象
  return target
}

// 构造器函数
let Parent = function (name, age) {
  this.name = name
  this.age = age
}
Parent.prototype.sayName = function () {
  console.log(this.name)
}

// 实例化 Parent 对象
const obj = new2(Parent, 'echo', 26)
obj.sayName() //'echo'

console.log(obj instanceof Parent) // true
console.log(obj.hasOwnProperty('name')) // true
console.log(obj.hasOwnProperty('age')) // true
console.log(obj.hasOwnProperty('sayName')) // false

7 实现 instanceof

instanceof 运算符用于检测构造函数的 prototype 属性是否出现在某个实例对象的原型链上。

const instanceof2 = function (left, right) {
  if (!left && !right) {
    return
  }

  const rightPrototype = right.prototype
  console.log(`rightPrototype: ${rightPrototype}`);
  while (left = Object.getPrototypeOf(left)) {
    console.log(left);
    if (left === rightPrototype) {
      return true
    }
  }
  return false
}

// 使用
// let obj = { a: 1 }
let obj = [1, 2, 3, 4,]
console.log(typeof (obj));
console.log(instanceof2(obj, ))

8 实现 call、apply、bind

8.1 手写 call

call 函数实现的原理是借用方法，关键在于隐式改变this的指向。

Function.prototype.call2 = function (context, ...args) {
  context = context ? Object(context) : window
  const caller = Symbol('特殊属性caller')
  context[caller] = this
  const res = context[caller](...args)
  delete context[caller]
  return res
}

var name = '小王', age = 17
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function () {
    console.log(this.name + '年龄' + this.age)
  }
}

var db = {
  name: '德玛',
  age: 99
}

obj.myFun.call2(db)

8.2 手写apply

function isArrayLike(o) {
  return (o &&                             // o 不是null、undefined等
    typeof o === 'object' &&               // o 是对象
    isFinite(o.length) &&                  // o.length 是有限数值
    o.length >= 0 &&                       // o.length 为非负数
    o.length === Math.floor(o.length) &&   // o.length 是整数
    o.length < 4294967296                  // o.length < 2^32
  )
}

Function.prototype.apply2 = function (context, ...args) {
  context = context ? Object(context) : window
  const applyer = Symbol('applyer')
  context[applyer] = this
  let res
  if (args) {
    if (!Array.isArray(args) && !isArrayLike(args)) {
      throw new Error('第二个参数不是数组并且不是类数组对象')
    } else {
      console.log(...Array.from(args));
      res = context[applyer](...Array.from(args))
      console.log(res);
    }
  } else {
    res = context[applyer]()
  }

  delete context[applyer]

  return res
}

// 使用
var name = '小王', age = 17
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function (from, to) {
    console.log(from)
    console.log(this.name + '年龄' + this.age, ' 来自 ' + from + ' 去往 ' + to)
  }
}
var db = {
  name: '德玛',
  age: 99
}
obj.myFun.apply2(db, ['成都', '上海'])

注：call() 方法的作用和 apply() 方法类似，区别就是 call() 方法接受的是参数列表，而 apply() 方法接受的是一个参数数组。

8.3 手写 bind

bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，而其余参数将作为新函数的参数，供调用时使用。
实现的关键思路：

• 拷贝保存原函数，新函数和原函数原型链接。
• 生成新的函数，在新函数里调用原函数。

Function.prototype.bind2 = function (context, ...other) {
  const findFn = (...params) => {
    context = new.target ? this : Object(context)
    return this.call(context, ...other, ...params)
  }
  if (this.prototype) {
    findFn.prototype = this.prototype
  }
  return findFn
}

// 使用
var name = '小王', age = 17
var obj = {
  name: '小张',
  objAge: this.age,
  myFun: function (from, to) {
    console.log(from)
    console.log(this.name + '年龄' + this.age, ' 来自 ' + from + ' 去往 ' + to)
  }
}
var db = {
  name: '德玛',
  age: 99
}

obj.myFun.bind2(db,'成都', '上海')() // 德玛年龄99  来自 成都 去往 上海

9 封装数据类型函数

const type = (function () {
  const type = Object.create(null);
  const typeAry = ['String', 'Number', 'Object', 'Array', 'Null', 'Undefined', 'Boolean']
  for (let i = 0; i < typeAry.length; i++) {
    const element = typeAry[i];
    type[`is${element}`] = function (args) {
      return Object.prototype.toString.call(args) === `[object ${element}]`
    }
  }
  return type
}())

console.log(type.isArray(['1','2','3']))
console.log(type.isBoolean('1'))

10 自记忆函数

记忆化是一种构建函数的处理过程，能够记住上次计算结果

const memory = function (fn) {
  const cache = {}
  return function (...args) {
    const key = JSON.stringify(args)
    // console.log(`key: ${key}; cache: ${cache}; args: ${args}`);
    if (cache[key]) {
      // console.log(`cache[key]: ${cache[key]}`);
      return cache[key]
    }
    
    // console.log(`cache[key]: ${cache[key]}`);
    return cache[key] = fn.apply(fn, args)
  }
}

// 使用
var add = function (a, b, c) {
  return a + b + c
}

var memoryAdd = memory(add)
for (var i = 0; i < 5; i++) {
  console.log(memoryAdd(1, 2, 3))
}

11 是否存在循环引用

function cycle(target) {
  var map = new WeakMap()
  function _cycle(obj) {
    if (!map.has(obj)) {
      map.set(obj, obj)
    }

    let keys = Object.keys(obj)

    for (let i = 0; i < keys.length; i++) {
      const element = keys[i];
      if (typeof obj[keys[i]] === 'object') {
        if (map.has(obj[keys[i]])) {
          obj[keys[i]] = '$'
          continue
        } else {
          map.set(obj[keys[i]], obj[keys[i]])
        }

        _cycle(obj[keys[i]])
      }
    }
  }

  _cycle(target)
  return target
}

12 拷贝数据

拷贝数据一直是业务开发中绕不开的技巧

• 通过深度优先思维拷贝数据（DFS）
  深度优先是通过纵向的维度去思考问题，在处理过程中也考虑到对象环的问题。
  解决对象环的核心思路是先存再拷贝。一开始先通过一个容器用来储存原来的对象再进行拷贝，在每一次拷贝之前去查找容器里是否已存在该对象。这样就切断了原来的对象和拷贝对象的联系。

let DFSdeepClone = (obj, visitedArr = []) => {
  let _obj = {}
  if (typeof obj === 'object' && obj !== null) {
    let index = visitedArr.indexOf(obj)
    _obj = Array.isArray(obj) ? [] : {}
    if (~index) {
      _obj = visitedArr[index]
    } else {
      visitedArr.push(obj) // 先将原来保存起来再拷贝
      for (let item in obj) {
        _obj[item] = DFSdeepClone(obj[item], visitedArr)
      }
    }
  } else if (typeof obj === 'function') {
    _obj = eval('(' + obj.toString() + ')') // 复制函数对象
  } else {
    _obj = obj
  }
  return _obj
}

• 通过广度优先思维拷贝数据（BFS）
  广度优先是通过横向的维度去思考问题，通过创造源队列和拷贝数组队列之间的关系实现拷贝。

let BFSClone = (obj) => {
  let res = Array.isArray(obj)? [] : {}
  let originObj = [obj] // 
  let copyObj = [res] // []
  let visitedCopyArr = []

  while (originObj.length > 0) {
    let item = originObj.shift() // obj
    let _obj = copyObj.shift()
    visitedCopyArr.push(item) // [obj]
    if (typeof item === 'object' && item !== null) {
      console.log(item);
      for (let key in item) {
        const val = item[key] // [1,2]
        if (val.constructor === Object || val.constructor === Array) {
          const index = visitedCopyArr.indexOf(val)
          if (~index) {
            _obj[key] = val
          } else {
            visitedCopyArr.push(val)
            _obj[key] = val.constructor === Array ? [] : {}
            originObj.push(val)
            copyObj.push(_obj[key])
          }
        } else if (val.constructor === Function) {
          _obj[key] = eval(`(${val.toString()})`)
        } else {
          _obj[key] = val
        }
      }
      visitedCopyArr.push(_obj)
    } else if (typeof item === 'function') {
      _obj = eval(`(${item.toString()})`)
    } else {
      _obj = item
    }
    console.log(_obj);
  }

  return res
}

// 使用
const a = [[1, 2], { aa: 11, bb: 22 }]
console.log(BFSClone(a));

13 Promise 系列