手写面试题:1.防抖函数,2.节流函数,3.数据扁平化处理函数, 4. 首字母大写转换,5.转化成驼峰表示法

139 阅读2分钟

1.防抖函数

      <button>点击</button>
      function debounce(fn, delay) {
        let timer = null
        // 定时器
        return function () {
          // arguments 是一个类数组对象
          let args = arguments
          clearTimeout(timer)
          timer = setTimeout(function () {
            fn.apply(this, args)
          }, delay)
        }
      }
      let btn2 = document.querySelector('button')
      btn2.addEventListener('click',debounce(function () {
          console.log('哈哈哈')
        }, 1000)
      ) 

2.节流函数

<button>点击</button>
function throttle(fn, delay) {
        let timer = null
        return function () {
          let args = arguments
          if (!timer) {
            timer = setTimeout(function () {
              fn.apply(this, args)
              timer = null
            }, delay)
          }
        }
      }
      let btn3 = document.querySelector('button')
      btn3.addEventListener(
        'click',
        throttle(function () {
          console.log('哈哈哈1111')
        }, 1000)
      )

3.数据扁平化处理函数

      function flat(arr) {
      // arr.reduce 是 ES6 新增的方法,用于数组的迭代 和 归并 功能 ,参数是一个回调函数 ,
      // 参数是一个可选的初始值 ,返回值是一个新的值 ,这个新的值会被当作下一次迭代的参数 ,直到数组的所有元素都被迭代完毕 , 并且返回最终的值。 
        return arr.reduce((prev, curr) => {
          return prev.concat(curr)
        }, [])
      }
      let arr = [
        [1, 2, 3, 4],
        [11, 12, 13]
      ]
      console.log(flat(arr))

4. 编写一个函数,首字母大写转换hello world

function toUpperCase(str) {
        // str.replace 是 ES6 新增的方法,用于字符串的替换功能 ,参数是一个回调函数 ,
        // 参数是一个可选的初始值 ,返回值是一个新的值 ,这个新的值会被当作下一次迭代的参数 ,直到数组的所有元素都被迭代完毕 , 并且返回最终的值。
        return str.replace(/^\w/, (s) => {
          return s.toUpperCase()
        }
        )
      }
      console.log(toUpperCase('hello world')

5. 已知有字符串 foo=”get-element-by-id”,写一个 function 将其 转化成驼峰表示法”getElementById”(必会)

let foo = 'get-element-by-id';
function camelize (str) {
  // str.replace 替换字符串 str 中的所有匹配项 new RegExp(/[-_]([a-z])/g) 为 $1.toUpperCase() 的值  (必会)
  // all,letter 是正则表达式的修饰符,g 是全局匹配,i 是忽略大小写(必会)
  // /-(\w)/g 是正则表达式,\w 是匹配任何单词字符,g 是全局匹配,i 是忽略大小写(必会)
  return str.replace(/-(\w)/g, function (all, letter) {
    return letter.toUpperCase();
  });
}
console.log(camelize(foo));