- 手写一下深拷贝
- == 和 === 的区别
- 写一个方法提取一下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基本数据类型
StringNumberBooleannullundefined
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在元素之后添加内容。