MENU
- 01、HTML基础
- 02、CSS基础
- 01、介绍一下CSS的盒子模型
- 02、line-height和heigh区别
- 03、CSS选择符有哪些?哪些属性可以继承?
- 04、CSS优先级算法如何计算?
- 05、用CSS画一个三角形
- 06、一个盒子不给宽度和高度如何水平垂直居中?
- 07、display有哪些值?说明他们的作用。
- 08、对BFC规范(块级格式化上下文:block formatting context)的理解?
- 09、清除浮动有哪些方式?
- 10、在网页中的应该使用奇数还是偶数的字体?为什么呢?
- 11、position有哪些值?分别是根据什么定位的?
- 12、写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
- 13、什么是CSS reset?
- 14、css sprite是什么,有什么优缺点
- 15、display: none;与visibility: hidden;的区别
- 16、opacity和rgba区别
- 03、JavaScript基础
- 01、延迟加载JS有哪些方式?
- 02、JS数据类型有哪些?
- 03、JS数据类型考题
- 04、null和undefined的区别
- 05、两等和三等有什么不同
- 06、JS微任务和宏任务
- 07、JS作用域考题
- 08、JS对象考题
- 09、JS作用域+this指向+原型考题
- 10、JS判断变量是不是数组,你能写出哪些方法?
- 11、slice是干嘛的、splice是否会改变原数组
- 12、JS数组去重
- 13、找出多维数组最大值
- 14、给字符串新增方法实现功能
- 15、找出字符串出现最多次数的字符以及次数
- 16、new操作符具体做了什么
- 17、闭包
- 18、原型链
- 19、JS继承有哪些方式
- 20、说一下call、apply、bind区别
- 21、sort背后原理是什么?
- 22、深拷贝和浅拷贝
- 23、localstorage、sessionstorage、cookie的区别
- 04、H5/C3
- 05、ES6
- 06、webpack
- 07、Git
- 08、Vue
- 01、Vue2.x生命周期有哪些?
- 02、第一次进入组件或者页面,会执行哪些生命周期?
- 03、谈谈你对keep-alive的了解
- 04、v-if和v-show区别
- 05、v-if和v-for优先级
- 06、ref是什么?
- 07、nextTick是什么?
- 08、路由导航守卫有哪些?
- 09、Vue中如何做样式穿透
- 10、scoped原理
- 11、Vuex是单向数据流还是双向数据流?
- 12、讲一下MVVM
- 13、双向绑定原理
- 14、什么是虚拟DOM
- 15、diff算法
- 16、Vue组件传值
- 17、介绍一下SPA以及SPA有什么缺点?
- 18、Vue双向绑定和单向绑定
- 19、props和data优先级谁高?
- 20、computed、methods、watch有什么区别?
- 21、Vuex
- 09、微信小程序
- 10、uni-app
- 11、性能优化
- 12、兼容性
- 13、网络请求
- 14、WEB安全
- 15、其他
01、HTML基础
1、行内元素有哪些?行内块元素有哪些?块级元素有哪些? 空(void)元素有哪些?
元素分类
1、行内元素:a标签、span标签、b标签、i标签、em标签等
2、行内块元素:img标签、input标签、button标签、select标签等
3、块级元素:div标签、p标签、li标签、ol标签、ul标签、h标签等
4、空元素:input标签、img标签、hr标签等
元素之间的转换
属性 转换 特性 display: inline;
把某元素转换成了行内元素 不独占一行的,并且不能设置宽高 display: inline-block;
把某元素转换成了行内块元素 不独占一行的,可以设置宽高 display: block;
把某元素转换成了块元素 独占一行,并且可以设置宽高
2、页面导入样式时,使用link和@import有什么区别?
1、link先有,后有@import,link的兼容性比@import好
2、加载顺序差别,浏览器先加载link标签,后加载@import
3、title与h1的区别、b与strong的区别、i与em的区别?
title与h1的区别
定义
title:概括了网站信息,可以告诉搜索引擎或者用户关于这个网站的内容主题是什么
h1:文章主题内容,告诉蜘蛛我们的网站内容最主要是什么
区别
title他是显示在网页标题上、h1是显示在网页内容上
title比h1添加的重要(title > h1)==>对于seo的了解
场景
网站的logo都是用h1标签包裹的
b与strong的区别
定义
b:实体标签,用来给文字加粗的。
strong:逻辑标签,用来加强字符语气的。
区别
b标签只有加粗的样式,没有实际含义。
strong表示标签内字符比较重要,用以强调。
题外话
为了符合css3的规范,b尽量少用该用strong就行了。
i与em的区别
定义
i:实体标签,用来做文字倾斜的。
em:是逻辑标签,用来强调文字内容的
区别
i只是一个倾斜标签,没有实际含义。
em表示标签内字符重要,用以强调的。
场景
i更多的用在字体图标,em术语上(医药,生物)。
4、img标签的title和alt有什么区别?
区别一
title : 鼠标移入到图片显示的值
alt : 图片无法加载时显示的值
区别二
在seo的层面上,蜘蛛抓取不到图片的内容,所以前端在写img标签的时候为了增加seo效果要加入alt属性来描述这张图是什么内容或者关键词。
5、png、jpg、gif、webp这些图片格式解释一下,分别什么时候用?
png
: 无损压缩,尺寸体积要比jpg/jpeg的大,适合做小图标。
jpg
: 采用压缩算法,有一点失真,比png体积要小,适合做中大图片。
gif
: 一般是做动图的。
webp
: 同时支持有损或者无损压缩,相同质量的图片,webp具有更小的体积。兼容性不是特别好。
02、CSS基础
01、介绍一下CSS的盒子模型
CSS的盒子模型有哪些
标准盒子模型、IE盒子模型
CSS的盒子模型区别
标准盒子模型:margin、border、padding、content
IE盒子模型 :margin、content(border + padding + content)
通过CSS如何转换盒子模型
box-sizing: content-box; // 标准盒子模型
box-sizing: border-box; // IE盒子模型
02、line-height和heigh区别
line-height是每一行文字的高,如果文字换行则整个盒子高度会增大(数*行高)。
height是一个死值,就是这个盒子的高度。
03、CSS选择符有哪些?哪些属性可以继承?
CSS选择符
通配(*)
id选择器(#)
类选择器(.)
标签选择器(div、p、h1…)
相邻选择器(+)
后代选择器(ul li)
子元素选择器(>)
属性选择器(a[href])
CSS属性哪些可以继承
文字系列:font-size、color、line-height、text-align…
不可继承属性:border、padding、margin…
04、CSS优先级算法如何计算?
优先级比较
!important > 内联样式 > id > class > 标签 > 通配
CSS权重计算
等级 选择器 权重值 第一 内联样式(style) 1000 第二 id选择器 100 第三 类选择器 10 第四 标签&伪元素选择器 1 第五 通配、>、+ 0
05、用CSS画一个三角形
// 用边框画、border
// 这是一个向上的三角形
b {
width: 0;
height: 0;
border-left:100px solid transparent;
border-right:100px solid transparent;
border-top:100px solid transparent;
border-bottom:100px solid #ff0000;
}
06、一个盒子不给宽度和高度如何水平垂直居中?
方式一
html
<div class='container'>
<div class='main'>main</div>
</div>
style
.container{
display: flex;
justify-content: center;
align-items: center;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
background: red;
}
方式二
html
<div class='container'>
<div class='main'>main</div>
</div>
style
.container{
position: relative;
width: 300px;
height: 300px;
border:5px solid #ccc;
}
.main{
position: absolute;
left:50%;
top:50%;
background: red;
transform: translate(-50%,-50%);
}
07、display有哪些值?说明他们的作用。
none
: 隐藏元素
block
: 把某元素转换成块元素
inline
: 把某元素转换成行内元素
inline-block
: 把某元素转换成行内块元素
08、对BFC规范(块级格式化上下文:block formatting context)的理解?
BFC就是页面上一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
1、了解BFC : 块级格式化上下文。
2、BFC的原则:如果一个元素具有BFC,那么内部元素再怎么弄,都不会影响到外面的元素。
3、 如何触发BFC:
float的值非none
overflow的值非visible
display的值为:inline-block、table-cell…
position的值为:absoute、fixed
09、清除浮动有哪些方式?
1、触发BFC
2、多创建一个盒子,添加样式:clear: both;
3、after方式
ul:after { content: ''; display: block; clear: both; }
10、在网页中的应该使用奇数还是偶数的字体?为什么呢?
偶数 : 让文字在浏览器上表现更好看。
另外说明:ui给前端一般设计图都是偶数的,这样不管是布局也好,转换px也好,方便一点。
11、position有哪些值?分别是根据什么定位的?
值
static
: [默认] 没有定位
fixed
: 固定定位,相对于浏览器窗口进行定位。
relative
: 相对于自身定位,不脱离文档流。
absolute
: 相对于第一个有relative的父元素,脱离文档流。
relative和absolute区别
1、relative不脱离文档流 、absolute脱离文档流
2、relative相对于自身 、 absolute相对于第一个有relative的父元素
3、relative如果有left、right、top、bottom -> left、top
absolute如果有left、right、top、bottom -> left、right、top、bottom
12、写一个左中右布局占满屏幕,其中左、右俩块固定宽200,中间自适应宽,要求先加载中间块,请写出结构及样式。
双飞翼
html
<div class='container'>
<div class='c'>
<div class='main'>中</div>
</div>
<div class='l'>左</div>
<div class='r'>右</div>
</div>
style
* {
margin: 0;
padding: 0;
}
body {
width: 100vw;
height: 100vh;
}
.container>div {
float: left;
}
.l {
margin-left: -100%;
width: 200px;
height: 100vh;
background: red;
}
.c {
width: 100%;
height: 100vh;
background: pink;
}
.r {
margin-left: -200px;
width: 200px;
height: 100vh;
background: blue;
}
.main {
padding: 0 200px;
}
圣杯布局
// 敬请期待... ...
13、什么是CSS reset?
reset.css是一个css文件,用来重置css样式的。
normalize.css为了增强跨浏览器渲染的一致性,一个CSS重置样式库。
14、css sprite是什么,有什么优缺点
1、是什么
把多个小图标合并成一张大图片。
2、优缺点
优点:减少了http请求的次数,提升了性能。
缺点:维护比较差(例如图片位置进行修改或者内容宽高修改)
15、display: none;与visibility: hidden;的区别
占用位置的区别
display: none;
不占用位置
visibility: hidden;
虽然隐藏了,但是占用位置
重绘和回流的问题
visibility: hidden;
和display: none;
都产生重绘
display: none;
还会产生一次回流
产生回流一定会造成重绘,但是重绘不一定会造成回流。
产生回流的情况:改变元素的位置(left、top…)、显示隐藏元素…
产生重绘的情况:样式改变、换皮肤
16、opacity和rgba区别
实现透明效果
1、
opacity
: 取值范围0到1之间,0表示完全透明,1表示不透明
2、rgba
: r表示红色,g表示绿色,b表示蓝色,取值可以在正整数或者百分数;a表示透明度取值0到1之间
继承的区别
opacity
会继承父元素的opacity
属性,而rgba
设置的元素的后代元素不会继承不透明属性。
03、JavaScript基础
01、延迟加载JS有哪些方式?
延迟加载:async、defer
<script defer type="text/javascript" src='script.js'></script>
<script async type="text/javascript" src='script.js'></script>
defer : 等html全部解析完成,才会执行js代码,顺次执行js脚本。
async : async是和html解析同步的(一起的),不是顺次执行js脚本(谁先加载完谁先执行)。
也就是说当有多个js文件时,在执行完html后defer会根据js文件顺序执行,而async是先加载完先执行
02、JS数据类型有哪些?
JavaScript共有8种数据类型。
7种基本数据类型:Null
、Undefined
、Boolean
、Number
、String
、Symbol
(ES6新增,表示独一无二的值)和BigInt
(ES10新增)。
1种引用数据类型:Object
。Object里面包含Object
、Array
、Function
、Date
、RegExp
等。
总结:JavaScript不支持任何创建自定义类型的机制,而所有值最终都将是上述8种数据类型之一。
NaN
是一个数值类型,但不是一个具体的数字。
03、JS数据类型考题
考题一
console.log(true + 1); // 2
console.log('name' + true); // nametrue
console.log(undefined + 1); // NaN
console.log(typeof undefined); // undefined
考题二
console.log(typeof(NaN)); // number
console.log(typeof(null)); // object
04、null和undefined的区别
历史遗留
1、作者在设计js的都是先设计的null,为什么设计了null:最初设计js的时候借鉴了java语言。
2、null会被隐式转换成0,很不容易发现错误。
3、先有null后有undefined,出来undefined是为了填补之前的坑。
具体区别
JavaScript的最初版本的null是一个表示"无"的对象(空对象指针),转为数值时值为0;undefined是一个表示"无"的原始值,转为数值时为NaN。
其他解释
null
null 表示一个"无"的对象,转为数值为 0;
作为函数的参数,表示该函数的参数不是对象;
作为对象原型链的终点;console.log(Number(null)); // 0 console.log(5 + null); // 5 console.log(JSON.stringify(null)); // 'null' 字符串类型 console.log(JSON.parse(null)); // null 基本类型
undefined
变量被声明了,但是没有赋值,就等于 undefined;
调用函数时,应该提供的参数没有提供,该参数等于 undefined;
对象没有赋值属性,该属性的值为 undefined;
函数没有返回值时,默认返回 undefined;console.log(Number(undefined)); // NaN console.log(5 + undefined); // NaN console.log(JSON.stringify(undefined)); // undefined console.log(JSON.parse(undefined)); // 报错
05、两等和三等有什么不同
==: 比较的是值
string == number || boolean || number …都会隐式转换
通过valueOf转换(valueOf() 方法通常由 JavaScript 在后台自动调用,并不显式地出现在代码中)
===: 除了比较值,还比较类型
06、JS微任务和宏任务
1、js是单线程的语言。
2、js代码执行流程:同步执行完 =》事件循环
同步的任务都执行完了,才会执行事件循环的内容
进入事件循环:请求、定时器、事件…
3、事件循环中包含微任务和宏任务
微任务:promise.then…
宏任务:setTimeout…
要执行宏任务的前提是清空了所有的微任务
流程:同步 =》事件循环【微任务和宏任务】=》微任务 =》宏任务 =》微任务…
07、JS作用域考题
介绍
1、除了函数外,js是没有块级作用域。
2、作用域链:内部可以访问外部的变量,但是外部不能访问内部的变量。
注意:如果内部有,优先查找到内部,如果内部没有就查找外部的。
3、注意声明变量是用var还是没有写(window.)
4、注意:js有变量提升的机制【变量悬挂声明】
5、优先级:声明变量 => 声明普通函数 => 参数 => 变量提升
应用
1、本层作用域有没有此变量【注意变量提升】
2、注意:js除了函数外没有块级作用域
3、普通声明函数是不看写函数的时候顺序
考题一
function c() {
var b = 1;
function a() {
console.log(b); // undefined
var b = 2;
console.log(b); // 2
}
a();
console.log(b); // 1
}
c();
考题二
var name = 'a';
(function() {
if(typeof name == 'undefined') {
var name = 'b';
console.log('111' + name); // 111b
} else {
console.log('222' + name);
}
})();
考题三
function fun(a) {
var a = 10;
function a() {}
console.log(a); // 10
}
fun(100);
08、JS对象考题
JS对象注意点
1、对象是通过new操作符构建出来的,所以对象之间不相等(除了引用外);
2、对象注意:引用类型(共同一个地址);
3、对象的key都是字符串类型;
4、对象如何找属性|方法;
查找规则:先在对象本身找=>构造函数中找=>对象原型中找=>构造函数原型中找=>对象上一层原型查找
考题一
console.log([1, 2, 3] === [1, 2, 3]); // false
考题二
var obj1 = { a:'hellow' };
var obj2 = obj1;
obj2.a = 'world';
console.log(obj1); // {a: world}
(function(){
console.log(a); // undefined
var a = 1;
})();
考题三
var a = {};
var b = { key:'a' };
var c = { key:'c' };
a[b] = '123';
a[c] = '456';
console.log(a[b]); // 456
// a[b] || a[c] ==> a['[object Object]']
09、JS作用域+this指向+原型考题
考题一
function Foo() {
getName = function() { console.log(1); } // 注意是全局的window.
return this;
}
Foo.getName = function() { console.log(2); }
Foo.prototype.getName = function() { console.log(3) }
var getName = function() { console.log(4); }
function getName() { console.log(5); }
Foo.getName(); // 2
getName(); // 4
Foo().getName(); // 1
getName(); // 1 因为重新执行了Foo()
new Foo().getName(); // 3
考题二
var o = {
a: 10,
b: {
a: 2,
fn: function() {
console.log(this.a); // 2
console.log(this); // {a: 2, fn: ƒ}
}
}
}
o.b.fn();
考题三
window.name = 'ByteDance';
function A() {
this.name = 123;
}
A.prototype.getA = function() {
console.log(this); // this代表window对象
return this.name + 1;
}
let a = new A();
let funcA = a.getA;
console.log(funcA()); // ByteDance1
考题四
var length = 10;
function fn() {
return this.length + 1;
}
var obj = {
length: 5,
test1: function() {
return fn();
}
}
obj.test2 = fn;
console.log(obj.test1()); // 11
console.log(fn() === obj.test2()); // false
console.log(obj.test1() == obj.test2()); // false
10、JS判断变量是不是数组,你能写出哪些方法?
1、isArray
var arr = [1, 2, 3];
console.log(Array.isArray(arr)); // true
2、prototype
var arr = [1, 2, 3];
console.log(Object.prototype.toString.call(arr).indexOf('Array') !== -1); // true
3、isPrototypeOf
var arr = [1, 2, 3];
console.log(Array.prototype.isPrototypeOf(arr)); // true
4、constructor
var arr = [1, 2, 3];
console.log(arr.constructor.toString().indexOf('Array') !== -1); // true
5、instanceof
var arr = [1, 2, 3];
console.log(arr instanceof Array); // true
11、slice是干嘛的、splice是否会改变原数组
1、
slice
用来截取
参数可以写slice(3)、slice(1, 3)、slice(-3)
返回的是一个新的数组
2、splice
有插入、删除和替换功能
返回:删除的元素
该方法会改变原数组
12、JS数组去重
1、new set
var arr1 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
return [...new Set(arr)];
}
console.log(unique(arr1));
2、indexOf
var arr2 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
var brr = [];
for(var i = 0; i < arr.length; i++) {
if(brr.indexOf(arr[i]) == -1) brr.push(arr[i]);
}
return brr;
}
console.log(unique(arr2));
3、sort
var arr3 = [1, 2, 3, 2, 4, 1];
function unique(arr) {
arr = arr.sort();
var brr = [];
for(var i = 0; i < arr.length; i++) {
if(arr[i] !== arr[i - 1]) brr.push(arr[i]);
}
return brr;
}
console.log(unique(arr3));
13、找出多维数组最大值
function fnArr(arr){
var newArr = [];
arr.forEach((item, index) => { newArr.push(Math.max(...item)); });
return newArr;
}
console.log(fnArr([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]));
14、给字符串新增方法实现功能
给字符串对象定义一个addPrefix函数,当传入一个字符串str时,它会返回新的带有指定前缀的字符串,例如:
console.log( 'world'.addPrefix('hello'));
控制台会输出helloworldString.prototype.addPrefix = function(str) { return str + this; } console.log('world'.addPrefix('hello')); // helloworld
15、找出字符串出现最多次数的字符以及次数
方式一
function statistics(string) {
string = string.replace(/\s+/g, '');
var dictionaries = {},
max = null,
count = 0;
for (var i = 0; i < string.length; i++) {
if (dictionaries[string[i]] === undefined) {
dictionaries[string[i]] = 1;
} else {
dictionaries[string[i]] += 1;
}
}
for (var key in dictionaries) {
if (dictionaries[key] > count) {
max = key;
count = dictionaries[key];
}
}
return { dictionaries, max, count };
};
console.log(statistics('I miss you'));
// {dictionaries: {…}, max: "s", count: 2}
// dictionaries: { I: 1, i: 1, m: 1, o: 1, s: 2, u: 1, y: 1 }
// max: "s"
// count: 2
方式二
var str = 'aaabbbbbccddddddddddx';
var obj = {};
for(var i = 0; i < str.length; i++) {
var char = str.charAt(i);
if(obj[char]) {
obj[char]++;
} else {
obj[char] = 1;
}
}
console.log(obj);
// 统计出来最大值
var max = 0;
for(var key in obj) {
if(max < obj[key]) max = obj[key];
}
// 拿最大值去对比
for(var key in obj) {
if(obj[key] == max) {
console.log('最多的字符是' + key);
console.log('出现的次数是' + max);
}
}
16、new操作符具体做了什么
1、创建了一个空的对象
2、将空对象的原型,指向于构造函数的原型
3、将空对象作为构造函数的上下文(改变this指向)
4、对构造函数有返回值的处理判断function Fun(age,name) { this.age = age; this.name = name; } function create(fn, ...args) { // 1. 创建了一个空的对象 var obj = {}; // var obj = Object.create({}) // 2. 将空对象的原型,指向于构造函数的原型 Object.setPrototypeOf(obj, fn.prototype); // 3. 将空对象作为构造函数的上下文(改变this指向) var result = fn.apply(obj,args); // 4. 对构造函数有返回值的处理判断 return result instanceof Object ? result : obj; } console.log(create(Fun, 18, '张三'));
17、闭包
1、闭包是什么
闭包是一个函数加上到创建函数的作用域的连接,闭包“关闭”了函数的自由变量。
2、闭包可以解决什么问题【闭包的优点】
2.1、内部函数可以访问到外部函数的局部变量
2.2、闭包可以解决的问题var lis = document.getElementsByTagName('li'); for(var i = 0; i < lis.length; i++) { (function(i) { lis[i].onclick = function() { console.log(i); } })(i); }
3、闭包的缺点
3.1、变量会驻留在内存中,造成内存损耗问题。
解决:把闭包的函数设置为null
3.2、内存泄漏【ie】 ==> 可说可不说,如果说一定要提到ie
18、原型链
1、原型可以解决什么问题
对象共享属性和共享方法
2、谁有原型
函数拥有:prototype
对象拥有:proto
3、对象查找属性或者方法的顺序
先在对象本身查找 --> 构造函数中查找 --> 对象的原型 --> 构造函数的原型中 --> 当前原型的原型中查找
4、原型链
4.1、是什么?:就是把原型串联起来
4.2、原型链的最顶端是null
19、JS继承有哪些方式
1、构造函数继承
这种方式只能继承父类构造函数中的属性和方法,对于原型对象上的方法无法继承。
构造函数继承是利用call或者apply方法,将父类构造函数的this绑定到子类构造函数的this上即可。
2、原型实例继承
这是比较常用的一种实现继承的方式。
1、将student的prototype对象指向parentClass的一个实例。
此操作完全删除了student.prototype对象原本的内容,然后赋予给它一个新的值。
student.prototype = new parentClass();
2、任何一个构造函数都有一个prototype对象,这个prototype对象都有一个constructor属性指向自身的构造函数。
2.1、因为第上面代码对prototype对象进行了重新赋值,所以prototype对象的constructor属性也发生了改变,变成指向parentClass,所以必须手动将student.prototype.constructor指回student。
2.2、如果没有(student.prototype.construct = student)这行代码,则student.prototype.constructor==parentClass和example.constructor==parentClass的结果返回false。
2.3、这里比较好理解,因为example是student的实例化对象,它的constructor属性默认继承自parentClass.prototype,而parentClass.prototype的constructor属性继承自parentClass.prototype,最后找到parentClass.prototype.constructor指向parentClass。显然如果没有这句话,将会导致继承链的错乱。
注意:在编程时,如果对prototype对象进行重新赋值后,记得手动奖prototype的constructor属性智慧原来的构造函数。
student.prototype.construct = student;
3、原型直接继承
原型直接继承是通过直接将子类构造函数的原型对象,直接赋值为父类构造函数的原型对象,从而达到继承的目的。
student.prototype = parentClass.prototype;
student.prototype.constructor = student;
4、class继承
敬请期待… …
20、说一下call、apply、bind区别
共同点
都可以改变this指向
语法
函数.call()、函数.apply()、函数.bind()
区别
1、call、apply会立即执行。bind不会立即执行,因为bind返回的是一个函数需要加入()执行。
2、参数不同:apply第二个参数是数组。call和bind有多个参数需要挨个写。
场景
var arr1 = [1, 2, 4, 5, 7, 3, 321];
console.log(Math.max.apply(null, arr1));
// ------------------------------------
var btn = document.getElementById('btn');
var h1s = document.getElementById('h1s');
btn.onclick = function() {
console.log(this.id);
}.bind(h1s);
21、sort背后原理是什么?
V8引擎sort函数只给出了两种排序InsertionSort和QuickSort,数量小于10的数组使用InsertionSort,比10大的数组则使用QuickSort。
之前的版本是:插入排序和快排,现在是冒泡
原理实现-710行代码开始
22、深拷贝和浅拷贝
定义
1、浅拷贝只是增加了一个指针指向已存在的内存地址。
2、深拷贝是增加了一个指针并且申请了一个新的内存,使这个增加的指针指向这个新的内存。
浅拷贝
只复制引用,而未复制真正的值。
var arr1 = ['a', 'b', 'c', 'd']; var arr2 = arr1; var obj1 = { a: 1, b: 2 }; var obj2 = Object.assign(obj1);
深拷贝
是复制真正的值(不同引用)
var obj3 = { a: 1, b: 2 }; var obj4 = JSON.parse(JSON.stringify( obj3 )); // 递归的形式 function copyObj(obj) { if(Array.isArray(obj)) { var newObj = []; } else { var newObj = {}; } for( var key in obj ) { if( typeof obj[key] == 'object' ) { newObj[key] = copyObj(obj[key]); } else { newObj[key] = obj[key]; } } return newObj; } console.log(copyObj(obj5));
23、localstorage、sessionstorage、cookie的区别
公共点
在客户端存放数据
区别
1、数据存放有效期
sessionStorage: 仅在当前浏览器窗口关闭之前有效。【关闭浏览器就没了】
localStorage: 始终有效,窗口或者浏览器关闭也一直保存,所以叫持久化存储。
cookie: 只在设置的cookie过期时间之前有效,即使窗口或者浏览器关闭也有效。
2、localStorage、sessionStorage不可以设置过期时间
cookie 有过期时间,可以设置过期(把时间调整到之前的时间,就过期了)
3、存储大小的限制
cookie存储量不能超过4k
localStorage、sessionStorage不能超过5M
根据不同的浏览器存储的大小是不同的。
04、H5/C3
敬请期待… …
01、什么是语义化标签
1、易读性和维护性更好。
2、seo成分会更好,蜘蛛抓取更好。
3、IE8不兼容HTML5标签的解决办法:可以通过html5shiv.js去处理。
02、::before和:after中双冒号和单冒号有什么区别?解释一下这2个伪元素的作用。
1、区别
:是伪类、::伪元素 =>是为了做区分
2、是什么?作用
元素before之前 、 元素after之后
作用:清除浮动、样式布局上也有作用
03、如何关闭iOS键盘首字母自动大写
<input type="text" autocapitalize='off' />
04、怎么让Chrome支持小于12px的文字?
Chrome默认字体大小是:
16px
每个浏览器默认字体大小可能都不一样div { font-size: 10px; } div span { display: inline-block; -webkit-transform: scale(1.6); }
05、rem和em的区别
相对于font-size
em针对于父元素的font-size
rem针对于根(html)元素的font-size
06、ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉
a,
button,
input,
textarea {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
07、webkit表单输入框placeholder的颜色值能改变吗?
input::-webkit-input-placeholder {
color: red;
}
08、禁止ios长按时不触发系统的菜单,禁止ios&android长按时下载图片
html,
body {
touch-callout: none;
-webkit-touch-callout: none;
user-select: none;
-webkit-user-select: none;
}
09、禁止ios和android用户选中文字
html,
body {
user-select: none;
-webkit-user-select: none;
}
10、自适应
淘宝无限适配【移动端】:淘宝无限适配 + 布局单位使用rem
11、响应式
1、是什么?
一个URL可以响应多端
2、语法结构
@media only screen and (max-width: 1000px) { ul li:last-child { display: none; } }
only : 可以排除不支持媒体查询的浏览器
screen : 设备类型
max-width | max-height
min-width | min-height
3、响应式图片【性能优化】
<picture>
<source srcset="1.jpg" media='(min-width: 1000px)'>
<source srcset="2.jpg" media='(min-width: 700px)'>
<img srcset="3.jpg">
</picture>
4、布局方案
一、什么情况下采用响应式布局
数据不是特别多,用户量不是特别大,纯展示类的项目适合响应式布局
例如:公司的官网、专题页面
特别追求性能的项目,不太适合响应式,因为如果添加了很多的响应式就会造成加载速度变慢。
二、pc+移动端应该做什么样的布局方案
注意:访问量还可以或者比较大,类似于淘宝网。
pc是一套,会加入一点点响应式。
移动端是一套,会使用自适应的布局方式。
三、pc的设计图
ui:1980
笔记本电脑:1280
ui图的宽度和电脑的宽度不对应该怎么办?
1、把ui图进行等比缩放,缩放成和电脑一样的尺寸
2、换1980的电脑
四、移动端的设计图
宽度:750
因为750设计图/2就是375,正好是iphone6的尺寸,我们要把iphone6的尺寸做为基准点。
05、ES6
1、var、let、const区别
共同点
var、let、const共同点是可以声明变量
区别
var具有变量提升的机制
let和const没有变量提升的机制
区别二
var可以在同一作用域多次声明同一个变量
let和const不可以在同一作用域多次声明同一个变量
区别三
var、let声明变量
const声明常量
var和let声明的变量可以再次赋值,但是const不可以再次赋值。
区别四
var声明的变量没有自身作用域
let和const声明的变量有自身的作用域
1、var声明的变量会挂载在window上,而let和const声明的变量不会。
2、var声明变量存在变量提升,let和const不存在变量提升。
3、let和const声明形成块作用域。
4、同一作用域下var可以声明同名变量,而let和const不可以。
5、var或let声明的变量可以再次赋值,而const声明的是常量,不可以再次赋值。
2、作用域考题
考题一
console.log(str); // undefined
var str = '你好';
console.log(num); // 报错
let num = 10;
考题二
function demo() {
var n = 2;
if(true) {
var n = 1;
}
console.log(n); // 1
}
demo();
function demo() {
let n = 2;
if(true) {
let n = 1;
}
console.log( n ); // 2
}
demo();
考题三
const obj = { a: 1 };
obj.a = 11111;
console.log(obj);
// {a: 11111}
const arr = ['a', 'b', 'c'];
arr[0]= 'aaaaa';
console.log(arr);
// ['aaaaa', 'b', 'c']
3、将下列对象进行合并
方式一
const a = { a: 1, b: 4 };
const b = { b: 2, c: 3 };
let obj = Object.assign(a, b);
console.log(obj);
// {a: 1, b: 2, c: 3}
方式二
const a = { a: 1, b: 4 };
const b = { b: 2, c: 3 };
let obj = { ...a, ...b };
console.log(obj);
// {a: 1, b: 2, c: 3}
方式三
function extend(target, source) {
for(var key in source) {
target[key] = source[key];
}
return target;
}
let a = { a: 1, b: 4 },
b = { b: 2, c: 3 };
console.log(extend(a, b));
// {a: 1, b: 2, c: 3}
4、箭头函数和普通函数有什么区别?
1、箭头函数的this在定义时确定,且不能用call、apply、bind修改,this会指向外层第一个普通函数的this
2、箭头函数不能用new关键字执行,也就是不能当作构造函数
3、箭头函数没有prototype原型
4、箭头函数没有arguments对象
5、Promise有几种状态
Promise有三种状态
pending(进行中)
fulfilled(已成功)
rejected(已失败)
6、find和filter的区别
1、返回的内容不同
filter:返回是新数组
find:返回具体的内容
2、截断不同
find:匹配到第一个即返回
filter:返回整体,返回所有匹配成功的值
7、some和every的区别
some:如果有一项匹配则返回true
every:全部匹配才会返回true
06、webpack
1、webpack插件
敬请期待… …
07、Git
1、git常用命令
敬请期待… …
2、解决冲突
敬请期待… …
3、GitFlow
敬请期待… …
08、Vue
01、Vue2.x生命周期有哪些?
生命周期 名称 描述 beforeCreate 创建前 组件实例被创建之初,组件的属性生效之前。 created 创建后 组件实例已经完全创建,属性也绑定,但真实DOM还没有生成,$el还不可用。 beforeMount 载入前 在挂载开始之前被调用,相关的render函数首次被调用。 mounted 载入后 el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。 beforeUpdate 更新前 组件数据更新之前调用,发生在虚拟DOM打补丁之前。 update 更新后 组件数据更新之后。 beforeDestory 销毁前 实例销毁前调用,实例仍然可用。 destoryed 销毁后 实例销毁之后调用,Vue实例指示的所有东西都会解绑,所有事件监听器和所有子实例都会被移除。
beforeCreate() { console.log('beforeCreate'); }
created() { console.log('created'); }
beforeMount() { console.log('beforeMount'); }
mounted() { console.log('mounted'); }
beforeUpdate() { console.log('beforUpdate'); }
updated() { console.log('updated'); }
beforeDestroy() { console.log('beforeDestroy'); }
destroyed() { console.log('destroyed'); }
02、第一次进入组件或者页面,会执行哪些生命周期?
beforeCreate
、created
、beforeMount
、mounted
03、谈谈你对keep-alive的了解
概念
keep-alive
是Vue
的内置组件,当它包裹动态组件时,会缓存不活动的组件实例,而不是销毁。
作用
组件在切换过程中将状态保留到内存中,防止重复渲染DOM
,减少加载时间及性能消耗,提高用户体验性。
原理
在created
函数调用时将需要缓存的VNode
节点保存在this.cache
中;在render
执行时,如果VNode
的name
符合缓存条件,则会从this.cache
中取出之前缓存的VNode
实例进行渲染。
04、v-if和v-show区别
定义
v-if
指令是通过销毁和重建DOM
来使元素显示或隐藏。
v-show
指令是通过修改元素的display
属性让其显示或隐藏。
应用场景
v-if
适用于不需要频繁切换条件的场景。
v-show
适用于需要频繁切换条件的场景。
05、v-if和v-for优先级
v-for
的优先级高于v-if
,连用的话每个循环出来的元素都添加了v-if
,会造成性能问题,影响渲染速度,所以不建议连用。
06、ref是什么?
ref
被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的$refs
对象上。如果在普通的DOM
元素上使用,引用指向的就是DOM
元素;如果用在子组件上,引用就指向组件实例。
07、nextTick是什么?
异步方法,异步渲染最后一步,与
JavaScript
事件循环联系紧密。主要使用了宏任务微任务定义了一个异步方法,多次调用$nextTickt
会将方法存入队列,通过异步方法清空当前队列。
08、路由导航守卫有哪些?
全局
beforeEach
beforeResolve
afterEach
路由独享
beforeEnter
组件内
beforeRouteEnter
beforeRouteUpdate
beforeRouteLeave
09、Vue中如何做样式穿透
sass和less:/deep/
通用使用::v-deep
10、scoped原理
1、作用:让样式在本组件中生效,不影响其他组件。
2、原理:给节点新增自定义属性,然后css根据属性选择器添加样式。
11、Vuex是单向数据流还是双向数据流?
敬请期待… …
12、讲一下MVVM
MVVM
是Model-View-ViewModel
的缩写,也就是把MVC
中的controller
演变成ViewModel
。
1、Model
表示数据模型层,也就是vue中的data
。
2、View
表示视图层,也就是UI
组件。
3、ViewModel
是View
和Model
层的桥梁,数据绑定到viewModel
层并自动渲染到页面中,视图变化会通知viewModel
层更新数据。
13、双向绑定原理
敬请期待… …
14、什么是虚拟DOM
敬请期待… …
15、diff算法
敬请期待… …
16、Vue组件传值
敬请期待… …
17、介绍一下SPA以及SPA有什么缺点?
敬请期待… …
18、Vue双向绑定和单向绑定
敬请期待… …
19、props和data优先级谁高?
敬请期待… …
20、computed、methods、watch有什么区别?
敬请期待… …
21、Vuex
敬请期待… …
09、微信小程序
敬请期待… …
1、如何自定义头部?
敬请期待… …
2、如何自定义底部?
敬请期待… …
10、uni-app
敬请期待… …
1、生命周期
敬请期待… …
2、条件编译
敬请期待… …
11、性能优化
敬请期待… …
1、加载优化
敬请期待… …
2、图片优化
敬请期待… …
3、渲染优化
敬请期待… …
4、首屏优化
敬请期待… …
5、vue优化
敬请期待… …
12、兼容性
敬请期待… …
1、页面样式兼容
敬请期待… …
2、框架兼容
敬请期待… …
13、网络请求
敬请期待… …
1、跨域面试题
敬请期待… …
2、http和https
敬请期待… …
14、WEB安全
敬请期待… …
1、XSS攻击
敬请期待… …
2、SQL注入
敬请期待… …
3、接口安全
敬请期待… …
15、其他
敬请期待… …
01、token
敬请期待… …
02、SEO
敬请期待… …
03、从输入URL到浏览器显示页面发生了什么
发生的事情
1、浏览器查看缓存,有的话直接显示页面,没有的话执行下面的任务
2、DNS
解析域名
3、TCP
三次握手
4、浏览器发出请求
5、服务器处理请求并返回页面信息
6、浏览器解析渲染
相关链接
[1、百度-面试官:浏览器输入url到页面显示发生了什么?](https://baijiahao.baidu.com/s
id=1715402290815275820&wfr=spider&for=pc)
2、CSDN-从输入url 到浏览器显示页面发生了什么
04、GET请求与POST请求有什么区别
区别
1、
GET
请求参数是放在head
中,可以在url
中看到。POST
请求参数放在body
中,在url
中不可见。
2、GET
请求参数需要使用encodeURIComponent
进行编码,必须用&
符隔开。
3、GET
请求的url
有长度限制,而POST
请求不用考虑请求参数的长度。
4、GET
请求产生一个数据包,POST
请求产生两个数据包。
5、GET
请求会被浏览器主动缓存下来,留下历史记录,而POST
默认不会。
相关链接
1、掘金-都2020年了,还理不清GET请求和POST请求区别?
2、掘金-HTTP中GET和POST两种基本请求方法的区别
05、HTTP状态码
常见状态码
200
、203
、400
、404
、500
等。
更多状态码相关链接
06、请描述一下cookies、sessionStorage、localStorage、IndexDB和WebSQL的区别
1、cookies
存储大小
4KB
,纯文本格式,超过被忽略,所以很少被用于存储客户端数据
存储时间
可以设置过期时间,
expires
选项
会话期cookie
浏览器关闭自动清除
持久性cookie
设置过期时间,到期后清除
可以和服务器对话
在我们请求服务器的时候,服务器可能会给我们返回cookie
我们在请求服务器的时候也会带上cookie
一般检查是否登录是看cookie
可以保存的内容
key/vaule
:cookie
都是以key/value
的形式存在
expires
:cookie
的最长有效时间,如果没有表示这是一个会话期cookie
httpOnly
: 设置了HttpOnly
属性的cookie
不能使用JavaScript
读取
还有一些其他可选项… …
设置cookie
,一次只能设置一个cookie
设置cookie
// 可选的配置
document.cookie = "name=yangfeng";
document.cookie = 'test=hello world';
获取cookie
const allCookies = document.cookie;
console.log(allCookies);
删除cookie
// 设置它的expires属性为一个过去的日期
document.cookie = 'name=banchen;expires=Thu, 01-Jan-1970 00:00:01 GMT';
2、sessionStorage
存储大小
2.5M
~10M
存储时间
页面会话期可用,关闭浏览器消失
页面刷新和恢复也可用
打开多个相同ur
l的tab
页面,会创建各自的session
,即不可相互访问
使用location.href
或者window.open
来打开另一个同域页面是可以访问,前提是先操作session
再打开才会有
清除缓存也会消失
不可以和服务器对话
可以保存任意内容
键值存储,类似于对象,整数自动转化为字符串
所以存储前可以先使用JSON.stringify()
进行转换
设置sessionStorage
window.sessionStorage['name'] = 'yangfeng';
window.sessionStorage.age = 18;
window.sessionStorage.setItem('key', 'value');
获取sessionStorage
sessionStorage.getItem("name");
sessionStorage.name
删除sessionStorage
// 删除某个sessionStorage
sessionStorage.removeItem('key');
delete sessionStorage.name;
// 清除所以数据
sessionStorage.clear();
3、localStorage
存储大小
2.5M
~10M
存储时间
永久保存
手动清除或者清除缓存
不可以和服务器对话
可以保存任意内容
键值存储,类似于对象,整数自动转化为字符串
所以存储前可以先使用JSON.stringify()
进行转换
localStorage满了的情况下仍继续存储并不会覆盖其他的值,而是直接报错(QuotaExceededError) ,当前存储的值会被清空
一个页面操作了localStorage同源的页面都可以访问和操作
可以监听同源localStorage的修改(不监听本页面的操作)
window.addEventListener('storage', function(val) {
console.log('val: ', val);
});
设置localStorage
window.localStorage['name'] = 'yangfeng';
window.localStorage.age = 18;
window.localStorage.setItem('key', 'value');
获取localStorage
localStorage.getItem("name");
localStorage.name;
删除localStorage
// 删除某个localStorage
localStorage.removeItem('key');
delete localStorage.name;
// 清除所以数据
localStorage.clear();
4、indexedDB
存储大小
大于
250M
存储时间
手动更新或删除
不可以和服务器对话
5、WebSQL
不推荐使用,不详细介绍。
07、跨域
定义
1、浏览器同源(origin)策略:浏览器规定发送ajax请求时,只有相同域名的客户端和相同域名的服务端才能发送请求。
2、同源:.html在哪台服务器请求,数据也需要在哪台服务器请求。
3、报错:Access-Control-Allow-Origin不允许跨源头发送请求。
4、同源策略的本质:可以发送ajax请求,可以正常执行服务端的程序,也可以顺利返回正确的结果,但是,浏览器经过检查数据的来源,如果和当前网页的来源不一致,浏览器禁止使用此数据。
跨域的四种情况
域名不同
www.a
.com
www.b
.com
端口号不同
www.a.com:3000
www.a.com:5500
协议不同
http:
//www.a.com
https:
//www.a.com
域名和地址相互请求
http://localhost
http://127.0.0.1
可以跨域的标签
1、
img
2、link
3、iframe
4、script
解决跨域的方法
暂无
原文链接
08、持久化
使用本地存储,保存登录信息。后端设置的登录信息存在过期问题,此时前端就需要根据后端返回的过期信息实现登录持久化。首先需要了解后端返回的过期时间信息设置前端重新请求登录信息的时间,一般重新请求时间要早于过期时间,这样才能无缝连接的更新登录信息,并且实现持久化。