参考：火辣辣前端博客
面试过程中遇到的问题，自己总结整理，当做一个自省和知识的梳理。
一 css问题：
1 浏览器内核以及优缺点？
2 html的title和alt有什么区别？
alt:不能显示图像时的用户代理，用来指定替换文字
title:为设置该属性的元素提供建设性的信息
3 行内元素？块级元素？盒模型？
行内元素有：span,a,button
块级元素：div,p
盒模型：利用box-sizing设置
4 css的reset的作用和用途
为了让页面获得浏览器跨浏览器的兼容性，需要用重置文件css代码覆盖浏览器默认的样式来统一样式。
5 css选择器有哪些？优先级如何？
id选择器，类选择器，标签选择器
！important>行内样式>id>.>标签>*
6 sass和less的区别
sass和less主要区别在于实现方式， less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。当然还有一些语法上的不同，可以对比看一下两个文档。
二 js问题：
1 ajax使用步骤
创建xmlhttprequest对象
设置回调函数
使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器
使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应
在回调函数中针对不同的响应状态进行处理
2 jsonp跨域请求
利用在页面中创建
3 几种跨域请求方式
同源策略的限制，即必须同一协议、同一域名和同一端口才可以进行请求数据交互
基于Script标签请求
基于jQuery封装的ajax方法实现跨域
基于iframe实现跨域请求子域数据
4 类型检测typeof和instanceof区别
typeof操作符返回一个字符串，表示未经计算的操作数的类型。
instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置
5 localStorage，sessionStorage和cookie,session的区别
cookie用来跟踪浏览器用户身份的会话方式，大小4kb，保存在浏览器端；
session用来跟踪浏览器用户身份的会话方式，没有大小限制，保存在服务器端；
localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失。localStorage除非主动删除数据，否则数据永远不会消失。大小5MB；
sessionStorage的生命周期是在仅在当前会话下有效。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的。大小5MB；
6 js的typeof返回的数据类型有哪些？
typeof操作符返回一个字符串，表示未经计算的操作数的类型
默认数据类型有
7 js如何阻止事件冒泡和默认事件？
event.stopPropagation();//阻止冒泡事件，但是不阻止默认事件
event.preventDefault();//阻止事件默认行为
return false;//原生只阻止默认事件，jQuery中阻止冒泡和默认事件
8 js编写一个数组去重？
方法可以有很多种，可以参考数组去重
9 检测变量作用域
注意观察两者的不同
var arr=[]
for (var i=0;i<10;i++) {
arr[i]=function (){
console.log(i);
}
}
arr6;//>10
var arr=[]
for (let i=0;i<10;i++) {
arr[i]=function (){
console.log(i);
}
}
arr6;//>6
10 关于typeof()类型检测
let a = 1;
let b = [1];
let c = “1”;
let d = null;
let f = new Object();
let e = function(){};
let g = false;
console.log(typeof a);//>number
console.log(typeof b);//>object
console.log(typeof c);//>string
console.log(typeof d);//>object
console.log(typeof f);//>object
console.log(typeof e);//>function
console.log(typeof g);//====>boolean
11 splice()方法通过删除或替换现有元素或者原地添加新的元素来修改数组,并以数组形式返回被修改的内容。此方法会改变原数组。
toString()方法返回一个表示该对象的字符串
var months = [‘Jan’, ‘March’, ‘April’, ‘June’];
months.splice(2,3, ‘Feb’);
console.log(months.toString());
12 关于异步处理函数
function promise1(ms){
return new Promise(function(resolve, reject) {
setTimeout(function() {
resolve(ms);
}, 1000);
});
}
async function func2(str,ms){
await promise1(ms);
console.log(str)
}
func2(‘hello’,‘10’)//===>10 hello
13 如何判断数组的数据类型
基本数据类型undefined,null,string,number,boolean用typeof就可以判断出来了，但是Array和object判断出来结果都是object，故无法使用这个判断，判断方法如下：
方法一：使用instanceof
instanceof 用于判断一个变量是否某个对象的实例，左边操作数是一个对象，右边操作数是一个函数对象或者函数构造器。原理是通过判断左操作数的对象的原型链上是否具有右操作数的构造函数的prototype属性
let arr=[]
console.log(arr instanceof Array)//true
let obj=new Object()
console.log(obj instanceof Object)//true
方法二：使用constructor
constructor 属性返回对创建此对象的数组函数的引用，就是返回对象相对应的构造函数
console.log([].constructor == Array); //true
console.log({}.constructor == Object); //true
方法三：使用Object.prototype.toString.call(arr) === '[object Array]'方法
14 内存泄漏问题
https://www.jianshu.com/p/6eaa50cb0818
15 js与ts区别，为什么选用ts，好在哪里？
16 ts中public和private变量编译完之后是什么，有什么区别？
17 怎么处理兼容的问题？
用Babel 等工具链，主要用于在当前和旧的浏览器或环境中，将 ECMAScript 2015+ 代码转换为 JavaScript 向后兼容版本的代码。
18 es6 新特性
19 前端加密算法
参考文章
20 严格模式有啥影响？
ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。
严格模式主要有以下限制。
- 变量必须声明后再使用
- 函数的参数不能有同名属性，否则报错
- 不能使用with语句
- 不能对只读属性赋值，否则报错
- 不能使用前缀 0表示八进制数，否则报错
- 不能删除不可删除的属性，否则报错
- 不能删除变量delete prop，会报错，只能删除属性delete global[prop]
- eval不会在它的外层作用域引入变量
- eval和arguments不能被重新赋值
- arguments不会自动反映函数参数的变化
- 不能使用arguments.callee 不能使用arguments.caller
- 禁止this指向全局对象
- 不能使用fn.caller和fn.arguments获取函数调用的堆栈
- 增加了保留字（比如protected、static和interface）
21 JS中的模块规范（CommonJS，AMD，CMD）区别
简单粗略总结：
CommonJS：针对服务器端，node.js遵守可直接使用，浏览器端需要借助require.js或者Browserify插件；
AMD：是"Asynchronous Module Definition"的缩写，意思就是"异步模块定义"。它采用异步方式加载模块，模块的加载不影响它后面语句的运行
CMD：大名远扬的玉伯写了seajs，就是遵循他提出的CMD规范
参考文章
三 vue问题：
1 vue生命周期
lifecycle
2 vue组件注册方式
局部注册
var ComponentA = { /* … / }
var ComponentB = { / … */ }
new Vue({
el: ‘#app’,
components: {
‘component-a’: ComponentA,
‘component-b’: ComponentB
}
})
全局注册
Vue.component(‘component-a’, { /* … / })
Vue.component(‘component-b’, { / … / })
Vue.component(‘component-c’, { / … */ })
new Vue({ el: ‘#app’ })
3 v-show和v-if指令的相同点和不同点？
v-show通过display:none控制
v-if通过dom元素生成去除控制
4 v-router有哪几种导航钩子？
前置守卫beforeEach
后置钩子afterEach
组件内的导航钩子主要有这三种：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave
5 vuex是什么？
vuex是核心状态管理模式
6 Vue的好与不好，从架构思路层考虑
MVVM模式，高性能高效率框架，
M： Model (数据) => 数据保存
Model(模型)表示应用程序核心(比如数据库记录列表)。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
V： View (视图) => 用户界面
View(视图)显示数据(数据库记录)。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
VM：ViewModel 是它为双向绑定，View的变动自动反映在ViewModel，反之亦然。V和M不直接交互，通过VM传递，即M-VM-V
核心：关注Model的变化，让MVVM框架利用自己的机制去更新DOM，让开发者从操作DOM的繁琐解脱。
vue两大特点：响应式编程、组件化
vue的优势：轻量级框架、简单易学、双向数据绑定、组件化、视图、数据和结构的分离、虚拟DOM、运行速度快
缺点：页面切换快 ，首屏时间稍慢，SEO差 js 渲染
7 项目封装，技术选型考虑
8 Vue虚拟dom
扫一扫
415
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
