- 如何控制alert中的换行?
\n alert(“p\np”);
- 请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:
var url = “http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url){
var params = {},
arr = url.split("?");
if (arr.length <= 1)
return params;
arr = arr[1].split("&");
for(var i=0, l=arr.length; i
- 如何控制网页在网络传输过程中的数据量?
启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性
- 以下代码运行结果
function say() {
// Local variable that ends up within closure
var num = 888;
var sayAlert = function() { alert(num); }
num++;
return sayAlert;
}
var sayAlert = say();
sayAlert();//889
- 请实现ECMAScript 5中的Object.getPrototypeOf() 函数
function proto(object) {
return !object? null
: '__proto__' in object? object.__proto__
: /* not exposed? */ object.constructor.prototype
}
- 如何实现Array.prototype.forEach?
if (!Array.prototype.forEach) {
Array.prototype.forEach = function(fn){
for ( var i = 0; i < this.length; i++ ) {
fn( this[i], i, this );
}
};
}
["a", "b", "c"].forEach(function(value, index, array){
assert( value, "Is in position " + index + " out of " + (array.length - 1) );
});
- 如何将arguments转为数组?
Object.prototype.slice.call(arguments);
- 以下程序运行结果?
var ninja = function myNinja(){
alert(ninja == myNinja);
};
ninja();
myNinja();
true、报错(error - myNinja is not defined.)
- 如何获取光标的水平位置?
function getX(e){
e = e || window.event;
//先检查非IE浏览器,在检查IE的位置
return e.pageX || e.clentX + document.body.scrollLeft;
}
- 兼容浏览器的获取指定元素(elem)的样式属性(name)的方法
function getStyle(elem, name){
if(elem.style[name]){//如果属性存在于style[]中,直接取
return elem.style[name];
}
else if(elem.currentStyle){//否则 尝试IE的方法
return elem.currentStyle[name];
}//尝试W3C的方式
else if(document.defaultView && document.defaultView.getComputedStyle){
name = name.replace(/([A-Z])/g, "-$1");//W3C中为textAlign样式,转为text-align
name = name.toLowerCase();
var s = document.defaultView.getComputedStyle(elem, "");
return s && s.getPropertyValue(name);
}else{
return null;
}
}
- Javascript中实现类似PHP的print_r函数
function print_r(theObj) {
var retStr = '';
if(typeof theObj == 'object') {
retStr += '';
for(var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '
['+p+'] => ' + typeof(theObj) + '
';
retStr += '
' + print_r(theObj[p]) + '
';
} else {
retStr += '
['+p+'] => ' + theObj[p] + '
';
}
}
retStr += '
';
}
return retStr;
}
- 以下程序运行结果?
var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
b=1、c=0。
- 以下程序的运行结果?
var foo = 'hello';
(function() {
var foo= foo || 'world';
console.log(foo);
})();
world
- 如何规避javascript多人开发函数重名问题?
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就行
- 前端开发有哪些优化问题?
减少http请求次数:cssspirit,data uri
JS,CSS源码压缩
前端模板JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
用setTimeout来避免页面失去响应
用hash-table来优化查找
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量
缓存DOM节点查找的结果
避免使用CSS Expression
图片预载
避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢
- AJAX请求总共有多少种CALLBACK
Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
- 请给出异步加载js方案,不少于两种
异步加载方式:
defer,只支持IE
async:
创建script,插入到DOM中,加载完毕后callBack,见代码:
function loadScript(url, callback){
var script = document.createElement("script")
script.type = "text/javascript";
if(script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" ||script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else {
//Others: Firefox, Safari, Chrome, and Opera
script.onload = function(){
callback();
};
}
script.src = url;
document.body.appendChild(script);
}
- 函数记忆,判断是不是质数.
方法一:
function isPrime1(n){
if(n<=3){return true}
else{
for(var i=2;i
- 数组去重
方法一:
var arr1=[1,2,3,2,1,2];
function repeat1(arr){
for(var i=0,arr2=[];i
- 插入排序
var arr=[2,4,1,5,3];
function insertSort(arr){
//遍历arr中每个元素(i从1开始)
for(var i=1;it&&p>=0){
while(arr[p]>t&&p>=0){
//将p位置的值,赋值给p+1位置
arr[p+1]=arr[p];
p--;//p--
}//(循环结束)
arr[p+1]=t;//将t放在p+1的位置上
}//(循环结束)
}
insertSort(arr);
console.log(String(arr));
- 快速排序:
function quickSort(arr){
//如果arr的length<=1
if(arr.length<=1){
return arr;//就直接返回arr
}
//计算参照位p
var p=Math.floor(arr.length/2);
var left=[];
var right=[];
//删除p位置的元素
var center=arr.splice(p,1)[0];
//遍历arr中每个元素
for(var i=0;i=center){
right.push(arr[i]);
}else{
left.push(arr[i]);
}
}
return quickSort(left) .concat(center,quickSort(right))
}
var sortedArr=quickSort(arr);
console.log(String(sortedArr));
- 正则表达式
(1) "ryan5 is6 not7 a8 good9 man10"
var n=5;
var str="ryan is not a good man";
str=str.replace(/\b[a-z]+\b/g,function(kw){ return kw+n++;});
console.log(str);
- 统计字符串中每种字符出现的次数,出现次数最多的是? 出现?次
var str="helloworld";
方法一:用hash
for(var i=0,hash={};i
- 数组降维
var arr=[
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
[0,0,0,0],
];
//method 1:
for(var r=0,arr1=[];r
- Function赋值
var f=function(){var a=b=1;}
f();
console.log(b);//1
console.log(a);//报错
var f=function(){var a=b=1;}
setTimeout(f,0);
console.log(b);//报错
f();
var a,b=0, fn=function(){var a=b=2;}
fn();
console.log(a);//undefined
console.log(b);//2
- 函数currying(柯里华)
var getN;
function add(n){
getN=function(){console.log(n);}
return function(m){
n+=m;
arguments.callee.toString=function(){
return n;
}
return arguments.callee;
}
}
add(1)(2)(3); getN();//6
add(1)(2)(3)(4); getN();//10
alert(add(1)(2)(3));//6
alert(add(1)(2)(3)(4));//10
- 递归
var emp={
work:function(){//3,2,1
var sum=0;//+3+2+1 +2+1 +1
for(vari=0; i0;
i++){
sum+=arguments[i]
+arguments.callee(
--arguments[i]
);
}
return sum;
}
}
console.log(emp.work(3,2,1));//10
- 闭包
(1)function fun(n,o){//外层函数
console.log(o);
return {
fun:function(m){//内层函数 n
return fun(m,n);
}
}
}
var a=fun(0);a.fun(1); a.fun(2); a.fun(3);
//undefined 0 0 0
var a=fun(0).fun(1).fun(2).fun(3);
//undefined 0 1 2
var a=fun(0).fun(1); a.fun(2); a.fun(3);
//undefined 0 1 1
(2)var a=0,b=0;
function A(a){
A=function(b){alert(a+b++)};
alert(a);
}
A(1);//1
A(12);//13
- OOP
(1)
window.a=300;
function fn1(){
this.a=100;
this.b=200;
return function(){
alert(this.a)
}.call(arguments[0])
}
function fn2(){ this.a=new fn1(); }
var a=new fn1().b;//300
var v=new fn1(fn2());//[object Object]
(2)
var number=2;//4 8
var obj={
number:4,//8
fn1:(function(){
//var number;
this.number*=2;
number*=2; //声明提前 undefined
var number=3;
return function(){
this.number*=2;
number*=3;
alert(number);
}
})()
}
var fn1=obj.fn1;
alert(number); fn1(); obj.fn1();
//4 9 27
alert(window.number);//8
alert(obj.number);//8
(3)
function Foo(){
getName=function(){alert(1);};
return this;
}
Foo.getName=function(){alert(2);};
Foo.prototype.getName=function(){
alert(3);
};
var getName=function(){alert(4);};
function getName(){ alert(5); };
Foo.getName();//2
getName();//4
Foo().getName();//1
getName();//1
new Foo.getName();//2
new Foo().getName();//3
new new Foo().getName();//3
(4)
var a=1;
var b={
a:2,
b:function(){
console.log(this.a);//1
}(),
f:this.f=function(){
console.log(this.a);
}
};
function f(){ console.log(3); }
f();//1
b.f();//2
(b.f)();//2
(0,b.f)();//1
(5)
var foo=function(){
console.log(this.a);
}
var obj={a:2,foo:foo};
var a=10;
var bar=obj.foo;
var bar2=foo.bind(obj);
bar();//10
bar2();//2
foo();//10
obj.foo();//2
setTimeout(bar,0);//10
(6)
function MyObj(){
this.p.pid++;
}
MyObj.prototype.p={"pid":0}//2
MyObj.prototype.getNum=function(num){
return this.p.pid+num;
}
var _obj1=new MyObj(); //创建新对象,继承原型pid+1
var _obj2=new MyObj(); //创建新对象,继承原型pid+2
console.log(
_obj1.getNum(1)+_obj2.getNum(2)
);//7 2+1 + 2+2
- 判断一个对象是不是数组类型,有五种方法:
(1) typeof 无法判断 只能判断原始类型的值和函数
(2)isPrototypeOf 判断父及对象 可检查整个原型链 //可能继承自数组
console.log(Array.prototype.isPrototypeOf([])?"是数组":"不是数组");
console.log(Array.prototype.isPrototypeOf({})?"是数组":"不是数组");
console.log(Array.prototype.isPrototypeOf(function(){})?"是数组":"不是数组");�
(3)constructor 检查指定对象的构造函数 可检查整个原型链 //可能继承自数组
var father={};
var son={};
father.__proto__=Array.prototype;
son.__proto__=father;
console.log(son.contructor==Array?"是数组":"不是数组")
console.log({}.contructor==Array?"是数组":"不是数组");
console.log(function(){}.contructor==Array?"是数组":"不是数组");�
(4)instanceof 检查一个对象是否是制定构造函数的实例 可检查整个原型链 //可能继承自数组
var father={};
var son={};
father.__proto__=Array.prototype;
son.__proto__=father;
console.log(son instanceof Array?"是数组":"不是数组");
console.log({} instanceof Array?"是数组":"不是数组");
console.log(function(){} instanceof Array?"是数组":"不是数组");
(5)强行用要检查的对象,调用原始的toString方法 不检查整个原型链
//[object class]: class-Array Date Object
//只能检查最初就是数组创建的对象。
console.log(Object.prototype.toString.call([])=="[object Array]"?"是数组":"不是数组");
console.log(Object.prototype.toString.call({}));
console.log(Object.prototype.toString.call(function(){}));
console.log(Object.prototype.toString.call(/\d/));
var father={};
var son={};
father.__proto__=Array.prototype;
son.__proto__=father;
console.log(Object.prototype.toString.call(son)=="[object Array]"?"是数组":"不是数组");//不是
//结论: 对象一旦创建,class属性就无法修改
//修改继承关系,也无法修改class属性
(6) Array.isArray(obj) 不检查整个原型链
console.log(Array.isArray([]));
console.log(Array.isArray({}));
//如果浏览器不支持isArray
if(Array.prototype.isArray===undefined){//if(!Array.isArray)
//给?添加isArray方法
Array.prototype.isArray=function(arg){
//强行调用原始toString方法,和"[object Array]"比较
return Object.prototype.toString.call(arg)
=="[object Array]"?"是数组":"不是数组";
}
}
- 自定义Object.create()——手写
Object.create=function(father,props){
console.log("我的create");
/*使用setPrototypeOf方法
var o=Object();//1. 创建空对象
Object.setPrototypeOf(o,father);//2. 继承father
*/
/*不使用setPrototypeOf方法
function Constructor(){}
Constructor.prototype=father;
var o=new Constructor();
*/
Object.defineProperties(o,props);//3. 定义新属性
return o;
}
- 深克隆原理
Object.clone=function(obj){//深克隆
if(typeof(obj)=="object"){//如果obj是对象
var o=//有必要区分数组和普通对象
Object.prototype.toString.call(obj)=="[object Array]"?[]:{};
for(var key in obj){//遍历obj的自有属性
//如果key是obj的自有属性
if(obj.hasOwnProperty(key)){
o[key]=arguments.callee(obj[key]);//arguments.callee调的是当前的Object.clone函数
}
}
return o;
}else{//如果obj是原始类型的值,就直接返回副本
return obj;
}
}
- 如果浏览器不支持every属性,every的实现原理
if(Array.prototype.every===undefined){
Array.prototype.every=function(fun){
//遍历当前数组中每个元素
for(var i=0;i
- 如果浏览器不支持some属性,some的实现原理
if(Array.prototype.some===undefined){
Array.prototype.some=function(fun){
for(var i=0;i
- 浏览器不支持map属性,map的实现原理
if(Array.prototype.map===undefined){
Array.prototype.map=function(fun){
//创建空数组: newArr
var newArr=[];
//遍历当前数组中每个元素
for(var i=0;i
- 如果浏览器不支持reduce属性,reduce的实现原理
if(Array.prototype.reduce===undefined){
Array.prototype.reduce=function(fun,base){
base===undefined&&(base=0);
for(var i=0;i
- 如果浏览器不支持bind属性, bind函数的实现原理
if(Function.prototype.bind===undefined){
Function.prototype.bind=function(obj/*,参数列表*/){
var fun=this;//留住this
//*****将类数组对象,转化为普通数组
var args=Array.prototype.slice.call(arguments,1);
//args保存的就是提前绑定的参数列表
/*function slice(1){
var sub=[];
for(var i=0;i