日记8.23

2024.8.23

apply、call、bind的区别

共同点：功能一致

1
2
可以改变this指向
语法：函数.call()、函数.apply、函数.bind()

区别：

1
2
1.call、apply可以立即执行。bind不会立即执行，bind返回的是一个函数需要加入（）执行。
2.参数不同：apply第二个参数是数组。call和bind有多个参数需要挨个写。

使用场景：

1
2
3
4
5
6
7
8
9
10
11
// 1.用apply的情况
var arr1 = [1,2,3,5,4];
//由于apply可以传递一个数组，刚好可以用来比较值
console.log(Math.max.apply(null,arr1))
//2.用bind的情况
var btn = document.getElementById('id');
var saf = document.getElementById('saf');
//这里的bind不用加括号，因为要触发事件时才指向，bind不加括号返回了一个函数。
btn.onclick = function(){
    console.log(this.id);
}.bind(saf)

深拷贝和浅拷贝

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
共同点：都是用来做复制操作的
不同点：
1.浅拷贝：只复制了引用，而未复制真正的值
var arr1 = ['a','b'];
var arr2 = arr1;

var obj1 = {a:1,b:2}
var obj2 = Object.assign(obj1)

2.深拷贝：是复制了真正的值(不同引用)
var obj3 = {
    a:1,
    b:2
}
var obj4 = JSON.parse(JSON.stringify(obj3));

localStorage、sessionStorage、cookie区别

1
2
3
4
5
6
7
8
9
10
11
共同点：在客户端存放数据
区别：
1.数据存放有效期
    localStorage：始终有效，持久化存储
    sessionStorage：仅在当前浏览器窗口关闭之前有效。
    cookie：只在设置的cookie过期时间之前有效。
2.localStorage，sessionStorage不可以设置过期时间
3.存储大小有限制
不同浏览器规格不一样，下面只说大部分情况
    cookie储存量不超过4k
    localStorage、sessionStorage不能超过5M

js的内置对象有哪些？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
1.基本的内置对象：String、Boolean、Number、Array、Object、Function、Math、Data、RegExp等

2.常用的内置对象方法
Math:
    abs()   求绝对值
    sqrt()  求平方根
    max()   求最大值
    min()   求最小值
Data:
    var a = new Data()
    a.getYear()
String:
    concat() 将字符串参数连接到调用的字符串
    length
    slice()   提取字符串一部分并将其作为新字符串返回，而不修改原始字符串。
    split()   根据所给的条件分隔字符串成数组

操作数组的方法有哪些?

1
2
3
4
5
6
7
8
9
10
Array:
    常用的方法：
    push()、pop()、shift()、unshift()、sort()、reverse()、splice()、concat()、join()、map()、filter()、every()、some()、reduce()、isArray()、findIndex()、includes()

    会改变原数组的方法：
    push()、pop()
    shift()、unshift()
    sort()、reverse()
    splice()

js对数据类型的检测方法有哪些呢？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//typeof() 用于判断基本类型，遇到引用类型不管用
console.log(typeof 66) //number
console.log(typeof [1,2,3]) //object

//instanceof() 用于判断引用类型，不能判断基本数据类型
console.log([] instanceof Array) //true
console.log('abc' instanceof String) //false

//constructor 可用于判断所有类型；但是如果声明了一个构造函数，并把原型指向了Array就无法判断类型
console.log(('abc').constructor === String) //true

//Object.prototype.toString.call()
var p = Object.prototype.toString
console.log(p.call(2))
console.log(p.call(true))
console.log(p.call('aaa'))
console.log(p.call({}))
console.log(p.call([]))

最后一种方法的的原理：

1
2
3
4
5
6
7
1.toString为Object的原型方法，而Array 、Function等类型作为Object的实例，都重写了toString方法。
2.不同的对象类型调用toString方法时，根据原型链的知识， 调用的是对应的重写之后的toString方法（Function类型返回内容为函数体的字符串，Array类型返回元素组成的字符串…），而不会去调用Object上原型toString方法（返回对象的具体类型）
3.所以采用obj.toString()不能得到其对象类型，只能将obj转换为字符串类型；
  因此，在想要得到对象的具体类型时，应该调用Object上原型toString方法。 
4.Object对象本身就有一个toString()方法，返回的是当前对象的字符串形式，原型上的toString()返回的才是我们真正需要的包含对象数据类型的字符串。
5.为什么需要call？
 由于Object.prototype.toString()本身允许被修改，像Array、Boolean、Number的toString就被重写过，所以需要调用Object.prototype.toString.call(arg)来判断arg的类型，call将arg的上下文指向Object，所以arg执行了Object的toString方法。

js的事件传播与事件委托

1
2
3
4
5
事件传播阶段：

1.捕获阶段（Capturing phase）—— 事件（从 Window）向下走近元素。
2.目标阶段（Target phase）—— 事件到达目标元素。
3.冒泡阶段（Bubbling phase）—— 事件从元素上开始冒泡。
1
2
3
事件委托：
    事件委托又叫事件代理，原理是利用了事件冒泡的机制来实现，也就是把原本要绑定在子元素身上的事件绑定到了父元素身上。
    注意：如果子元素阻止了事件冒泡，那么委托也就不成立了。
1
2
事件委托的优点：
    提高性能，减少事件绑定，从而减少了内存占用

接下来是事件委托的例子：

1
2
3
4
5
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
//点击删除对应的li

let li = document.querySelectorAll('li');
let ul = document.querySelector('ul');
//不采用事件委托方法

for(let i = 0;i<li.length;i++){
    li[i].onclick= function(){
        ul.removeChild(this)
    }
}

//采用事件委托
ul.onclick = function(e){
    ul.removeChild(e.target)
}


ES6的新特性有哪些？

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
1.块级作用域(let,const)
    --不存在变量提升
    --存在暂时性死区问题（变量在其声明之前无法访问的状态。）
    --块级作用域
    --不能再同一个作用域内重复声明
2.定义类的语法糖(class)
3.箭头函数
    --简化了写法
    --不能作为构造函数使用，不能用new
    --箭头函数没有原型，没有arguments
    --箭头函数不能用call、apply、bind去改变this的指向
    --箭头函数中this指向外层第一个函数的this
    --
4.解构赋值==》[a,b]=[1,2]
5.对象和数组的扩展运算符(...)
6.generator
7.一种新的基本类型(symbol)
8.两种新的数据结构(set,map)
9.模块化(import,export)
10.给数组新增了API
11.新增函数参数默认值
12.Promise
    --用于解决回调地狱问题
    --自身有all,reject,resolve,race方法
    --原型上有then,catch,finally
    --把异步操作队列化
    --三种状态：pending,fulfilled,rejected
    --状态变化：pending->fulfilled;pending->rejected;状态一旦发生改变就会结果凝固