2019前端面试题总结之三：某公司中级面试题

一、选择题

1.要动态改变层中的内容可以使用的方法有？

  • A：innerHTML
  • B：innerText
  • C：通过设置层的隐藏和显示来实现
  • D：通过设置层的样式属性的display属性

// 答案： A,B，注意动态改变，内容

2. 看下面的代码，给出输出的结果？

for (var i = 1; i <= 3; i++){
  setTimeout(function(){
    console.log(i);
  },0)
}
// 答案： 4 4 4 ，因为setTimeout是异步函数

推荐参考链接1 推荐参考链接2

3. 看下面代码，给出输出结果？

var a = 1;
function foo() {
  if(!a){
    var a = 2
  }
  alert(a);
}
foo()
  • A：1
  • B：2
  • C：undefined
  • D：报错

答案是：B，

涉及到的知识点有作用域，变量提升。

因为var是函数级作用域，foo函数中出现var a=2 的存在，

就默认在函数内顶端 声明var a；此时这个a没有被赋值所以是undefined；

然后执行if(!a)等价于!undefined肯定是true。然后给a赋值为2.

所以打印的是2。

二、问答题

1. 请用css实现水平居中，HTML结构如下

<div class="wrapper">
  <div class="content"></div>
</div>

答案：

/*第一种通过定位和位移（未知子模块宽高）或者margin（已知子元素宽高）*/
html,
body,
.wrapper{
  width:100%;
  height:100%;
}
.content{
  width:30%;
  height:30%;
  position:absolute;
  top:50%;
  left:50%;
  transform:tranlate(-50%,-50%);
}
/*或者*/
.content{
  width:200px;
  height:200px;
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-100px;
  margin-left:-100px;
}
/*第二种通过flex布局*/
.wrapper{
  width:100%;
  height:500px;
  display:flex;
  flex-flow: row nowrap;
  /*align-items 定义子元素交叉轴也就是垂直方向的对齐方式*/
  align-items:center;  
  /*justify-content 定义子元素水平方向的对齐方式*/
  justify-content:center;
}
.content{
  width:100px;
  height:100px;
  background: red;
}

2. 下面这个ul，如何点击每一列的时候alert其index？

<ul id="test">
  <li>这是第一条</li>
  <li>这是第二条</li>
  <li>这是第三条</li>
  <li>这是第四条</li>
</ul>
  • 这算是一个闭包和作用域的的考点吧，用ES6的声明很简单。直接上答案。
const test = document.querySelector('#test');
const lis = test.querySelectorAll('li')
/*第一种用 let 声明*/
for(let i = 0; i<lis.length; i++){
  lis[i].addEventListener('click',function(e){
    console.log(i);
  },false)
//  ------两种写法而已-----
//  lis[i].onclick=function() {
//    console.log(i);
//  }
}
/*第二种，用 var 声明，采用自执行函数*/
for (var i = 0; i < lis.length; i++) {
  lis[i].addEventListener(
    'click',
    (function(num) {
      return function() {
        console.log(num);
      };
    })(i),
    false
  );
}
------课外延伸，点击某一列，显示其内容的值？
  • 这是一种事件委托，也叫事件代理，是事件捕获和事件冒泡的一种运用。

举个例子，比如一个宿舍的同学同时快递到了，一种方法就是他们都傻傻地一个个去领取，还有一种方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个宿舍同学；

在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM 元素，而出去统一领取快递的宿舍长就是代理的元素，所以真正绑定事件的是这个元素，按照收件人分发快递的过程就是在事件执行中，需要判断当前响应的事件应该匹配到被代理元素中的哪一个或者哪几个。

  • 优点：
    • 减少内存消耗。不用给每一个 li 都绑定一个函数。绑定到ul上面，执行事件的时候去匹配判断目标元素。
    • 动态绑定事件。增加或者去除列表项元素，那么在每一次改变的时候都需要重新给新增的元素绑定事件，给即将删去的元素解绑事件；
const test = document.querySelector('#test');

test.addEventListener(
  'click',
  function(e) {
    // 处理兼容性的问题
    const event = e || window.event;
    const target = event.target || event.srcElement;
    console.log(target.innerText);
  },
  false
);

参考事件捕获，事件冒泡，事件代理详细内容

3. 说出一下函数的作用是？空白区域应该填写说明？

(function(window) {
  function fn(str) {
    this.str = str;
  }
  fn.prototype.format = function() {
    //  var arg = '________';
    var arg = arguments;
    // return this.str.replace(_______, function(a, b, c, d) {
    return this.str.replace(/\{(\d+)\}/g, function(match, b, offset, string) {
      console.log(match); // 根据正则匹配到{}的字符串
      console.log(b); // {}中的数字字符串
      // 假如replace()方法的第一个参数是一个RegExp 对象，则代表第n个括号匹配的字符串。
      // 例如，用 /\{(\d+)\}/g 这个来匹配，b 就是匹配的 \d+。
      console.log(offset); // 该字字段在字符串中的开始索引位置
      console.log(string); // 原始字符串
      console.log(arg[b]);
      return arg[b] || '';
    });
  };
  window.fn = fn;
})(window);
//use
(function() {
  var t = new fn('<p><a href="{0}">{1}</a><span>{2}</span></p>');
  console.log(t.format('http://www.alibaba.com', 'Alibaba', 'Welcome'));
})();
  • 这个函数的作用就是格式化一段代码，将传入的参数替换掉html里面{}中的内容。类似于vue中{}的实现。

replace()函数中的b为什么会输出{}里面的内容。请参考这个链接描述那段里的第二段

4. 写一个function,清除字符串前后的空格。（兼容所有浏览器）

// 函数方法
function strTrim(str) {
  return str.replace(/(^\s+)|(\s+$)/g,'')
}
// 重写trim方法
if(!String.prototype.trim){
  String.prototype.trim=function(){
    //利用正则匹配去除字符串前后空格
    return this.replace(/(^\s+)|(\s+$)/g,"");
  }
}
const str = '    Hello，Arthas!  http://www.xueyunhao.com    '
console.log(str);
console.log(strTrim(str));
console.log(str.trim());

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

let newArray = []; // 创建一个空数组，用来存放获取的数字
// 封装一个获取10-100随机数的函数
function getRandomNumber(startNum, endNum) {
  const rangeChoice = endNum - startNum + 1; // +1 是为了能够取到100；
  const result = Math.floor(Math.random() * rangeChoice + startNum);
  return result;
}
// 循环10次获取数字并填入数组
for (let i = 0; i < 10; i++) {
  newArray.push(getRandomNumber(10, 100));
}
console.log(newArray);
// 将数组进行排序
newArray.sort(function(a, b) {
  return a - b;
});
console.log(newArray);

6. 使用js编写一个函数，能够对传入的常见对象进行clone（深拷贝）

// 第一种方法，使用JSON.parse（）和JSON.stringify（）对对象进行深拷贝
const arthas = {
  fn: function() {
    console.log('hello Arthas');
  },
  b: { c: 1 },
  c: [1, 2, 3],
  name: 'Arthas',
  nowDate: new Date(),
  f: null,
  g: undefined,
  n:123,
};
function deepClone(obj){
  return JSON.parse(JSON.stringify(obj))
}
const xue = deepClone(arthas);
console.log(arthas);
console.log(xue);
// 上述clone的方法会忽略function和undefined的字段，对date类型支持貌似也不友好。而且只能克隆原始对象自身的值，不能克隆它继承的值
// 对于纯数据的json对象的深克隆，可以使用JSON.parse()和JSON.stringify()方法，

// 第二种方法，
const arthas = {
  fn: function() {
    console.log('hello Arthas');
  },
  b: { c: 1 },
  c: [1, 2, 3],
  name: 'Arthas',
  nowDate: new Date(),
  f: null,
  g: undefined,
  n:123,
};
function deepClone(obj) {
  if (obj === null) {
    return null
  }
  const result = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      if (typeof obj[key] === 'object') {
        result[key] = deepClone(obj[key]);  // 如果是对象，再次调用该方法自身
      } else {
        result[key] = obj[key];
      }
    }
  }
  return result;
}
const xue = deepClone(arthas);
console.log(arthas);
console.log(xue);

7. 某种药方要求非常严格，你每天需要同时服用A.B两种药片各一颗，不能多也不能少。这种药非常贵，你不希望有任何一点浪费。一天，你打开药片A的药瓶，倒出一粒药片放在手心，然后打开另一个药瓶，但是不小心倒出了两粒药片。现在，你手上有一颗药片A，两颗药片B，并且你无法区别哪个是A，哪个是B。你如何才能严格遵循药方服用药片，并且不能有任何的浪费？

  • 把现有的三个药片各切一半，分成两个堆。
  • 再从A药瓶中拿出一粒切半，分别放入两堆。
  • 这样今天先吃第一堆，明天再吃第二堆。

以上是经过参考很多同行分享与官方文档，汇总的一份总结，如有不对，请指出，最后感谢大家观看，求点赞，求分享，求评论，求打赏~~

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,456评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,370评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,337评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,583评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,596评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,572评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,936评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,595评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,850评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,371评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,951评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2赞 342