let /const 变量名不能重新赋值,这些变量会在词法环境被实例化就创建了,赋值才能被访问
(创建出来了但是不能被访问所以报错) 不存在作用域提升
早期:VO就是GO就是Windows
ECMA对执行上下文的描述:
早期:每个执行上下文关联一个变量环境,在源码中变量和函数声明会作为属性添加到VO中
es6:每个执行上下文关联一个变量环境,在执行代码中会作为变量和函数声明作为环境记录添加到变量环境中
VE已经不完全等于Windows
es6代码块级作用域:
对 let/const /class /function 有效,var 无效
function 为了兼容以前代码,引擎做了处理,让function没有块级作用域,只支持es6的浏览器才会有块级作用域
if /switch /for 语句 都是块级作用域
块级作用域应用场景: for循环那个
标签模板字符串:react 封装css 组件会用到
剩余参数和arguments区别:
剩余参数只包含没有对应实参的形参,arguments对象包含传给对象的所有实参
arguments对象不是一个真正的数组,rest参数是一个真正的数组
arguments 是早期ECMAScript为了方便获取所有参数提供的一个数据结构,rest参数是es6提供代替arguments的
剩余参数必须放到最后一位
箭头函数没有显示原型,不能作为构造函数通过new去创建对象
箭头函数没有arguments 用剩余运算符替代
展开运算符使用(浅拷贝):函数调用 构造数组 构造对象字面量(es9)
symbol 不能通过点语法获取
Object .key获取不到symbol值 Object.getPropertySymbols 获取
symbol.for(key) key 一致可以认为两个变量相等
遍历symbol Symbol.keyFor
es6 之前数组,对象这两种数据结构,es6之后新增两种数据结构set map (另外形式 weakmap weakset)
set 类似数组,但是元素不能重复 强引用
weakset只能存放对象类型 弱引用 会回收 不能做遍历 (因为是弱引用类型,如果遍历会导致对象不能正常销毁,所以存到weakset的数据无法获取)
从根对象能找到的对象都不会被回收
GC垃圾回收器
map 允许对象类型作为key
weakmap 的可以只能是对象 弱引用 其他引用引用这个对象,GC可以回收这个对象
vue3 实现响应式原理
const obj = {
name: 'xiaoming',
age: 18
}
function obj1NameFn1() {
console.log('obj1NameFn1被执行了');
}
function obj1NameFn2() {
console.log('obj1NameFn2被执行了');
}
function obj1AgeFn1() {
console.log('obj1AgeFn1被执行了');
}
function obj1AgeFn2() {
console.log('obj1AgeFn2被执行了');
}
// 1 创建weakmap
const weakMap = new WeakMap()
// 2 收集依赖结构
const objmap = new Map()
objmap.set(name, [obj1NameFn1, obj1NameFn2])
console.log(objmap, 'objmap');
weakMap.set(obj, objmap)
console.log(weakMap.get(obj), ' weakMap.get(Obj1)');
// 3 如果obj1.name 发生变化(监听) proxy/object.defineProperty
obj.name = 'hello'
const target = weakMap.get(obj)
const fns = target.get('name')
fns.array.forEach(element => {
element()
});
es5:object.keys(获取属性) find/map/filter/reduce
es7:
Array Includes (数组是否包含,返回值布尔类型)
searchvalue 必需,要查找的字符串。
start 可选,设置从那个位置开始查找,默认为 0
string.includes(searchvalue, start)
指数运算符: **
3的3次方:
Math.pow(3,3)
es7新增 : 3**3
es8:
object.values(获取值)
object.entries 获取一个数组,数组存放可枚举属性的键值对数组 可以拿到key ,value
const obj = {
name:'pp',
age:12
}
console.log(Object.entries(obj));
字符串填充:padding padStart padEnd
let message = 'hello word'
let newMessage = message.padStart(15)
let newMessage2 = message.padStart(15, '*').padEnd(20, '-')
console.log(newMessage);
console.log(newMessage2);
Object.getOwnPropertyDescriptors 获取所有属性描述符
es9:
async iterators 后续迭代器讲解
object spread operators
promise finally
es10:
flat 给数组降维 (参数代表深度)
const nums = [10.20,[2,9],[[30,40],[7,8]]]
const newNums = nums.flat()
console.log(newNums);
flatmap : 做映射、转为数组格式、降维
const words = message.map(item=>{
return item.split("")
})
console.log(words);
const message = ['hello world','my name is wangyi']
const words = message.flatMap(item=>{
return item.split(" ")
})
console.log(words);
object fromEntries方法 ,参数传入一个(entries/可迭代对象 ):把object.entries转换后的数组(map类型)转回对象
可迭代对象相关知识:https://juejin.cn/post/6873457657018728456
trimStart trimEnd : trim去除首尾空格 ,可想而知前面是啥意思了吧?
symbol description symbol获取值可以通过description获取
a = Symbol('aaaa')
console.log(a.description ); // aaaa
es11:
bigint (类型)大的数值
const maxInt = Number.MAX_SAFE_INTEGER
console.log(maxInt); // 9007199254740991 最大数值
console.log(maxInt+1); // 9007199254740992
console.log(maxInt+2); // 9007199254740991
const bigInt = 9007199254740991n
console.log(bigInt + 1n);// 9007199254740992n
console.log(bigInt + 2n);// 9007199254740993n
空值 合并 运算符
// 有弊端 如果是 ''/0 还是走defau value
const foo = ''
const bar = foo || 'deafult value'
// 用 ?? 空值合并操作符 只有null undefined 才会走默认值
const bar = foo ?? 'deafult value'
optional chaining : 可选链
const obj = {
name:'why',
friend:{
name:'ll',
girlFriend:'hmm'
}
}
//获取girlFriend 如果friend删掉 直接报错
// 以前处理 obj&&obj.friend&& obj.friend.girlFriend
// es11提供可选链
console.log(obj.friend?.girlFriend); // hmm 后面直接不执行返回undefind
global this :获取全局对象
原来: 在浏览器: window和this 在node:global es11: globalThis
for in 标准化: 遍历对拿到的是key
var obj = { "name": "wjy", "age": 26, "sex": "female" };//定义一个object对象
for (var key in obj) {
console.log(key); // name age sex
}
动态导入:import('./').then() es module 模块化中讲
promise.allSettled:promise 后面讲
import meta: es module 模块化中讲
es12:
FinalizationRegistry 销毁时是否能通知
const finalRegistry = new FinalizationRegistry(()=>{
console.log('有对象被销毁了');
})
let obj = {name:'why'}
finalRegistry.register(obj)
obj = null
// register 第二个参数可以用作区分
weakRefs 将一个对象赋给一个引用,引用是强引用,用weakrefs是弱引用
// 如果原对象没销毁可以获取原对象,如果销毁undefined
const finalRegistry = new FinalizationRegistry((val)=>{
console.log('有对象被销毁了',val);
})
let obj = {name:'why'}
let info = new WeakRef(obj) // 弱引用
finalRegistry.register(obj,'obj')
console.log(info.deref()?.name);
obj = null
逻辑赋值运算: 可读性差
// ||= 逻辑或赋值运算
let message = 0;
// message = message || 'default value'
message ||= 'default value'
console.log(message);
// &&= 逻辑与赋值运算
let obj = {
name: 'why888'
}
// obj = obj && obj.name
obj &&= obj.name
console.log(obj);
// ??= 逻辑空赋值运算
let message2 = 0;
// message2 = message2 ?? 'default value'
message2 ??= 'default value'
console.log(message2);
数字分隔符:可以用下划线:123_345_456_2345
String.replaceAll 字符串替换