题库-js 篇(上)

1、javascript 的 typeof 返回哪些数据类型

1
2
3
4
5
6
7
8
9
alert(typeof [1, 2]); //'object'
alert(typeof 'leipeng'); //'string'
var i = true;
alert(typeof i); //'boolean'
alert(typeof 1); //'number'
var a;
alert(typeof a); //'undefined'
function a(){;};
alert(typeof a) //'function'

2、3 种强制类型转换和 2 种隐式类型转换

强制(parseInt(),parseFloat(),Number())
隐式(== ,!!)

3、split() 、join() 的区别

前者是将字符串切割成数组的形式,后者是将数组转换成字符串

4、数组方法pop()、push()、unshift()、shift()

  • Push()尾部添加 pop()尾部删除
  • Unshift()头部添加 shift()头部删除

5、事件绑定和普通事件有什么区别

普通添加事件的方法:

1
2
3
4
5
6
7
var btn = document.getElementById("hello");
btn.onclick = function() {
alert(1);
}
btn.onclick = function() {
alert(2);
}

执行上面的代码只会 alert 2

事件绑定方式添加事件:

1
2
3
4
5
6
7
var btn = document.getElementById("hello");
btn.addEventListener("click", function() {
alert(1);
},false);
btn.addEventListener("click", function() {
alert(2);
},false);

执行上面的代码会先 alert 1 再 alert 2

普通添加事件的方法不支持添加多个事件,最下面的事件会覆盖上面的,而事件绑定(addEventListener)方式添加事件可以添加多个。
addEventListener不兼容低版本IE;
普通事件无法取消;
addEventLisntener还支持事件冒泡+事件捕获

6、IE和DOM事件流的区别

执行顺序不一样
参数不一样
事件加不加on
this指向问题

7、IE和标准下有哪些兼容性的写法

1
2
3
var ev = ev || window.event;
document.documentElement.clientWidth || document.body.clientWidth;
var target = ev.srcElement||ev.target;

8、call、apply和bind的区别

call方法:

语法:call(thisObj,Object1,Object2…)

定义:调用一个对象的一个方法,以另一个对象替换当前对象。

说明:

call 方法可以用来代替另一个对象调用一个方法。
call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply方法:

语法:apply(thisObj,[argArray])

定义:应用某一对象的一个方法,用另一个对象替换当前对象。

说明:

如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数。

bind 方法:

bind方法传递给调用函数的参数可以逐个列出,也可以写在数组中。
bind方法与call、apply最大的不同就是前者返回一个绑定上下文的函数,而后两者是直接执行了函数
该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind方法的第一个参数作为this;
传入bind方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。

js中call、apply、bind的用法

函数调用、this指向、返回值

一个函数最终产生什么样的结构,跟如何调用这个函数息息相关:函数的四种调用模式

函数的 4 种调用模式

  1. 第一种模式:函数调用模式,也就是写一个函数,然后调用一下
  2. 第二种模式:方法调用模式,也就是将函数成为对象的一个方法,然后通过对象来调用
  3. 第三种模式:构造函数调用模式,也就是将函数当成构造函数来调用
  4. 第四种调用模式:上下文调用模式,根据调用方式的不同可以产生不同的结果

第四种函数调用的实现方式

  • 实现方式:call/apply (apply 和 call 的唯一区别是第二个参数是数组,将实参值一一传到数组中。fn.call (函数内部的 this 的值,实参1,实参2…))

不同调用模式中的this的值

  1. 函数调用模式中 this 指向:window
  2. 方法调用模式中 this 指向:调用的对象
  3. 构造函数调用模式中 this 指向:构造函数的实例
  4. 上下文调用模式中 this 指向:
  • (1) 如果 call 方法的第一个参数是一个对象,则 fn 函数内部的 this 的值指向该对象
  • (2) 如果 call 方法的第一个参数是一个字符串、数字、布尔值,则 fn 函数内部的 this 的值会转换为该类型所对应的基本包装类型的对象
  • (3) 如果 call 方法的第一个参数是 null ,则 fn 函数内部的 this 的值是 window ——> 就相当于是一次函数调用模式

调用模式中的返回值

  1. 函数调用模式中返回值:由 return 语句决定
  2. 方法调用模式中返回值:由 return 语句决定
  3. 构造函数调用模式中的返回值:
  • (1). 如果构造函数没有手动设置返回值,那么会返回构造函数的实例
  • (2). 如果手动给构造函数添加了返回值,有以下2种情况:
    • (a). 返回值是值类型:最终的返回值还是构造函数的实例
    • (b). 返回值是引用类型(对象):最终的返回值就是该对象
  1. 上下文调用模式中的返回值:由 return 语句决定

9、b 继承 a 的方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function A( age, name ){
this.age = age;
this.name = name;
}
A.prototype.show = function(){
alert('父级方法');
}
function B(age,name,job){
A.apply( this, arguments );
this.job = job;
}
B.prototype = new A();
var b = new A(14,'侠客行');
var a = new B(15,'狼侠','侠客');

10、如何阻止事件冒泡和默认事件

canceBubble() 只支持 IE,return false,stopPropagation()

11、添加、删除、替换、插入到某个接点的方法

1
2
3
4
domObj.appendChild();
domObj.insertBefore();
domObj.replaceChild();
domObj.removeChild();

12、javascript的本地对象,内置对象和宿主对象

本地对象为 Array Object Regexp 等可以 new 实例化
内置对象为 Global Math 等不可以实例化的
宿主为浏览器自带的 document, window 等

13. window.onload 和 document ready 的区别

window.onload 是在dom文档树加载完和所有文件加载完之后执行一个函数;
Document.ready 原生种没有这个方法,
jquery中有 $().ready(function),在dom文档树加载完之后执行一个函数
注意,这里面的文档树加载完不代表全部文件加载完。
$(document).ready 要比 window.onload 先执行
window.onload只能出来一次,$(document).ready 可以出现多次

14、”==” 和 “===” 的不同

前者会自动转换类型,后者不会

15、javascript的同源策略

一段脚本只能读取来自于同一来源的窗口和文档的属
这里的同一来源指的是主机名、议和端口号的组合

16、JavaScript 是一门什么样的语言,它的特点

javaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。
它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML 网页上使用,用来给 HTML 网页增加动态功能。
JavaScript 兼容于 ECMA 标准,因此也称为 ECMAScript。

基本特点:

是一种解释性脚本语言(代码不进行预编译)。
主要用来向HTML(标准通用标记语言下的一个应用)页面添加交互行为。
可以直接嵌入HTML页面,但写成单独的js文件有利于结构和行为的分离。
跨平台特性,在绝大多数浏览器的支持下,可以在多种平台下运行(如Windows、Linux、Mac、Android、iOS等)。

17、JavaScript的数据类型

基本数据类型:String, boolean, Number, Undefined, Null
引用数据类型:Object(Array, Date, RegExp, Function)

如何判断某变量是否为数组数据类型?

方法一.判断其是否具有“数组性质”,如slice()方法。可自己给该变量定义 slice 方法,故有时会失效
方法二.obj instanceof Array 在某些 IE 版本中不正确
方法三.方法一二皆有漏洞,在 ECMAScript5 中定义了新方法 Array.isArray(), 保证其兼容性,最好的方法如下:

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

18. 已知 ID 的 Input 输入框,获取这个输入框的输入值,怎么做?

document.getElementById(“ID”).value;

19、获取到页面中所有 checkbox

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]);
  }
}

20. 设置一个已知 ID 的 DIV 的 html 内容为 xxxx ,字体颜色设置为黑色

1
2
3
var dom = document.getElementById("ID");
dom.innerHTML = "xxxx"
dom.style.color = "#000"

21. 当一个 DOM 节点被点击时候能够执行一个函数

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

Javascript的事件流模型都有什么?

“事件冒泡”:事件开始由最具体的元素接受,然后逐级向上传播
“事件捕捉”:事件由最不具体的节点先接收,然后逐级向下,一直到最具体的
“DOM事件流”:三个阶段:事件捕捉,目标阶段,事件冒泡

22. 代码题

undefined、 报错

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

解释:undefined 是一个只有一个值的数据类型,这个值就是 “undefined”,
在使用var声明变量但并未对其赋值进行初始化时,这个变量的值就是undefined。
而b由于未声明将报错。未申明的变量和声明了未赋值的是不一样的。

typeof

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

解释:

null是一个只有一个值的数据类型,这个值就是 null。
表示一个空指针对象,所以用 typeof 检测会返回 “object”。

“==” 运算符

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。

类型转换

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

执行完后foo的值为111,foo的类型为String。

词法作用域

(1)

1
2
3
for (i = 0, j = 0; i < 10, j < 6; i++, j++) {
k = i + j;
}

(2)

1
2
3
4
5
6
7
8
9
function f1(){
var tmp = 1;
this.x = 3;
console.log(tmp); //A
console.log(this.x);//B
}
var obj = new f1(); //1
console.log(obj.x) //2
console.log(f1()); //3

这里实例话化了 f1 这个类。相当于执行了 f1 函数。所以这个时候 A 会输出 1
而 B 这个时候的 this 代表的是实例化的当前对象 obj B 输出 3。代码(2)毋庸置疑会输出 3.
重点 代码(3)首先这里将不再是一个类,它只是一个函数。那么 A 输出 1,B呢?
这里的this 代表的其实就是 window 对象,那么 this.x 就是一个全局变量,相当于在外部的一个全局变量。所以 B 输出 3。
最后代码由于 f 没有返回值那么一个函数如果没返回值的话,将会返回 underfined ,
所以答案就是: 1, 3, 3, 1, 3, underfined。

(3)

1
2
3
4
5
var a = 6;
setTimeout(function () {
var a = 666;
alert(a); // 输出666,
}, 1000);

因为var a = 666;定义了局部变量a,并且赋值为666,根据变量作用域链,全局变量处在作用域末端,优先访问了局部变量,从而覆盖了全局变量 。

(4)

1
2
3
4
5
var a = 6;
setTimeout(function () {
alert(a); // 输出undefined
var a = 666;
}, 1000);

(5)

因为var a = 666;定义了局部变量a,同样覆盖了全局变量,但是在alert(a);之前a并未赋值,所以输出undefined。

1
2
3
4
5
6
7
8
var a = 6;
setTimeout(function(){
alert(a);
var a = 66;
}, 1000);
a = 666;
alert(a);
// 666, undefined;

记住: 异步处理,一切 OK 声明提前

(5)

1
2
3
4
5
6
7
8
function setN(obj){
obj.name='屌丝';
obj = new Object();
obj.name = '腐女';
};
var per = new Object();
setN(per);
alert(per.name); //屌丝 内部

(6)

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

输出undefined 和 2。

上面代码相当于:

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

函数声明与变量声明会被JavaScript引擎隐式地提升到当前作用域的顶部
但是只提升名称不会提升赋值部分

(7)

1
2
3
4
5
6
7
8
9
10
11
12
function foo(){
foo.a = function(){ alert(1); };
this.a = function(){ alert(2); };
a = function(){ alert(3); };
var a = function(){ alert(4); };
};
foo.prototype.a = function(){alert(5);};
foo.a = function(){alert(6);};
foo.a(); //6
var obj = new foo();
obj.a(); //2
foo.a(); //1

(7)

1
2
3
4
5
6
7
8
9
10
var a = 5;
function test(){
a = 0;
alert(a);
alert(this.a); //没有定义 a这个属性
var a;
alert(a)
}
test(); // 0, 5, 0
new test(); // 0, undefined, 0 //由于类它自身没有属性a, 所以是undefined

引用类型

(1)

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

(2)

1
2
3
4
var o1 = new Object();
var o2 = o1;
o2.name = "CSSer";
console.log(o1.name);

如果不看答案,你回答真确了的话,那么说明你对javascript的数据类型了解的还是比较清楚了。js中有两种数据类型,分别是:基本数据类型和引用数据类型(object Array)。对于保存基本类型值的变量,变量是按值访问的,因为我们操作的是变量实际保存的值。对于保存引用类型值的变量,变量是按引用访问的,我们操作的是变量值所引用(指向)的对象。答案就清楚了: //CSSer;

(3)

1
2
3
4
5
6
7
8
function changeObjectProperty (o) {
o.siteUrl = "http://www.csser.com/";
o = new Object();
o.siteUrl = "http://www.popcg.com/";
}
var CSSer = new Object();
changeObjectProperty(CSSer);
console.log(CSSer.siteUrl); //

如果CSSer参数是按引用传递的,那么结果应该是http://www.popcg.com/,但实际结果却仍是http://www.csser.com/。事实是这样的:在函数内部修改了引用类型值的参数,该参数值的原始引用保持不变。我们可以把参数想象成局部变量,当参数被重写时,这个变量引用的就是一个局部变量,局部变量的生存期仅限于函数执行的过程中,函数执行完毕,局部变量即被销毁以释放内存。

补充:内部环境可以通过作用域链访问所有的外部环境中的变量对象,但外部环境无法访问内部环境。
每个环境都可以向上搜索作用域链,以查询变量和函数名,反之向下则不能。

JS的继承性

1
2
3
4
5
6
7
8
9
window.color = 'red';
var o = {color: 'blue'};
function sayColor(){
alert(this.color);
}
sayColor(); //red
sayColor.call(this); //red this-window对象
sayColor.call(window); //red
sayColor.call(o); //blue

精度问题: JS 精度不能精确到 0.1

1
2
3
4
var n = 0.3,m = 0.2, i = 0.2, j = 0.1;
alert((n - m) == (i - j)); //false
alert((n-m) == 0.1); //false
alert((i-j)==0.1); //true

加减运算

1
2
3
4
alert('5'+3); //53 string
alert('5'+'3'); //53 string
alert('5'-3); //2 number
alert('5'-'3'); //2 number

foo = foo||bar

foo = foo||bar,这行代码是什么意思?为什么要这样写?

1
if(!foo) foo = bar; //如果foo存在,值不变,否则把bar的值赋给foo

短路表达式:

作为 “&&” 和 “||” 操作符的操作数表达式,这些表达式在进行求值时,只要最终的结果已经可以确定是真或假,求值过程便告终止,这称之为短路求值。

闭包一个例子

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

结果:4 4 4
原因:JavaScript 事件处理器在线程空闲之前不会运行。如何让上述代码输出1 2 3?

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

++a 和 a++

1
2
3
4
5
var a=10, b=20 , c=30;
++a;
a++;
e=++a+(++b)+(c++)+a++;
alert(e); // 77

日期函数

1
2
3
4
5
6
7
8
function DateDemo () {
var d, s="今天日期是:";
d = new Date();
s += d.getMonth() +1+ "/";
s += d.getDate() + "/";
s += d.getFullYear();
return s;
}

k 的结果:10

数组 concat() 方法

1
2
3
4
5
var arr = new Array(1, 3, 5);
arr[4]='z';
arr2 = arr.reverse();
arr3 = arr.concat(arr2);
alert(arr3); // z,,5,3,1,z,,5,3,1

23、编程题

计算字符串字节数

1
2
3
4
5
6
7
8
9
new function(s){
if(!arguments.length||!s) return null;
if(""==s) return 0;
var l=0;
for(var i=0;i<s.length;i++){
if(s.charCodeAt(i)>255) l+=2; else l+=1; //charCodeAt()得到的是unCode码
} //汉字的unCode码大于 255bit 就是两个字节
alert(l);
}("hello world!");

join()

已知数组 var stringArray = [“This”, “is”, “Baidu”, “Campus”]; alert 出”This is Baidu Campus”。

alert(stringArray.join(“ “));

charAt(0)、toUpperCase()

已知有字符串foo="get-element-by-id",写一个 function 将其转化成驼峰表示法 “getElementById”。

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;
}

数组倒排

var numberArray = [3,6,2,4,1,5];

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

numberArray.reverse()

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

numberArray.sort(function(a,b){return b-a});

日期 Date()

输出今天的日期,以 YYYY-MM-DD 的方式,比如今天是 2015 年 7 月 14 日,则输出 2015-07-14

1
2
3
4
5
6
7
8
9
10
11
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);

正则替换

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

1
"<tr><td>{$id}</td><td>{$id}_{$name}</td></tr>".replace(/{\$id}/g, '10').replace(/{\$name}/g, 'Tony');

转义

为了保证页面输出安全,我们经常需要对一些特殊的字符进行转义,请写一个函数 escapeHtml,将<, >, &, “进行转义

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;";
}
});
}

随机数

用 js 实现随机选取 10–100 之间的 10 个数字,存入一个数组,并排序。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function randomNub(aArray, len, min, max) {
if (len >= (max - min)) {
return '超过' + min + '-' + max + '之间的个数范围' + (max - min - 1) + '个的总数';
}
if (aArray.length >= len) {
aArray.sort(function(a, b) {
return a - b
});
return aArray;
}
var nowNub = parseInt(Math.random() * (max - min - 1)) + (min + 1);
for (var j = 0; j < aArray.length; j++) {
if (nowNub == aArray[j]) {
randomNub(aArray, len, min, max);
return;
}
}
aArray.push(nowNub);
randomNub(aArray, len, min, max);
return aArray;
}
var arr=[];
randomNub(arr,10,10,100);

生成5个不同的随机数;

1
2
3
4
5
6
7
8
9
10
//思路:5个不同的数,每生成一次就和前面的所有数字相比较,如果有相同的,则放弃当前生成的数字!
var num1 = [];
for(var i = 0; i < 5; i++){
num1[i] = Math.floor(Math.random()*10) + 1; //范围是 [1, 10]
for(var j = 0; j < i; j++){
if(num1[i] == num1[j]){
i--;
}
}
}

合并数据并删除某个指定下标元素

把两个数组合并,并删除第二个元素。

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

DOM 节点操作

添加、移除、移动、复制、创建和查找节点(原生JS)

1)创建新节点

1
2
3
document.createDocumentFragment() //创建一个DOM片段
document.createElement() //创建一个具体的元素
document.createTextNode() //创建一个文本节点

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

1
2
3
4
domObj.appendChild(); //添加
domObj.removeChild(); //移除
domObj.replaceChild(); //替换
domObj.insertBefore(); //插入

3)查找

1
2
3
document.getElementsByTagName() //通过标签名称
document.getElementsByName() //通过元素的Name属性的值
document.getElementById() //通过元素Id,唯一性

URL 解析成 json 对象

有这样一个 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}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function serilizeUrl(url) {
var urlObject = {};
if (/\?/.test(url)) {
var urlString = url.substring(url.indexOf("?") + 1);
var urlArray = urlString.split("&");
for (var i = 0, len = urlArray.length; i < len; i++) {
var urlItem = urlArray[i];
var item = urlItem.split("=");
urlObject[item[0]] = item[1];
}
return urlObject;
}
return null;
}

正则表达式和正则字面量区别

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

当使用 RegExp() 构造函数的时候,不仅需要转义引号(即 \” 表示 “),还需要双反斜杠(即\表示一个\)。使用正则表达字面量的效率更高。

邮箱的正则匹配:

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

正则表达式

写出简单描述 html 标签(不带属性的开始标签和结束标签)的正则表达式,并将var str = "<div>这里是div<p>里面的段落</p></div>";字符串中的 html 标签去除掉

1
2
3
var reg = /<\/?\w+\/?>/gi;
var str = "<div>这里是div<p>里面的段落</p></div>";
alert(str.replace(reg," "));

清除字符串前后的空格

写一个function,清除字符串前后的空格。(兼容所有浏览器)使用自带接口 trim(),考虑兼容性。

1
2
3
4
5
6
7
8
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"

Javascript中 callee 和 caller 的作用

caller是返回一个对函数的引用,该函数调用了当前函数;
callee是返回正在被执行的 function 函数,也就是所指定的 function 对象的正文。

如果一对兔子每月生一对兔子;一对新生兔,从第二个月起就开始生兔子;假定每对兔子都是一雌一雄,试问一对兔子,第n个月能繁殖成多少对兔子?(使用callee完成)

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];
}
}
}

数组去重

方法一: 每遍历一次就和之前的所有做比较,不相等则放入新的数组中!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//这里用的原型 个人做法;
Array.prototype.unique = function(){
var len = this.length,
newArr = [],
flag = 1;
for(var i = 0; i < len; i++, flag = 1){
for(var j = 0; j < i; j++){
if(this[i] == this[j]){
flag = 0; //找到相同的数字后,不执行添加数据
}
}
flag ? newArr.push(this[i]) : '';
}
return newArr;
}

方法二:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var arr=[1,2,3,3,4,4,5,5,6,1,9,3,25,4];
Array.prototype.unique2 = function()
{
var n = []; //一个新的临时数组
for(var i = 0; i < this.length; i++) //遍历当前数组
{
//如果当前数组的第i已经保存进了临时数组,那么跳过,
//否则把当前项push到临时数组里面
if (n.indexOf(this[i]) == -1) n.push(this[i]);
}
return n;
}
var newArr2=arr.unique2(arr);
alert(newArr2); //输出1,2,3,4,5,6,9,25

阶乘函数;

1
2
3
4
5
6
7
8
9
10
//原型方法
Number.prototype.N = function(){
var re = 1;
for(var i = 1; i <= this; i++){
re *= i;
}
return re;
}
var num = 5;
alert(num.N());

判断一个字符串中出现次数最多的字符,统计这个次数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var str = 'asdfssaaasasasasaa';
var json = {};
for (var i = 0; i < str.length; i++) {
if(!json[str.charAt(i)]){
json[str.charAt(i)] = 1;
} else {
json[str.charAt(i)]++;
}
};
var iMax = 0;
var iIndex = '';
for (var i in json) {
if(json[i]>iMax){
iMax = json[i];
iIndex = i;
}
}
alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');

写一个获取非行间样式的函数

1
2
3
4
5
6
7
8
9
10
11
function getStyle (obj, attr, value) {
if(!value) {
if(obj.currentStyle) {
return obj.currentStyle(attr);
} else {
obj.getComputedStyle(attr,false);
}
} else {
obj.style[attr] = value;
}
}

confirm 确认用户是否退出当前页面,确认之后关闭窗

补充按钮事件的函数,确认用户是否退出当前页面,确认之后关闭窗?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<script type=”text/javascript” >
function closeWin(){
//在此处添加代码
if(confirm("确定要退出吗?")){
window.close();
}
}
</script>
</head>
<body>
<input type=”button”value=”关闭窗口”onclick=”closeWin()”/>
</body>
</html>

选中单选框

完成foo()函数的内容,要求能够弹出对话框提示当前选中的是第几个单选框。

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
<!DOCTYPE html>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>
<script type="text/javascript" >
function foo() {
//在此处添加代码
var rdo = document.form1.radioGroup;
for(var i = 0; i < rdo.length; i++) {
if(rdo.checked) {
alert(“您选择的是第”+(i+1)+”个单选框”);
}
}
}
</script>
<body>
<form name="form1" >
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup"/>
<input type="radio" name="radioGroup"/>
<input type="submit"/>
</form>
</body>
</html>

根据下拉列表显示图片

完成函数showImg(),要求能够动态根据下拉列表的选项变化,更新图片的显示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
<script type="text/javascript" >
function showImg (oSel) {
//在此处添加代码
var str = oSel.value;
document.getElementById("pic").src= str + ".jpg";
}
</script>
<img id="pic" src="img1.jpg" width="200" height="200" />
<br />
<select id="sel">
<option value="img1">城市生活</option>
<option value="img2">都市早报</option>
<option value="img3">青山绿水</option>
</select>
</body>

截取字符串

截取字符串 abcdefg 的 efg

alert('abcdefg'.substring(4));

24、程序选择题

Javascript中, 以下哪条语句一定会产生运行错误? ( BC )

  • A、var _变量=NaN;
  • B、var 0bj = [];
  • C、var obj = //;
  • D、var obj = {};

以下两个变量 a 和 b,a + b 的哪个结果是 NaN? ( AC )

A、var a=undefined; b=NaN
B、var a= ‘123’; b=NaN
C、var a =undefined , b =NaN
D、var a=NaN , b=’undefined’

var a=10; b=20; c=4; ++b+c+a++ 以下哪个结果是正确的?( B )

A、34
B、35
C、36
D、37

要将页面的状态栏中显示“已经选中该文本框”,下列JavaScript语句正确的是 ( A )

A. window.status=”已经选中该文本框”
B. document.status=”已经选中该文本框”
C. window.screen=”已经选中该文本框”
D. document.screen=”已经选中该文本框”

以下哪条语句会产生运行错误:( AD )

A.var obj = ();
B.var obj = [];
C.var obj = {};
D.var obj = //;

以下哪个单词不属于 javascript 保留字:( B )

A.with
B.parent
C.class
D.void

请选择结果为真的表达式:( C )

A.null instanceof Object
B.null === undefined
C.null == undefined
D.NaN == NaN

25、填空题

Javascript中, 如果已知HTML页面中的某标签对象的id=”username”,用(…)方法获得该标签对象。

document.getElementById(“username”);

typeof运算符返回值中有一个跟javascript数据类型不一致,它是(…)。

function

定义了一个变量,但没有为该变量赋值,如果 alert 该变量,javascript 弹出的对话框中显示(…)。

undefined

26、列举浏览器对象模型 BOM 里常用的至少 4 个对象,并列举 window 对象的常用方法至少 5 个

对象:

window
document
location
screen
history
navigator

方法:

alert()
confirm()
prompt()
open()
close()

27、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做简单说明

Document.getElementById 根据元素id查找元素
Document.getElementByName 根据元素name查找元素
Document.getElementTagName 根据指定的元素名查找元素

28、简述创建函数的几种方式

第一种(函数声明):

1
2
3
function sum1(num1,num2){
return num1+num2;
}

第二种(函数表达式):

1
2
3
var sum2 = function(num1,num2){
return num1+num2;
}

第三种(函数对象方式):

1
var sum3 = new Function("num1", "num2", "return num1+num2");

29、Javascript创建对象的几种方式

1)、var obj = {};(使用json创建对象)

1
2
3
4
5
var obj = {};
obj.name = '张三';
obj.action = function (){
alert('吃饭');
};

2)、var obj = new Object();(使用Object创建对象)

1
2
3
4
5
var obj = new Object();
obj.name = '张三';
obj.action = function (){
alert('吃饭');
};

3)、通过函数创建对象。

(a)、使用 this 关键字,如:

1
2
3
4
5
6
7
var obj = function () {
this.name ='张三';
this.age = 19;
this.action = function () {
alert('吃饭');
};
}

(b)、使用 prototype 关键字,如:

1
2
3
4
5
function obj (){}
obj.prototype.name ='张三';
obj.prototype.action = function (){
alert('吃饭');
};

4)、通过Window创建对象,如:

1
2
3
4
5
window.name = '张三';
window.age = 19;
window.action = function() {
alert('吃饭');
};

5)、使用内置对象创建对象。如:

1
2
3
4
var str = new String("实例初始化String");
var str1 = "直接赋值的String";
var func = new Function("x","alert(x)");//示例初始化func
var obj = new Object();//示例初始化一个Object

30、iframe的优缺点?

优点:

解决加载缓慢的第三方内容如图标和广告等的加载问题
Security sandbox
并行加载脚本

缺点:

iframe会阻塞主页面的Onload事件
即时内容为空,加载也需要时间
没有语意

31、Cookie 缺点:

Cookie数量和长度的限制。每个domain最多只能有20条cookie,每个cookie长度不能超过4KB,否则会被截掉。
安全性问题。如果cookie被人拦截了,那人就可以取得所有的session信息。即使加密也与事无补,因为拦截者并不需要知道cookie的意义,他只要原样转发cookie就可以达到目的了。
有些状态不可能保存在客户端。例如,为了防止重复提交表单,我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端,那么它起不到任何作用。

32、js延迟加载的方式有哪些

defer和async
动态创建DOM方式(创建script,插入到DOM中,加载完毕后callBack)
按需异步载入js

33、documen.write 和 innerHTML 的区别

document.write 只能重绘整个页面
innerHTML 可以重绘页面的一部分

34、哪些操作会造成内存泄漏

内存泄漏指任何对象在您不再拥有或需要它之后仍然存在。
垃圾回收器定期扫描对象,并计算引用了每个对象的其他对象的数量。
如果一个对象的引用数量为 0(没有其他对象引用过该对象),或对该对象的惟一引用是循环的,那么该对象的内存即可回收。

  • setTimeout 的第一个参数使用字符串而非函数的话,会引发内存泄漏。
  • 闭包
  • 控制台日志
  • 循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

35、事件委托是什么

利用事件冒泡的原理,让自己的所触发的事件,让其父元素代替执行!

36、闭包是什么,有什么特性,对页面有什么影响

闭包就是能够读取其他函数内部变量的函数。
在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。

1
2
3
4
5
6
7
8
9
function outer(){
var num = 1;
function inner(){
var n = 2;
alert(n + num);
}
return inner;
}
outer()();

闭包资料

37、解释 jsonp 的原理,以及为什么不是真正的 ajax

动态创建script标签,回调函数
Ajax是页面无刷新请求数据操作

378、字符串反转,如将 ‘12345678’ 变成 ‘87654321’

思路:先将字符串转换为数组 split(),利用数组的反序函数 reverse()颠倒数组,再利用 jion() 转换为字符串

1
2
var str = '12345678';
str = str.split('').reverse().join('');

39、将数字 12345678 转化成 RMB 形式 如: 12,345,678

思路:先将数字转为字符, str= str + ‘’ ;
利用反转函数,每三位字符加一个 ‘,’最后一位不加; re()是自定义的反转函数,最后再反转回去!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function re(str) {
str += '';
return str.split("").reverse().join("");
}
function toRMB(num) {
var tmp='';
for (var i = 1; i <= re(num).length; i++) {
tmp += re(num)[i - 1];
if (i % 3 == 0 && i != re(num).length) {
tmp += ',';
}
}
return re(tmp);
}

40、window.location.search() 返回的是什么?

查询(参数)部分。
除了给动态语言赋值以外,我们同样可以给静态页面,并使用 javascript 来获得相信应的参数值
返回值:?ver=1.0&id=timlq 也就是问号后面的!

41、window.location.hash 返回的是什么?

锚点 返回值:#love

42、window.location.reload() 作用?

刷新当前页面

43、Javascript 中的垃圾回收机制?

在Javascript中,如果一个对象不再被引用,那么这个对象就会被GC回收。如果两个对象互相引用,而不再 被第3者所引用,那么这两个互相引用的对象也会被回收。因为函数a被b引用,b又被a外的c引用,这就是为什么 函数a执行后不会被回收的原因。

44、为什么不能定义 1px 左右的 div 容器

IE6下这个问题是因为默认的行高造成的,解决的方法也有很多,例如:

overflow:hidden | zoom:0.08 | line-height:1px

感谢您的支持!