21届秋招前端面经 -- 腾讯（企业微信部）
For Each和map区别
一、相同点：
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数，参数分别为item（当前每一项），index（索引值），arr（原数组）
3.匿名函数中的this都是指向window
4.只能遍历数组
二、不同点
1.map()会分配内存空间存储新数组并返回，forEach()不会返回数据。
2.forEach()允许callback更改原始数组的元素。map()返回新的数组。
数组方法foreach、map、filter、some、every
forEach() 没有返回值，只是针对每个元素调用func 。循环数组。和for的用法一样的。forEach方法在数组元素为空时会跳过执行回调函数
let i = 0;
new Array(10).forEach(() => {
i++;
});//输出为0
filter() array.filter(function(currentValue, index, arr))
-
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素,主要用于筛选数组
-
注意它直接返回一个新数组
some() array.some(function(currentValue, index, arr))
- some() 方法用于检测数组中的元素是否满足指定条件. 通俗点 查找数组中是否有满足条件的元素
- 返回值是布尔值，如果找到第一个满足条件的元素,则终止循环. 不在继续查找.
every() 返回一个boolean，判断每个元素是否符合func条件。数组里面所有的元素都符合才返回true。
map() 返回一个新的Array，每个元素为调用func的结果。新数组的长度和原来的是一样的，他只不过是逐一对原来数据里的每个元素进行操作。
箭头函数this指向问题
由于箭头函数不绑定this， 它会捕获其所在（即定义的位置）上下文的this值， 作为自己的this值
函数调用
- 普通函数 this指向window
function fn(){
console.log('1');
}
fn();
fn.call();
- 对象的方法 this指向的是对象o
var o = {
sayhi:function(){
console.log(1);
}
}
o.sayhi();
- 构造函数 this指向的ldh这个实例对象，原型对象里面的this指向的也是ldh这个实例对象
function Star(){};
Star.prototype.sing = funtion(){
}
var ldh = new Star();
- 绑定事件函数 this指向函数调用者，即btn
var btn = document.querySelector('button');
btn.onclick = function(){
console.log(this);
};
//点击按钮就可以调用
- 定时器函数 this指向window
setInterval(function(){},1000);
//这个函数是定时器自动1秒钟调用一次
- 立即执行函数 this指向window
(function(){
console.log(1);
})()
this指向
使用 this 可以传递上下文对象，避免在定义中将参数实际名称写入，更可以避免在传递过程中造成混乱，所有使用 this 是非常有效的方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjz9OvKE-1603090578851)(A73DF4673DC0452E8EE7B22234369D7C)]
- 在一般函数方法中使用this指向全局对象
function test(){
this.x = 1;
console.log(this.x);
}
test() //1
- 作为对象方法调用，this指代上级对象，数组同理
var obj = {
name: "obj",
func1: function(){
console.log(this);
}
}
obj.func1() // this --> obj
document.getElementById("div").onclick = function(){
console.log(this); //this -->div
}
- 函数作为window内置函数的回调函数调用：this指向window对象（setTimeout、setInterval等）
window.setInterval(function(){
console.log(this);
},300)
- 作为构造函数调用，this指代new实例化对象
function test(){
this.x = 1
}
var o = new test()
alert(o.x)//1
- apply、call、bind改变函数的调用对象，此方法的第一个参数为改变后调用这个函数的对象
var x = 0;
function test(){
console.log(this.x);
}
var obj = {}
obj.x = 1;
obj.m = test;
obj.m.apply() // 0 ,apply()参数为空时，默认调用全局对象
obj.m.apply(obj); // 1
- 匿名函数的执行环境具有全局性，this对象通常指向window对象
var name = 'The Window';
var obj = {
name: 'My obj',
getName: function(){
return function(){
console.log(this.name);
};
}
};
obj.getName()();//'The Window'
- 美团面试
var name = 'lisi';
var person = {
name: 'zhangsan',
show1: function() {
console.log(this.name);
//作为对象方法调用，this指代**上级对象**
},
show2: () => console.log(this.name),
//箭头函数this调用的是定义时的上一层作用域的this，指向的是person，person是一个对象，不能形成单独作用域，指向window
show3: function() {
return function() {
console.log(this.name);
};
},
//show3函数有个闭包，闭包中的this指向调用这个闭包的对象，window（即匿名函数）
show4: function() {
return () => console.log(this.name);
}
//箭头函数this是定义时的上一层作用域的this
};
person.show1();//zhangsan
person.show2();//lisi
person.show3()();//lisi
person.show4()();//zhangsan
call apply bind 总结
相同点:
都可以改变函数内部的this指向.
区别点:
1.call 和 apply 会调用函数, 并且改变函数内部this指向.
2.call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
3.bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
1.call 经常做继承.
2.apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3.bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
type of原理
不同的对象在底层都表示为二进制， 在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型， null 的二进制表示是全 0， 自然前三位也是 0， 所以执行 typeof 时会返回“object”。
https缺点
第一点：就是耗资本（资本可以是时间，技术和金钱），网络上提供很多的免费ssl证书，百度智能云，阿里云，站长之家。但是你得会安装啊（下一期讲ssl的安装）
第二点：使得网站打开速度变慢，有人测试过（又一个闲人）加了https网站速度变慢50%。网站变慢就得去做cdn，结果简单的cdn不支持https，有的多花钱买https的访问量。
第三点：https没有搭建好，或者安全防御过头了，会使得浏览器报警，说访问的是不安全浏览器
Promise
Promise，他是一个对象，是用来处理异步操作的，使用了Promise之后无论成功或者失败都会给我们一个答复。
特点：
PromiseStatus： 用于记录Promise对象的三种状态，分别为：
- Pending：待定状态，Promise对象刚被初始化的状态
- Fulfilled：完成状态，承诺被完成了的状态
- Rejected：拒绝状态，承诺完成失败的状态
一旦状态改变就不会再变 （两种状态改变：成功或失败）
- Pending -> Fulfilled
- Pending -> Rejected
PromiseStatus： 用于记录返回的数据或者错误。当承诺完成时，会把返回的数据赋给PromiseStatus。如果承诺执行失败了，那么失败的原因也会赋给此变量。
resolve()和reject()： Promise构造函数中有两个闭包的函数resolve()和reject()。在new一个新的Promise的时候会传递一件你需要做的事情（executor）。这个executor是一个函数，在Promise的构造函数中它会被传入两个参数，这两个参数即我们的两个闭包的函数resolve()和reject()，以便你在executor中判定是否完成了你的承诺。
executor()： executor()函数中执行的代码就是子程序需要完成事。在executor()函数内如果调用了resolve()，resolve()则会把Promise对象的状态PromiseStatus修改为fulfilled，把resolve(value)中的value值赋给Promise对象的PromiseValue。
优点：
让回调函数变成了规范的链式写法，程序流程可以看的很清楚。他有一整套接口，可以实现许多强大的功能，比如同时执行多个异步操作，等到他们的状态都改变以后，在执行一个回调函数；再比如，为多个回调函数中抛出的错误，统一制定处理方法…
有一个传统写法没有的好处：他的状态一旦改变，无论何时查询，都能得到这个状态。这意味着无论何时为peomise实例添加回调函数，该函数都能正确执行。
传统写法的话都通过监听事件来执行回调函数，一旦错过了事件，再添加回调函数是不会执行的。
缺点：
编写的难度比传统写法高，而且阅读代码也不是一眼可以看懂。你只会看到一堆then，必须自己在then的回调函数里面理清逻辑。
promise.all和promise.race
-
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
Promse.all在处理多个异步处理时非常有用，比如说一个页面上需要等两个或多个ajax的数据回来以后才正常显示，在此之前只显示loading图标。
好处：Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即p1的结果在前，即便p1的结果获取的比p2要晚。这带来了一个绝大的好处：在前端开发请求数据的过程中，偶尔会遇到发送多个请求并根据请求顺序获取和使用数据的场景，使用Promise.all毫无疑问可以解决这个问题。
-
Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
-
使用范围：
-
有些时候我们做一个操作可能得
同时需要不同的接口返回的数据，这时我们就可以使用Promise.all； -
有时我们比如说有好几个服务器的好几个接口都提供
同样的服务，我们不知道哪个接口更快，就可以使用Promise.race，哪个接口的数据先回来我们就用哪个接口的数据。
-
DIV三列布局实现
1、Flex
<style>
.container{
width:100%;height:400px;border:1px solid red;
display:flex;
}
.left{
width:100px; height:100%;background:gray;
flex:none;
}
.middle{
width: auto;
height: 100%;
flex:1;
}
.right{
height:100%;
width: 100px;
flex:none;
}
</style>
2、float浮动
.left-01 {
float: left;
background-color: red;
width: 150px;
height: 50px;
}
.right-01 {
float: right;
background-color: yellow;
width: 200px;
height: 50px;
}
.middle-01 {
margin: 0 200px 0 150px;
background-color: #fff9ca;
height: 50px;
}
//根据float对后面元素的影响，主元素要放在文档流最后
3、table
//div顺序必须为左中右
.container{
width:100%;height:400px;border:1px solid red;
display:table;
}
.left{
width:100px; height:100%;background:gray;
display:table-cell;
}
.middle{
width: auto;
height: 100%;
background: red;
display: table-cell;
}
.right{
width: 100px;
height:100%;
background:green;
display: table-cell;
}
4、css
<style>
.container{
width:100%;height:400px;border:1px solid red;
}
.left{
width:100px;height:100%;background:gray;
float:left;
}
.middle{
width:calc(100% - 100px);
height: 100%;
background: red;
}
.right{
height:400px;background:green;
float:right;
width:100px;
}
style>