前端面试题总结

1.普通数据类型

(1)普通数据类型有哪些?

字符串型 string

数值型 number

undefined

null

布尔型 boolean

(2如何检测类型?

console.log(typeof data)

instanceof

Array isArry()

(3)如何转换数据类型?

转字符串

数据.toString()

String(数据)

隐式转换: 数据+' '

转数值

Number(数据) '123aaa'转完之后是NaN

parseInt(数据) '123aaa'转完之后是123

parseFloat(数据)

隐式转换:数据*/-

转布尔值

Boolean(数据)

布尔值false的有undefined, null, ' ', NaN, 0

2.this

(1)this指向

全局中, this 指向 window
函数中,严格模式下, this 指向 undefined ;非严格模式下, this 指向 window
定时任务中, this 指向 window ( setTimeOut , Interval )
绑定事件中, this 指向事件源

对象中, this 指向这个对象

对象:无序键值对的集合

a. 对象字面量

var obj = {
  name: 'wkk',
  age: 18,
  skill: function () {
    console.log('敲代码')
  }
}
console.log(obj.name)
console.log(obj['age'])

//遍历对象
for (var k in obj ) {
  console.log(k)
  console.log(obj[k])
}

b. new Object()

var obj = new Object()
obj.name = "wkk"
obj.skill = function () {}

c.构造函数

构造函数中, this 指向 new 出来的实例

//构造函数
function Dog (name, color, voice) {
   this.name = name           //this指向 new 出来的实例
   this.color = color 
   this.bark = function (voice) {
     console.log(voice)
   }
 }
 var wkk=new Dog('wkk','灰色')
 console.log(wkk)
 wkk.bark('haha')

new关键字执行了哪些过程?

(1) 先创建了一个空对象

(2) 然后让 this 指向这个空对象

(3) 给属性赋值,给方法赋值

(4) 把结果 return 出来

(2)改变this的方法及区别

call 立即执行,第一个参数修改 this 指向,之后的用 , 隔开
apply 立即执行,第一个参数修改 this 指向,第一个之后的用[ ]包裹
bind 不会立即执行,第一个参数修改 this 指向,之后的用 , 隔开

3.前端模块化

应用分成了多个模块,就像魔方一样,

如果没有模块化,就会出现文件依赖,命名冲突的问题, JS 本来是没有前端模块化这个概念的

为了解决文件依赖,命名冲突的问题,js社区提出了前端模块化这个概念

主要流行的有 3 个:

前台: AMD (异步模块定义)(代表产品 Require.js) , CMD (通用模块定义) (Sea.js),

后台: CommonJS 规范 (node.js)

比如在 node.js 中规定,一个文件就是一个模块,模块的外部是访问不到内部成员的, exports,module.exports 是导出模块, require 是导入模块

之后 ES6 支持了前端模块化:

每一个js就是一个独立的模块,可以通过 import 导入模块, export.default 导出模块

const a=1
const b="ABC"
//默认导出 001.js
export.default {
  a,b
}
//按需导出 001.js
export var c='啦啦啦'
export var d='哈哈哈'

//-------------------------------------------------

//默认导入和按需导入 index.js
import m1, {c,d} from '001.js'
console.log(m1)     //{a:1,b:'ABC'}
console.log(c)     //啦啦啦

4.浏览器私有前缀

为了兼容老版本的写法

-webkit- 谷歌(blink),苹果(webkit)
-moz- 火狐(gecko)
-ms- IE(trident)
-o- 欧鹏(presto,现在blink)

5.BFC

块格式化上下文

可以理解为是一个独立的作用域.该区域内所有的布局不会影响到区域外元素的布局

怎么产生一个BFC?

float的值不为空
position得值为absoult或fixed
display的值是inline-block...
overflow的值不是visible

6.语义化标签

header, footer, aside, nav, artile, section, address,

易于SEO搜索引擎优化,便于维护

7.数组和字符串的内置方法

数组:

翻转( reverse )
排序( sort )
追加( push 后加, unshift 前加)
删除( pop 后删, shift 前删)
获取索引( indexof , lastindexof )
截取( slice (开始,结束), splice (开始,个数))
拼接( concat )

字符串:

根据元素找索引( indexof )

根据索引找元素( charAt )
截取( slice (开始,结束) , substr (开始,个数))
拼接( concat )
替换( replace )
分割为数组( split )

8.js执行机制(宏任务和微任务)

js 是单线程的,分为同步任务和异步任务(定时器, ajax ,事件绑定),同步任务在执行栈中执行,异步任务在执行队列中执行.

先执行执行栈中的,然后把执行队列中的放到主线程中执行.

异步任务又分为宏任务和微任务。先执行微任务，再执行宏任务，同级别按顺序执行。

宏任务：script (可以理解为外层同步代码), ajax , setTimeOut/setInterval , 文件操作等；

微任务：promise ，.then , .catch , .finally , process.nextTick 等；

9.事件流

三个阶段

1.事件捕获阶段

2.事件执行阶段

3.事件冒泡阶段

阻止事件默认行为(preventDefault)

阻止事件冒泡(stopPropagation)

原生 js 中, return false 只阻止事件默认行为,不阻止事件冒泡; jquery 中, return false 都阻止.

事件委托

要给子元素绑定事件时,可以将事件统一绑定给它的父元素带代理完成事件.

点透问题

层级较高的定位元素绑定 touchstar 事件,会同时触发层级低的元素,发生堆叠.

解决: fastclick第三方 js 库(还可以解决 300ms 延时)

10.本地存储

sessionstorage

5M 存储在浏览器内存中离开页面消失只限当前页面使用

localstoage

20M 存储在计算机硬盘永不消失当前浏览器的所有页面使用

.setIetm(k,v) .getIetm(k) .removeItem(k) .clear()

11.web组成,顶级对象,隐式迭代,链式编程

web标准构成: 结构HTML, 表现css, 行为 js

h5: html5, css3 , js

js: ECMAscript , DOM(document), BOM(window)

顶级对象: jquery ($,jquery)

node.js(global)

js入口函数: window.οnlοad=function () {} 结构和全部资源执行完成后执行目的是为了先加载页面再进行js；

DOMContentLoaded 结构完成就执行(图片特别多时使用)
jquery入口函数: $(function () { })