由于个人的一些原因最近也参加了几家公司的面试,发现有很多基础性的东西掌握程度还是不够,故此想总结一下最近面试遇到的问题,希望能为在准备面试的的小伙伴尽一些绵薄之力,主要说的是一些我面试当中问到的一些问题,说的不对的地方请小伙伴们即使指正出来,或者有其他的看法也可以一起探讨。
新增了一些语义化的标签例如:header,fotter,nav,main
新增图像:canvas svg
新增媒体标签: audio video
W3C标准盒模型,属性width,height包含content,不包含border和padding
IE盒模型,属性width,height包含content,border,padding
说一下我比较常用的的几种
postion: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
display: flex; align-items: center; justify-content: center;
postion: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto;
主要是不同手机的dpi不同会导致这个问题。解决办法:
.border { position: relative; border:none; } .border:after { content: ''; position: absolute; bottom: 0; background: #000; width: 100%; height: 1px; transform: scaleY(0.5); }
基本类型:Boolean Null Number String Undefined Symbol BigInt
引用类型:Object
if (true) { var a = 1; let b = 2; const c =3; } console.log(a) // 1 console.log(b) // Uncaught ReferenceError: b is not defined console.log(c) // Uncaught ReferenceError: c is not defined
function a() { var b = 3; return function() { console.log(b) } } a()() // 3
localStorage.setItem('a', 1); // storge a->1 localStorage.getItem('a'); // return value of a localStorage.removeItem('a'); // remove a localStorage.clear(); // remove all data
document.cookie = 'a=1; path=/'; // 创建当前页面的cookie var a = document.cookie; // 读取cookie 返回格式key=value; key1=value1; document.cookie = 'a=2; path=/'; // 修改值,会把以前的值覆盖 document.cookie = "a=; expires=Thu, 01 Jan 1970 00:00:00 GMT"; //删除cookie
9k字 | Promise/async/Generator实现原理解析
可以看看蔡徐抻大佬总结的文章,非常详细
console.log(1) setTimeout(() => { console.log(5) },0) new Promise(resolve => { resolve() console.log(2) }).then(() => { console.log(4) }) console.log(3) // 打印出1,2,3,4,5
function throttle(fn) { var flag = true return function() { if (!flag) return; flag = false; setTimeout(function () { fn() flag = true }, 1000) } }
function debounce(fn) { var timeout = null; return function() { clearTimeout(timeout) timeout = setTimeout(function (){ fn() }, 1000) } }
// 每个列表点击弹出内容 // 不使用事件委托需要给每个列表添加点击事件(消耗内存,不灵活,添加动态元素时需要重新绑定事件)这里不做介绍 <ul id="myLink"> <li id="1">aaa</li> <li id="2">bbb</li> <li id="3">ccc</li> </ul> // 使用事件委托(减少内存占用,提升性能,动态添加元素无需重新绑定事件) var myLink = document.getElementById('myLink'); myLink.onclick = function(e) { var e = event || window.event; var target = e.target || e.srcElement; if(target.nodeName.toLowerCase() == 'li') { alert(target.id + ':' + target.innerText); } };
function A () { } A.prototype.constructor === A //true
function A () { } new A().__proto__ === A.prototype //true
function A () { } A.prototype.name = 'a' var a = new A() var b = new A() a.name === b.name // true a.__proto__.name === b.__proto__.name // true
function _instanceOf(obj, type) { var obj = obj.__proto__ var type = type.prototype while(true) { if (obj == null) { return false } if (obj == type) { return true } obj = obj.__proto__ } } var a = [1, 2, 3] _instanceOf(a, Array)
var obj = { name: 'a', age: 18, arr: [1, 2] } function shallowCopy(obj) { var newObj = {}; for (var prop in obj) { if (obj.hasOwnProperty(prop)) { // 过滤掉原型上的属性 newObj[prop] = obj[prop]; } } return newObj; } var obj1 = shallowCopy(obj) var obj2 = obj obj1.name = 'b' obj2.age = 20 obj2.arr[0] = 3 obj1.arr[0] = 4 console.log(obj) // {name: "a", age: 20, arr: [4, 2]} console.log(obj1) // {name: "b", age: 18, arr: [4, 2]} console.log(obj2) // {name: "a", age: 20, arr: [4, 2]}
我们通过浅拷贝得到obj1,改变obj1的name,obj不会发生改变,通过赋值得到obj2,obj2改变age值obj的值也会被改变。说明赋值得到的对象只是改变了指针,浅拷贝是创建了新对象。
我们通过obj2和obj1都改变的值,发现obj,ob1,obj2都发生了改变,所以无论是浅拷贝还是赋值都会改变原始数据(浅拷贝只拷贝了一层对象的属性)
var obj = { name: 'a', age: 18, arr: [1, 2] } function copy (obj) { var newobj = Array.isArray(obj) ? [] : {}; if(typeof obj !== 'object'){ return; } for(var i in obj){ if (obj.hasOwnProperty(i)) { newobj[i] = typeof obj[i] === 'object' ? copy(obj[i]) : obj[i]; } } return newobj } var copyObj = copy(obj) copyObj.arr[0] = 3 console.log(copyObj) //{name: "a", age: 20, arr: [3, 2]} console.log(obj) //{name: "a", age: 20, arr: [1, 2]}
function Big () { this.age = [1, 2, 3] } Big.prototype.getAge = function () { return this.age } function Small() {} Small.prototype = new Big() var small = new Small() console.log(small.age) // [1, 2, 3] console.log(small.getAge()) // [1, 2, 3]
缺点1:引用缺陷(修改其中一个Small实例的父类变量会影响所有继承Big的实例)
small.age[0] = 12 var small1 = new Small() console.log(small1.age) // [12, 2, 3] console.log(small.age) // [12, 2, 3]
缺点2:无法为不同的实例初始化继承来的属性
function Big (name) { this.age = [1, 2, 3] this.name = name } Big.prototype.getAge = function () { return this.age } function Small() {} Small.prototype = new Big('small') var small = new Small() var small1 = new Small() console.log(small1.name) // small console.log(small.name) // small
function Big (name) { this.age = [1, 2, 3] this.name = name } Big.prototype.getAge = function () { return this.age } function Small(name) { Big.apply(this, arguments) } var small = new Small('small') var small1 = new Small('small1') console.log(small.name) // small console.log(small1.name) // small1 small.age[0] = 12 console.log(small.age) // [12, 2, 3] console.log(small1.age) // [1, 2, 3]
缺点:无法访问原型上的方法
small.getAge() //small.getAge is not a function
function Big (name) { this.age = [1, 2, 3] this.name = name } Big.prototype.getAge = function () { return this.age } function Small(name) { Big.apply(this, arguments) } Small.prototype = new Big() var small = new Small('small') var small1 = new Small('small1') console.log(small.name) // small console.log(small1.name) // small1 small.age[0] = 12 console.log(small.age) // [12, 2, 3] console.log(small1.age) // [1, 2, 3] console.log(small.getAge()) // [12, 2, 3] console.log(small1.getAge()) // [1, 2, 3]
小缺点:调用了两次父类构造函数
function Big (name) { this.age = [1, 2, 3] this.name = name } Big.prototype.getAge = function () { return this.age } function Small(name) { Big.apply(this, arguments) } // 对父类原型进行拷贝,否则子类原型和父类原型指向同一个对象,修改子类原型会影响父类 Small.prototype = Object.create(Big.prototype) var small = new Small('small') var small1 = new Small('small1') console.log(small.name) // small console.log(small1.name) // small1 small.age[0] = 12 console.log(small.age) // [12, 2, 3] console.log(small1.age) // [1, 2, 3] console.log(small.getAge()) // [12, 2, 3] console.log(small1.getAge()) // [1, 2, 3]
注意:对父类原型进行拷贝后赋值给子类原型,因此Small上的constructor属性被重写,需要修复Small.prototype.constructor = Dog;
class Big { constructor(age) { this.age = age; } getAge () { return this.age } } class Small extends Big { constructor(age) { super(age) } } var small = new Small([1, 2, 3]) var small1 = new Small([12, 2, 3]) small.age[0] = 13 console.log(small.age) // [13, 2, 3] console.log(small.getAge()) // [13, 2, 3] console.log(small1.age) // [12, 2, 3] console.log(small1.getAge()) // [12, 2, 3]
methods : { //禁止滚动 stop(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='hidden'; document.addEventListener("touchmove",mo,false);//禁止页面滑动 }, /取消滑动限制/ move(){ var mo=function(e){e.preventDefault();}; document.body.style.overflow='';//出现滚动条 document.removeEventListener("touchmove",mo,false); } }
如果有错误或者不严谨的地方,请务必给予指正,十分感谢。如果喜欢或者有所启发,欢迎点赞收藏关注三连,对作者也是一种鼓励。一起在码农的道路上越走越远。