前端试题-小试牛刀

Posted sunshinegirl_7

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端试题-小试牛刀相关的知识,希望对你有一定的参考价值。

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

以上是关于前端试题-小试牛刀的主要内容,如果未能解决你的问题,请参考以下文章

[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)

[前端学习]从0到1做一个Vue风格的Todolist(Vue牛刀小试)

WebPack牛刀小试

WebPack牛刀小试

技术干货分享季WebPack牛刀小试

了不起的Chrome浏览器:Chrome 97发布WebTransport,QUIC协议小试牛刀