1.1-事件委托面试点
1.什么是事件委托
给父元素注册事件，委托给子元素处理
2.事件委托原理：==事件冒泡==
3.事件委托注意点
this : 指向父元素
e.target : 指向触发事件的子元素
4.事件委托场景 ：
给动态新增元素注册委托事件
1.2-localStorage与sessionStorage区别
1.相同点
作用一致 ： 用于存储数据都是只能存储字符串类型数据(上限5MB)
2.不同点： 存储方式不同
localStorage : 硬盘存储（永久存储，页面关闭还在，存在硬盘）sessionStorage ：内存存储（临时存储，页面关闭了就消失）
3.localStorage与sessionStorage如何存储引用类型数据（数组和对象）
转json存储
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button class="btn1">存对象</button>
<button class="btn2">取对象</button>
<script>
/*
json -> js : let jsObj = JSON.parse( json格式 )
js -> json : let jsonStr = JSON.stringify( js对象 )
*/
let obj = {
name:'ikun',
age:30,
sex:'男'
}
document.querySelector('.btn1').onclick = function(){
//存 ： (1)js -> json (2)存json
// //(1)js->json
// let jsonStr = JSON.stringify( obj )
// //(2)存json
// localStorage.setItem('user',jsonStr)
//合写一行
localStorage.setItem('user',JSON.stringify( obj ))
}
document.querySelector('.btn2').onclick = function(){
//取: (1)取json (2)json->js
// //(1)取json
// let jsonStr = localStorage.getItem('user')
// //(2)json->js
// let jsObj = JSON.parse( jsonStr )
//
//合写一行
let jsObj = JSON.parse( localStorage.getItem('user') )
console.log( jsObj )
}
</script>
</body>
</html>02-前端基础-js高级【必会】
1.1-new关键字做了哪些事情
1.创建空对象
2.this指向这个对象
3.对象赋值
4.返回实例对象
1.2-原型链相关
1.原型链作用 : 面向对象
继承2.对象访问原型链规则： 就近原则
先访问自己，自己没有找原型，原型没有找原型的原型，直到原型链终点。 如果还找不到，属性则获取undefined，方法则报错xxx is not defined
1.3-如何判断this指向
this : 谁
调用我，我就指向谁普通函数
函数名()： window对象方法
对象名.方法名()： 对象构造函数
new 函数名(): new创建的实例对象
1.4-call apply bind区别
共同点:
都可以修改this，第一个参数都是
修改的this
不同点
传参方式不同： call是逐一传参， apply是数组/伪数组传参
函数名.call(修改的this,参数1,参数2....)
函数名.apply(修改的this,数组/伪数组)
执行机制不同：call和apply会立即执行函数，bind不会立即执行
bind会得到一个修改this后的新函数
1.5-如何判断数据类型
-
typeof有两种数据类型无法检测： null 、array
-
Object.prototype.toString.call(数据)
1.6-闭包
1.闭包是什么 :
闭包 是 使用其他函数内部变量的 函数 （闭包 = 函数 + 其他函数内部变量）
闭包 = 函数使用外层函数的变量
2.闭包作用 : 扩展变量的作用范围
1.7-递归及应用场景
1.递归 ： 在函数内部调用自己
2.递归作用 ：
浅拷贝与深拷贝
遍历dom树
1.8-浅拷贝与深拷贝
1.浅拷贝：拷贝地址， 修改拷贝后的数据原数据也会变化
2.深拷贝：拷贝数据， 修改拷贝后的数据原数据不会变化
推荐 json : let obj = JSON.parse( JSON.stringify( 对象 ) )
递归
1.9-数组常用迭代方法
以下所有的方法，都可以使用传统的for循环来代替，只是语法不同而已
| 数组几种遍历介绍(共同点：回调函数一样) | 应用场景 | 回调执行次数 | 函数返回值 | 回调是否需要return |
|---|---|---|---|---|
| map遍历 | 映射数组 | == 原数组长度 | 新数组(==) | 一定要return（当前元素） |
filter遍历 |
过滤数组 | == 原数组长度 | 新数组(!=) | return true(元素添加到新数组) |
| forEach遍历 | 遍历数组 | == 原数组长度 | 无 | 无 |
| some遍历 | 找出符合条件的数 | != 原数组长度 | 布尔类型 | return true；循环结束 |
| every遍历 | 判断所有元素是否符合条件 | != 原数组长度 | 布尔类型 | return true; 循环继续 |
| findIndex遍历 | 获取符合条件的第一个元素位置(下标) | != 原数组长度 | 数字 | return true; 循环结束 |
| includes方法(底层是遍历) | 判断数组/字符串是否包含某一个值 | 无回调 | 布尔类型 | 无回调 |
1.10-for in与for of区别
for-in与for-of区别 1.功能不同 for-in是遍历数组的下标 for-of是遍历数组的元素 2.原型的属性 for-in会遍历原型的属性 for-of不会遍历原型的属性 3.数据类型 for-in可以遍历Object类型 for-of不可以遍历Object类型
总结：如果只想要属性值/元素，使用for-of效率更高
MDN官网传送门：for-of迭代
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <script> /* for-in与for-of区别 1.功能不同 for-in是遍历数组的下标 for-of是遍历数组的元素 2.原型的属性 for-in会遍历原型的属性 for-of不会遍历原型的属性 3.数据类型 for-in可以遍历Object类型 for-of不可以遍历Object类型 总结：如果只想要属性值/元素，使用for-of效率更高 */ //数组 let arr = ['a','b','c']//下标0 1 2 //给原型添加成员 Array.prototype.age = 30 //对象 let obj = {name:'zhangsan',age:30} //遍历数组 //for-in for(let key in arr){ console.log(key,arr[key])//下标,元素 } //for-of for (let item of arr ) { console.log(item) //元素 } //遍历对象 : 程序报错 // for (let item of obj ) { // console.log(item) //属性名 // } </script> </body> </html>