博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
前端面试题目大全
阅读量:6832 次
发布时间:2019-06-26

本文共 4738 字,大约阅读时间需要 15 分钟。

  hot3.png

##article和section的区别

可看:

##尽量说出你知道的生僻的HTML标签

可看w3school的HTML标签列表

##编程【提】

实现一个功能,输入参数分别为n和m,从数列1,2,3......n中,打印出和等于m的所有组合

##编程【提】

实现一个函数,输入为数组arr,arr的每一项都是整数,在数组中截取连续的一段作为子数组,要求子数组的和最大,返回该子数组

##jQuery.extend方法-手写

手写实现jQuery.extend方法

##arguments执行方法

var length = 10;function fn() {  console.log(this.length);}var obj = {  length: 5,  method: function(fn) {    fn();    arguments[0]();  }};obj.method(fn, 1);

输出为10,2

第一次输出10应该没有问【提】。我们知道取对象属于除了点操作符还可以用中括号,所以第二次执行时相当于arguments调用方法,this指向arguments,而这里传了两个参数,故输出arguments长度为2。

##var和函数的提前声明

function fn(a) {  console.log(a);   var a = 2;  function a() {}  console.log(a); }fn(1);

输出:function a() {} 2

我们知道var和function是会提前声明的,而且function是优先于var声明的(如果同时存在的话),所以提前声明后输出的a是个function,然后代码往下执行a进行重新赋值了,故第二次输出是2。

##if语句内声明变量也会提升

if('a' in window) {  var a = 10;}alert(a);

输出:10

function和var会提前声明,而其实{...}内的变量也会提前声明。于是代码还没执行前,a变量已经被声明,于是 'a' in window 返回true,a被赋值。

##给基本类型数据添加属性,不报错,但取值时是undefined

var a = 10;a.pro = 10;console.log(a.pro + a);var s = 'hello';s.pro = 'world';console.log(s.pro + s);

答案:NaN undefinedhello

给基本类型数据加属性不报错,但是引用的话返回undefined,10+undefined返回NaN,而undefined和string相加时转变成了字符串。

##判断一个字符串中出现次数最多的字符,并统计次数

除了简单利用Object属性不能重复的方法外,还有以下使用正则的方法:

var s = 'aaabbbcccaaabbbaaabbbbbbbbbb';var a = s.split('');a.sort();s = a.join('');var pattern = /(\w)\1*/g;var ans = s.match(pattern);ans.sort(function(a, b) {  return a.length < b.length;});;console.log(ans[0][0] + ': ' + ans[0].length);

学习它的这个特别的正则使用方法!

window.name

window.name的特性是什么?

window.name的特性

window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

window.name的应用--跨域传输数据

具体实现流程

  1. 准备仨页面, a.com/app.html, a.com/proxy.html, b.com/data.html
  2. app.html创建<iframe>, src指向b.com/data.html,然后设置iframe的contentWindow.name属性
  3. <iframe>的src指向回同域名的a.com/proxy.html,获取contentWindow.name属性,即获取跨域数据了
  4. 销毁<iframe>

详细请【参烤】:

原理:

跨域封装:

安全性

利用iframe的window.name来实现跨域数据传输是安全的,因为windowName模块总是在一个 iframe中加载资源,并且一旦获取到数据,或者当你在最顶层浏览了一个新页面,这个 iframe 将被销毁,所以其他页面永远访问不到 window.name 属性。

了解更多关于跨域技术,可【参烤】:

window.window

window.window === window

位运算符

3^5 = ?3 | 5 = ?3 || 5 && 8 = ?

String.prototype.slice()

'abcdefg'.slice(-1,-4)

$.fn.is(":visible")

jQuery判断元素是否可视

大数相加

js如何实现大数相加

arguments赋值

cc = function(a, b){arguments[1] = 100, console.log(b)}cc(2,23) // 结果是什么

IE-Hacks

给一个元素定义IE6-10显示不同颜色的背景

前端缓存策略

忘了【提】目是怎么说的了,反正就让你详述前端缓存策略。当时整张试卷,这道【提】是最后的附加【提】,然后旁边加了说明,说如果你选择做这一道【提】,那么前面的【提】目都不用做了。很吊的一道【提】。

火狐与IE的js差异

举出三例以上的火狐与IE的js差异的地方

css的Float属性

// IEdocument.getElementById("header").style.styleFloat = "left";// MOZdocument.getElementById("header").style.cssFloat = "left";

计算后的样式

// IEvar n = document.getElementById("header");var myStyle = n.currentStyle.backgroundColor;// MOZvar myComputedStyle = document.defaultView.getComputedStyle(n,null):var myStyle = myComputedStyle.backgroundColor;

获取元素的class属性

// IEvar myAttr = n.getAttribute("className");// MOZvar myAttr = n.getAttribute("class");

获取label的for属性

// IEvar myFor = n.getAttribute("htmlFor");// MOZvar myFor = n.getAttribute("for");

获取光标位置

var myPos = [0,0];// IEmyPos[0] = event.clientX, // 相对可视窗口的xmyPos[1] = event.clientY; // 相对可视窗口的y// MOZmyPos[0] = event.pageX, // 相对网页的xmyPos[1] = event.pageY; // 相对网页的y

获取视图或浏览器窗口的尺寸

// IEvar w = document.documentElement.clientWidth,  h = document.documentElement.clientHeight;// MOZvar w = window.innerWidth,  h = window.innerHeight;

js设置float:left

用js设置float:left;的兼容写法

// IEdocument.getElementById("header").style.styleFloat = "left";// MOZdocument.getElementById("header").style.cssFloat = "left";

写个单机五子棋,带胜负判断,兼容Chrome即可

界面可用DOM或者Canvas或者SVG实现。 想办法使得后续切换界面实现方式成本最低。 (比如选择使用DOM实现,当需求改为使用Canvas实现时尽量少改动代码)

声音可视化,兼容Chrome即可

开发一个界面,能接收分析用户的声音,并根据声音的不同(包括音调、音量、频率、音色等),实时用图形方式展现声音特点

this指向

var x = 10foo = {    x: 20,    bar: function(){        var x = 30        return this.x    }}console.log(    foo.bar(),             //20,this->foo    (foo.bar)(),           //20,this->foo    (foo.bar = foo.bar)(), //10,this->window    (foo.bar, foo.bar)()   //10,this->window)

循环中使用闭包

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

输出的都是5,应改为:

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

或者利用bind写得更优雅:

for(var i = 0; i < 5; i++) {  setTimeout(console.log.bind(console, i), i * 1000);}

##Object的key永远都是String

var a={},    b={key:'b'},    c={key:'c'};a[b]=123;a[c]=456;console.log(a[b]); //-> 456

Javascript 中对象的 key 值,一定会是一个 string 值,如果不是,则会隐式地进行转换 当执行到 a[b]=123] 时,b 并不是一个 string 值,将 b 执行 toString() 方法转换(得到 “[object Object]“) a[c] 也是相同道理 所以代码其实可以看做这样执行:

var a={},    b={key:'b'},    c={key:'c'}; // a[b]=123;a["[object Object]"]=123; // a[c]=456;a["[object Object]"]=456; console.log(a["[object Object]"]);

转载于:https://my.oschina.net/luozt/blog/345227

你可能感兴趣的文章
Linux常用命令——awk
查看>>
From Word Embeddings To Document Distance
查看>>
Oracle的体系结构(三)
查看>>
nginx + django 两种配置模式
查看>>
linux运维学习之Oracle数据库的安装和扩展小优化
查看>>
linux-mysql
查看>>
招人已了,招人心得跟47道面试题加答案放出来
查看>>
珍爱生命,拒绝session。
查看>>
使用JDK原生api进行网络请求并比较
查看>>
oracle
查看>>
1-交换通信:单臂路由实验+DHCP
查看>>
Apache Cassandra和Apache Ignite:通过Ignite增强Apache Cassandra
查看>>
Python全栈初级 中级 高级,资料无偿分享,希望能对大家有所帮助
查看>>
[API 开发管理] 分享几个 eoLinker 实用操作技巧
查看>>
网站安全问题的出现及解决方法
查看>>
java io FilterInputStream BufferedInputStream
查看>>
[转]shell脚本中echo显示内容带颜色
查看>>
有趣的GodMode
查看>>
TypeScript 类
查看>>
萌新入职注意事项-没WIFI也要看的秘技
查看>>