一、相同点:
1.都是循环遍历数组中的每一项
2.每次执行匿名函数都支持三个参数,参数分别为item(当前每一项),index(索引值),arr(原数组)
3.匿名函数中的this都是指向window
4.只能遍历数组
二、不同点
1.map()会分配内存空间存储新数组并返回,forEach()不会返回数据。
2.forEach()允许callback更改原始数组的元素。map()返回新的数组。
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))
every() 返回一个boolean,判断每个元素是否符合func条件。数组里面所有的元素都符合才返回true。
map() 返回一个新的Array,每个元素为调用func的结果。新数组的长度和原来的是一样的,他只不过是逐一对原来数据里的每个元素进行操作。
由于箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值
function fn(){
console.log('1');
}
fn();
fn.call();
var o = {
sayhi:function(){
console.log(1);
}
}
o.sayhi();
function Star(){};
Star.prototype.sing = funtion(){
}
var ldh = new Star();
var btn = document.querySelector('button');
btn.onclick = function(){
console.log(this);
};
//点击按钮就可以调用
setInterval(function(){},1000);
//这个函数是定时器自动1秒钟调用一次
(function(){
console.log(1);
})()
使用 this 可以传递上下文对象,避免在定义中将参数实际名称写入,更可以避免在传递过程中造成混乱,所有使用 this 是非常有效的方法。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tjz9OvKE-1603090578851)(A73DF4673DC0452E8EE7B22234369D7C)]
function test(){
this.x = 1;
console.log(this.x);
}
test() //1
var obj = {
name: "obj",
func1: function(){
console.log(this);
}
}
obj.func1() // this --> obj
document.getElementById("div").onclick = function(){
console.log(this); //this -->div
}
window.setInterval(function(){
console.log(this);
},300)
function test(){
this.x = 1
}
var o = new test()
alert(o.x)//1
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
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
相同点:
都可以改变函数内部的this指向.
区别点:
1.call 和 apply 会调用函数, 并且改变函数内部this指向.
2.call 和 apply 传递的参数不一样, call 传递参数 aru1, aru2…形式 apply 必须数组形式[arg]
3.bind 不会调用函数, 可以改变函数内部this指向.
主要应用场景:
1.call 经常做继承.
2.apply 经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
3.bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向.
不同的对象在底层都表示为二进制, 在 JavaScript 中二进制前三位都为 0 的话会被判断为 object 类型, null 的二进制表示是全 0, 自然前三位也是 0, 所以执行 typeof 时会返回“object”。
第一点:就是耗资本(资本可以是时间,技术和金钱),网络上提供很多的免费ssl证书,百度智能云,阿里云,站长之家。但是你得会安装啊(下一期讲ssl的安装)
第二点:使得网站打开速度变慢,有人测试过(又一个闲人)加了https网站速度变慢50%。网站变慢就得去做cdn,结果简单的cdn不支持https,有的多花钱买https的访问量。
第三点:https没有搭建好,或者安全防御过头了,会使得浏览器报警,说访问的是不安全浏览器
Promise,他是一个对象,是用来处理异步操作的,使用了Promise之后无论成功或者失败都会给我们一个答复。
特点:
PromiseStatus: 用于记录Promise对象的三种状态,分别为:
一旦状态改变就不会再变 (两种状态改变:成功或失败)
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实例包装成一个新的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
,哪个接口的数据先回来我们就用哪个接口的数据。
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>