快来每日上分，2021前端面试题10道(附答案与解析)

喜欢ヅ旅行 2022-08-29 10:52 171阅读 0赞

## 一.先言： ##

<table> 
 <thead> 
  <tr> 
   <th><strong>目标：</strong></th> 
   <th>成为offer收割机之拖拉分机</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>范围：</strong></td> 
   <td>HTML、CSS、JavaScript</td> 
  </tr> 
  <tr> 
   <td><strong>题型：</strong></td> 
   <td>单选、多选、编程</td> 
  </tr> 
  <tr> 
   <td><strong>数目：</strong></td> 
   <td>10</td> 
  </tr> 
  <tr> 
   <td><strong>本次难度（5星满星）：</strong></td> 
   <td>⭐⭐</td> 
  </tr> 
  <tr> 
   <td><strong>答案：</strong></td> 
   <td>答案与解析是我自己查询与思考后书写的，仅供参考。</td> 
  </tr> 
  <tr> 
   <td><strong>北极光之夜。</strong></td> 
   <td>auroras.blog.csdn.net</td> 
  </tr> 
 </tbody> 
</table>

## 二.题目（答案在最后）： ##

**1.问一份标准的HTML文档有哪几个必须的HTML标签？【多选】**

A. <html>
    B. <head>
    C. <title>
    D. <body>

**2.< input >元素的type属性的取值可以是( )【多选】**

A. image
    B. checkbox
    C. button
    D. select

**3.下列哪个操作是W3C标准定义的阻止事件向父容器传递：【单选】**

A. e.preventDefault()
    B. e.cancelBubble=true
    C. e.stopPropagation()
    D. e.stopImmediatePropagation()

**4.下列哪种选择器不是css3才定义的：【单选】**

A. :enabled
    B. :checked
    C. :before
    D. :only-child

**5.以下那些是css属性position可以设置的值：【多选】**

A. fixed
    B. relative
    C. absolute
    D. inherit

**6.以下哪些Array对象的方法不会更改原有数组？【多选】**

A. concat()
    B. splice()
    C. map()
    D. sort()

**7.JavaScript定义var a=“40”,var b=7,则执行a%b会得到()。【单选】**

A. 5
    B. "5"
    C. undefined
    D. null

**8.以下运行结果:**

for(var i = 0; i < 10; i++) { 
        setTimeout(function() { 
            console.log(i);
        }, 1000);
    }

A. 0--9
    B. 10个10
    C. 10个9
    D. 无限循环

**9.以下运行结果:**

var user = { 
     count : 1,
     getCount: function(){ 
      return this.count;
     }
    }
    var func = user.getCount
    console.log(func())

A. this.count
    B. 1
    C. 报错
    D. undefined

**10.移除数组 arr 中的所有值与 item 相等的元素。不要直接修改数组 arr，结果返回新的数组：**

function remove(arr, item) { 
      。。。
    }

## 三.答案与解析： ##

**1. 选ABCD，注意看问的是标准的HTML文档。**

**2. 选ABC，没有select，有以下：**

> button checkbox file hidden image password radio reset submit text

**3. 选C， preventDefault()是取消事件默认行为；stopImmediatePropagation() 取消事件冒泡同时阻止当前节点上的事件处理程序被调用；cancelBubble()是取消事件冒泡，不符合 W3C 标准，适用于 IE；stopPropagation()阻止事件冒泡行为 , 符合 W3C 标准；**

**4.选C，:before选择器早在CSS 2.1版本就定义了。**

**5.ABCD，有 绝对absolute,固定fixed,相对relative,继承父元素inherit,默认static,粘性sticky…略。**

**6.选AC，concat（）方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。map（）方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。sort() 方法用于对数组的元素进行排序，肯定改变了。splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目，也改了。**

**7.选A，js是弱语言类型。在进行算术运算时，只有做+号，数字隐式转换成字符串。其余的运算符号是字符串隐式转换成数字。**

**8.选B，JavaScript的任务分为同步任务和异步任务，同步任务放在主线程，形成一个执行栈；异步任务放在任务队列，只有主线程空了才会去读取任务队列的任务。setTimeout是异步操作，每次遇到它不是先运行，而是先压入执行栈。等i执行完for循环，setTimeout才开始执行，此时的i已经是10了，就打印了10个10。**

**9.选D。函数调用时，this才会发生绑定，而且是谁调用this，this就指向谁。这里func调用了它，所以指向func，而func是全局环境中的，所以this指向window，而count是一个局部变量，所以undefined。**

**10.如下，这个比较简单就不解释了：**

function remove(arr, item) { 
       let arr2 = arr.filter(i=>{ 
           return i!=item;
       })
       return arr2;
    }

## 总结： ##

每日一练，做人没有梦想，那和咸鱼有什么分别~

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]

其它文章：  
**~关注我看更多简单创意特效：**  
[文字烟雾效果 html+css+js][html_css_js]  
[环绕倒影加载特效 html+css][html_css]  
[气泡浮动背景特效 html+css][html_css 1]  
[简约时钟特效 html+css+js][html_css_js 1]  
[赛博朋克风格按钮 html+css][html_css 2]  
[仿网易云官网轮播图 html+css+js][html_css_js 2]  
[水波加载动画 html+css][html_css 3]  
[导航栏滚动渐变效果 html+css+js][html_css_js 3]  
[书本翻页 html+css][html_css 4]  
[3D立体相册 html+css][3D_ html_css]  
[霓虹灯绘画板效果 html+css+js][html_css_js 4]  
[记一些css属性总结（一）][css]  
[Sass总结笔记 ][Sass_]  
…等等  
[进我主页看更多~][Link 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2x1bzE4MzEyNTEzODc_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/092ef84f2bf1486290a7266eca12dbd2.png
[html_css_js]: https://blog.csdn.net/luo1831251387/article/details/116452424
[html_css]: https://blog.csdn.net/luo1831251387/article/details/115534417
[html_css 1]: https://blog.csdn.net/luo1831251387/article/details/113657124
[html_css_js 1]: https://blog.csdn.net/luo1831251387/article/details/113436552
[html_css 2]: https://blog.csdn.net/luo1831251387/article/details/113360844
[html_css_js 2]: https://blog.csdn.net/luo1831251387/article/details/114393724
[html_css 3]: https://blog.csdn.net/luo1831251387/article/details/111714413
[html_css_js 3]: https://blog.csdn.net/luo1831251387/article/details/111601962
[html_css 4]: https://blog.csdn.net/luo1831251387/article/details/111398881?spm=1001.2014.3001.5502
[3D_ html_css]: https://blog.csdn.net/luo1831251387/article/details/111032274?spm=1001.2014.3001.5502
[html_css_js 4]: https://blog.csdn.net/luo1831251387/article/details/114338506
[css]: https://blog.csdn.net/luo1831251387/article/details/111320280
[Sass_]: https://blog.csdn.net/luo1831251387/article/details/113179630
[Link 1]: https://blog.csdn.net/luo1831251387?spm=1000.2115.3001.5343