前端面试之javascript篇

1、documen.write和 innerHTML的区别
答案:
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

2、浏览器检测通过什么?
答案:
(1) navigator.userAgent
(2) 不同浏览器的特性,如addEventListener

3、JavaScript有哪几种数据类型?
答案:
简单,Number,Boolean,String,Null,Undefined
复合,Object,Array,Function

4、截取字符串“abcdefghi”的“fghi”
答案:
var myvalue=”abcdefghi”;
var jiequ=myvalue.substring(myvalue.length-4,myvalue.length);
alert(jiequ);

5、写出下面的运算结果
答案:
alert(typeof(null)); // object
alert(typeof(undefined)); // undefined
alert(typeof(NaN)); // number
alert(NaN==undefined); // false
alert(NaN==NaN); // false
var str="123abc";
alert(typeof(str++)); // number
alert(str);// NaN

6、问执行完毕后 x, y, z 的值分别是多少?
var x = 1, y = z = 0;
function add(n) {
n = n+1;
}
y = add(x);
function add(n) {
n = n + 3;
}
z = add(x);
答案:1、undefined、undefined

7、push()、pop()、shift()、unshift()分别是什么功能?
答案:
/*push 方法
将新元素添加到一个数组中,并返回数组的新长度值。*/
var a=[1,2,3,4];
a.push(5);
/*pop 方法
移除数组中的最后一个元素并返回该元素。*/
var a=[1,2,3,4];
a.pop();
/*shift 方法
移除数组中的第一个元素并返回该元素。*/
var a=[1,2];
alert(a.shift());
/*unshift 方法
将指定的元素插入数组开始位置并返回该数组。*/

8、如何阻止事件的冒泡?
答案:
//阻止冒泡的方法
function stopPP(e)
{
var evt = e|| window.event;
//IE用cancelBubble=true来阻止而FF下需要用stopPropagation方法
evt.stopPropagation ?evt.stopPropagation() : (evt.cancelBubble=true);
}

9、写出程序运行的结果?
for(var i=0, j=0; i<10, j<6; i++, j++){
k = i + j;
}
答案:10

10、编写一个方法 求一个字符串的字节长度
答案:
/*假设:

一个英文字符占用一个字节,一个中文字符占用两个字节*/

function getBytes(str){
var len = str.length,
bytes = len,
i = 0;
for(; i<len; i++){
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(getBytes("玩,as"));

11、JavaScript中如何对一个对象进行深度clone?
答案:
function cloneObject(o) {
if(!o || 'object' !== typeof o) {
return o;
}
var c = 'function' === typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v = o[p];
if(v && 'object' === typeof v) {
c[p] = Ext.ux.clone(v);
}
else {
c[p] = v;
}
}
}
return c;
};

12、如何控制alert中的换行?
答案:
\n alert(“p\np”);

13、请编写一个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<l; i++){
var a = arr[i].split("=");
params[a[0]] = a[1];
}
return params;
}
var url = "http://witmax.cn/index.php?key0=0&key1=1&key2=2",
ps = parseQueryString(url);
console.log(ps["key1"]);

14、如何控制网页在网络传输过程中的数据量?
答案:启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性

15、以下代码运行结果
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

16、请实现ECMAScript 5中的Object.getPrototypeOf() 函数
答案:
function proto(object) {
return !object? null
: '__proto__' in object? object.__proto__
: /* not exposed? */ object.constructor.prototype
}

17、如何实现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) );
});

18、如何将arguments转为数组?
答案:
Object.prototype.slice.call(arguments);

19、以下程序运行结果?
var ninja = function myNinja(){
alert(ninja == myNinja);
};
ninja();
myNinja();
答案:true、报错(error - myNinja is not defined.)

20、如何获取光标的水平位置?
答案:
function getX(e){
e = e || window.event;
//先检查非IE浏览器,在检查IE的位置
return e.pageX || e.clentX + document.body.scrollLeft;
}

21、兼容浏览器的获取指定元素(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;
}
}

22、Javascript中实现类似PHP的print_r函数
答案:
function print_r(theObj) {
var retStr = '';
if (typeof theObj == 'object') {
retStr += '<div style="font-family:Tahoma; font-size:7pt;">';
for (var p in theObj) {
if (typeof theObj[p] == 'object') {
retStr += '<div><b>['+p+'] => ' + typeof(theObj) + '</b></div>';
retStr += '<div style="padding-left:25px;">' + print_r(theObj[p]) + '</div>';
} else {
retStr += '<div>['+p+'] => <b>' + theObj[p] + '</b></div>';
}
}
retStr += '</div>';
}
return retStr;
}

23、以下程序运行结果?
var b = parseInt("01");
alert("b="+b);
var c = parseInt("09/08/2009");
alert("c="+c);
答案:是b=1、c=0。

24、以下程序的运行结果?
var foo = 'hello';

(function() {
var foo = foo || 'world';
console.log(foo);
})();
答案:world

25、
答案:10

26、如何规避javascript多人开发函数重名问题?
答案:
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只
要类名不重复就行

27、前端开发有哪些优化问题?
减少http请求次数:css spirit,data uri
JS,CSS源码压缩
前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
用setTimeout来避免页面失去响应
用hash-table来优化查找
当需要设置的样式很多时设置className而不是直接操作style
少用全局变量
缓存DOM节点查找的结果
避免使用CSS Expression
图片预载
避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢

28、什么是ajax,为什么要使用Ajax(请谈一下你对Ajax的认识)?
答案:AJAX是“Asynchronous JavaScript and XML”的缩写。他是指一种创建交互式网页应用的网页开发技术。
Ajax包含下列技术:
基于web标准(standards-based presentation)XHTML+CSS的表示;
使用 DOM(Document Object Model)进行动态显示及交互;
使用 XML 和 XSLT 进行数据交换及相关操作;
使用 XMLHttpRequest 进行异步数据查询、检索;
使用 JavaScript 将所有的东西绑定在一起。
为什么要用ajax:Ajax应用程序的优势在于:
通过异步模式,提升了用户体验
优化了浏览器和服务器之间的传输,减少不必要的数据往返,减少了带宽占用
Ajax引擎在客户端运行,承担了一部分本来由服务器承担的工作,从而减少了大用户量下的服务器负载。

29、AJAX请求总共有多少种CALLBACK
答案:Ajax请求总共有八种Callback
onSuccess
onFailure
onUninitialized
onLoading
onLoaded
onInteractive
onComplete
onException
30、请给出异步加载js方案,不少于两种
答案:默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
异步加载方式:
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);
}
请简述下面两种写法的本质,涉及到javascript语法的原理
Var company=function(){};
Comany.get_name=function(){
Return “Microsoft”;
}
Var company=function(){};
Company.prototype.get_name=function(){
Return “Microsoft”;

}
第一个,是给company函数对象本身添加方法。这种方法,可在任何时候直接使用构造函数调用,不受具体对象限制。
第二个,是给company类型的原型对象添加共有方法。这种方法,只有使用compay构造函数创建的子对象,才有权访问。
所以,今后,如果希望任何对象都可使用的方法,就用构造函数上的方法, ( 静态方法)

本文章由javascript技术分享原创和收集

如若转载请注明原文及出处:https://www.dsiab.com/post/405a1949-598e-4f51-84e8-bfe5edad99b1
本站文章由javascript技术分享原创和收集,内容如有问题,请联系站长删除。