文章目录
- 前言
- 一、html 相关
- 1.1 行内元素和块级元素分别有哪些?
- 1.2 IE盒子模型和标准盒子模型
- 二、css 相关
- 2.1 选择器
- 2.2 设置垂直居中的方法
- 2.3 定位的几种方式
- 2.4 清除浮动的几种方式
- 2.5 rem、em、px、vw、vh区别
- 2.6 响应式和自适应布局的区别
- 2.7 元素隐藏的几种方式
- 2.8 canvas 和 svg 的区别
- 三、Javascript 相关
- 3.1 数组的用法
- 3.2 深拷贝和浅拷贝
- 3.3 浏览器存储的方式
- 3.4 排序的方法
- 3.5 闭包
- 3.6 Javascript的垃圾回收机制
- 3.7 事件循环(event loop)
- 3.8 节流和防抖
- 3.9 undefined和null、空数组的区别
- 3.10 什么是面向对象?封装、继承、多态
- 3.11 跨域和同源
- 3.12 原型和原型链
- 3.13 数组去重
- 四、总结
前言
本篇内容基本是前端开发必备技能,不算什么高深有难度的题型,一起来学习下吧。
一、html 相关
1.1 行内元素和块级元素分别有哪些?
- 行内元素:
span、a、b、strong、img、input、textarea、select、em、del
- 块级元素:
address、center、h1-h6、p、pre、ul、ol、dl、table、div、form
-
它们之间的区别:
-
块级元素
可以设置宽高,设置margin
和padding
都有效,可以自动换行,排列默认从上到下 -
行内元素
设置宽高无效,对margin
设置左右方向有效,而上下无效。不会自动换行。
-
1.2 IE盒子模型和标准盒子模型
-
标准盒子模型
height
包含了content
的高度,不包括padding
的内边距和border
。
盒子的总宽度 = margin + border + padding + width
width
= content 的宽度 -
IE盒子模型
height
不但包括content
的高度,还包括padding
和border
的宽度。
盒子的总宽度 = margin + width
width
= content 的宽度 + border边框宽度(左右) + padding内边距(左右)
二、css 相关
2.1 选择器
由高到低:
!important
> 行内样式
> ID选择器
> 类选择器
> 元素
> 通配符
> 继承
> 浏览器默认属性
2.2 设置垂直居中的方法
方法1: 利用 position: absolute
;
父元素:相对定位
子元素:绝对定位
.child{
/* 核心代码 */
position:absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
方法2:元素 display
定义为 flex
。
<div class="flex-container"><div class="flex-item">居中的内容</div>
</div>
.flex-container {display: flex;align-items: center; /* 垂直居中 */justify-content: center; /* 水平居中,可选 */height: 200px; /* 容器的高度,可以根据需要设置 */
}.flex-item {/* 子元素样式,如果需要的话 */
}
方法3:设置文本 line-height
值和容器高度一致,然后 text-align: center
;
2.3 定位的几种方式
CSS定位的几种方式包括:
- 静态定位(
Static
Positioning):这是默认定位方式,不需要特别声明。 - 相对定位(
Relative
Positioning):相对于其正常位置进行定位。 - 绝对定位(
Absolute
Positioning):相对于最近的非静态定位的父元素进行定位。 - 固定定位(
Fixed
Positioning):相对于浏览器窗口进行定位,无论滚动条如何滚动都会固定在屏幕的指定位置。 - 粘性定位(
Sticky
Positioning):根据用户的滚动位置在相对和固定定位之间切换。
示例代码:
/* 静态定位 */
.static {position: static; /* 这是默认值,可以省略 */
}/* 相对定位 */
.relative {position: relative;top: 10px; /* 向下移动10px */left: 20px; /* 向右移动20px */
}/* 绝对定位 */
.absolute {position: absolute;top: 50px; /* 相对于最近的定位祖先元素向下移动50px */right: 30px; /* 向右移动30px */
}/* 固定定位 */
.fixed {position: fixed;bottom: 0; /* 固定在底部 */left: 0; /* 固定在左边 */
}/* 粘性定位 */
.sticky {position: -webkit-sticky; /* 针对Safari, Chrome, Edge等Webkit内核浏览器 */position: sticky; /* 标准语法 */top: 0; /* 当向下滚动超过此元素时固定在顶部 */
}
2.4 清除浮动的几种方式
- 使用额外的标签,并为其应用
clear
属性:
<div style="float: left;">浮动内容</div>
<div style="clear: both;"></div>
- 使用伪元素
::after
来清除父元素的浮动:
.clearfix::after {content: "";display: table;clear: both;
}
<div class="clearfix">浮动内容</div>
- 使用
overflow
属性为非visible
的值(如auto
或hidden
)
.overflow-method {overflow: auto; /* 或者使用 'hidden' */
}
<div class="overflow-method">浮动内容</div>
- 使用
Flexbox
或Grid
布局方式,这些方法不需要清除浮动:
.flex-container {display: flex;
}
<div class="flex-container">浮动内容</div>
- 使用
display: inline-block
和vertical-align
属性清除内联元素的浮动:
.inline-block-method {display: inline-block;vertical-align: top;
}
<div class="inline-block-method">浮动内容</div>
2.5 rem、em、px、vw、vh区别
-
rem
是相对html
根元素font-size
的值。 -
em
继承父元素的字体大小,相对长度单位。 -
px
像素,绝对单位长度 -
vw
视图宽度 -
vh
视图高度
2.6 响应式和自适应布局的区别
-
响应式:不同分辨率下设备灵活性好,它比自适应好,自适应的话只是宽度自适应;多终端视觉和用户操作体验好;响应式
web
设计中的大部分技术都可以用在webapp
开发中,可以用在移动端设备,也可以用在pc
端。
尺寸:媒体查询、百分比、vw/vh、rem -
自适应:又称为
宽度百分比
或者流式布局
,对页面进行压缩
2.7 元素隐藏的几种方式
-
display:none;
性能消耗较大,因为涉及到dom
操作。 -
visibility:hidden
; -
opacity:0;
-
z-index:负值;
-
绝对定位将元素移除可视区域;
-
color
透明度 设置为0
2.8 canvas 和 svg 的区别
-
Canvas
是基于像素的绘图技术。在使用Canvas
时,开发者可以通过JavaScript
动态地在画布上绘制图形、文字和图像。 -
SVG
是基于矢量的绘图技术。SVG
使用XML
描述图形,开发者可以通过XML
元素来定义图形的结构和样式。
三、Javascript 相关
3.1 数组的用法
常规用法:forEach、map、for…in、for…of 、join、push、shift、unshift、splice、slice、concat、indexOf…
for...in
循环的是数组的下标
for...of
循环的是数组每一项的值
1、forEach
没有返回值,返回为 undefined
;map
有返回值,可以 return
出来。
2、forEach
会改变原数组,map
不会改变原数组,会存储新数组并返回。
es6数组:set、map、filter
has
:将匹配元素集合缩减为包含特定元素的后代的集合,在数组中寻找是否包含有匹配的值。
用法:
var a=new Set([1,2,3]);
var b=new Set([4,3,2]);
var interset=new Set([...a].filter(x=>b.has(x)));
set
是一种叫集合的数据结构,map
是一种叫字典的数据结构。
集合:[value,value]
字典:[key,value]
3.2 深拷贝和浅拷贝
JavaScript的数据类型分为:
基本类型: Number,String,Boolean,Undefined,Null,Symbol,BigInt;
引用类型: 对象(Object),数组(Array),函数(Function);
浅拷贝:保存在栈内存中
1、展开语法,let newobj={...obj}
2、Object.assign
进行对象的合并
3、Array.prototype.contact()
4、Array.prototype.,slice()
深拷贝:保存在堆内存中
1、deepClone()
2、Object.entries(obj)
3、JSON.parse(JSON.stringify(待拷贝对象)
4、jQuery 中的 $.extend()
第一个参数设置为 true
为深拷贝,为 false
为浅拷贝(要引入JQuery库)
5、引入 loadsh
,提供 cloneDeep
实现
备注:json.stringfy()
将对象、数组转换成字符串;json.parse()
将字符串转成 json
对象。
3.3 浏览器存储的方式
浏览器存储的方式包括:cookies
,localstorage
,sessionstorage
,WebSQL
,IndexedDB
。
-
cookies
在HTML5标准签本地存储的主要方式,优点兼容性好,请求头自带cookie
方便。缺点:大小只有4k
,自动请求头加入cookie
浪费流量。 -
Localstorage
操作方便,永久性存储,除非手动删除。大小为5M
; -
Sessionstorage
页面关闭后会被清理,是会话级别的存储方式。
3.4 排序的方法
- sort()方法
var arr = [123,203,23,13,34,65,65,45,89,13,1];
function func(a,b){return a-b;
}
console.log(arr.sort(func)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
- 选择排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0;i<arr.length;i++){for(var j=i+1;j<arr.length;j++){//如果第一个比第二个大,就交换他们两个位置if(arr[i]>arr[j]){var temp = arr[i];arr[i] = arr[j];arr[j] = temp;}}
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
- 冒泡排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
for(var i=0; i<arr.length-1; i++){//每一轮比较要比多少次for(var j=0; j<arr.length-1-i; j++){//如果第一个比第二个大,就交换他们两个位置if(arr[j]>arr[j+1]){var temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
- 插入排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
var preIndex, current;
for(var i=1;i<arr.length;i++){preIndex = i-1;current = arr[i];while(preIndex>=0 && arr[preIndex]>current) {arr[preIndex+1] = arr[preIndex];preIndex--;}arr[preIndex+1] = current;
}
console.log(arr); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
- 快速排序
var arr = [123,203,23,13,34,65,65,45,89,13,1];
//创建快速排序函数
function quickSort(tempArr){//递归终止条件if(tempArr.length<=1){return tempArr;};//取基准var pivotIndex = Math.floor(tempArr.length/2);var pivot = tempArr.splice(pivotIndex,1);//分左右var leftArr = [];var rightArr = [];for(var i=0;i<tempArr.length;i++){if(tempArr[i]>pivot){rightArr.push(tempArr[i]);}else{leftArr.push(tempArr[i]);};};return quickSort(leftArr).concat(pivot,quickSort(rightArr));
};
console.log(quickSort(arr)); //(11) [1, 13, 13, 23, 34, 45, 65, 65, 89, 123, 203]
3.5 闭包
闭包
就是能够读取其他函数 内部变量
的函数,它是定义在 函数内部
的函数。
-
变量私有化
-
让变量始终保存在内存中
弊端: 闭包会使函数中的变量都被保存在内存中,内存消耗很大,不能滥用,否则会造成网页性能问题;解决方法 是在退出函数之前,将不使用的局部变量全部删除。
3.6 Javascript的垃圾回收机制
-
如果一个对象不再被引用,那么这个对象就会被
GC
回收。 -
如果两个对象互相引用,而不再被第三者所引用,那么这两个对象都会被回收。
-
事件循环机制
3.7 事件循环(event loop)
-
任务队列:
先进先出
-
同步任务和异步任务
-
同步任务:在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务
-
异步任务:不进入主线程、而进入
"任务队列"
(task queue)的任务,只有"任务队列"通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。
-
-
同步任务
>宏任务
>微任务
-
同步任务,最外层的
console.log
最先打印,async
也属于同步任务 -
宏任务:
setTimeout
、setInterval
-
微任务:
process.nextTick(node)
、Promise
、Object.observe(已废弃)
、MutationObserver(html5新特性)
过程:
-
执行宏任务队列中第一个任务,执行完后移除它
-
执行所有的微任务,执行完后移除它们
-
执行下一轮宏任务(重复步骤2)
如此循环就形成了event loop
,其中,每轮执行一个宏任务和所有的微任务
3.8 节流和防抖
-
节流:持续触发事件,每隔一段时间只执行一次函数。场景:按钮点击、窗口大小调整、输入框输入事件
-
防抖:在一段时间内多次触发同一事件,只有最后一次触发后,函数才会执行。场景:滚动事件、鼠标移动、实时数据更新
3.9 undefined和null、空数组的区别
-
undefined
表示变量已经声明,但是没有值; -
null
表示空
typeof undefined = undefined,但是 typeof null = object
undefined
转数值为 NaN
,null
转数值为 0
拓展:
Undefined
表示变量应该有值,但未赋值
null
表示定义了一个空对象
NaN
表示非数字,其类型是 number
-
空数组
-
空数组是一个真正的对象,只是包含元素个数为0,null数组是一个空引用
-
空数组可以调用方法(函数),Array.prototype.every() 返回true
-
3.10 什么是面向对象?封装、继承、多态
1、typeof 基本类型√ 对象类型—— object
2、instanceof:检测某个对象是不是某个类的实例,一直向上检查
3、constructor:某个对象的亲爹是谁,到底是由谁构造出来的。
3.11 跨域和同源
-
跨域:是指从一个域名的网页去请求另一个域名的资源;
协议
、域名
、端口
,只要有一个的不同,就是跨域。 -
同源:
协议
、域名
、端口
,三者全部相同,才是同源。 -
解决跨域的几种方式:
-
jsonp
-
document.domain + iframe
-
postMessage
-
CORS 跨域资源共享
-
node代理跨域
-
3.12 原型和原型链
原型:原型是一个对象,为其他对象提供共享属性的对象,又称原型对象;
函数(function):函数是一种特殊的对象,函数的原型存放在 prototype
属性上。
对象(Object): 普通对象的原型是存放到内置属性上,可以通过对象的 __proto__
来访问对象的原型。
数组(Array): 数组也是一种特殊的对象,但与函数不同的是它的原型和普通对象一样,也是存放到内置属性上,可以通过数组的 __proto__
来访问数组的原型。
原型链:在 JavaScript
中万物都是对象,对象和对象之间也有关系,并不是孤立存在的。对象之间的继承关系,在JavaScript中是通过 prototype
对象指向父类对象,直到指向 Object
对象为止(person → Person → Object),这样就形成了一个原型指向的链条,专业术语称之为原型链。
用法:__proto__和constructor
hasOwnProperty()
判断属性是否属于原型链上的属性 。
3.13 数组去重
- 使用Set对象和扩展运算符(…)
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
- 使用filter方法和indexOf
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index, arr) => arr.indexOf(item) === index);
- 使用reduce方法
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, current) => {if (acc.indexOf(current) === -1) {acc.push(current);}return acc;
}, []);
- 使用Map对象或Object
const array = [1, 2, 2, 3, 4, 4, 5];
let uniqueObject = {};
array.forEach(item => {uniqueObject[item] = true;
});
const uniqueArray = Object.keys(uniqueObject).map(Number);
- 使用for循环和indexOf
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {if (uniqueArray.indexOf(array[i]) === -1) {uniqueArray.push(array[i]);}
}
四、总结
简简单单先到这里吧,说多了没头了。