javascript面试必备知识(5)手撕js面试常见题型

时间:2020-8-21 作者:admin


js面试必备知识,关注作者查看系列js知识体系

导语:这一章来直接手撕web前端js面试常见题!

本文的目录

1,手写深拷贝函数

function deepClone(obj ={}) {
  if (typeof obj !== 'object' || obj == {}) {
    return obj
  }

  let result
  if (obj instanceof Array) {
    result = []
  } else {
    result = {}
  }

  for (let key in obj) {
    if (obj.hasOwmproperty(key)) {
      result[key] = deepClone(obj[key])
    }
  }

  return result
}

2,利用apply手写一个bind函数,bind函数返回什么东西?

bind函数返回的是一个函数,需要手动去执行。

//给function的显式原型添加一个bind1函数
Function.prototype.bind1 = function () {
  const args = Array.prototype.slice.call(arguments)		//转变成数组

  const that = args.shift()		//将第一项的this拿出来

  const self = this			//获取调用这个bind1的函数
  //返回一个函数
  return function () {
      return self.apply(that, args)
  }
}
function fun1(a, b) {
  console.log('this', this)
  console.log(a, b)
  return 'fun1'
}

const fun2 = fun1.bind1({x: 100}, 10, 20)		//劫持
const res = fun2()		//手动执行
console.log(res)

3,settimeout和setinterval区别,怎么让settimeout执行完再进行一个操作?

setTimeout和setInterval都属于JS中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直循环下去。

// 封装成一个函数(settimeout后后续操作),参数分别是执行的次数,需要settimeout的函数,延迟几秒
function settimeoutdo(num,fn,delay){		
  var counter = 0;
  var d = jQuery.Deferred();

  var doIncrease = function() {
    if(counter < num){
        counter++;
        setTimeout(fn, delay);			//执行需要settimeout的函数
        setTimeout(doIncrease, delay);
    } else {
      d.resolve();
    }
  };
  doIncrease();
  return d.promise();
};

settimeoutdo(1,() => {console.log('123')},1000).then(function() {
  console.log(456);
});

4,手写简单的jQuery,需要考虑插件和扩展性。


class jQuery {
  constructor(selector) {
    const result = document.querySelectorAll(selector);
    const length = result.length;
    for (let i = 0; i < length; i++) {
      this[i] = result[i];
    }
    this.length = length;
    this.selector = selector;
  }
  get(index) {
    return this[index];
  }
  each(fn) {
    for (let i = 0; i < this.length; i++) {
      const elem = this[i];
      fn(elem);
    }
  }
  on(type, fn) {
    return this.each((elem) => {
      elem.addEventListener(type, fn, false);
    });
  }
}
// const $p = new jQuery('p')
// $p.get(1)
// $p.each((elem) => console.log(elem.nodeName))
// $p.on('click', () => alert('clicked'))

// 插件
jQuery.prototype.dialog = function (info) {
  alert(info);
};
// const $p = new jQuery('p')
// $p.dialog('dialog')

// "造轮子"
class myJQuery extends jQuery {
  constructor(selector) {
    super(selector);
  }
  // 扩展自己的方法
  addClass(className) {
    this.each((elem) => elem.classList.add(className));
  }
  style(data) {
    this.each((elem) => elem.classList.add(style));
  }
}
// const $p = new myJQuery('p')
// $p.addClass('test')

5,数组去重。


//n方时间复杂度
function newarr(arr){
  for (let i = 0; i < arr.length; i++){
    for (let j = i+1; j < arr.length; j++){
      if (arr[i] == arr[j]) { 
        arr.splice(j,1);      //如果arr[i]等于arr[j],splice方法删除arr[j]
        j--;
      }
    }
  }
  return arr;
}

var arr = [3,4,5,4,2,5,6,8,2,3,1];
console.log(newarr(arr))


//	n时间复杂度,但是占用了新的内存
function newarr(arr){ 
  var newarr = []; 
  for(var i = 0; i < arr.length; i++){ 
      if (newarr.indexOf(arr[i]) == -1){ 
          newarr.push(arr[i])
      }; 
  } 
  return newarr; 
}

var arr = [3,4,5,4,2,5,6,8,2,3,1];
console.log(newarr(arr))


//用set对象的特性给数组去重
let a = [3,4,5,4,2,5,6,8,2,3,1];
let b = new Set(a);
b = [...b];
console.log(b)

6,splice函数和slice函数的区别

splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目
ps:该方法会改变原始数组。

例子:arr.splice(1,1) //删除从第二个元素开始的一个元素。

slice() 方法可提取字符串或者数组的某个部分,并以新的字符串或者数组返回被提取的部分
ps:该方法不会改变原始字符串或者数组,而且还会产生一个新的字符串或者数组。

例子:newstr = str.slice(1,10) //提取从第二个元素到10个元素到newstr,共9个元素。

7,一分钟解决瀑布流布局

我总结在另外一篇博文里面了,请赐教!!
一分钟解决瀑布流布局,小白也能看懂

感谢阅读,持续更新中。。。

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。