- 手写一下深拷贝
- == 和 === 的区别
- 写一个方法提取一下search里面的参数
- 写一下不知道宽高元素垂直水平居中方法
- 301和302的区别
- git命令
- JS基本数据类型
- css选择器的优先级
- 行内元素,块级元素区别
- css伪元素有哪些
1. 手写一下深拷贝
-
浅拷贝: 只是复制了对像的引用地址,两个对象指向同一个地址,其中一个改变,另一个也跟着改变。
-
深拷贝:指改变一个对象的属性,另一个对象不会改变
实现深拷贝:
- 创建一个新的对对象,循环递归实现深拷贝
function deepClone(obj){
let newObj;
// 先判断数据类型
if(obj.constructor === Array) { // 数组
newObj = [];
for(const item of obj) {
newObj.push(item);
}
} else if(obj.constructor === Object) { // 对象
newObj = {};
for(let key in obj){
newObj[key] = deepClone(obj[key]);
}
} else {
return obj;
}
return newObj;
}
- 使用
JSON.parse(JSON.stringify(obj))
的方法实现深拷贝
function deepClone(obj){
return JSON.parse(JSON.stringify(obj));
}
2. == 和 === 的区别
- ==比较过程
- 如果两个值的数据类型相同,再比较其值,相同返回
true
,不同返回false
- 如果两个值的数据类型不同,进行数据类型转换,转换规则如下:
(1). 如果一个是null
,一个是undefined
,二者相等
(2). 如果一个是字符串一个是数值,把字符串转换为数值再比较
null == undefined; // true
'1' == 1; // true
'true' == true; // false
- === 比较过程
- 如果二者数据类型不同直接返回
false
使用 === 返回true时,说明比较的两个数据不仅类型相同,而且值也相等
使用 == 返回true时,二者数据类型不一定相同,但是转换为相同类型后的值一定相等
⚠️ NaN不等于任何值,包括本身
3. 写一个方法提取一下search里面的参数
?id=1&num=123
正则表达式获取指定参数
function getUrlParam(name, search){
let reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
let r = search.substr(1).match(reg);
if (r!=null) {
return unescape(r[2]);
}
return null;
}
getUrlParam('num', '?id=1&num=123'); // 123
4. 写一下不知道宽高元素垂直水平居中方法
-
display:table-cell
组合使用display:table-cell
和vertical-align、text-align
,使父元素内的所有行内元素水平垂直居中(内部div
设置display:inline-block
即可)。 -
transform:translate(-50%,-50%)
-
弹性布局
display:flex;
justify-content:center;
align-items:center;
5. 301和302的区别
- 301是永久重定向。表示请求的资源已经被永久移动到新的URI,返回新URI,并且浏览器会自动定向到新的URI,今后的任何新请求,应使用新的URI
- 临时移动。与301类似,资源被临时移动,继续使用原始URI
6. git命令(点击查看)>>
7. JS基本数据类型
String
Number
Boolean
null
undefined
8.css选择器的优先级
css优先级高低排序:!important > 行内样式>ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
9. 行内元素,块级元素区别
-
块级元素会独占一行,其宽度自动填满其父元素宽度行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
-
一般情况下,块级元素可以设置
width,height
属性,行内元素设置width, height
无效(⚠️:块级元素即使设置了宽度,仍然是独占一行的) -
块级元素可以设置
margin
和padding
. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right
都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom
都不会产生边距效果。(水平方向有效,竖直方向无效)
10. css伪元素有哪些
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
:active
向被激活的元素添加样式。:focus
向拥有键盘输入焦点的元素添加样式。:hover
当鼠标悬浮在元素上方时,向元素添加样式。:link
向未被访问的链接添加样式。:visited
向已被访问的链接添加样式。:first-child
向元素的第一个子元素添加样式。:lang
向带有指定 lang 属性的元素添加样式。:first-letter
向文本的第一个字母添加特殊样式。:first-line
向文本的首行添加特殊样式。:before
在元素之前添加内容。:after
在元素之后添加内容。