前端进阶必会的几个JavaScript技巧总结

1. 函数柯里化

函数柯里化的是一个为多参函数实现递归降解的方式。其实现的核心是:
1). 要思考如何缓存每一次传入的参数
2). 传入的参数和目标函数的入参做比较

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

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. 关于数组

手写 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);

手写 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。

手写 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)

手写 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)

手写 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);

手写 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)

拉平数组

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

• 利用 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]

前端进阶必会的几个JavaScript技巧总结

原文：https://www.cnblogs.com/lqqgis/p/14885754.html