前端面试原来这么简单(HTML，CSS与JavaScript篇)

二. HTML, CSS, JS篇

1.了解css3动画特效怎么实现的吗?
2 .css3新特性有哪些?
3.写过一些什么特效?
4. 数组的splice方法应该注意些什么问题?
5.如何解决跨域问题?
6.let const var的区别?
7.如何求解数据类型?
8 .true && 0 和 true && false分别返回什么?
9. 如何进行深拷贝?
10. js基本数据类型和引用数据类型分别有哪些？
11.怎么理解html标签语义化?
12.html有哪些语义化标签?
13.bfc是什么?有什么作用
14. flex有些什么属性?
15. 标准盒模型和怪异盒模型的区别?
16. js中Map和Set有什么区别?
17.async await如何处理异常?
18 .css选择器的优先级？
19.什么是js的事件循环机制?
20. 301和302的区别?

二. 笔试题目

1.下列代码的输出结果是？
2.如何获取当前月份
3.对下列代码求解数据类型
4.给id为foo的元素的第一个ul的偶数位置li设置文字颜色为红色
5.js如何获取元素
6.找出字符串a在字符串b中的位置
7.如何将一个整数转为二进制数

---

1.了解css3动画特效怎么实现的吗?

css3动画特效主要实现方式有两种：

1.通过animation: 动画名称 duration 搭配@keyframes等属性设置
2.通过transition: 要修改的属性 duration liner等属性设置
两者区别：前者不需要触发，定义动画后自动播放，后者需要触发一个事件(若要使用js灵活设定动画，用transition)

2.css3新特性有哪些?

border-radius: 圆角边框属性
background-color: 背景色
text-shadow: 文字阴影
animation:动画
transition: 过渡属性
liner-gradient: 渐变色
transform: 2D效果等

3.写过一些什么特效?

平移： transform: translateX(200px)/translateY(200px)/translate(200px. 200px)
旋转：transfrom: rotateX(45deg)/rotateY(30deg)/rotateZ(45deg)
缩放：transform: scale(2, .5)
倾斜： transform: skew(45deg, 45deg)

4. 数组的splice方法应该注意些什么问题?

splice(index, howmany, item1, item2, …)
当howmany为0时，相当于数组的增加
howmany不为0时，做数组的删除操作，删除当前index位置处的元素，并且splice是直接对原数组进行操作

5.如何解决跨域问题?

1.CORS跨域：支持任何HTTP类型的跨域，通过在后端请求头中设置‘Access-Control-Allow-Origin’即可实现前端跨域
2.JSONP跨域：只支持Get请求类型的跨域，步骤：
1）通过添加script标签
2）设置src属性
3）执行回调函数

6.let const var的区别?

1.作用域不同：var定义的变量一般是全局的作用域，let和const是块级作用域，只在某一区域内起作用
2.声明提升：var定义的变量有声明提升，let和const则没有
3. const定义的是常量，在定义就要赋值，并且不能再被修改，否则会报错，let定义的变量可以再对其重新修改值

7.如何求解数据类型?

1.typeof求解：缺点：只能求解简单的数据类型

typeof 2 // number
typeof [1, 2, 3] // object

2.instance of

var num = 5
var arr = [1, 2, 3]
num instanceof Array // false
arr instanceof Array // true

注意：数组 instanceof Object 也是true

3.constructor

var num = 3
num.constructor === String // false
num.constructor === Number // true

4.Object.prototype.toString.call()

var num = 3
var arr = [1, 2, 3]
Object.prototype.toString.call(num) // [object Number]
Object.prototype.toString.call(arr) // [object Array]

8 .true && 0 和 true && false分别返回什么?

// 布尔值和Number比较，会被隐式转化为Number在进行比较
true && 0 // 0
true && false // false

9. 如何进行深拷贝?

使用JSON.parse(JSON.stringify())

10. js基本数据类型和引用数据类型分别有哪些？

基本数据类型：String, Number, Boolean, Undefined, Null, Symbol(es6新增)；特点：值与值之间相互独立，互不影响
引用数据类型：Array, Object，Function等

11.怎么理解html标签语义化?

1.根据内容选择合适的标签
2.有利于浏览器解析
3.有利于SEO优化
4.有利于开发者开发和维护

12.html有哪些语义化标签?

<header></header>
<footer></footer>
<nav></nav>
<section></section>
<aside></aside>
<section></section>

13.bfc是什么?有什么作用

bfc是块级格式上下文，是页面中的一块渲染区域，有自己的一套渲染规则，决定了其子元素如何进行定位，也决定了元素间的相对位置关系
触发BFC：
1.display不为none;
2.position不为static和relative
3.overflow不为visible
4.float不为none
作用：清除浮动，解决margin重叠问题，自适应两栏布局等

14. flex有些什么属性?

display: flex 设置弹性盒
flex-direction：设置弹性盒方向
flex-wrap:是否换行
flex:1充满父元素剩余空间
justify-content: flex-start/flex-end
align-item: flex-start/flex-end
flex-shrink等

15. 标准盒模型和怪异盒模型的区别?

计算元素的宽度不同
标准盒模型：
左右margin+左右border+左右padding+width
怪异盒模型：
左右margin+width(包括了左右border和左右padding)

16. js中Map和Set有什么区别?

Map类似于对象，主要用于存储key-value键值对，有get(),set(),has(),clear(),delete()等方法

var map = new Map()
map.set('js', 'vue') // Map(1) {"js" => "vue"}

Set类似于数组，允许存储任何类型的唯一值，即集合中所保存的元素是不允许重复的，可用于数组去重

var arr = [1, 3, 5, 1, 2, 4, 3]
new Set(arr) // Set(5) {1, 3, 5, 2, 4}

17.async await如何处理异常?

async 和 await是基于promise进行封装的异步请求
async总是会返回一个promise对象
await总是会接收一个promise返回回来的状态
当 await接收的是一个resolved状态的promise，无论有无catch都会直接得到结果
当await接收到的是一个rejected状态的promise，catch捕获异常，返回异常结果

18 .css选择器的优先级？

!important > 行内样式(1000) > id选择器(100) > class选择器(10) = 伪类选择器 > 标签选择器(1) > 通配符选择器

注意：通配符选择器没有权重

19.什么是js的事件循环机制?

js是单线程的，主线✖️只会做一件事，就是从消息队列里去取消息并执行消息。当消息队列为空时，主线程会等待，直到消息队列不为空，再去读消息并执行消息，这就是js的事件循环机制

20. 301和302的区别?

301是永久重定向，资源永久被转移到另外一个地址
302临时重定向，资源临时被转移到其他位置

笔试部分

1.下列代码的输出结果是

function aa () {
    return {
         test: 1
     }
 } 
 console.log(aa())  // object

解析：因为函数aa返回一个{test: 1}对象，typeof求解对象类型为object

2.如何获取当前月份

new Date().getMonth() + 1

解析：getMonth月份是从0开始的，所以需要加一

3.对下列代码求解数据类型

 let arr = [1, 2, 3, 4]
 console.log(typeof arr) // object

解析：typeof只能求解简单的数据类型，数组是引用类型，只能求解到object

4.给id为foo的元素的第一个ul的偶数位置li设置文字颜色为红色

  <div id="foo">
        <p>写点东西</p>
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
            <li>dd</li>
            <li>ee</li>
        </ul>
        <p>写点东西</p>
        <ul>
            <li>aa</li>
            <li>bb</li>
            <li>cc</li>
        </ul>
    </div>

答案：主要考察css选择器

 <style>
     #foo ul:nth-child(2) li:nth-child(even) {
        color: red
     }
  </style>

5.js如何获取元素

 <div id="foo"></div>
 
A: document.getElementById("foo")
B: document.getElementById("#foo")
C: document.getElementsByTagName("div")

答案：B,C

6.找出字符串a在字符串b中的位置

let a = 'hello'
let b = 'hello world'
console.log(b.indexOf(a))

考察字符串的indexOf方法，从头开始，第一次出现某个元素的下标

7.如何将一个整数转为二进制数

let num = 4
console.log(num.toString(2)) // 100

注意：parseInt(str, radix)是将字符串类型的值转为整型