es6以及es6之后新增常用属性

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

js什么是迭代器、可迭代对象、生成器 - 程序员大本营

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 字符串替换

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值