Web前端面试题笔记_JavaScript篇

1.判断字符串是否这样组成的，第一个必须是字母，后面的可以是字母、数字、下划线，总长度为5-20。

var regStr=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
regStr.test("a_a33_2222_aa");

2.截取字符串abcdefg中的efg。

if(/efg/.test(str)){
var efg = str.substr(str.indexOf("efg"),3);
alert(efg);
}

/*
substring() 方法用于提取字符串中介于两个指定下标之间的字符

stringObject.substr(start,length)

*/

3.判断一个字符串中出现次数最多的字符，并统计这个字符的数量。

var str="abcdefgaaabbccd";
var obj={};
//通过遍历将字符以key:value形式存储在obj中
for(var i=0;i<str.length;i++){
var key = str[i];
if(!obj[key]){
obj[key]=1;
}else{
obj[key]++;
}
}

//遍历obj，比较value
var maxValue=-1;
var maxKey="";
var key;
for(key in obj){

if(obj[key]>maxValue){
maxValue=obj[key];
maxKey=key;
}
}
alert("maxKey:"+maxKey+" maxValue:"+maxValue);

4.Javascript中如何检测出一个变量是String类型？请写出函数实现
生成String类型有两种方式：

//字符串字面量
var str1="Hello World";

//通过String()函数
var str2 = new String("Hello World");

//判断函数
function isString(str){

if(typeof str=="string"|| str.constructor==String){ //constructor属性保存用于创建当前对象的构造函数，即String()
return true;
}else{return false;}
}
var str ="";
alert(isString(1));
alert(isString(str));
alert(isString(new String(str)));

5.请编写一个JavaScript函数 parseQueryString，它的用途是把URL的参数解析为一个对象。

function parseQueryString(url){
var obj={};
var arr=url.split('?');
if(arr.length<=1){
return obj;
}
arr=arr[1].split('&');
for(var i=0;i<arr.length;i++){
var a = arr[i].split('=');
obj[a[0]] = a[1];
}
return obj;
}

var url="http://www.baidu.com/index.jsp?key0=0&key1=1&key2=2";
var obj=parseQueryString(url);
alert(obj['key0']);

6.编写一个方法，求一个字符串的字节长度。
此题需要判断在UTF-8下存储的String的字节数，需参考Unicode字符编码数值对应的存储长度：
UCS-2编码(16进制) UTF-8 字节流(二进制)

0000 - 007F 0xxxxxxx （1字节）

0080 - 07FF 110xxxxx 10xxxxxx （2字节）

0800 - FFFF 1110xxxx 10xxxxxx 10xxxxxx （3字节）

参考：谈谈Unicode编码：http://www.lihuasoft.net/article/show.php?id=2778

function getBytes(str){
var byteNums=0; //字节数
var charCode;
var i;
for(i=0;i<str.length;i++){
charCode=str.charCodeAt(i);
if(charCode<0x007f){
byteNums+=1;
}else if((0x0080<=charCode)&&(charCode<=0x07ff)){
byteNums+=2;
}else if((0x0080<=charCode)&&(charCode<=0xffff)){
byteNums+=3;
}
}

return byteNums;
}
alert(getBytes("hahha你好"));//14

7.编写一个方法，去掉数组中重复的元素。

/*去掉重复数组:*/
Array.prototype.strip = function() {
var arr = [], hash = {};
for(var i=0, elem; (elem = this[i]) != undefined; i++)  {
if (!hash[elem])
{
arr.push(elem);
hash[elem] = true;
}
}
return arr;
}

var arr=[2,2,1,3,2,2,2];
alert(arr.strip());

8.看以下代码，按要求作答：

if(window.addEventListener){
var fn = function (type,fn,useCapture){
el.addEventListener(type,fn,useCapture);
}
}
else if(window.attachEvent){ //ie?
fn = function (type,fn){
el.attachEvent('on'+type,);
}
}

a)以上代码的作用

b)以上代码的优点

c)以上代码中的问题，如果你有更好的，请把它编写出来

-->

my answer:

a)以上代码主要是为HTML元素绑定一个事件，并且兼容IE和DOM标准下的浏览器

b)以上代码的优点是做到的了事件绑定的兼容性

c)以上代码中fn这个变量是在DOM标准下的浏览器中才会声明，在IE下它将是一个全局变量

更好的改写：

function bind(el, type, fn, useCapture){
if (window.addEventListener) {
el.addEventListener(type, function(){
fn.apply(el, arguments);//始终将this指向DOM
}, useCapture);
}
else if (window.attachEvent) {
el.attachEvent('on' + type, function(){
fn.apply(el, arguments);//始终将this指向DOM
});
}
}

var el = document.getElementById('demo');
var test = function(){
alert(this.nodeName);
}
bind(el, 'click', test);

注意：代码中的注释部分。因为在符合DOM标准的浏览器中，addEventListener方法将把this指针指向绑定的函数，而IE中attachEvent方法将始终指向widow对象，为了将this指针始终指向当前绑定事件的DOM，我们必须要使用apply或者call方法来改变函数的作用域。

9.JavaScript的装载与执行（参考coolshell）

浏览器对于JavaScript的运行有两大特性：（1）装载后立即执行 （2）执行的过程中会阻塞后面的内容（包括页面渲染、其他资源的下载），如果有多个js文件被引入，那么对于浏览器来说，这些js文件会被串行地载入，并依次执行。所以很多网站将Javascript放在最后面来执行，或者使用window.onload 或者document ready 来预加载js。

10.Javascript的延迟和异步加载

defer：（IE4~IE7）延迟脚本

在<script>标签中加上defer属性就会让浏览器并行地下载js文件，脚本会延迟到整个页面解析完毕后再运行，不会阻塞后续页面的渲染，如果多个<script>标签添加了defer属性，则按照出现顺序执行。例：

<script defer type="text/javascript" src="../alert.js"></script>

async：异步脚本：

async属性支持大多数现代浏览器，只要出现这个属性就开始异步加载js文件。多个有async属性的js文件并不按顺序下载，加载后会立即执行js文件。

异步加载js文件比较标准的方式：

示例代码：

function loadJs(script_filename){
var script = document.createElement('script');
script.setAttribute('type','text/javascript');
script.setAttribute('src',script_filename);
script.setAttribute('	id','script_id');

var script_id = document.getElementById('script_id');
if(script_id){ //已经执行过则把head中的js标签删掉
document.getElementsTagName('head')[0].removeChild(script_id);
}
document.getElementsTagName('head')[0].appendChild(script);
}

另外，按需异步载入js

比如：绑定在window.onload事件上：window.onload=loadJs("xxx") -->?与上面的方式有什么区别（疑惑中）

或者特定的事件上，onclick="loadJs(xxx)"

11.写一个方法，要求创建script元素，将其插入DOM中，加载完后callback

function loadScript(url, callback)  {
var script = document.createElement("script")
script.setAtttribute("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.setAttribute('src',url);
　document.getElementsByTagName('head')[0].appendChild(script);
}

12.如何理解javascript面向对象

面向对象的语言都有一个标志，那就是他们都有类的概念。而通过类可以创建任意多个具有相同属性和方法的对象。但Javascript中没有类的概念。每个对象都是基于一个引用类型创建的，或者是自定义的类型。

13.如何理解Javascript中的this

14.写一个闭包的例子，并说说你的理解

function test(a){

return function(x){
return x+a;
}
}      var b=test(10); alert(b(10)); //20