一文帮你搞定 90% 的 JS 手写题

发布于 2023-07-29 06:28:46 字数 23536 浏览 25 评论 0

还在害怕手写题吗，本文可以帮你扩展并巩固自己的 JS 基础，顺便搞定 90%的手写题。在工作中还可以对常用的需求进行手写实现，比如深拷贝、防抖节流等可以直接用于往后的项目中，提高项目开发效率。不说废话了，下面就直接上代码吧。

1.call 的实现

第一个参数为 null 或者 undefined 时，this 指向全局对象 window，值为原始值的指向该原始值的自动包装对象，如 String、Number、Boolean
为了避免函数名与上下文(context)的属性发生冲突，使用 Symbol 类型作为唯一值
将函数作为传入的上下文(context)属性执行
函数执行完成后删除该属性
返回执行结果

Function.prototype.myCall = function(context,...args){
  let cxt = context || window;
  //将当前被调用的方法定义在 cxt.func 上.(为了能以对象调用形式绑定 this)
  //新建一个唯一的 Symbol 变量避免重复
  let func = Symbol() 
  cxt[func] = this;
  args = args ? args : []
  //以对象调用形式调用 func,此时 this 指向 cxt 也就是传入的需要绑定的 this 指向
  const res = args.length > 0 ? cxt[func](...args) : cxt[func]();
  //删除该方法，不然会对传入对象造成污染（添加该方法）
  delete cxt[func];
  return res;
}

2.apply 的实现

前部分与 call 一样
第二个参数可以不传，但类型必须为数组或者类数组

Function.prototype.myApply = function(context,args = []){
  let cxt = context || window;
  //将当前被调用的方法定义在 cxt.func 上.(为了能以对象调用形式绑定 this)
  //新建一个唯一的 Symbol 变量避免重复
  let func = Symbol()
  cxt[func] = this;
  //以对象调用形式调用 func,此时 this 指向 cxt 也就是传入的需要绑定的 this 指向
  const res = args.length > 0 ? cxt[func](...args) : cxt[func]();
  delete cxt[func];
  return res;
}

3.bind 的实现

需要考虑：

bind() 除了 this 外，还可传入多个参数；
bind 创建的新函数可能传入多个参数；
新函数可能被当做构造函数调用；
函数可能有返回值；

实现方法：

bind 方法不会立即执行，需要返回一个待执行的函数；（闭包）
实现作用域绑定（apply）
参数传递（apply 的数组传参）
当作为构造函数的时候，进行原型继承

Function.prototype.myBind = function (context, ...args) {
  //新建一个变量赋值为 this，表示当前函数
  const fn = this
  //判断有没有传参进来，若为空则赋值[]
  args = args ? args : []
  //返回一个 newFn 函数，在里面调用 fn
  return function newFn(...newFnArgs) {
    if (this instanceof newFn) {
      return new fn(...args, ...newFnArgs)
    }
    return fn.apply(context, [...args,...newFnArgs])
  }
}

测试

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

//结果
obj.myFun.myCall(db,'成都','上海');   // 德玛 年龄 99  来自 成都去往上海
obj.myFun.myApply(db,['成都','上海']);    // 德玛 年龄 99  来自 成都去往上海
obj.myFun.myBind(db,'成都','上海')();     // 德玛 年龄 99  来自 成都去往上海
obj.myFun.myBind(db,['成都','上海'])();   // 德玛 年龄 99  来自 成都, 上海去往 undefined

4.寄生式组合继承

function Person(obj) {
  this.name = obj.name
  this.age = obj.age
}
Person.prototype.add = function(value){
  console.log(value)
}
var p1 = new Person({name:"番茄", age: 18})

function Person1(obj) {
  Person.call(this, obj)
  this.sex = obj.sex
}
// 这一步是继承的关键
Person1.prototype = Object.create(Person.prototype);
Person1.prototype.constructor = Person1;

Person1.prototype.play = function(value){
  console.log(value)
}
var p2 = new Person1({name:"鸡蛋", age: 118, sex: "男"})

5.ES6 继承

//class 相当于 es5 中构造函数
//class 中定义方法时，前后不能加 function，全部定义在 class 的 protopyte 属性中
//class 中定义的所有方法是不可枚举的
//class 中只能定义方法，不能定义对象，变量等
//class 和方法内默认都是严格模式
//es5 中 constructor 为隐式属性
class People{
  constructor(name='wang',age='27'){
  this.name = name;
  this.age = age;
  }
  eat(){
  console.log(`${this.name} ${this.age} eat food`)
  }
}
//继承父类
class Woman extends People{ 
   constructor(name = 'ren',age = '27'){ 
   //继承父类属性
   super(name, age); 
   } 
  eat(){ 
   //继承父类方法
    super.eat() 
  } 
} 
let wonmanObj=new Woman('xiaoxiami'); 
wonmanObj.eat();

//es5 继承先创建子类的实例对象，然后再将父类的方法添加到 this 上（Parent.apply(this)）。 
//es6 继承是使用关键字 super 先创建父类的实例对象 this，最后在子类 class 中修改 this。

6.new 的实现

一个继承自 Foo.prototype 的新对象被创建。
使用指定的参数调用构造函数 Foo，并将 this 绑定到新创建的对象。new Foo 等同于 new Foo()，也就是没有指定参数列表，Foo 不带任何参数调用的情况。
由构造函数返回的对象就是 new 表达式的结果。如果构造函数没有显式返回一个对象，则使用步骤 1 创建的对象。
一般情况下，构造函数不返回值，但是用户可以选择主动返回对象，来覆盖正常的对象创建步骤

function Ctor(){
  ....
}

function myNew(ctor,...args){
  if(typeof ctor !== 'function'){
    throw 'myNew function the first param must be a function';
  }
  var newObj = Object.create(ctor.prototype); //创建一个继承自 ctor.prototype 的新对象
  var ctorReturnResult = ctor.apply(newObj, args); //将构造函数 ctor 的 this 绑定到 newObj 中
  var isObject = typeof ctorReturnResult === 'object' && ctorReturnResult !== null;
  var isFunction = typeof ctorReturnResult === 'function';
  if(isObject || isFunction){
    return ctorReturnResult;
  }
  return newObj;
}

let c = myNew(Ctor);

7.instanceof 的实现

instanceof 是用来判断 A 是否为 B 的实例，表达式为：A instanceof B，如果 A 是 B 的实例，则返回 true,否则返回 false。
instanceof 运算符用来测试一个对象在其原型链中是否存在一个构造函数的 prototype 属性。
不能检测基本数据类型，在原型链上的结果未必准确，不能检测 null,undefined
实现：遍历左边变量的原型链，直到找到右边变量的 prototype，如果没有找到，返回 false

function myInstanceOf(a,b){
  let left = a.__proto__;
  let right = b.prototype;
  while(true){
    if(left == null){
      return false
    }
    if(left == right){
      return true
    }
    left = left.__proto__
  }
}

//instanceof 运算符用于判断构造函数的 prototype 属性是否出现在对象的原型链中的任何位置。
function myInstanceof(left, right) {
  let proto = Object.getPrototypeOf(left), // 获取对象的原型
  prototype = right.prototype; // 获取构造函数的 prototype 对象
  // 判断构造函数的 prototype 对象是否在对象的原型链上
  while (true) {
    if (!proto) return false;
    if (proto === prototype) return true;
    proto = Object.getPrototypeOf(proto);
  }
}

8.Object.create()的实现

MDN 文档
Object.create() 会将参数对象作为一个新创建的空对象的原型, 并返回这个空对象

// 简略版
function myCreate(obj){
  // 新声明一个函数
  function C(){};
  // 将函数的原型指向 obj
  C.prototype = obj;
  // 返回这个函数的实力化对象
  return new C()
}
// 官方版 Polyfill
if (typeof Object.create !== "function") {
  Object.create = function (proto, propertiesObject) {
    if (typeof proto !== 'object' && typeof proto !== 'function') {
      throw new TypeError('Object prototype may only be an Object: ' + proto);
    } else if (proto === null) {
      throw new Error("This browser's implementation of Object.create is a shim and doesn't support 'null' as the first argument.");
    }

    if (typeof propertiesObject !== 'undefined') throw new Error("This browser's implementation of Object.create is a shim and doesn't support a second argument.");

    function F() {}
    F.prototype = proto;

    return new F();
  };
}

9.实现 Object.assign

Object.assign2 = function(target, ...source) {
  if (target == null) {
    throw new TypeError('Cannot convert undefined or null to object')
  }
  let ret = Object(target) 
  source.forEach(function(obj) {
    if (obj != null) {
      for (let key in obj) {
        if (obj.hasOwnProperty(key)) {
          ret[key] = obj[key]
        }
      }
    }
  })
  return ret
}

10.Promise 的实现

实现 Promise 需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：

Promise 本质是一个状态机，且状态只能为以下三种：Pending（等待态）、Fulfilled（执行态）、Rejected（拒绝态），状态的变更是单向的，只能从 Pending -> Fulfilled 或 Pending -> Rejected，状态变更不可逆
then 需要支持链式调用

class Promise {
  callbacks = [];
  state = 'pending';//增加状态
  value = null;//保存结果
  constructor(fn) {
    fn(this._resolve.bind(this), this._reject.bind(this));
  }
  then(onFulfilled, onRejected) {
    return new Promise((resolve, reject) => {
      this._handle({
        onFulfilled: onFulfilled || null,
        onRejected: onRejected || null,
        resolve: resolve,
        reject: reject
      });
    });
  }
  _handle(callback) {
    if (this.state === 'pending') {
      this.callbacks.push(callback);
      return;
    }
 
    let cb = this.state === 'fulfilled' ? callback.onFulfilled : callback.onRejected;
 
    if (!cb) {//如果 then 中没有传递任何东西
      cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
      cb(this.value);
      return;
    }
 
    let ret = cb(this.value);
    cb = this.state === 'fulfilled' ? callback.resolve : callback.reject;
    cb(ret);
  }
  _resolve(value) {
 
    if (value && (typeof value === 'object' || typeof value === 'function')) {
      var then = value.then;
      if (typeof then === 'function') {
        then.call(value, this._resolve.bind(this), this._reject.bind(this));
        return;
      }
    }
 
    this.state = 'fulfilled';//改变状态
    this.value = value;//保存结果
    this.callbacks.forEach(callback => this._handle(callback));
  }
  _reject(error) {
    this.state = 'rejected';
    this.value = error;
    this.callbacks.forEach(callback => this._handle(callback));
  }
}

Promise.resolve

Promsie.resolve(value) 可以将任何值转成值为 value 状态是 fulfilled 的 Promise，但如果传入的值本身是 Promise 则会原样返回它。

Promise.resolve(value) {
  if (value && value instanceof Promise) {
  return value;
  } else if (value && typeof value === 'object' && typeof value.then === 'function') {
  let then = value.then;
  return new Promise(resolve => {
    then(resolve);
  });
  } else if (value) {
  return new Promise(resolve => resolve(value));
  } else {
  return new Promise(resolve => resolve());
  }
}

Promise.reject

和 Promise.resolve() 类似，Promise.reject() 会实例化一个 rejected 状态的 Promise。但与 Promise.resolve() 不同的是，如果给 Promise.reject() 传递一个 Promise 对象，则这个对象会成为新 Promise 的值。

Promise.reject = function(reason) {
  return new Promise((resolve, reject) => reject(reason))
}

Promise.all

传入的所有 Promsie 都是 fulfilled，则返回由他们的值组成的，状态为 fulfilled 的新 Promise；
只要有一个 Promise 是 rejected，则返回 rejected 状态的新 Promsie，且它的值是第一个 rejected 的 Promise 的值；
只要有一个 Promise 是 pending，则返回一个 pending 状态的新 Promise；

Promise.all = function(promiseArr) {
  let index = 0, result = []
  return new Promise((resolve, reject) => {
    promiseArr.forEach((p, i) => {
      Promise.resolve(p).then(val => {
        index++
        result[i] = val
        if (index === promiseArr.length) {
          resolve(result)
        }
      }, err => {
        reject(err)
      })
    })
  })
}

Promise.race

Promise.race 会返回一个由所有可迭代实例中第一个 fulfilled 或 rejected 的实例包装后的新实例。

Promise.race = function(promiseArr) {
  return new Promise((resolve, reject) => {
    promiseArr.forEach(p => {
      Promise.resolve(p).then(val => {
        resolve(val)
      }, err => {
        rejecte(err)
      })
    })
  })
}

11.Ajax 的实现

function ajax(url,method,body,headers){
  return new Promise((resolve,reject)=>{
    let req = new XMLHttpRequest();
    req.open(methods,url);
    for(let key in headers){
      req.setRequestHeader(key,headers[key])
    }
    req.onreadystatechange(()=>{
      if(req.readystate == 4){
        if(req.status >= '200' && req.status <= 300){
          resolve(req.responeText)
        }else{
          reject(req)
        }
      }
    })
    req.send(body)
  })
}

12.实现防抖函数（debounce）

连续触发在最后一次执行方法，场景：输入框匹配

let debounce = (fn,time = 1000) => {
  let timeLock = null

  return function (...args){
    clearTimeout(timeLock)
    timeLock = setTimeout(()=>{
      fn(...args)
    },time)
  }
}

13.实现节流函数（throttle）

在一定时间内只触发一次，场景：长列表滚动节流

let throttle = (fn,time = 1000) => {
  let flag = true;

  return function (...args){
    if(flag){
      flag = false;
      setTimeout(()=>{
        flag = true;
        fn(...args)
      },time)
    }
  }
}

14.深拷贝（deepclone）

判断类型，正则和日期直接返回新对象
空或者非对象类型，直接返回原值
考虑循环引用，判断如果 hash 中含有直接返回 hash 中的值
新建一个相应的 new obj.constructor 加入 hash
遍历对象递归（普通 key 和 key 是 symbol 情况）

function deepClone(obj,hash = new WeakMap()){
  if(obj instanceof RegExp) return new RegExp(obj);
  if(obj instanceof Date) return new Date(obj);
  if(obj === null || typeof obj !== 'object') return obj;
  //循环引用的情况
  if(hash.has(obj)){
    return hash.get(obj)
  }
  //new 一个相应的对象
  //obj 为 Array，相当于 new Array()
  //obj 为 Object，相当于 new Object()
  let constr = new obj.constructor();
  hash.set(obj,constr);
  for(let key in obj){
    if(obj.hasOwnProperty(key)){
      constr[key] = deepClone(obj[key],hash)
    }
  }
  //考虑 symbol 的情况
  let symbolObj = Object.getOwnPropertySymbols(obj)
  for(let i=0;i<symbolObj.length;i++){
    if(obj.hasOwnProperty(symbolObj[i])){
      constr[symbolObj[i]] = deepClone(obj[symbolObj[i]],hash)
    }
  }
  return constr
}

15.数组扁平化的实现(flat)

let arr = [1,2,[3,4,[5,[6]]]]
console.log(arr.flat(Infinity)) // flat 参数为指定要提取嵌套数组的结构深度，默认值为 1

// 用 reduce 实现
function fn(arr){
   return arr.reduce((prev,cur)=>{
    return prev.concat(Array.isArray(cur)?fn(cur):cur)
   },[])
}

16.函数柯里化

function sumFn(a,b,c){return a+ b + c};
let sum = curry(sumFn);
sum(2)(3)(5)//10
sum(2,3)(5)//10

function curry(fn,...args){
  let fnLen = fn.length,
    argsLen = args.length;
  //对比函数的参数和当前传入参数
  //若参数不够就继续递归返回 curry
  //若参数够就调用函数返回相应的值
  if(fnLen > argsLen){
  return function(...arg2s){
    return curry(fn,...args,...arg2s)
  }
  }else{
  return fn(...args)
  }
}

17.使用闭包实现每隔一秒打印 1,2,3,4

for (var i=1; i<=5; i++) {
  (function (i) {
  setTimeout(() => console.log(i), 1000*i)
  })(i)
}

18.手写一个 jsonp

const jsonp = function (url, data) {
  return new Promise((resolve, reject) => {
    // 初始化 url
    let dataString = url.indexOf('?') === -1 ? '?' : ''
    let callbackName = `jsonpCB_${Date.now()}`
    url += `${dataString}callback=${callbackName}`
    if (data) {
      // 有请求参数，依次添加到 url
      for (let k in data) {
        url += `${k}=${data[k]}`
      }
    }
    let jsNode = document.createElement('script')
    jsNode.src = url
    // 触发 callback，触发后删除 js 标签和绑定在 window 上的 callback
    window[callbackName] = result => {
      delete window[callbackName]
      document.body.removeChild(jsNode)
      if (result) {
        resolve(result)
      } else {
        reject('没有返回数据')
      }
    }
    // js 加载异常的情况
    jsNode.addEventListener('error', () => {
      delete window[callbackName]
      document.body.removeChild(jsNode)
      reject('JavaScript 资源加载失败')
    }, false)
    // 添加 js 节点到 document 上时，开始请求
    document.body.appendChild(jsNode)
  })
}
jsonp('http://192.168.0.103:8081/jsonp', {
  a: 1,
  b: 'heiheihei'
})
.then(result => {
  console.log(result)
})
.catch(err => {
  console.error(err)
})

19.手写一个观察者模式

class Subject{
  constructor(name){
  this.name = name
  this.observers = []
  this.state = 'XXXX'
  }
  // 被观察者要提供一个接受观察者的方法
  attach(observer){
  this.observers.push(observer)
  }

  // 改变被观察着的状态
  setState(newState){
  this.state = newState
  this.observers.forEach(o=>{
    o.update(newState)
  })
  }
}

class Observer{
  constructor(name){
  this.name = name
  }

  update(newState){
  console.log(`${this.name}say:${newState}`)
  }
}

// 被观察者 灯
let sub = new Subject('灯')
let mm = new Observer('小明')
let jj = new Observer('小健')
 
// 订阅 观察者
sub.attach(mm)
sub.attach(jj)
 
sub.setState('灯亮了来电了')

20.EventEmitter 实现

class EventEmitter {
  constructor() {
    this.events = {};
  }
  on(event, callback) {
    let callbacks = this.events[event] || [];
    callbacks.push(callback);
    this.events[event] = callbacks;
    return this;
  }
  off(event, callback) {
    let callbacks = this.events[event];
    this.events[event] = callbacks && callbacks.filter(fn => fn !== callback);
    return this;
  }
  emit(event, ...args) {
    let callbacks = this.events[event];
    callbacks.forEach(fn => {
      fn(...args);
    });
    return this;
  }
  once(event, callback) {
    let wrapFun = function (...args) {
      callback(...args);
      this.off(event, wrapFun);
    };
    this.on(event, wrapFun);
    return this;
  }
}

21.生成随机数的各种方法？

function getRandom(min, max) {
  return Math.floor(Math.random() * (max - min)) + min   
}

22.如何实现数组的随机排序？

let arr = [2,3,454,34,324,32]
arr.sort(randomSort)
function randomSort(a, b) {
  return Math.random() > 0.5 ? -1 : 1;
}

23.写一个通用的事件侦听器函数

const EventUtils = {
  // 视能力分别使用 dom0||dom2||IE 方式 来绑定事件
  // 添加事件
  addEvent: function(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  } else if (element.attachEvent) {
    element.attachEvent("on" + type, handler);
  } else {
    element["on" + type] = handler;
  }
  },
  // 移除事件
  removeEvent: function(element, type, handler) {
  if (element.removeEventListener) {
    element.removeEventListener(type, handler, false);
  } else if (element.detachEvent) {
    element.detachEvent("on" + type, handler);
  } else {
    element["on" + type] = null;
  }
  },
 // 获取事件目标
  getTarget: function(event) {
  return event.target || event.srcElement;
  },
  // 获取 event 对象的引用，取到事件的所有信息，确保随时能使用 event
  getEvent: function(event) {
  return event || window.event;
  },
 // 阻止事件（主要是事件冒泡，因为 IE 不支持事件捕获）
  stopPropagation: function(event) {
  if (event.stopPropagation) {
    event.stopPropagation();
  } else {
    event.cancelBubble = true;
  }
  },
  // 取消事件的默认行为
  preventDefault: function(event) {
  if (event.preventDefault) {
    event.preventDefault();
  } else {
    event.returnValue = false;
  }
  }
};

24.使用迭代的方式实现 flatten 函数

var arr = [1, 2, 3, [4, 5], [6, [7, [8]]]]
/** * 使用递归的方式处理 * wrap 内保
存结果 ret * 返回一个递归函数 **/
function wrap() {
  var ret = [];
  return function flat(a) {
    for (var item of
      a) {
        if (item.constructor === Array) {
          ret.concat(flat(item))
        } else {
          ret.push(item)
        }
    }
    return ret
  }
} 
console.log(wrap()(arr));

25.怎么实现一个 sleep

sleep 函数作用是让线程休眠，等到指定时间在重新唤起。

function sleep(delay) {
  var start = (new Date()).getTime();
  while ((new Date()).getTime() - start < delay) {
  continue;
  }
}

function test() {
  console.log('111');
  sleep(2000);
  console.log('222');
}

test()

26.实现正则切分千分位（10000 => 10,000）

//无小数点
let num1 = '1321434322222'
num1.replace(/(\d)(?=(\d{3})+$)/g,'$1,')
//有小数点
let num2 = '342243242322.3432423'
num2.replace(/(\d)(?=(\d{3})+\.)/g,'$1,')

27.对象数组去重

输入:[{a:1,b:2,c:3},{b:2,c:3,a:1},{d:2,c:2}]输出:[{a:1,b:2,c:3},{d:2,c:2}]

首先写一个函数把对象中的 key 排序，然后再转成字符串
遍历数组利用 Set 将转为字符串后的对象去重

function objSort(obj){
  let newObj = {}
  //遍历对象，并将 key 进行排序
  Object.keys(obj).sort().map(key => {
    newObj[key] = obj[key]
  })
  //将排序好的数组转成字符串
  return JSON.stringify(newObj)
}

function unique(arr){
  let set = new Set();
  for(let i=0;i<arr.length;i++){
    let str = objSort(arr[i])
    set.add(str)
  }
  //将数组中的字符串转回对象
  arr = [...set].map(item => {
    return JSON.parse(item)
  })
  return arr
}

28.解析 URL Params 为对象

let url = 'http://www.domain.com/?user=anonymous&id=123&id=456&city=%E5%8C%97%E4%BA%AC&enabled';   
parseParam(url)
/* 结果
{ user: 'anonymous',
  id: [ 123, 456 ], // 重复出现的 key 要组装成数组，能被转成数字的就转成数字类型
  city: '北京', // 中文需解码
  enabled: true, // 未指定值得 key 约定为 true
}
*/

function parseParam(url) {
  const paramsStr = /.+\?(.+)$/.exec(url)[1]; // 将 ? 后面的字符串取出来
  const paramsArr = paramsStr.split('&'); // 将字符串以 & 分割后存到数组中
  let paramsObj = {};
  // 将 params 存到对象中
  paramsArr.forEach(param => {
  if (/=/.test(param)) { // 处理有 value 的参数
    let [key, val] = param.split('='); // 分割 key 和 value
    val = decodeURIComponent(val); // 解码
    val = /^\d+$/.test(val) ? parseFloat(val) : val; // 判断是否转为数字

    if (paramsObj.hasOwnProperty(key)) { // 如果对象有 key，则添加一个值
    paramsObj[key] = [].concat(paramsObj[key], val);
    } else { // 如果对象没有这个 key，创建 key 并设置值
    paramsObj[key] = val;
    }
  } else { // 处理没有 value 的参数
    paramsObj[param] = true;
  }
  })

  return paramsObj;
}

29.模板引擎实现

let template = '我是{{name}}，年龄{{age}}，性别{{sex}}';
let data = {
  name: '姓名',
  age: 18
}
render(template, data); // 我是姓名，年龄 18，性别 undefined

function render(template, data) {
  const reg = /\{\{(\w+)\}\}/; // 模板字符串正则
  if (reg.test(template)) { // 判断模板里是否有模板字符串
  const name = reg.exec(template)[1]; // 查找当前模板里第一个模板字符串的字段
  template = template.replace(reg, data[name]); // 将第一个模板字符串渲染
  return render(template, data); // 递归的渲染并返回渲染后的结构
  }
  return template; // 如果模板没有模板字符串直接返回
}

30.转化为驼峰命名

var s1 = "get-element-by-id"
// 转化为 getElementById

var f = function(s) {
  return s.replace(/-\w/g, function(x) {
    return x.slice(1).toUpperCase();
  })
}

31.查找字符串中出现最多的字符和个数

例: abbcccddddd -> 字符最多的是 d，出现了 5 次

let str = "abcabcabcbbccccc";
let num = 0;
let char = '';

 // 使其按照一定的次序排列
str = str.split('').sort().join('');
// "aaabbbbbcccccccc"

// 定义正则表达式
let re = /(\w)\1+/g;
str.replace(re,($0,$1) => {
  if(num < $0.length){
    num = $0.length;
    char = $1;    
  }
});
console.log(`字符最多的是${char}，出现了${num}次`);

32.图片懒加载

let imgList = [...document.querySelectorAll('img')]
let length = imgList.length

const imgLazyLoad = function() {
  let count = 0
  return (function() {
    let deleteIndexList = []
    imgList.forEach((img, index) => {
      let rect = img.getBoundingClientRect()
      if (rect.top < window.innerHeight) {
        img.src = img.dataset.src
        deleteIndexList.push(index)
        count++
        if (count === length) {
          document.removeEventListener('scroll', imgLazyLoad)
        }
      }
    })
    imgList = imgList.filter((img, index) => !deleteIndexList.includes(index))
  })()
}

// 这里最好加上防抖处理
document.addEventListener('scroll', imgLazyLoad)

分享到QQ

分享到微博