##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的应用--跨域传输数据
具体实现流程
- 准备仨页面, a.com/app.html, a.com/proxy.html, b.com/data.html
- app.html创建
<iframe>
, src指向b.com/data.html,然后设置iframe的contentWindow.name
属性 - 把
<iframe>
的src指向回同域名的a.com/proxy.html,获取contentWindow.name
属性,即获取跨域数据了 - 销毁
<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]"]);