九月 前端面试笔试总结记录

本文记录并总结了一些九月本人参加面试当中遇到的题目，因为本人水平也有限，这些题目对应的解答一些是我本身的思路或者回来以后进行查阅总结获得的，可能并不是最佳答案。分享出来给你们参考，若是出现错误，请大佬们多多见谅并勘误，感谢。

 

9.4 面试题目

1. 数字如何转换成字符串？

• 使用 toString()方法 / String() 转换 / JSON 格式化

a = 1
typeof a //"number"
b1 = a.toString()
b2 = String(a)
b3 = JSON.stringify(a)
typeof b1 //"string"
typeof b2 //"string"
typeof b3 //"string"

• 从新赋值

a = 1
typeof a //"number"
b = a + ''
typeof b //"string"

2. 字符串转换成数字呢?

a = "1"
b1 = Number(a)
b2 = parseInt(a) 
b3 = JSON.parse(a)

 

3. 数组排序，从大到小，如何实现？

var arr = [7,2,3,6,8,1]
arr  //(6) [7, 2, 3, 6, 8, 1]
var arr2 = arr.sort().reverse()
arr2  //(6) [8, 7, 6, 3, 2, 1]

 

改进版

var arr = [7,2,3,6,8,1,11,22]
var arr2 = arr.sort(function(v1,v2){
      return v1-v2
}).reverse()

 

4. 要取一个小数的小数点后四位，有什么方法？

• 不四舍五入

① 使用 Math.floor

var num = 3.141592653
var result = Math.floor (num * 10000) / 10000

② 当作字符串，使用正则匹配

var num = 3.141592653
var regex = /^\d+(?:\.\d{0,4})?/
var result = num.toString().match(regex)

• 经过四舍五入

var num = 3.141592653
var result = num.toFixed(4)  //"3.1416"

5. HTML 中若是我有不少 checkbox 表单，如何快速的全选他们，或者反全选他们？

使用 jQuery 进行 DOM属性 的操做，使用prop方法

//全选
$("#all").click(function(){
    //获取全部的checkbox
    var ches=$("input[type='checkbox']")
    //遍历全部的checkbox,重设选中状态为选中
    ches.each(function(){
    $(this).prop("checked",true)
  })
})              

//反选
$("#unall").click(function(){
    //获取全部的checkbox
    var ches=$("input[type='checkbox']")
    //遍历全部的checkbox,重设选中状态为不选中
    ches.each(function(){
    $(this).prop("checked",false)
  })
})  

6. 原生 ajax 会写么？

var xhr = new XMLHttpRequest()
xhr.open('GET','/xxx')
xhr.send()
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
      if((xhr.status >= 200 && xhr.status < 300) || xhr.status === 304){
        console.log(xhr.responseText)
    }else{
        console.log('error')
    }
  }
}
xhr.onerror = function(){
  console.log('error')
}

 

7. 何时http请求结束？

具体参考：Ajax状态值及状态码
在AJAX实际运行当中，对于访问XMLHttpRequest（XHR）时并非一次完成的，而是分别经历了多种状态后取得的结果，对于这种状态在AJAX中共有5种，分别是。
0 - (未初始化)尚未调用send()方法
1 - (载入)已调用send()方法，正在发送请求
2 - (载入完成)send()方法执行完成，
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成，能够在客户端调用了
对于上面的状态，其中“0”状态是在定义后自动具备的状态值，而对于成功访问的状态（获得信息）咱们大多数采用“4”进行判断。


8.如今要作一个 相似 nav 或者 tab 的效果，点击一个元素的时候，让他高亮，他的同级元素则没有效果，用jQuery，代码应该是怎样的？

$('.mod-tab .tab').on('click',function(){
  $(this).addClass('active')  .siblings().removeClass('active')
}

 

9.17 笔试题目

HTML 题目

1. meta 标签的做用
提供有关页面的元信息，好比针对搜索引擎和更新频度的描述和关键词。


2. 有哪些资源标签？以及其放置方式？
style、script？

若是在 head 里有 JS文件，那么必须是先要把这些文件都下载，解析，而后执行以后，程序才会继续往下走。这样势必会影响速度。
因此有一种方法是加 defer 这个属性。这个属性的用途是代表脚本在执行时不会影响页面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。
但采用这种方法，会有一种缺陷。在有些浏览器中。并不会按照你本身文件的顺序执行下来。而且有的浏览器还会忽略这种属性。
因此最好不要采用这样的方法。因此我的推荐将引入的文件放到后面。对于本身写的 JS 代码，若是说这些代码要用到正文里的东西，
那么也建议写在后面。由于当运行 JS 代码的时候，若是你用到的正文中的某个东西，可是正文没有加载，因此有可能会出错。
但在现实中，更多的时候咱们是采用事件驱动这种形式。因此这样的问题不会太大。主要仍是速度。放在后面，速度可能更快。

 

CSS 题目

1. css的做用域是？执行顺序？优先级？
!important > id > class > tag
important 比 内联优先级高

2. 定位 position 的种类及区别？
静态定位：默认布局方式，position: static;
相对定位：相对默认的布局位置进行定位，position: relative;
绝对定位：绝对定位元素脱离正常文档流，position: absolute;
固定定位：相对浏览器窗口进行定位，position: fixed;
粘性定位：默认状况下表现为相对定位，当浏览器窗口顶端的元素距离等于 top 属性的时候，转变为固定定位，positon: sticky;


3. 如何让块级元素像行内元素同样排列？

.box {
  display: inline-block;
}

http://jsbin.com/kokocikaco/2/edit?html,css,output

JavaScript 题目

1. 1==='1' , 1 === 1, {} === {} 分别会返回什么？为何？
1==='1' 输出 false，由于严格比较模式，即比较值，也比较类型。
因此 1 === 1 输出 true。
{} === {} 输出为 false，由于 {} 的类型是 Object，是一个引用类型。因此两个 {} 指向的内存地址不一样。

2. 为何要使用闭包？写一个闭包。

• 闭包能够读取函数内部的变量，可让变量的值始终保持在内存中。
• 避免使用全局变量，实现数据隐藏、封装。

// 封装一个 Car ，使用了闭包
var Car = (function(){
  var speed = 0
  function set(s){
    speed = s
  }
  function get(){
    return speed
  }
  return {
    set: set,
    get: get
  }
})()

Car.set(30)
Car.get()

 

3. 已知一个对象 a ，在不知道第一个属性键名的状况下，如何获取其第一个属性的值？

var num = Object.keys(a)[0]  //找 key
console.log(a[num])  //再找 values

//
Object.values(a)[0]  //直接找 values

// 但对象是无序的，因此这道题题干值得讨论

4. 将数列 [2，0，1，8，0，2，1，5] 去除重复项并按降序排序

var arr =  [2,0,1,8,0,2,1,5]
var res = []

for(var i=0 ; i < arr.length ; i++) {
  if(res.indexOf(arr[i]) == -1) {
    res.push(arr[i])
  }
  res.sort().reverse()
}

console.log(res)

// 或者使用
var arr =  [2,0,1,8,0,2,1,5]
Array.from(new Set(arr))

 

5. 去重数组

// ES6 实现数组去重
let array = [1, 1, 1, 1, 2, 3, 4, 4, 5, 3]
let set = Array.from(new Set(array))

console.log(set)

// 数组中包含对象的去重
let arr = [{a:'1'},{a:'1'},{b:'2'},{b:'2'},3,4,5,5,6]
let oldArrStringf=[]
arr.forEach((item)=>{oldArrStringf.push(JSON.stringify(item))})
let newArrs = Array.from(new Set(oldArrStringf))

console.log(newArrs)

 

 

9.25 面试题目

1. es五、es6 数组的方法

• .indexOf / .lastIndexof 该方法用于查找数组内指定元素的位置，查到第一个以后返回其索引，没有找到则返回-1。
• forEach 遍历数组，参数为一个回调函数，回调函数有三个参数。当前元素 value、当前元素索引值 i、整个数组 array。
• map 遍历数组。遍历数组，回调函数。返回值作操做以后组成一个新数组返回，新数组索引结构和原数组一致，原数组不变。
• every、some 逻辑断定，回调函数返回一个布尔值。
• filter
• reduce 遍历数组，调用回调函数，将数组元素组合成一个值，不影响原数组

2. 哪些方法是改变原数组的？哪些不改变。

改变原数组：forEach、sort、reverse、push、pop、shift、unshift、splice
不改变原数组：map、filter、reduce、concat、slice、join

es6 改变原数组：copyWithin()、fill
es6 不改变原数组：Array.from()、find、flat

3. call、apply 和 bind的用法和区别

这三者都是用来改变函数的this对象的指向的。call 和 apply 直接调用函数，而 bind 返回一个新函数，这个新函数会 call 原来的函数，参数由你指定。

• call 跟 apply 的用法几乎同样，惟一的不一样就是传递的参数不一样，call 只能一个参数一个参数的传入。

fun.call(thisArg, arg1, arg2, ...)

• apply 则只支持传入一个数组，哪怕是一个参数也要是数组形式。最终调用函数时候这个数组会拆成一个个参数分别传入。

fun.apply(thisArg, [argsArray])

• bind 方法，他是直接改变这个函数的 this 指向而且返回一个新的函数，以后再次调用这个函数的时候 this 都是指向 bind绑定的第一个参数。bind 传餐方式跟 call 方法一致。

4. let 和 var 的区别

let 拥有本身的块级做用域，不会提高变量。

var 定义的变量，做用域是整个封闭函数，是全域的 。
let 定义的变量，做用域是在块级或是子块中。

var: 变量能够屡次声明
let : 变量只能声明一次

5. vue 中父子组件之间传值是怎样进行的

• 父组件经过属性的形式向子组件进行传值。
• 子组件经过事件触发的形式向父组件传值
• 父子组件传值时，有单向数据流的规定。父组件能够向子组件传递任何的数据，但子组件不能修改父组件传递过来的数据。若是必定要进行修改，只能经过修改复制副本的方式进行。

6. 小程序有哪几种跳转页面的方式

wx.switchTab：跳转 app.json 的页面（路由方式）
wx.navigateTo：跳转到指定页面，保存当前页面。
wx.redirectTo：跳转到指定页面，关闭当前页面。
wx.navigateBack：返回以前页面,跳转以前的页面

 

9.28 面试题目

1. 简单的作下自我介绍吧。
简单的作了自我介绍，除了会的技能以外，主要讲述了为何转业想作前端。并提到了阮一峰和借鉴他的博文等。

以后开始问技术相关的问题：

2. HTML5 新增了哪些标签 ? CCS3新增了哪些属性 ?

HTML5 新增了 section、aside、nav、figure、canvas、aduio、email 等等。它们有的是结构标签、有的是功能标签、有的是媒体标签。

CCS3 新增的属性：边框类的有 box-shadow、border-radius ；背景类的有 background-size；文字效果类的有 text-shadow、word-wrap；CSS3 2D转换类的 transform、translate()等、CSS3 3D转换类的 rotateX()、rotateY()；动画类 @keyframes 关键帧动画：animation等；用户界面类有盒模型 box-sizing。除此以外 CSS3 还新增了一系列的伪类选择器。

3. 什么选择器可让我选择 50 个div标签的第 10 个 ?

:nth-of-type(10)
JSbin 示例

4. HTML5 以前头部为何要写 w3c 标准？

HTML5 不基于 SGML（标准通用置标语言）。所以不须要对DTD（文档类型定义）进行引用，可是须要 doctype 来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而 HTML4.01 基于 SGML ，因此须要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。

5. JS 的基本数据数据类型 ？

基本数据类型有 Undefined、Null、Boolean、Number和String；引用数据类型有 Object。es6 中新增了一个 数据类型 Symbol。

6. 那 es6 还新增了哪些东西？说你熟悉的举例

• 新增了 let、const
• 新增了解构赋值；还有字符串、数组、对象的诸多特性和方法
• 新增了模块化功能写法 export 和 import
• 新增了 Class 类继承的语法糖
• 新增了 Promise 处理异步
• 新增了箭头函数 =>

7. 箭头函数里面的 this 是什么？

箭头函数自己是没有 this 和 arguments 的，在箭头函数中引用 this 其实是调用的是定义时的上一层做用域的 this。

8. 函数柯里化了解吗？

在一个函数中首先填充几个参数，而后再返回一个新函数。就被称为柯里化。

9. undefined === NaN 结果是什么？NaN === NaN 呢？

都是 false

10. window.onload 和 $(document).ready 有什么区别？

• 执行时间不一样：
  window.onload 必须等到页面内包括图片的全部元素加载完毕后再去执行。
  $(document).ready() 时 DOM 结构回执完毕后就执行，没必要等到加载完毕。
• 编写个数不一样：
  window.onload 不可同时编写多个，若是有多个 window.onload方法，只会执行一个。
  $(document).ready() 能够同时编写多个，而且能够获得执行。

举例：有一个大型的图库网站，为网页中全部图片添加某些行为，例如单击图片后让它隐藏或显示。若是使用 window.onload 方法来处理，那么用户必须等到每一幅图片都加载完毕后，才能够进行操做。若是使用 jQuery 中的 $(document).ready() 方法来进行设置，只要 DOM 就绪时就能够操做了，不须要等待全部图片下载完毕。

11. jQuery 如何中止一个正在进行的动画？用什么方法？

• .stop()： 中止当前正在运行的动画；能够传递两个参数，clearQueue 和 jumpToEnd。这两个参数分别决定是否清除动画队列中未执行的动画 和 决定是否展现当前一帧动画是否执行到最后。默认值都为 false。
• .finish()： 中止当前动画，并清除 动画队列 中全部未完成的动画，最终展现 动画队列 最后一帧的最终状态。

 

12. 说一说你对 vue 的理解

是一个轻量的 MVVM 框架。写程序的时候更少的去关注 DOM 的改动，而是将重点放在数据之上。双向绑定完成以后，数据的改变会驱动页面显示的变化。当一个站点或者网站拥有极大数据量，且点击一个区块会发生不少页面数据改变的时候。这个网站就可使用 vue 框架。而且 vue 的组件化的写法极为友好，也是分为 template 、script 、style 将 HTML、JS、CSS 放置到一个 vue文件之中。而且有 vuex 和 vue-router 等机制。

13.说一说你对 vuex 的理解

vuex 就是一个仓库，仓库里面放了不少对象。其中 state 就是数据源存放地，对应于与通常 Vue 对象里面的 data。使用 vuex 能够简单、快速的完成兄弟组件之间的传值。不用通过一个中间组件再传递一次值或者事件。下降了耦合，也有很好的可维护性、可读性。

14.mutation 是干什么用的

vuex 中的几种属性之一。

有时候，但愿改变 State 里面的数据。不能直接让组件去改动数据。必须经过相应的流程完成。流程以下：
若是有异步操做或者复杂的同步操做，那么将它们放置在 Actions ，组件先去调用 Actions ，Actions 紧接着去调用 Mutations， 而 Mutations 逐个的对 State 的修改。
也能够越过 Actions ，让组件直接调用 Mutations ，修改 State 里面的数据。

15. mapAction 是什么

是 vuex 的一种方式。页面经过 mapAction 异步提交事件到Actions。Actions 经过 commit 把对应参数同步提交到Mutations。Mutations 则去修改 State 中对应的值。

16. 若是我打包生成了一个项目，生成了一个JS文件很大，每次都要加载这个大容量的JS么？怎么优化?

使用 vue-cli webpack 生成的项目 JS 文件夹里面含有 app.js、manifest.js 和 vendor.js。manifest.js 是 webpack 打包生成的配置文件，vendor.js 放置的是各个组件公用的代码。项目的各个业务逻辑代码都被放置到 app.js 之中。

若是生成了一个很大的 app.js 文件。按照默认配置打包的状况下，进入首页就会完整的加载这个 app.js 文件。这个时候能够经过异步组件实现按需加载来对这个问题进行优化。

在 router 的 index.js 中将 import from 的写法变成一个 component 箭头函数的返回值。就能够完成异步组件的实现。

同步

异步

但当生成的 JS 文件很小的时候，就不建议用异步拆分了。这样会额外的发起 http 请求。因此须要权衡代价。

17.跨域如何实现？你通常什么方式跨域

JSONP、CORS、postMessage均可以实现跨域。
但 JSONP 只能实现 get 请求。

vue 跨域解决方法
vue-cli 工具 proxyTable 设置 changeOrigin: true，仅限开发环境。
http://www.javashuo.com/article/p-vmfhiwmc-ey.html