前端学习
2023-03-30 15:05:48 0 举报AI智能生成
FEE
作者其他创作
大纲/内容
string
最大安全数：Number.MAX_SAFE_INTEGER
最小安全数：Number.MIN_SAFE_INTEGER
number
boolean
undefined
Symbol()不能用作构造函数，不能与new一起使用
第一次使用某字符串时，会检查全局注册表，发现不存在的符号，就会新生成添加到注册表。后续使用相同的符号，返回符号实例。
Symbol.for('foo') !== Symbol('foo') // false
Symbol.for('foo')
keyfor会查询全局注册表，返回全局符号对应的字符串键，不是全局符号返回undefined
Symbol.keyfor('foo')
全局注册表
for-await-of实现异步迭代器API的函数
Symbol.asyncIternator
for-of迭代器
Symbol.iterator
决定一个构造器对象是否认可一个对象是它的实例
function Foo(){}let f = new Foo()console.log(f instanceof Foo) // trueconsole.log(Foo[Symbol.hasInstance](f) // true)
ES6中，instanceof会使用Symbol.hasInstance来确定关系
Symbol.hasInstance
是个boolean值，表示是否应该用Array.prototype.concat()拍平数组
Symbol.isConcatSpreadable
boolean值，为true指定匹配的是正则表达式而不是字符串
为false表示不打算用作正则表达式对象
const reg = /foo/console.log('/foo/'.startsWith(reg)) // Errorreg[Symbol.match] = falseconsole.log('/foo/'.startsWith(reg)) // trueconsole.log('/bar/'.endsWith(reg)) // false
Symbol.match
正则表达式方法，该方法替换一个字符串匹配的子串，由String.prototype.replace()使用
Symbol.replace
Symbol.toPrimitive
一个字符串，用于创建对象的默认字符串描述，由Object.prototype.toString()使用
class Bar{ constructor(){ this[Symbol.toStringTag] = 'Bar' }}let bar = new Bar()bar.toString() // [object Bar]bar[Symbol.toStringTag()] // Bar
可自定义返回类型
Symbol.toStringTag
内置符号属性
symbol
bigInt
基本数据类型
object
array
function
regExp
date
引用数据类型
作为运算符，返回值不能作为JS类型系统的依据。
可以判断的数据类型
null的二进制为32位的0，而判断类型是根据数字前三位判断，而object判断依据是前三位为0，所以null的类型也会是object
typeof null === 'object' // true
typeof
判断B是否在A的原型链上
A instanceof B
null，undefined没有构造函数
constructor可以被改写
constructor
A是否在B的原型链上，等同于instanceof
A.isPrototypeOf(B)
'[object Array]'
'[object Date]'
'[object Object]'
'[object Function]'
···
Object.prototype.toString.call(A)
Symbol.toStringTag()
undefined === void 0(void number)
等比较
数据类型判断
typeof NaN == 'number' //true
NaN !== NaN //true
NaN不能被删除
该方法会将A转换为数字，若不能成功转换，返回true。可以转换返回false
isNaN('1') //false
isNaN(NaN) //true
isNaN('blue') //true
window.isNaN(A)
判断A是否是数字并且为NaN，则返回true，否则返回false
Number.isNaN(NaN) //true
Number.isNaN('1') //false
Number.isNaN('blue') //false
Number.isNaN(A)
严格判断相等
内部调用number::equal机制，有NaN就返回false
[NaN].indexOf(NaN) === -1 //true
内部调用number::sameValueZero，左右两边都有NaN返回true
[NaN].includes(NaN) === true //true
数组中的NaN判断
NaN和谁都不相等，包括自己
null == undefined //true
null，undefined两者相等
'0' == false => '0' == 0 //true
布尔值与其他类型相比较，布尔值会转换为数字
'0' == 0 => 0 == 0 //true
数字与字符串类型比较，字符串会转为数字
({}) == '[object Object]' //true
对象和原始类型比较，对象会转为原始类型
{} == {} //false
对象与对象比较，比较的是引用地址
转换规则
\"\"
NaN
null
条件判断转换为布尔值false的有
1.[Symbol.toPrimitive]()
2.valueOf()
3.toString()
优先级
[] + {} == '' + {} == '[object Object]' //true
对象转换为原始数据类型
数据类型转换
1.数据类型
+ {} = NaN
+ undefined = NaN
+ 'str' = NaN
特殊值
+ '1' === 1 //true
字符串转换数字
运用
+
！
一元运算符
||
&&
二元运算符
A & 1 == 1 //true，则A为奇数
A & 1 == 0 //true，则A为偶数
判断奇偶数
&
1.6 | 0 == 1 //true
取整
|
相同为0，相异为1。
无中间变量交换数据
^
~x = -Math.floor(x + 1)
~~1.6 === 1 //true
~
2.9 >> 0 === 2 //true
取整（32位二进制进行计算）
有符号位>>
Number.MAX_SAFE_INTEGER >> 0 //-1
Number.MAX_SAFE_INTEGER >>> 0 //4294967295
无符号位>>>
位运算符
2.运算符
是否可配置，可删除
configurable
是否可枚举，遍历
enumerable
是否可以被改写
writable
当前属性值
value
新创建的属性，若是没有设置描述符，默认为false。已存在的属性，若是没有设置描述符，默认为true。
对象obj上不能添加新的属性
Object.precentExtensions(obj)
返回布尔值，判断对象是否可扩展
不能新增，可删除，可修改
Object.isExtensible(obj)
对象是否可扩展
阻止添加新属性，并将所有现有属性标记为不可配置，当前属性的值只要是可写的就可以改变。
Object.seal(obj)
返回布尔值，判断对象是否被密封
不能新增，不能删除，可修改
Object.isSealed(obj)
对象是否封闭
阻止添加新属性，不可配置，不能修改值
Object.freeze(obj)
返回布尔值，判断对象是否被冻结
不能新增，不可删除，不能修改
Object.isFrozen(obj)
对象是否冻结
相关方法
属性描述符
遍历可枚举属性和原型属性
for-in循环
遍历可枚举属性
Object.keys()
遍历可枚举和不可枚举属性
Object.hasOwnPropertyNames()
遍历可枚举的symbol属性和不可枚举的symbol属性
Object.hasOwnPropertySymbols()
遍历可枚举属性，不可枚举属性，symbol属性
vue2/vue3相关面试题
proxy
Reflect.ownKeys()
对象属性遍历
共享原型属性
缺点
原型链继承
必须在构造函数中定义方法，函数不能重用
子类不能访问父类原型上定义的方法
借用构造函数继承
继承父类方法
子类中调用
两次调用父类构造函数
组合继承（原型链+借用构造函数）
Object.create()实现
原型式继承
Object() + 添加属性方法
给对象添加函数，会导致函数难以重用
寄生式继承
Object + 原型链副本拷贝 + prototype修正
只调用一次构造函数
组合寄生式继承
继承
原型链
原型
访问原型
slice
concat
扩展运算符
Object.assign
浅拷贝
只能拷贝普通键，Symbol属性不行
存在循环引用问题
限制
在转换解析过程中，可以根据key值来过滤不需要的属性
replacer若是数组，则只有包含在数组中的属性才会被序列化，其他属性会被过滤
为数字则表示空格数，上限为10
为字符串，则字符串当做空格功能使用
为null，则没有空格
space为美化输出格式
任意的函数，symbol值，undefined作为对象的属性值时会被忽略(非数组对象属性值中)或者是转换为null(出现在数组中)
函数，undefined 被单独转换时，会返回undefined
JSON.parse(JSON.stringify(obj))
深拷贝
普通拷贝
弱引用关联，没有对键的引用，值自动会被GC
垃圾回收相关
WeakMap
循环引用拷贝
手写拷贝
对象克隆
3.对象
arguments
DOM相关(NodeList，HTMLCollection，DOMTokenList等)
常见类数组
Array.from
类数组转数组
类数组
内部实现是否有用hasOwnProperty对元素进行处理，没有处理的空元素会被当做undefined进行值比较
find
findIndex
findLast
findLastIndex
includes
遍历当做undefined不跳过的方法
除了上面的方法，其他数组方法都跳过
遍历当做空值跳过的方法
稀疏数组判断
数组空元素
手写数组方法
数组手写
数据生成器
forEach + indexOf
filter
set
forEach + 对象属性标记
数组去重
两数组遍历转换为对象属性查找
基本类型求值
引用类型求值
交集，差集
应用
4.数组
因为没有prototype，所以箭头函数不能作为构造函数使用
箭头函数的函数体只有一句代码，返回某个变量可以省去函数体的大括号
箭头函数
创建一个独立的作用域
可实现私有变量，在IIFE中返回一个函数(也是闭包)
立即执行函数
指向undefined
严格模式
默认指向全局对象
非严格模式
this的绑定规则完全取决于this的调用位置
this指向
1.创建一个空对象
2.设置空对象的原型
3.执行构造函数，把相关的属性和方法添加到对象上(改变this指向到空对象上)
4.返回对象，如果都早函数返回的是对象类型，就直接返回该对象，否则返回创建的空对象
执行过程
new绑定
var name = \"global\
箭头函数中的this指向定义时的上下文
var name = \"global\"fucntion foo(){console.log(this.name)}var obj = {name: \"obj\
虽然bar是obj.foo的一个引用，但实际上引用的是foo函数本身，因此bar是直接调用函数
隐式绑定的函数会丢失绑定对象
function foo(){console.log(this.name)}var obj2 = {name:\"obj2\
对象属性引用链中只有上一层或者最后一层在调用中起作用
setTimeout，setInterval
内置的回调函数
隐式绑定
call
apply
bind
绑定之后不能再修改this指向
显示绑定
8.this
ES6中函数可以作为构造函数实例化一个新对象，也可以作为普通函数被调用。
检测函数是否使用了new关键字调用函数。如果函数是正常调用的，则new.target的值为undefined。如果是使用new关键字调用的，则new.target将引用被调用的构造函数。
new.target
函数内部
动态解析和执行函数
5.Function
全局执行上下文
函数执行上下文
执行上下文
全局作用域
该函数内部定义的变量外部无法访问，调用完之后就会被销毁，不存在闭包问题
立即执行函数IIFE
指嵌套函数中，内层函数引用了外层函数作用域中的变量，在全局作用域下可以访问函数作用域中的变量，这就是闭包。
使用函数式变成时，基本上就有了闭包。
使用场景
在函数执行完成后，被闭包引用的变量会被存储在内存中，不会被释放。若是过度使用闭包也会导致内存泄漏。
缺陷
垃圾回收
7.闭包
函数作用域
暂时性死区
var声明的变量可以在声明之前访问不会报错。
变量提升
函数声明会被提升，但是函数表达式不会被提升
当函数声明和变量都会提升时，函数首先被提升，然后才是变量提升。
函数提升
块级作用域
从当前作用域直到全局作用域，查找某变量的链路
作用域链
作用域
6.执行上下文与作用域
Element(nodeType = 1)
Text(nodeType = 3)
Comment(nodeType = 8)
Document(nodeType = 9)
DocumentType(nodeType = 10)
DocumentFragment(nodeType = 11)
type类型
new Text('text')
使用new方式创建
document.createTextNode()
document.createElement()
document.createXXX方式
创建节点
将对象从DOM树中删除
Element.remove()
设置或获取HTML表示的元素的后代
innerHTML
获取元素(包括其后代)的序列化HTML片段
outerHTML
修改来达到删除或者替换效果
innerHTML | outerHTML
从其他文档获取一个节点(及其子节点)插入到当前文档（可以iframe形式获取），并从源文档中将该节点删除
可以理解为节点转移
Document.adoptNode(externalNode)
删除节点
返回该方法节点的一个副本
false表示只克隆当前节点。
Node.cloneNode(isDeep:boolean = true)
将外部文档的一个节点拷贝一份插入到当前文档，并不会从原文档中删除
默认为false，浅拷贝。true表示深拷贝
克隆节点
Node节点关系
appendChild
insertBefore
replaceChild
textContent
Node常见属性方法
afer
before
append
prepend
replaceChildren
Element常见属性方法
Node & Element
getElementsByClassName
getElementsByName
getElementsByTagName
实时更新方法
节点查询
let observer = new MutationObserver((mutationRecord) => { // 保留属性原来的值 console.log(\"mutationRecord:\
MutationObserver
Node节点
直接在节点上添加\"onXXX\"事件
DOM0事件
从根节点向下传播到目标节点的过程
捕获阶段
目标阶段
从目标节点向上传播到根节点的过程
冒泡阶段
默认是冒泡阶段
事件处理流程
阻止默认的行为，比如href的a标签，checkbox选中不生效等
preventDefault()
阻止捕获和冒泡阶段中当前事件的进一步传播
stopPropagation()
阻止同一节点上的其他监听器被调用。比如一个按钮添加了三个事件，第二个事件调用该方法，后面的事件都不会被触发（第三个事件和冒泡阶段事件都不触发）
stopImmediatePropagation()
target表示触发事件的元素。（谁触发的）
currentTarget表示事件绑定的元素。（谁添加的事件监听函数）
target和currentTarget区别
event事件
userCapture默认是false，表示为冒泡事件
表示该事件只触发一次
{once: true}
表示不调用阻止默认事件preventDefault
{passive: true}
表示捕获阶段触发该事件
{capture: true}
AbortController的abort()方法调用时，监听器会被移除
let controller = new AbortController()let signal = controller.signalbtn.addEventListener(\"click\
{signal: true}
options
事件删除：removeEventListener
react中事件统一处理
利用事件传播的机制，在同一节点处理所有事件。
动态性好
减少内存消耗
优点
事件委托
DOM2事件
用户界面事件(UIEvent)焦点事件(FoucsEvent)鼠标事件(MouseEvent)滚轮事件(WheelEvent)输入事件(InputEvent)键盘事件(KeyboardEvent)合成事件(CompositionEvent)
DOM3事件
DOM事件
detail:传给event的参数（event.detail中可获取）
<div id=\"step1\">流程1</div><div id=\"step2\
发布订阅
自定义事件
浏览器DOM渲染相关
10.DOM
location
navigator
11.BOM
事件循环
同源策略
客户端存储
浏览器
资源请求
状态码
请求头、响应头
三次握手
四次挥手
RSA/TLS握手阶段
ECDHE/TLS握手阶段
http2
http3
http
js
前端
职业：暂无
0 条评论
回复 删除
下一页
