【实习面经】金山云

2021金山云前端实习一面，总共八个问题

---

前端跨域问题

跨域就是浏览器从一个“域”向另一个“域”的服务器发送请求，来访问另一个“域”的资源。但是浏览器不允许直接访问另一个“域”上的资源，只能访问同一个“域”的资源，这就是“同源策略”。
所谓同源就是：协议、域名、端口号一致。

解决方案：

1. JSONP
2. CORS

Hash
postMessage
WebSocket
我遇到的前端面试题2017

---

JS数组常用方法

参考链接：js中数组常用的方法总结，包括ES6

方法	功能	返回值	是否对原数组造成影响
.push()	后增	返回长度	会
.unshift()	前增	返回长度	会
.pop()	后删	返回被删除元素	会
.shift()	前删	返回被删除元素	会

• .concat() ，拼接，返回新数组，不改变原数组
• .splice((index,length,增加的元素1,增加的元素2…,增加的元素N)，从index开始删除length个元素，并从index开始添加1-N元素，返回被删除元素组成的数组
• .slice(startIndex,endIndex) ，返回从startIndex开始(包括)，到endIndex(不包括)之间的原属组成的数组
• .join()，将数组转换为字符串，返回字符串
• .sort()，按ascii码排序，返回排序后数组
• .reverse()，颠倒数组中元素的顺序，会改变原数组
• .filter()，返回数组中满足条件的元素组成的新数组，filter()的参数是一个方法，该方法的第一个参数为一个方法，有三个参数，current:当前值 index:当前值下标 array:这个数组对象
• .indexOf(某元素,startIndex) 从startIndex开始，查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1
• .lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询
• .map()，根据需求格式化原数组，返回格式化后的数组。原数组不变
• .every()，对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true
• .forEach()，数组遍历
• .some()，对数组的每一项都运行给定的函数，若存在一项或多项返回 true,则返回 true
  ES6新增
• find()，找到数组中第一次满足条件的元素，并返回，若找不到则返回undefined；和filter()方法的区别在于：filter返回值是所有满足条件的元素组成的数组，
• findIndex()，作用同indexOf()，返回第一个满足条件的下标，并停止寻找；区别是findIndex() 的参数为一个回调函数,且一般用于对象数组
• includes(),返回一个布尔值。 参数是一个value,一般用于简单数组。
• Array.isArray()，用来判断一个元素是否为数组

---

深拷贝如何实现

---

CSS实现水平居中、垂直居中

---

CSS优先级以及权重

---

sessionStorage和localStorage的区别

---

清除浮动

四种方式，一种额外标签法clear:both，一种为父级元素添加overflow，一种是为父级元素添加after伪元素，一种是父级添加双伪元素

额外标签法

.clear {
  clear: both;
}
<div class="clear"></div> 

父级元素添加overflow属性

overflow: hidden | auto | scroll

父级添加after伪元素

clearfix:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visiblity: hidden;
}

.clearfix {
  *zoom: 1;
}

父级添加双伪元素

.clearfix:after
.clearfix:before{
  content: "";
  display: table;
}

.clearfix: after{
  clear:both;
}

.clearfix {
  *zoom: 1;
}

---

position属性