2.JavaScript底数据类型都来啊。越产进一步有深度。

 一、初级JavaScript

1.JavaScript凡千篇一律宗怎么的言语,它来哪些特征?

无标准答案。

2.JavaScript之数据类型都产生啊?

中心数据列:String,Boolean,Number,Undefined, Null

引用数据类型:Object(Array,Date,RegExp,Function)

这就是说问题来了,如何判断有变量是否为数组数据类型?

var arr=[1,2]

  • 方法一:arr instanceof Array //true
  • 方法二:Object.prototype.toString.apply(arr) //”[object Array]”
    //ECMA5
  • 方法三:arr.constructor //function Array() { [native code] } constructor可以给修改,可能失效。
  • 方式四:duck type 判断是否出slice()方法 可以让变量自定义slice方法,所以可能失效。

不如版本模拟Array的isArray方法:

if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    }; 
}

3.早就知晓ID的Input输入框,希望收获这输入框的输入值,怎么开?(不以第三正值框架)

document.getElementById('ID').value

4.盼望获得到页面中具备的checkbox怎么开?(不下第三在框架)

var domList = document.getElementsByTagName('input');
var checkBoxList = [];
var len = domList.length;  //缓存到局部变量
while (len--) {  //使用while的效率会比for循环更高
  if (domList[len].type == 'checkbox') {
      checkBoxList.push(domList[len]);
  }
}

5.安装一个已经知晓ID的DIV的html内容呢xxxx,字体颜色设置为黑色(不利用第三正在框架)

var dom = document.getElementById(“ID”);
dom.innerHTML = “xxxx”;
dom.style.color = “#000”;
  • 方法一:dom.innerHTML=”bbb”;

  • 方法二:dom.innerText=”aaa”;

  • 方法三:dom.textContent=”ccc”;

6.当一个DOM节点被点击上,我们期望能够推行一个函数,应该怎么开?

  •  直接以DOM里绑定事件:<div onclick=”test()”></div>
  •  在JS里通过onclick绑定:xxx.onclick = test 
  •  通过波添加进行绑定:addEventListener(xxx, ‘click’, test)

 那么问题来了,Javascript的波流模型都出什么?

  • “事件冒泡”:事件开始由于最实际的要素接受,然后逐级提高传播
  • “事件捕捉”:事件由最无现实的节点先收下,然后逐级为下,一直顶极致现实的
  • “DOM事件流”:三个阶段:事件捕捉,目标等,事件冒泡

 7.啊是Ajax和JSON,它们的得失。

 Ajax是异步JavaScript和XML,用于在Web页面中实现异步数据交互。

优点:

  • 好使页面不重载全部内容的状态下加载局部内容,降低数据传输量
  • 避用户不断刷新或者跳转页面,提高用户体验

缺点:

  • 针对寻找引擎不友善
  • 倘落实ajax下之前进后退功成本较充分
  • 兴许引致请求数之增加
  • 跨域问题限制

 JSON是同栽轻量级的数据交换格式,ECMA的一个子集

有些:轻量级,易于人的读书与编排,便于JavaScript解析,支持可数据类型(数组、对象、字符串、数字)

 8.禁闭下列代码输出为何?解释原因。

var a;
alert(typeof a); // undefined
alert(b); // 报错

讲:Undefined是一个单独出一个价的数据类型,这个价值就是“undefined”,在应用var声明变量但未曾对那个赋值进行初始化时,这个变量的价就是undefined。而b由于无声明将报错。注意勿表明的变量和声明了不赋值的凡勿等同的。

9.拘留下列代码,输出什么?解释缘由。 

var a = null;
alert(typeof a); //object

解释:null是盖单纯发相同价值的数据类型,这个价值就是是null。表示一个空指针对象,所以用typeof检测会回来”object”。

10.看下列代码,输出什么?解释缘由。 

var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == '';     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true
  • undefined以及null相等,但不固定等(===)
  • 一个凡number一个凡string时,会尝试将string转换为number
  • 尝试将boolean转换为number,0或1
  • 品用Object转换成number或string,取决于另外一个针对计量的品种
  • 为此,对于0、空字符串的判定,建议使用 “===” 。“===”会事先判断两限的值类型,类型不般配配时为false。

 这就是说问题来了,看下的代码,输出什么,foo的档次为什么?

var foo = "11"+2-"1";
console.log(foo);
console.log(typeof foo);

尽完毕晚foo的值也111,foo的类别为Number。

var foo = "11"+2+"1";    //体会加一个字符串'1' 和 减去一个字符串'1'的不同
console.log(foo);
console.log(typeof foo);

推行了晚foo的价也1121(此处是字符串拼接),foo的项目也String。

11.看代码给答案。

var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案:2(考察引用数据类型细节)

12.都知道数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。 

答案:alert(stringArray.join(”
“))

那问题来了,业已解有字符串foo=”get-element-by-id”,写一个function将那个转化成驼峰表示法”getElementById”。

原作者:

var foo="get-element-by-id";
function combo(msg){
    var arr = msg.split("-");
    var len = arr.length;    //将arr.length存储在一个局部变量可以提高for循环效率
    for(var i=1;i<len;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}
combo(foo); //"getElementById"

我写的:

function myCombo(msg){
    var arr=msg.split('-');
    var len=arr.length;
    var str=arr[0];
    for(var i=1;i<len;i++){
        str+=arr[i].charAt(0).toUpperCase().concat(arr[i].slice(1));
    }
    return str;
}
myCombo(foo);     //"getElementById"

(考察基础API) 

13.var numberArray = [3,6,2,4,1,5];
(考察基础API)
 

1) 实现对该数组的倒排,输出[5,1,4,2,6,3]

2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

var numberArray = [3,6,2,4,1,5];
numberArray.reverse(); // 5,1,4,2,6,3
numberArray.sort(function(a,b){  //6,5,4,3,2,1
   return b-a;
})

14.出口今天底日子,以YYYY-MM-DD的办法,比如今天凡是2014年9月26日,则输出2014-09-26

var d = new Date();
// 获取年,getFullYear()返回4位的数字
var year = d.getFullYear();
// 获取月,月份比较特殊,0是1月,11是12月
var month = d.getMonth() + 1;
// 变成两位
month = month < 10 ? '0' + month : month;
// 获取日
var day = d.getDate();
day = day < 10 ? '0' + day : day;
alert(year + '-' + month + '-' + day);

15.将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10,{$name}替换成Tony
(使用正则表达式)

答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’); 

16.以保证页面输出安全,我们常常得针对有的非同寻常之字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义 

function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “\””:
                      return “&quot;”;
      }
  });
}

17.foo =
foo||bar ,这行代码是呀意思?为什么要如此形容?

答案:if(!foo) foo = bar; //如果foo存在,值未转移,否则将bar的值赋给foo。 

闭塞表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进展求值时,只要最终之结果已可以规定是的确要借用,求值过程尽管告歇,这名短路求值。 

18.看押下列代码,将会见输出什么?(变量声明提升) 

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

答案:输出undefined
和 2。上面代码相当给:

 

var foo = 1;
function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;  
}

 

函数声明和变量声明会让JavaScript引擎隐式地升级及手上作用域的顶部,但是偏偏提升名称不会见升级赋值部分。

 

19.用js实现自由选10–100以内的10个数字,存入一个累组,并排序。

var iArray = [];
funtion getRandom(istart, iend){
        var iChoice = iend - istart +1;
        return Math.floor(Math.random() * iChoice + istart);
}
for(var i=0; i<10; i++){
        iArray.push(getRandom(10,100));
}
iArray.sort();

20.将个别只数组合并,并删除第二独因素。

var array1 = ['a','b','c'];
var bArray = ['d','e','f'];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

21.怎样长、移除、移动、复制、创建同找节点(原生JS,实在基础,没仔细写每一样步)

问询又多但是参看:DOM

1)创建新节点

  • createElement()//创建同具体的素
  • createTextNode()//创建一个文本节点
  • createDocumentFragment()//创建一个DOM片段

2)添加、移除、替换、插入

  • appendChild() //添加
  • removeChild() //移除
  • replaceChild() //替换
  • insertBefore()
    //在已有的子节点前插入一个新的子节点

3)查找

  • getElementsByTagName()
    //通过标签号
  • getElementsByName()
    //通过元素的Name属性的价值(IE容错能力较强,会得到一个数组,其中包括id等于name值的)
  • getElementById()
    //通过元素Id,唯一性
  • getElementsByClassName()    //通过类名查找
  • childNodes保存子节点的援,包括空白也在内(除了IE<9),也包罗<script>在内。
  • children如果仅想取得子节点中之要素节点,跳了文本节点,应该用children属性。
  • firstChild和lastChild是childNodes中前前后后节点的短平快索引。
  • parentNode,previousSibling和nextSibling
  • document.documentElement和document.body。

22.有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:'1′, b:’2′, c:”, d:’xxx’, e:undefined}。 

答案: 

function serilizeUrl(url) {
    var result = {};
    url = url.split("?")[1];
    var map = url.split("&");
    for(var i = 0, len = map.length; i < len; i++) {
        result[map[i].split("=")[0]] = map[i].split("=")[1];
    }
    return result;
}

23.正则表达式构造函数var
reg=new RegExp(“xxx”)与刚刚则表达字面量var
reg=//有什么两样?匹配邮箱的正则表达式?

答案:当以RegExp()构造函数的早晚,不仅需要转义引号(即\”表示”),并且还索要对相反斜杠(即\\代表一个\)。应用正则表达字面量的频率又胜似。
**
邮箱**的正则匹配:

var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.关押下代码,给闹输出结果。

for(var i=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);   
  },0); 
};

案由:Javascript事件处理器在线程空闲之前未会见运作。那么问题来了,怎么样被上述代码输出1 2
3?

for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);   
   })(i),0); 
};

1           //输出
2
3

25.形容一个function,清除字符串前后的空格。(兼容所有浏览器)

采取自带接口trim(),考虑兼容性: 

if (!String.prototype.trim) {
 String.prototype.trim = function() {
 return this.replace(/^\s+/, "").replace(/\s+$/,"");
 }
}

// test the function
var str = " \t\n test string ".trim();
alert(str == "test string"); // alerts "true"

26.Javascript中callee和caller的作用?

答案:

caller是回去一个针对性函数的援,该函数调用了眼前函数;

callee是回到正在为执行之function函数,也就算是所指定的function对象的正文。

这就是说问题来了?若果相同对准兔每月生一对准兔;一对新生兔,从第二独月起便开始生兔子;假定每对兔都是同样母一有力,试问一样对兔,第n独月会繁殖成多少对兔?(使用callee完成) 

var result=[];
function fn(n){  //典型的斐波那契数列
   if(n==1){
        return 1;
   }else if(n==2){
           return 1;
   }else{
        if(result[n]){
                return result[n];
        }else{
                //argument.callee()表示fn()
                result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                return result[n];
        }
   }
}

前几挥毫是碰头充分基础,越下更加来深度。

二、中级JavaScript

1.实现一个函数clone,可以本着JavaScript中之5种植要的数据类型(包括Number、String、Object、Array、Boolean)进行价值复制

  • 考察点1:对于核心数据列及援数据类型在内存中存放的凡价值还是指针这等同分是否知情
  • 考察点2:是否知晓哪判定一个变量是呀品种的
  • 考察点3:递归算法的计划

 

//方法一    
Object.prototype.clone=function(){
    var o=this.constructor===Array?[]:{};
    for(var e in this){
        o[e]=typeof this[e]==="object"?this[e].clone() :this[e];
    }
    return o;
}

/*
//test
var person={
    name:"lxy",
    class:"3",
    say:function(){
        console.log("haha");
    }
}    

var persona=person.clone();
console.log(persona);*/

//方法二
/*
*克隆一个对象
@param Obj
@returns
*/

function clone(Obj){
    var buf;
    if(Obj instanceof Array){
        buf=[];//创建一空数组
        var i=Obj.length;
        while(i--){
            buf[i]=clone(Obj[i]);
        }
        return buf;
    }else if(Obj instanceof Object){
        buf={};//创建一个空对象
        for(var k in Obj){//为这个空对象添加新属性
            buf[k]=clone(Obj[k]);

        }
        return buf;
    }else{//普通变量直接赋值
        return Obj;
    }
}

2.哪消除一个数组里面还的要素? 

var arr = [1, 2, 3, 3, 4, 4, 5, 5, 6, 1, 9, 3, 25, 4];
var arrB=[];
for(var i=0;i<arr.length;i++){
    if(arrB.indexOf(arr[i])==-1){
        arrB.push(arr[i]);
    }
}
arrB;//[1, 2, 3, 4, 5, 6, 9, 25]

//方法二

function derepeat(arr){
var obj={};
var newarr=[];
    for(var i=0;i<arr.length;i++){
        obj[arr[i]]=true;
    }
    for(o in obj){
        newarr.push(o);
    }
    return newarr;
}

3.小贤是千篇一律长条可爱之小狗(Dog),它的喊叫声特别满意(wow),每次观看主人的时节就是会乖乖叫同名声(yelp)。从立段描述得得到以下目标:

function Dog(){
    this.wow=function(){
        console.log('wow');
    }
    this.yelp=function(){
        this.wow();
    }
}

小芒同小贤一样,原来也是一律长长的可爱的小狗,可是突然发出平等天痴了(MadDog),一看到人即使会见各国隔半秒为同信誉(wow)地无停歇叫唤(yelp)。请根据描述,按示例的款型用代码来实。(继承,原型,setInterval)

function MadDog() {
    this.yelp = function() {
          var self = this;         
          setInterval(function() {
                self.wow();     
          }, 500);
      }
}
MadDog.prototype = new Dog();        

//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

4.下面这ul,如何点击每一样排列的时候alert其index?(闭包)

 

<ul id="test">
    <li>这是第一条</li>
    <li>这是第二条</li>
    <li>这是第三条</li>
</ul>

答案:

//方法一
var lists=document.getElementById("test").getElementsByTagName("li");
var len=lists.length;
for(var i=0;i<len;i++){
    lists[i].onclick=function(i){
        return function(){
            alert(i);
        }
    }(i);
}

//方法二
var lists=document.getElementById("test").getElementsByTagName("li");
var len=lists.length;
for(var i=0;i<len;i++){
    lists[i].index=i;
    lists[i].onclick=function(){
        alert(this.index);
    };
}

5.修一个JavaScript函数,输入指定项目的选择器(仅需支撑id,class,tagName三种简单CSS选择器,无需配合组合选择器)可以回到匹配的DOM节点,需考虑浏览器兼容性及特性。 

 

 

 

 

参照链接:

http://www.cnblogs.com/coco1s/p/4029708.html

 

本文作者starof,因知识本身在变,作者也于相连上成才,文章内容也波动时更新,为避误导读者,方便追根溯源,请各位转载注明出处:http://www.cnblogs.com/starof/p/4904929.html有问题欢迎和我谈谈,共同进步。

初级Javascript:

1.JavaScript凡一样派怎么的言语,它来哪些特征?

不曾标准答案。

2.JavaScript之数据类型都产生啊?

主导数据类:String,boolean,Number,Undefined, Null

引用数据类型:Object(Array,Date,RegExp,Function)

这就是说问题来了,如何判断有变量是否为数组数据类型?

  • 方式一.判断其是否有“数组性质”,如slice()方法。可协调让该变量定义slice方法,故有时会失效
  • 方二.obj instanceof Array 在少数IE版本中不得法
  • 术三.主意简单备有尾巴,在ECMA
    Script5着定义了新章程Array.isArray(), 保证其兼容性,最好之法如下:

JavaScript

1
2
3
4
5
6
if(typeof Array.isArray==="undefined")
{
  Array.isArray = function(arg){
        return Object.prototype.toString.call(arg)==="[object Array]"
    };  
}

3.一度解ID的Input输入框,希望得到这输入框的输入值,怎么开?(不动第三方框架)

JavaScript

1
document.getElementById(“ID”).value

4.愿意收获到页面中兼有的checkbox怎么开?(不使用第三正框架)

JavaScript

1
2
3
4
5
6
7
8
var domList = document.getElementsByTagName(‘input’)
var checkBoxList = [];
var len = domList.length;  //缓存到局部变量
while (len–) {  //使用while的效率会比for循环更高
  if (domList[len].type == ‘checkbox’) {
      checkBoxList.push(domList[len]);
  }
}

5.设置一个曾掌握ID的DIV的html内容为xxxx,字体颜色设置为黑色(不行使第三正值框架)

JavaScript

1
2
3
vardom=document.getElementById(“ID”);
dom.innerHTML=“xxxx”
dom.style.color=“#000”

6.当一个DOM节点被点击上,我们意在能实施一个函数,应该怎么开?

  •  直接在DOM里绑定事件:<div onclick=”test()”></div>
  •  在JS里通过onclick绑定:xxx.onclick = test
  •  通过波添加进行绑定:addEventListener(xxx, ‘click’, test)

那问题来了,Javascript的波流模型都生啊?

  • “事件冒泡”:事件初步由最现实的要素接受,然后逐级向上传播
  • “事件捕捉”:事件由最不现实的节点先吸收,然后逐级向下,一直顶最好具体的
  • “DOM事件流”:三独号:事件捕捉,目标等,事件冒泡

7.哟是Ajax和JSON,它们的优缺点。

Ajax是异步JavaScript和XML,用于在Web页面中落实异步数据交互。

优点:

  •  可以使页面不重载全部内容的情事下加载局部内容,降低数据传输量
  •  避免用户不断刷新或者跳转页面,提高用户体验

缺点:

  •  对寻找引擎不友善(
  •  要促成ajax下的前后退功能成本比生
  •  可能致请求数的多
  •  跨域问题限制

JSON是平等种植轻量级的数据交换格式,ECMA的一个子集

长:轻量级、易于人之读书和编辑,便于机器(JavaScript)解析,支持复合数据类型(数组、对象、字符串、数字)

 8.看下列代码输出为何?解释缘由。

JavaScript

1
2
3
var a;
alert(typeof a); // undefined
alert(b); // 报错

分解:Undefined是一个单单发一个值的数据类型,这个价值就是是“undefined”,在采用var声明变量但不曾对那赋值进行初始化时,这个变量的值就是是undefined。而b由于未声明将报错。注意不说明的变量和声明了非赋值的是勿一样的。

 9.看下列代码,输出什么?解释缘由。

JavaScript

1
2
vara=null;
alert(typeofa);//object

讲:null是一个独发生一个价的数据类型,这个价就是null。表示一个空指针对象,所以用typeof检测会回去”object”。

 10.拘留下列代码,输出什么?解释由。

JavaScript

1
2
3
4
5
6
7
8
9
var undefined;
undefined == null; // true
1 == true;   // true
2 == true;   // false
0 == false;  // true
0 == ”;     // true
NaN == NaN;  // false
[] == false; // true
[] == ![];   // true
  • undefined和null相等,但非稳定等(===)
  • 一个是number一个是string时,会尝试以string转换为number
  • 尝试将boolean转换为number,0或1
  • 品用Object转换成number或string,取决于另外一个针对计量的档次
  • 就此,对于0、空字符串的论断,建议使用 “===” 。“===”会优先判断两限的值类型,类型不匹配配时为false。

这就是说问题来了,看下面的代码,输出什么,foo的价怎么?

JavaScript

1
2
3
varfoo="11"+2-"1";
console.log(foo);
console.log(typeoffoo);

行了后foo的价值吗111,foo的种也String。

 11.押代码给答案。

JavaScript

1
2
3
4
5
var a = new Object();
a.value = 1;
b = a;
b.value = 2;
alert(a.value);

答案:2(考察引用数据类型细节)

12.一度掌握数组var stringArray = [“This”, “is”, “Baidu”, “Campus”],Alert出”This is Baidu Campus”。

答案:alert(stringArray.join(“”))

现已知晓有字符串foo=”get-element-by-id”,写一个function将那个转会成驼峰代表拟”getElementById”。

JavaScript

1
2
3
4
5
6
7
8
functioncombo(msg){
    vararr=msg.split("-");
    for(vari=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    returnmsg;
}

(考察基础API)

13.var numberArray = [3,6,2,4,1,5]; (考察基础API)

1) 实现对该数组的倒排,输出[5,1,4,2,6,3]

2) 实现对该数组的降序排列,输出[6,5,4,3,2,1]

JavaScript

1
2
3
4
5
6
7
8
function combo(msg){
    var arr=msg.split("-");
    for(var i=1;i<arr.length;i++){
        arr[i]=arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1);
    }
    msg=arr.join("");
    return msg;
}

14.出口今天之日子,以YYYY-MM-DD的方式,比如今天是2014年9月26日,则输出2014-09-26

JavaScript

1
2
3
4
5
6
7
8
9
10
11
vard=newDate();
// 获取年,getFullYear()返回4位的数字
varyear=d.getFullYear();
// 获取月,月份比较特殊,0是1月,11是12月
varmonth=d.getMonth()+1;
// 变成两位
month=month<10?’0’+month:month;
// 获取日
varday=d.getDate();
day=day<10?’0’+day:day;
alert(year+’-‘+month+’-‘+day);

15.将字符串”<tr><td>{$id}</td><td>{$name}</td></tr>”中的{$id}替换成10,{$name}替换成Tony
(使用正则表达式)

答案:”<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>”.replace(/{\$id}/g, ’10’).replace(/{\$name}/g, ‘Tony’);

16.以保证页面输出安全,我们经常索要针对一部分奇特之字符进行转义,请写一个函数escapeHtml,将<, >, &, “进行转义

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function escapeHtml(str) {
return str.replace(/[<>”&]/g, function(match) {
    switch (match) {
                   case “<”:
                      return “&lt;”;
                   case “>”:
                      return “&gt;”;
                   case “&”:
                      return “&amp;”;
                   case “\””:
                      return “&quot;”;
      }
  });
}

17.foo = foo||bar
,这行代码是啊意思?为什么而如此勾画?

答案:if(!foo) foo = bar; //如果foo存在,值未变换,否则将bar的值赋给foo。

闭塞表达式:作为”&&”和”||”操作符的操作数表达式,这些表达式在进展求值时,只要最终的结果曾好确定是当真要借,求值过程就是告歇,这称为短路求值。

18.拘禁下列代码,将会输出什么?(变量声明提升)

JavaScript

1
2
3
4
5
6
varfoo=1;
function(){
    console.log(foo);
    varfoo=2;
    console.log(foo);
}

答案:输出undefined 和 2。上面代码相当给:

JavaScript

1
2
3
4
5
6
7
var foo = 1;
function(){
    var foo;
    console.log(foo); //undefined
    foo = 2;
    console.log(foo); // 2;  
}

函数声明和变量声明会受JavaScript引擎隐式地提升至即作用域的顶部,但是只是提升名称不会见升级赋值部分。

19.用js实现自由选10–100里的10单数字,存入一个屡次组,并排序。

JavaScript

1
2
3
4
5
6
7
8
9
variArray=[];
funtiongetRandom(istart,iend){
        variChoice=istart-iend+1;
        returnMath.floor(Math.random()*iChoice+istart;
}
for(vari=0;i<10;i++){
        iArray.push(getRandom(10,100));
}
iArray.sort();

20.管有限独数组合并,并剔除第二个元素。

JavaScript

1
2
3
4
var array1 = [‘a’,’b’,’c’];
var bArray = [‘d’,’e’,’f’];
var cArray = array1.concat(bArray);
cArray.splice(1,1);

21.怎样增长、移除、移动、复制、创建同寻找节点(原生JS,实在基础,没仔细写每一样步)

1)创建新节点

createDocumentFragment()    //创建一个DOM片段

createElement()   //创建一个实际的素

createTextNode()   //创建一个文本节点

2)添加、移除、替换、插入

appendChild()      //添加

removeChild()      //移除

replaceChild()      //替换

insertBefore()      //插入

3)查找

getElementsByTagName()    //通过标签号

getElementsByName()     //通过元素的Name属性的值

getElementById()        //通过元素Id,唯一性

22.有这样一个URL:http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e,请写一段JS程序提取URL中的各个GET参数(参数名和参数个数不确定),将其按key-value形式返回到一个json结构中,如{a:’1′, b:’2′, c:”, d:’xxx’, e:undefined}。

答案:

JavaScript

1
2
3
4
5
6
7
8
9
functionserilizeUrl(url){
    varresult={};
    url=url.split("?")[1];
    varmap=url.split("&");
    for(vari=0,len=map.length;i<len;i++){
        result[map[i].split("=")[0]]=map[i].split("=")[1];
    }
    returnresult;
}

23.正则表达式构造函数var
reg=new RegExp(“xxx”)与正则表达字面量var
reg=//有什么不同?匹配邮箱的正则表达式?

答案:当使用RegExp()构造函数的时刻,不仅要转义引号(即\”表示”),并且还待对反而斜杠(即\\代表一个\)。使用正则发挥字面量的效率还胜似。 

邮箱的正则匹配:

JavaScript

1
var regMail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/;

24.押下面代码,给起输出结果。

JavaScript

1
2
3
4
5
for(vari=1;i<=3;i++){
  setTimeout(function(){
      console.log(i);    
  },0);  
};

答案:4 4 4。

由来:Javascript事件处理器在线程空闲之前不见面运行。追问,如何吃上述代码输出1
2 3?

JavaScript

1
2
3
4
5
6
7
8
9
for(var i=1;i<=3;i++){
   setTimeout((function(a){  //改成立即执行函数
       console.log(a);    
   })(i),0);  
};
 
1           //输出
2
3

25.描写一个function,清除字符串前后的空格。(兼容所有浏览器)

动自带接口trim(),考虑兼容性:

JavaScript

1
2
3
4
5
6
7
8
9
if(!String.prototype.trim){
String.prototype.trim=function(){
returnthis.replace(/^\s+/,"").replace(/\s+$/,"");
}
}
 
// test the function
varstr=" \t\n test string ".trim();
alert(str=="test string");// alerts "true"

26.Javascript中callee和caller的作用?

答案:

caller是回一个针对性函数的援,该函数调用了时函数;

callee是回来正在为实践的function函数,也尽管是所指定的function对象的正文。

那么问题来了?如果一致针对性兔每月生一针对兔;一针对新生兔,从第二只月从就开始生兔子;假定每对兔都是千篇一律草一无敌,试问一样针对兔,第n单月能繁殖成稍对兔?(使用callee完成)

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var result=[];
function fn(n){  //典型的斐波那契数列
   if(n==1){
        return 1;
   }else if(n==2){
           return 1;
   }else{
        if(result[n]){
                return result[n];
        }else{
                //argument.callee()表示fn()
                result[n]=arguments.callee(n-1)+arguments.callee(n-2);
                return result[n];
        }
   }
}

中级Javascript:

1.实现一个函数clone,可以对JavaScript中之5栽重点的数据类型(包括Number、String、Object、Array、Boolean)进行价值复制

  • 考察点1:对于着力数据类以及援数据类型在内存中存放的是价值还是指针这无异分别是否知情
  • 考察点2:是否了解如何判断一个变量是啊项目的
  • 考察点3:递归算法的宏图

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
// 方法一:
Object.prototype.clone=function(){
        varo=this.constructor===Array?[]:{};
        for(vareinthis){
                o[e]=typeofthis[e]==="object"?this[e].clone():this[e];
        }
        returno;
}
 
//方法二:
  /**
     * 克隆一个对象
     * @param Obj
     * @returns
     */
    functionclone(Obj){  
        varbuf;  
        if(ObjinstanceofArray){  
            buf=[];                    //创建一个空的数组
            vari=Obj.length;  
            while(i–){  
                buf[i]=clone(Obj[i]);  
            }  
            returnbuf;    
        }elseif(ObjinstanceofObject){  
            buf={};                  //创建一个空对象
            for(varkinObj){          //为这个对象添加新的属性
                buf[k]=clone(Obj[k]);  
            }  
            returnbuf;  
        }else{                        //普通变量直接赋值
            returnObj;  
        }  
    }

 

2.安破一个数组里面再的素?

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
        function deRepeat(){
            var newArr=[];
            var obj={};
            var index=0;
            var l=arr.length;
            for(var i=0;i<l;i++){
                if(obj[arr[i]]==undefined)
                  {
                    obj[arr[i]]=1;
                    newArr[index++]=arr[i];
                  }
                else if(obj[arr[i]]==1)
                  continue;
            }
            return newArr;
 
        }
        var newArr2=deRepeat(arr);
        alert(newArr2); //输出1,2,3,4,5,6,9,25

3.小贤是同样长可爱的小狗(Dog),它的叫声特别惬意(wow),每次看主人的时刻即便见面乖乖叫一样声(yelp)。从即段描述得收获以下目标:

JavaScript

1
2
3
4
5
6
7
8
functionDog(){
      this.wow=function(){
              alert(’Wow’);
      }
      this.yelp=function(){
              this.wow();
      }
}

小芒与小贤一样,原来也是一模一样长条可爱之小狗,可是突然有相同龙疯狂了(MadDog),一看到人即便会各国隔半秒为同名声(wow)地无鸣金收兵叫唤(yelp)。请根据描述,按示例的款型用代码来实。(继承,原型,setInterval)

答案:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function MadDog() {
    this.yelp = function() {
          var self = this;          
          setInterval(function() {
                self.wow();      
          }, 500);
      }
}
MadDog.prototype = new Dog();        
 
//for test
var dog = new Dog();
dog.yelp();
var madDog = new MadDog();
madDog.yelp();

4.底下是ul,如何点击每一样排列的时候alert其index?(闭包)

XHTML

1
2
3
4
5
<ulid=”test”>
<li>这是第一条</li>
<li>这是第二条</li>
<li>这是第三条</li>
</ul>

答案:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 方法一:
var lis=document.getElementById(‘2223’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=function(){
        alert(this.index);
    };
}
 
//方法二:
var lis=document.getElementById(‘2223’).getElementsByTagName(‘li’);
for(var i=0;i<3;i++)
{
    lis[i].index=i;
    lis[i].onclick=(function(a){
        return function() {
            alert(a);
        }
    })(i);
}

5.修一个JavaScript函数,输入指定项目的选择器(仅需要支撑id,class,tagName三栽简易CSS选择器,无需配合组合选择器)可以回到匹配的DOM节点,需考虑浏览器兼容性及特性。

/*** @param selector {String} 传入的CSS选择器。* @return {Array}*/

答案:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
varquery=function(selector){
                varreg=/^(#)?(\.)?(\w+)$/img;
                varregResult=reg.exec(selector);
                varresult=[];
                //如果是id选择器
                if(regResult[1]){
                    if(regResult[3]){
                        if(typeofdocument.querySelector==="function"){
                            result.push(document.querySelector(regResult[3]));
                        }
                        else{
                            result.push(document.getElementById(regResult[3]));
                        }
                    }
                }
                //如果是class选择器
                elseif(regResult[2]){
                    if(regResult[3]){
                        if(typeofdocument.getElementsByClassName===’function’){
                            vardoms=document.getElementsByClassName(regResult[3]);
                            if(doms){
                                result=converToArray(doms);
                            }
                        }
                        //如果不支持getElementsByClassName函数
                        else{
                            varallDoms=document.getElementsByTagName("*");
                            for(vari=0,len=allDoms.length;i<len;i++){
                                if(allDoms[i].className.search(newRegExp(regResult[2]))>-1){
                                    result.push(allDoms[i]);
                                }
                            }
                        }
                    }
                }
                //如果是标签选择器
                elseif(regResult[3]){
                    vardoms=document.getElementsByTagName(regResult[3].toLowerCase());
                    if(doms){
                        result=converToArray(doms);
                    }
                }
                returnresult;
            }
 
            functionconverToArray(nodes){
                  vararray=null;        
                  try{        
                        array=Array.prototype.slice.call(nodes,0);//针对非IE浏览器        
                  }catch(ex){
                      array=newArray();        
                      for(vari=0,len=nodes.length;i<len;i++){
                          array.push(nodes[i])        
                      }        
                  }      
                  returnarray;
          }

6.央评价以下代码并于有改善意见。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
if(window.addEventListener){
    var addListener = function(el,type,listener,useCapture){
        el.addEventListener(type,listener,useCapture);
  };
}
else if(document.all){
    addListener = function(el,type,listener){
        el.attachEvent("on"+type,function(){
          listener.apply(el);
      });
   }  
}

评价:

  •  不应有以if和else语句被声称addListener函数,应该先声明;
  •  不需采用window.addEventListener或document.all来开展检测浏览器,应该用力量检测;
  •  由于attachEvent在IE中出this指于问题,所以调用它时欲处理一下

精益求精如下:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
functionaddEvent(elem,type,handler){
  if(elem.addEventListener){
    elem.addEventListener(type,handler,false);
  }elseif(elem.attachEvent){
    elem[‘temp’+type+handler]=handler;
    elem[type+handler]=function(){
    elem[‘temp’+type+handler].apply(elem);
  };
  elem.attachEvent(‘on’+type,elem[type+handler]); 
  }else{
  elem[‘on’+type]=handler;
  }
}

7.让String对象上加一个措施,传入一个string类型的参数,然后拿string的每个字符间价格空格返回,例如:

addSpace(“hello
world”) // -> ‘h e l l o  w o r l d’

JavaScript

1
2
3
String.prototype.spacify = function(){
      return this.split(”).join(‘ ‘);
    };

接着上述问题答案提问,1)直接在对象的原型上加加方是否安全?尤其是于Object对象及。(这个自家从来不能够报答出?希望了解之说一下。) 2)函数声明和函数表达式的分别?

答案:在js中,解析器在朝实施环境被加载数据时,对函数声明与函数表达式并非是一样观望同仁的,解析器会率先读取函数宣称,并而其当履另外代码之前可用(可以看),至于函数表达式,则要顶及解析器执行及她所当的代码行,才见面真给分析执行。

8.概念一个log方法,让它可以代办console.log的方。

有效之方同样:

JavaScript

1
2
3
4
5
functionlog(msg) {
    console.log(msg);
}
 
log("hello world!")// hello world!

如若要传多单参数为?显然上面的措施无可知满足要求,所以更好的艺术是:

JavaScript

1
2
3
function log(){
    console.log.apply(console, arguments);
};

至这,追问apply和call方法的异议。

答案:

于apply和call两者在打算及是一模一样的,即凡调用一个目标的一个主意,以另外一个靶替换当前目标。将一个函数的目标上下文从上马的上下文改变为由
thisObj 指定的初对象。

然而二者在参数达到出分别的。对于第一个参数意义都一致,但针对第二单参数: apply传入的是一个参数数组,也不怕是拿多独参数组合成一个数组传入,而call则作为call的参数传入(从第二只参数开始)。 如
func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

9.以Javascript中什么是伪数组?如何用伪数组转化为专业数组?

答案:

伪数组(类数组):无法直接调用数组方法要期望length属性有什么特别之行事,但准可以针对确实数组遍历方法来遍历它们。典型的是函数的argument参数,还有诸如调用getElementsByTagName,document.childNodes之类的,它们都回到NodeList对象都属伪数组。可以以Array.prototype.slice.call(fakeArray)将数组转化为确实的Array对象。

假设接第八书题干,我们如果吃每个log方法上加一个”(app)”前缀,比如’hello
world!’ ->'(app)hello world!’。方法如下:

JavaScript

1
2
3
4
5
6
functionlog(){
      varargs=Array.prototype.slice.call(arguments);  //为了使用unshift数组方法,将argument转化为真正的数组
      args.unshift(‘(app)’);
 
      console.log.apply(console,args);
    };

10.针对作用域上下文和this的喻,看下列代码:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
var User = {
  count: 1,
 
  getCount: function() {
    return this.count;
  }
};
 
console.log(User.getCount());  // what?
 
var func = User.getCount;
console.log(func());  // what?

问两地处console输出什么?为什么?

答案是1和undefined。

func是在winodw的上下文中吃实践之,所以会访问不至count属性。

后续追问,那么怎样保管Uesr总是能够访问到func的上下文,即对返回1。正确的法是以Function.prototype.bind。兼容各个浏览器完整代码如下:

JavaScript

1
2
3
4
5
6
7
8
9
10
Function.prototype.bind=Function.prototype.bind||function(context){
  varself=this;
 
  returnfunction(){
      returnself.apply(context,arguments);
  };
}
 
varfunc=User.getCount.bind(User);
console.log(func());

11.本生JS的window.onload与Jquery的$(document).ready(function(){})有啊两样?如何用本生JS实现Jq的ready方法?

window.onload()方法是须顶及页面内连图片的兼具因素加载了后才能够实行。

$(document).ready()是DOM结构绘制了后虽实施,不必等交加载了。

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/*
* 传递函数给whenReady()
* 当文档解析完毕且为操作准备就绪时,函数作为document的方法调用
*/
var whenReady = (function() {               //这个函数返回whenReady()函数
    var funcs = [];             //当获得事件时,要运行的函数
    var ready = false;          //当触发事件处理程序时,切换为true
 
    //当文档就绪时,调用事件处理程序
    function handler(e) {
        if(ready) return;       //确保事件处理程序只完整运行一次
 
        //如果发生onreadystatechange事件,但其状态不是complete的话,那么文档尚未准备好
        if(e.type === ‘onreadystatechange’ && document.readyState !== ‘complete’) {
            return;
        }
 
        //运行所有注册函数
        //注意每次都要计算funcs.length
        //以防这些函数的调用可能会导致注册更多的函数
        for(var i=0; i<funcs.length; i++) {
            funcs[i].call(document);
        }
        //事件处理函数完整执行,切换ready状态, 并移除所有函数
        ready = true;
        funcs = null;
    }
    //为接收到的任何事件注册处理程序
    if(document.addEventListener) {
        document.addEventListener(‘DOMContentLoaded’, handler, false);
        document.addEventListener(‘readystatechange’, handler, false);            //IE9+
        window.addEventListener(‘load’, handler, false);
    }else if(document.attachEvent) {
        document.attachEvent(‘onreadystatechange’, handler);
        window.attachEvent(‘onload’, handler);
    }
    //返回whenReady()函数
    return function whenReady(fn) {
        if(ready) { fn.call(document); }
        else { funcs.push(fn); }
    }
})();

一旦上述代码十分麻烦理解,下面是简化版:

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
functionready(fn){
    if(document.addEventListener){        //标准浏览器
        document.addEventListener(‘DOMContentLoaded’,function(){
            //注销事件, 避免反复触发
            document.removeEventListener(‘DOMContentLoaded’,arguments.callee,false);
            fn();            //执行函数
        },false);
    }elseif(document.attachEvent){        //IE
        document.attachEvent(‘onreadystatechange’,function(){
            if(document.readyState==’complete’){
                document.detachEvent(‘onreadystatechange’,arguments.callee);
                fn();        //函数执行
            }
        });
    }
};

12.(设计题)想实现一个针对页面某个节点的拖?如何做?(使用原来生JS)

答问出概念即可,下面是几个中心

  1. 给需要拖拽的节点绑定mousedown, mousemove, mouseup事件
  2. mousedown事件触发后,开始拖拽
  3. mousemove时,需要经过event.clientX和clientY获取拖拽位置,并实时更新位置
  4. mouseup时,拖拽了
  5. 待专注浏览器边界的景况

13.

图片 1

 

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
function setcookie(name,value,days){  //给cookie增加一个时间变量
  var exp = new Date();
  exp.setTime(exp.getTime() + days*24*60*60*1000); //设置过期时间为days天
  document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getCookie(name){
  var result = "";
  var myCookie = ""+document.cookie+";";
  var searchName = "+name+"=";
  var startOfCookie = myCookie.indexOf(searchName);
  var endOfCookie;
  if(satrtOfCookie != -1){
    startOfcookie += searchName.length;
    endOfCookie = myCookie.indexOf(";",startOfCookie);
    result = (myCookie.substring(startOfCookie,endOfCookie));
  }
  return result;
}
(function(){
  var oTips = document.getElementById(‘tips’);//假设tips的id为tips
  var page = {
  check: function(){//检查tips的cookie是否存在并且允许显示
    var tips = getCookie(‘tips’);
    if(!tips || tips == ‘show’) return true;//tips的cookie不存在
    if(tips == "never_show_again") return false;
  },
  hideTip: function(bNever){
    if(bNever) setcookie(‘tips’, ‘never_show_again’, 365);
    oTips.style.display = "none";//隐藏
  },
  showTip: function(){
  oTips.style.display = "inline";//显示,假设tips为行级元素
  },
  init: function(){
    var _this = this;
    if(this.check()){
    _this.showTip();
    setcookie(‘tips’, ‘show’, 1);
  }
  oTips.onclick = function(){
    _this.hideTip(true);
  };
  }
  };
  page.init();
})();

14.说发以下函数的作用是?空白区域该填什么?

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//define
(function(window){
    functionfn(str){
        this.str=str;
    }
 
    fn.prototype.format=function(){
        vararg=______;
        returnthis.str.replace(_____,function(a,b){
            returnarg[b]||"";
      });
    }
    window.fn=fn;
})(window);
 
//use
(function(){
    vart=newfn(‘<p><a href="{0}">{1}</a><span>{2}</span></p>’);
    console.log(t.format(‘http://www.alibaba.com’,’Alibaba’,’Welcome’));
})();

答案:访函数的图是运用format函数将函数的参数替换掉{0}这样的情,返回一个格式化后底结果:

首先单空是:arguments

老二只缺损是:/\{(\d+)\}/ig

 15.用面向对象的Javascript来介绍一下温馨。(没答案哦亲,自己尝试吧)

答案: 对象或Json都是对的选择哦,

认为题材还ok的亲自点个推荐哦,题量会频频增加。

相关文章