web前端面试题整理后篇（程序篇）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web前端面试题整理后篇（程序篇）相关的知识，希望对你有一定的参考价值。
需要web前端课程工具和电子书，可以加: 33群105601600; 22群120342833
1. var obj =
{a : 1}; (function (obj) { obj = {a : 2}; })(obj); //问obj的值会改变吗？
var obj = {a : 1};
(function (obj) {
obj = {a : 2};
})(obj);
//问obj的值会改变吗？
外部的obj不变.
因为匿名函数中obj传入参数等于是创建了一个局部变量obj, 里面的obj指向了一个新的对象 . 如果改成(function
() { obj = {a : 2}; })(obj); 就会改变了
2. var obj = { a:1, func: function() { (function
() { a=2; }(); }} ; obj.func() //obj中a的值会改变吗? 匿名函数里的this指向的是什么?
var obj = {
a:1,
func: function() {
(function () {
a=2;
}();
}
} ;
obj.func();
//obj中a的值会改变吗? 匿名函数里的this指向的是什么?
obj里的a不会变. 匿名函数里的this指向全局对象window. 这等于是给window加了一个名为a的属性
要改变obj中a的值 , 应当:
(function() {
this.a = 2
}).call(this);
或者obj中定义
func: function() {
var self = this;
(function(){
self.a=2;
})();}
3. 要实现函数内每隔5秒调用自己这个函数，100次以后停止，怎么办?
(function(){
var index = 0;
function fn(){
if(index < 100){
index++;
setTimeout(function(){
fn();
},5000);
}
}
fn();
})();
4. 点击一个ul的五个li元素，分别弹出他们的序号，怎么做？
方法1 :
var oLi = document.getElementsByTagName(‘li‘);
for(var i=0; i<oLis.length; i++){
oLis[i].onclick = (function(j){
return function(){
alert(j);
}
})(i);
}
方法2:
var oLi = document.getElementsByTagName(‘li‘);
for(var i=0; i<oLi.length; i++){
(function(j){
oLi[j].onclick = function(){
alert(j);
};
})(i);
}
方法3:
var oLi = document.getElementsByTagName(‘li‘);
for(var i=0; i<oLi.length; i++){
oLi[i].index = i;
oLi[i].onclick = function(){
alert(this.index);
}
}
5. js实现数组去重怎么实现?
方法1. 创建一个新的临时数组来保存数组中已有的元素
var a = new Array(1,2,2,2,2,5,3,2,9,5,6,3);
Array.prototype.unique1 = function(){
var n = []; //一个新的临时数组
for(var i=0; i<this.length; i++){
//如果把当前数组的第i已经保存进了临时数组, 那么跳过
if(n.indexOf(this[i]) == -1){
n.push(this[i]);
}
}
return n;
}
console.log(a.unique1());
方法2. 使用哈希表存储已有的元素
Array.prototype.unique2 = function(){
var hash = {},
n = []; //hash 作为哈希表, n为临时数组
for(var i=0; i<this.length; i++){
if(!hash[this[i]]){ //如果hash表中没有当前项
hash[this[i]] = true; //存入hash表
n.push(this[i]); //当前元素push到临时数组中
}
}
return n;
}
方法3. 使用indexOf判断数组元素第一次出现的位置是否为当前位置
Array.prototype.unique3 = function(){
var n = [this[0]];
for(var i=1; i<this.length; i++) //从第二项开始遍历
{
//如果当前数组元素在数组中出现的第一次的位置不是i
//说明是重复元素
if(this.indexOf(this[i]) == i){
n.push(this[i]);
}
}
return n;
}
方法4. 先排序再去重
Array.prototype.unique4 = function(){
this.sort(function(a, b){ return a - b;});
var n = [this[0]];
for(var i=1; i<this.length; i++){
if(this[i] != this[i-1]){
n.push(this[i]);
}
}
return n;
}
第一种方法和第三种方法都使用了indexOf(), 这个函数的执行机制也会遍历数组
第二种方法使用了一个哈希表, 是最快的.
第三种方法也有一个排序的复杂度的计算.
然后做了个测试, 随机生成100万个0-1000的数组结果如下:
第三种方法总是第二种方法的将近两倍, 而第四种方法与数组的范围有关,
如果是0-100的数组
而如果是0-10000, 方法四看着就效果还不错了
而第二种方法永远是最好的, 但是是以空间换时间
全部代码如下
var a = [];
for(var i=0; i<1000000; i++){
a.push(Math.ceil(Math.random()*10000));
}
Array.prototype.unique1 = function(){
var n = []; //一个新的临时数组
for(var i=0; i<this.length; i++){
//如果把当前数组的第i已经保存进了临时数组, 那么跳过
if(n.indexOf(this[i]) == -1){
n.push(this[i]);
}
}
return n;
}
Array.prototype.unique2 = function(){
var hash = {},
n = []; //hash 作为哈希表, n为临时数组
for(var i=0; i<this.length; i++){
if(!hash[this[i]]){ //如果hash表中没有当前项
hash[this[i]] = true; //存入hash表
n.push(this[i]); //当前元素push到临时数组中
}
}
return n;
}
Array.prototype.unique3 = function(){
var n = [this[0]];
for(var i=1; i<this.length; i++) //从第二项开始遍历
{
//如果当前数组元素在数组中出现的第一次的位置不是i
//说明是重复元素
if(this.indexOf(this[i]) == i){
n.push(this[i]);
}
}
return n;
}
Array.prototype.unique4 = function(){
this.sort(function(a, b){ return a - b;});
var n = [this[0]];
for(var i=1; i<this.length; i++){
if(this[i] != this[i-1]){
n.push(this[i]);
}
}
return n;
}
var begin1 = new Date();
a.unique1();
var end1 = new Date();
var begin2 = new Date();
a.unique2();
var end2 = new Date();
var begin3 = new Date();
a.unique3();
var end3 = new Date();
var begin4 = new Date();
a.unique4();
var end4 = new Date();
console.log("方法一执行时间:" + (end1 - begin1));
console.log("方法二执行时间:" + (end2 - begin2));
console.log("方法三执行时间:" + (end3 - begin3));
console.log("方法四执行时间:" + (end4 - begin4));
【内容展示有限，可以加群下载，群文件会定期更新学习资料，以及练手小案例】
以上是关于web前端面试题整理后篇（程序篇）的主要内容，如果未能解决你的问题，请参考以下文章