前端基础知识点(1)

172 阅读2分钟

封装实现判断数据类型的函数

function getDateType (data) {
  if (Array.isArray(data)) return 'array' // 在此处判断一下,如果是数组就返回 array
  if (data === null) return 'null'
  return typeof(data)
}
console.log(getDateType(value)) // 调用函数
const a = 10 // number
const b = false // boolean
const type = null // null
const str = '哇哈哈哈' // string
const arr = [1, 2, 3, 4] // array
const obj = { name: '小花', age: 17 } // object

用reduce统计字符出现频率

const arr = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']
const res = arr.reduce((sum, item) =>{
  sum[item] = (sum[item] || 0) + 1 // sum[item] 判断在sum变量中item为 属性值,有则 + 1
  console.log(sum[item])
  return sum
}, {})
console.log(res) // apple: 3, banana: 2, orange: 1

借用原型链补充数组的高阶排序方法(一):冒泡排序

Array.prototype.myBubbleSort = function () {
  // 获取数组的长度
  let len = this.length
  // 外层循环控制冒泡排序的次数
  for (let i = 0; i < len; i++) {
    // 内层循环执行相邻的两个函数比较然后交换
    // 每次循环都会确定一个最大的元素,所以循环次数可 - 1
    for (let j = 0; j < len - 1 - i; j++) {
      // 如果当前元素大于下一个元素,则交换它们的位置
      if (this[j] > this[j + 1]) {
        let temp = this[j];
        this[j] = this[j + 1]
        this[j + 1] = temp
      }
    }
  }
  return this
}
const arr = [3, 12, 4, 44, 10]
arr.myBubbleSort()
console.log(arr) // [ 3, 4, 10, 12, 44 ]

需要注意的是:上面定义的为冒泡排序,而其的计算比较复杂,所以在处理大型数组时性能会变差。

借用原型链补充数组的高阶排序方法(二):归并排序

Array.prototype.myMergeSort = function () {
  // 定义一个内部的合并函数,用于将两个有序的子数组合并为一个有序的数组
  const merge = (left, right) => {
    let result = [] // 存储合并后的结果数组
    let leftIndex = 0 // 追踪左边子数组的索引
    let rightIndex = 0 // 追踪右边子数组的索引

    // 循环比较左右子数组元素的大小,直到其中一个子数组的所有元素都被插入result数组
    while (leftIndex < left.length && rightIndex < right.length) {
      if (left[leftIndex] < right[rightIndex]) {
        result.push(left[leftIndex]) // 将左子数组的元素插入result
        leftIndex++ // 更新左子数组的索引
      } else {
        result.push(right[rightIndex]) // 将右子数组的元素插入result
        rightIndex++ // 更新右子数组的索引
      }
    }

    // 将剩余未完全插入的元素按顺序插入result数组中
    return result.concat(left.slice(leftIndex)).concat(right.slice(rightIndex))
  }

  // 定义递归函数用于排序子数组
  const sort = (array) => {
    if (array.length <= 1) {
      return array // 当数组长度小于等于1时,直接返回数组
    }

    const mid = Math.floor(array.length / 2) // 找到数组的中间位置
    const left = array.slice(0, mid) // 将数组从中间位置拆分为左子数组
    const right = array.slice(mid) // 将数组从中间位置拆分为右子数组

    // 递归地对左右子数组进行排序,并通过merge函数合并为一个有序数组
    return merge(sort(left), sort(right))
  };

  // 使用sort函数对当前数组进行归并排序,得到排序后的数组
  const sortedArray = sort(this)

  // 清空当前数组并将排序后的结果插入到当前数组中
  this.length = 0;
  this.push(...sortedArray)

  // 返回排序后的数组
  return this
}
const arr = [3, 12, 4, 44, 10]
arr.myMergeSort()
console.log(arr) // [ 3, 4, 10, 12, 44 ]

注意:归并排序相较于冒泡排序,计算复杂程度就低了许多,所以具有更高效的性能

使用递归实现三种常见场景

1.使用递归实现计算阶乘

function factorial(n) {
  if (n === 0) {
    return 1
  } else {
    return n * factorial(n - 1)
  }
}
console.log(factorial(5)); // 输出: 120

2.使用递归函数实现斐波那契数列

// 斐波那契数列 是指从第三个数开始等于前面两个数字的和
function fibonacci(n) {
  if (n <= 1) {
    return n;
  }
  return fibonacci(n - 1) + fibonacci(n - 2);
}

console.log(fibonacci(10)) // 55

3.使用递归函数实现数组转树

// 使用递归函数实现数组转树
const arr2tree = (list, id) => {
  const arr = []
  list.forEach(item => {
    if(item.pid === id) {
      const children = arr2tree(list, item.id)
      item.children = children
      arr.push(item)
    }
  })
  return arr
}