web前端面试 js部分

1/如何用原生js给一个按钮绑定过两个click事件

var obtn = document.getElementById('btn');

obtn.addEventListener('click',function(){

console.log('点击1')

})

obtn.addEventListener('click',function(){

console.log('点击2')

})

2/如何用js检测变量是string类型还是object类型还是array类型

string: typeof(obj) === 'string' // typeof obj === 'string' // obj.constructor == String

array: Array.isArray(obj) // obj instanceof Array // Object.prototype.toString.call(obj) == '[object Array]' // 判断obj是否有push方法（此方法具有一定的） // obj.constructor == Array

object: if( typeof (obj) == 'object') (array，object都会返回true) Array.isArray(obj)为false为object // obj.toString() == '[object object]' // Object.prototype.toString.call(obj) == '[object object]'

3/js去除字符串空格

（1）replace

去除所有空格：str = str.replace(/s*/g,'');

去除两头空格：str = str.replace(/^\s*|\s*$/g,'')

去除左空格：str = str.replace(/^\s*/,'');

去除右空格： str = str.replace(/(\s*$)/g,'')

(2)trim() ，trimLeft()

str.trim() 无法去除中间的空格 str.trimLeft() 去除左边的空格 str.trimRight() 去除右边的空格

（3）jquery $.trim(str)

$.trim(str) 无法去除中间的空格

4/如何从url中获取参数

let hrefStr = window.location.href itemStr = hrefStr.split('?')[1]  arr = itemStr.split('&') let obj = {} for(let i in arr){item = arr[i].split('=');obj[item[0]] = item[1]}

5/js排序，冒泡，快排

//快排二分法 O(n log n)
var arr = [3,1,4,7,2,9,8]
function quickSort (arr) {
if (arr.length == 0) {
return arr;
}
var cIndex = Math.floor(arr.length/2)
var c = arr.splice(cIndex,1)
var pre = []
var next = []
var newArr = []
for (var i in arr) {
if (arr[i] > c) {
next.push(arr[i])
} else {
pre.push(arr[i])
}
}
return quickSort(pre).concat(c,quickSort(next))
}
console.log(quickSort(arr))
//冒泡比较相邻 O(n^2)
function bubbleSort (arr) {
for (var i = 0; i < arr.length - 1; i++) {
for (var j = 0; j < arr.length - i - 1; j++) {
if (arr[j] > arr[j + 1]) {
var temp;
temp = arr[j]
arr[j] = arr[j + 1]
arr[j + 1] = temp
}
}
}
for (var i in arr) {
if (arr[i] > arr[i+1]) {
var temp
temp = arr[i]
arr[i] = arr[i+1]
arr[i+1] = temp
}
}
return arr
}
console.log('冒泡' + bubbleSort(arr))

6/js 原型

Test1.prototype = function () {
add = function (x, y) {
return x + y;
},
sub = function (x, y) {
return x - y;
}
return {
add: add,
sub: sub
}
}()
var test1 = new Test1()
console.log(test1.add(4,1))
var Test2 = function () {
this.dec = 2
}
Test2.prototype.add = function (x, y) {
return x + y;
}
Test2.prototype.sub = function (x, y) {
return x - y;
}
var test2 = new Test2()
console.log(test2.add(6,9))
var Test3 = function () {
this.dec = 2
};
Test3.prototype = {
add: function(x,y) {
return x + y;
},
sub: function (x, y) {
return x - y;
}
};
var Test4 = function () {
this.tax = 5
};
Test4.prototype = new Test3()
var test4 = new Test4()
console.log(test4.add(7,8))
console.log(test4.dec)

7/原型链

function Foo () {
this.value = 42
}
Foo.prototype = {
method: function () {}
}
function Bar () {}
Bar.prototype = new Foo()
Bar.prototype.foo = 'Hellow World'
Bar.prototype.constructor = Bar
var test = new Bar()
// test 是Bar的实例 Bar.prototype是Foo的实例 test可以访问Foo的value和method 若不想让其访问到value 则染发Bar.prototype = Foo.prototype

8/hasOwnProperty 一个对象是否包含自定义属性而不是原型链中的属性

是javascript中唯一一个处理属性但是不查找原型链的函数

Object.prototype.bar = 1;

var foo = {goo: undefined};

foo.bar; // 1

'bar' in foo; // true

foo.hasOwnProperty('bar'); // false

foo.hasOwnProperty('goo'); // true

缺点：javascript不会保护hasOwnPrototype() 若这个对象含有 hasOwnPrototype() 外部的prototype()验证的时候总是返回对象内部的hasOwnPrototype()设置的内容

var foo = {

hasOwnProperty: function() {

return false;

bar: 'Here be dragons'

};

foo.hasOwnProperty('bar'); // 总是返回 false

web前端面试 js部分相关推荐

web前端面试高频考点——JavaScript 篇（一）【JS的三座大山】原型和原型链、作用域和闭包、异步
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
【持续..】WEB前端面试知识梳理 - CSS部分
传送门: WEB前端面试知识梳理 - CSS部分 WEB前端面试知识梳理 - JS部分最近在看大厂的一些面试题,发现很多问题都是平时没有在意的,很多知识都是知道一点但又很模糊说不出个所以然来,反思自 ...
2018web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
web前端面试总结(自认为还算全面哈哈哈哈哈！！！！）
web前端面试总结(自认为还算全面哈哈哈哈哈!!!!) 一.CSS问题 1.flex布局 display:flex; 在父元素设置,子元素受弹性盒影响,默认排成一行,如果超出一行,按比例压缩 flex ...
web前端不好找工作之web前端面试简历补救篇
web前端面试简历算是第一张脸,给HR/CTO的第一印象,弄好啦,就有面试的机会!? 关于前端面试简历简单的介绍几点吧. 1.关于简历如何写.首先可以去招聘网站上面看看.那么可以看哪些呢.比如在拉钩上 ...
web前端面试宝典——带你直击面试重难点（40个经典题目，涵盖近90%的考点，码字2w，干货满满！）
系列文章目录 JavaScript 知识梳理,收录了web前端面试 95%以上的高频考点,满满的干货.给你做一个高效的知识梳理,为你的面试保驾护航! 内容参考链接 HTML & CSS 篇 ...
web前端面试--浏览器兼容性问题
web前端面试本人是一个web前端开发工程师,主要是vue框架,整理了一些面试题,今后也会一直更新,有好题目的同学欢迎评论区分享 ;-) web面试题专栏:点击此处文章目录 web前端面试前言 ...
2019 web 前端面试总结（春招）
说是春招总结,其实春招只试了头条,算是对找工作以来的总结吧.而且时间过去了快半年了,中间也去实习了一段时间,了解了公司前端开发到底在做什么,不像之前只有在实验室的 low 到爆的项目经验. 关于 of ...
web前端面试高频考点——Vue原理（理解MVVM模型、深度/监听data变化、监听数组变化、深入了解虚拟DOM）
系列文章目录内容参考链接 Vue基本使用 Vue的基本使用(一文掌握Vue最基础的知识点) Vue通信和高级特性 Vue组件间的通信及高级特性(多种组件间的通信.自定义v-model.nextTi ...

web前端面试 js部分

web前端面试 js部分相关推荐

最新文章

热门文章