前端试题-小试牛刀(1)

1. 请写出下面代码片段的输出结果:num为NaN,NaN和NaN是不相等的,NaN的类型是number类型,所以最后会alert‘number’.

var str = ‘abc123‘,
    num = parseInt(str);
if (num == NaN){
  alert(‘NaN‘);
}
else if (num == 123){
  alert(‘123‘);
}
else if (typeof(num) == ‘number‘){
  alert(‘number‘);
}
else {
  alert(‘str‘);
}

2. 分别写出下列表达式的值和数据类型:c=‘2’,类型为string.

var a = 1,
    b = ‘2‘;
var c = a > b ? (a < b ? a : b) : (a == b ? a : b);

3. 分别写出下面两个循环语句alert输出的结果,并解释原因。第一个弹出两个0,因为break是结束整个循环,第二个循环,continue会结束本次循环,体会依次弹出0到9,最后再弹出一个10.

for (var i = 0; i < 10; i++){
  alert(i);
  break;
}
alert(i);

for (var i = 0; i < 10; i++){
  alert(i);
  continue;
}
alert(i);

4. 分别写出fun两次调用alert的输出结果。第一次弹出0123,它是字符串拼接,第二次弹出10,是数值相加的结果。

function fun(a, b, c){
  var l = arguments.length;
  var num = 0;
  for (var i = 0; i < l; i++){
    num += arguments[i];
    console.log(typeof(arguments[i]));
  }
  alert(num);
}

fun(‘1‘, 2, 3);
fun(1, 2, 3, 4);

5. 写出函数fun执行后alert的输出结果,并说明原理。

这道面试题在面试时出现的次数挻多的,第一次弹出undefined,第二次弹出0. 第一次执行fun,alert(a)会在fun函数的作用域找有没有局部变量a,有的话它不会找外面的a,但是fun里的a又是在alert(a)之后被赋值的,所以它会返回undefined,第二次弹出0,是找的外部的a的结果。

var a = 0;
function fun(){
  alert(a);
  var a = 10;
}
fun();
alert(a);

6. 写出下面代码的alert输出结果,并说明原理。会弹出10,o定义为一个对象的形式, b=o, b和o是引用了同一个对象,后面的赋值会覆盖掉前面的。

var o = {};
o.a = 0;
var b = o;
b.a = 10;
alert(o.a);

7. 分别写出my_fun.b()和my_fun.c()执行alert输出的结果。undefined,20,30

fun.prototype = {
  b:function(){
    this.a = 20;
    alert(this.a);
  },
  c:function(){
    this.a = 30;
    alert(this.a);
  }
}

var my_fun = new fun();
my_fun.b();
my_fun.c();

8. 请问执行下面在代码,会有几次alert输出,每次的值各是什么?并说明原理。

分别弹出11,12,0.第一次var c=a(); 执行a里面的b(),先弹出11,然后把b返回出去,c();即是执行b();弹出12.最后alert(n)是找的最外部的0,弹出0.

var n = 0;
function a(){
  var n = 10;
  function b(){
    n++;
    alert(n);
  }
  b();
  return b;
}
var c = a();
c();
alert(n);

9.设计一个简单的log工具:

(1)<ul>元素已存在,无需再创建;

(2)当调用函数log(msg)时,向<ul>中插入一条记录<li><p>msg</p><button>删除</button></li>;

(3)点击button时,删除该条记录。

10. 实现函数uniq(arr), uniq函数去除arr中所有重复的元素,要求不新建新的数组。

我的做法是建一个json对象,如果json对象里有第i个属性,则跳过,否则push到arr里,最后只取arr后面新push的值出来,就是没有重复的值数组。

function unique(arr){
  var json = {};
 
  for (var i = 0; i < arr.length; i++){
    if (!json[arr[i]]){
      json[arr[i]] = true;
      arr.push[arr[i]];
    }
  }
  arr.splice(arr.length - 1);
  return arr;
}

arr = [3,5,2,3,2,2,3,7];
console.log(arr.unique3());

11.为数组添加方法indexOf(value),使得下列调用可成功运行。

var arr = [1,2,3,4,5];

var index = arr.indexOf(3);

if (!Array.prototype.indexOf){
  Array.prototype.indexOf = function(elt){
    var len = this.length > 0;
    var from = Number(argument[1]) || 0;
    from = (from < 0) ? Math.ceil(from) : Math.floor(from);
    if (from < 0) from += len;
    for (; from < len; from++){
      if (from in this && this[from] === elt) return from;
    }
    return -1;
  };
}

最后介绍几种js数组去重的方法:

一种是在数组prototype的方法里建个存当前数组第一个值的临时数组,遍历当前数组,如果当前数组的第i项在临时数组里,那么跳过,如果不在,则push到临时数组里,把临时数组返回出去。

Array.prototype.unique1 = function(){
  var res = [this[0]];
  for (var i = 1; i < this.length; i++){
    if (res.indexOf(this[i]) == -1){
      res.push(this[i]);
    }
  }
  return res;
}
arr = [3,5,2,3,2,2,3,7];
console.log(arr.unique1());

第二种在方法里新建一个hash表和临时数组,遍历当前数组,看json对象里有无第i项,有,跳过,无,则让hash表中第i项值属性为真,并将值push到临时数组里,最后返回临时数组。

Array.prototype.unique2 = function(){
  var json = {};
  var temp = [];
  for (var i = 0; i < this.length; i++){
    if (!json[this[i]]){
      json[this[i]] = true;
      temp.push(this[i]);
    }
  }
  return temp;
}

第三种方法主要是遍历当前数组时,看第i项在数组中出现的位置是不是i,如果不是,则表示重复了,把第i项忽略掉,否则存入数组。

Array.prototype.unique3 = function(){
  var temp = [];
  for (var i = 0; i < this.length; i++){
    if (this.indexOf(this[i]) == i){
      temp.push(this[i]);
    }
  }
  return temp;
}

第四种方法是先把数组排序,然后比较相邻两个值,如果第i项和临时数组里最后一项不相等则push到临时数组里,最后返回临时数组。

Array.prototype.unique4 = function(){
  this.sort();
  var temp = [this[0]];
  for (var i = 1; i < this.length; i++){
    if (this[i] !== temp[temp.length - 1]){
      temp.push(this[i]);
    }
  }
  return temp;
}

时间: 2024-10-13 00:12:55

前端试题-小试牛刀(1)的相关文章

百度2016实习 前端试题中的编程题2:Excel地址的相互转换 [2015南桥杯试题]

百度2016实习 前端试题中的编程题2:Excel地址的相互转换  Excel是最常用的办公软件.每个单元格都有唯一的地址表示.比如:第12行第4列表示为:"D12",第5行第255列表示为"IU5". 事实上,Excel提供了两种地址表示方法,还有一种表示法叫做RC格式地址. 第12行第4列表示为:"R12C4",第5行第255列表示为"R5C255". 要求:编写程序,对换两种不同的表示方法表示行列,即 如果输入是常规地址

前端试题整理

阻止事件冒泡和默认事件 function stopBubble(e) { if(e && e.stopPropagation){ e.stopPropagation(); } else { window.event.cancelBubble = true; } }; // 阻止浏览器的默认事件 function stopDefault(e){ if(e && e.preventDefault) { e.preventDefault(); } else { window.ev

前端试题-2016年阿里前端开发工程师笔试题6,7,8题的解法

2016年阿里前端开发工程师笔试题(只有题,没有答案): http://www.cnblogs.com/sdgf/archive/2015/08/18/4740698.html 第6题:请在____处填写答案,从而达到题目的要求 var arr = [1, 2, 3, 4, 5]; var result = arr.sort(_______________________________).join("+"); console.log(result); 解答:在排序当中,如果需要按照某

前端试题-什么是css sprite?优缺点?

CSS Sprite是一种网页图片应用处理方式.它允许将一个页面涉及到的所有零星图片都包含到一张大图中去,这样,在访问页面时,就只需请求一次就可以了,而不必一次次向服务器发送请求. 它的原理就是把见面中一些背景图片整合到一张图片文件中,再利用CSS的"background-image","background-repeat","background-position"的组合进行背景定位,实现多个位置的背景,一张图来搞定. 优点 1 减少网页的ht

前端试题-cssText?

平常我们想更改页面上某个元素的样式时,我们一般会在js里这样写: 想更新obj的宽时,写上一行: obj.style.width = "200px": 想改它的定位类型时,再写一行: obj.style.position = "absolute"; 又想改它的边框了,再加一行: obj.style.border = "1px solid brown"; -- 改的样式多时,我们就要这样不停的写一行写一行--   如果我们在网上搜js批量修改样式,

前端试题-js为数字添加千位分隔符

一种方法为: function test(str){   var iNum = str.length % 3;   var prev = '';   var iNow = 0;   var temp = '';   var arr = [];   if (iNum != 0){     prev = str.substring(0, iNum);     arr.push(prev);   }   str = str.substring(iNum);   for (var i = 0; i <

前端试题-两列等高布局

我们经常会见到一些小微网站上,左边是导航,右边是内容,无论是左边导航高度高还是右边内容高度高,两边始终以最高的来自适应等高显示. 这里的布局主要是把两边元素同时设两个比较大的padding-bottom,然后设置相等值的负的margin-bottom,最后给父元素加一个overflow:hidden. 比如上图有两列,一列高一列低,这里我们假设给左右都加上黄色部分高度padding-bottom:500px,如果不做其他处理的话,左边仍然没有右边高,分别加上不同背景色,左边和右边还是有差值,左边

前端试题-CSS试题(1)

1. css属性命名区分大小写吗? 不区分,不过一般小写,便于理解 2. margin-top和margin-bottom对于行内(内敛inline)元素效果一样么? 3.padding-top和padding-bottom对于inline元素都会增加元素本身的大小么? 回答2,3,需要了解html里的替换元素和非替换元素. 替换元素是指作为其他内容点位符的一个元素.如img等.非替换元素是指内容包含在文档中的元素,例如span. 讨论margin-top和margin-bottom对行内元素是

前端试题本(HTML+CSS篇)

CS1. 下面关于IE.FF下面CSS的解释区别描述正确的有?(不定项)CS2请选出结构正确的选项CS3.下面哪些是HTML5 新增的表单元素?CS4在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值?CS5请用CSS实现如下图的样式,相关尺寸如图示,其中dom结构为:CS6.如下代码,在空白处填写代码,是其点击时,前景色为白色,背景色为黑色.CS7浏览器会加载样式为"display:none"的图片?CS8.浮动的元素相对于容器的哪里?