let/const基本使用

let与var差不多

const

保存的数据一旦被赋值就不能被修改
但如果赋值的是引用类型,那么就可以通过引用找到对应的对象,修改对象的内容

二者不可以重复

let/const是否有作用域提升

作用域提升:在声明变了的作用域中,如果这个变量可以在声明之前被访问,那么我们可以称之为作用域提升

let,const虽然被创建除了了,但是不能被访问,我认为不能称之为作用域提升

暂时性死区

块作用域顶部一直到变量声明完成之前,这个变量处在暂时性死区.

暂时性死区和定义的位置没有关系,和代码执行顺序有关系

let/const不会添加window

函数声明,内置函数,var都添加到了window所在的对象式环境记录中

而let,const这些被添加到了声明式环境记录中

块级作用域

let,const,class, function都具有块级作用域的限制

但注意function在作用域外面依然可以访问

字符串模版

<script>
  //1.基本用法
  const name = "alugg"
  const age = 22
  const info = `my name is ${name}, age is ${age}`
  console.log(info)

  //2.标签模板字符串的用法
  function foo(...args) {
    console.log("参数", args)
  }

  foo`my name is ${name}, age is ${age}`
</script>

模版字符串调用时如果有其他变量:

模板字符串将会被拆分
第一个元素是数组,是被插入模块拆分的字符串的组合
后面的元素是一个个模块字符串传入的内容

函数默认值

function foo(args1="默认值", arg2) {
  //默认值写法1:
  arg1 = arg1 ? arg1:"我是默认值"
  //默认值写法2:
  arg1 = arg1||"我是默认值"
  //严谨写法
  agr1 = (arg1=== undefined || arg1 === null) ? "我是默认值":arg1
  //ES6写法
  arg1 = arg1 ?? "我是默认值"
  //最简便:直接写入参数
 
    //解构配合默认值
 function alo({ name = "why", age = 18} = {}){
     console.log(name, age)
}

注意有默认参数的形参尽量写在后面
有默认参数的形参是不会计算在length之内

展开语法

可以在函数调用/数组构造时,将数组表达式或string在语法层面展开
可以在构造字面量对象时,将对象表达式按key-value的方式展开

const obj = {
  name: "why",
  age: 18,
  height:1.88
}

const info2 = {
  ...obj
}

Symbol

用来生成一个独一无二的值生成后可以用来做属性名

const s1 = Symbol()
const s2 = Symbol()
const obj3 = {
  [s1]:"aa",
  [s2]:"bb"
}

const obj2 = {}
obj1[s1] = "aaa"
obj2[s2] = "bbb"
Object.defineProperty(obj, s1, {
  value:"aaa"
})

//2.获取symbol.key
const symbolKeys = Object.getOwnPropertySymbols(obj)
for (const key of symbolKeys) {
  console.log(obj[key])
}

//3.description
//3.1Symbol函数之间生成的值都是独一无二的
const s3 = Symbol("ccc")
console.log(s3.description)
//3.2相同的key,通过Symbol.for可以生产相同的Symbol值
const s4 = Symbol.for(s3.description)
const s5 = Symbol.for(s3.description)
console.log(s5===s6)

//获取传入的key
console.log(Symbol.keyFor(s5))

Set

//创建Set
const set = new Set()

//添加元素
set.add(10)
set.add(12)

//应用场景 数组去重
const names = ["av","av","bas","sab","aa"]

const newNamesSet = new Set(names)
const newNames = Array.from(newNamesSet)
console.log(newNames)

//常见属性
console.log(set.size)

常见方法

add()
delete
has
clear
forEach(callback,[,args])

WeakSet

只能放对象类型,不能存放基本数据类型
对元素的引用是弱引用没如果没有其他引用对某个对象进行引用,GC可以对该对象进行回收
不能遍历

常见方法

add

delete

has

Map

可以用对象作为key,弥补了对象的不足

<script>
  const obj1 = {name:"why"}
  const obj2 = {age:18}

  const map = new Map()
  map.set(obj1, "abc")
  map.set(obj2, "cba")
  console.log(map.get(obj1))
</script>

常见属性

size

常见方法:

set(key, value)

get(key)

has(key)

delete(key)

clear()

forEach(callback,[args])

WeakMap

key只能使用对象
key对对象的引用是弱引用

ES8

Object.values(obj) 获取所有值,补充了Object.keys
Object.entries()以数组形式获取一组组key values

字符串填充

padstart 应用场景:对时间进行填充,对敏感数据进行处理

ES10

flat(int 展开深度)的使用:将一个数组,按照指定的深度遍历,将遍历到的元素和子数组中的元素组成一个新数组

nums.flat(1)

flatMap().先map后flat

Object.fromEntries把一个entries转化成Object

ES11

Bigint
??空值合并运算符, info = info?? “默认值”

ES12

FinalizationRegisry:可以让对象在被垃圾回收时请求一个回调函数
WeakRefs: obj = new WeakRef(info) 对info的一个弱引用
逻辑赋值运算符: message || = “默认值” message ??=”默认值”
xxx.replaceAll(string1, string2):把字符串xxx中所有的sting1全部替换为string2

Alugg's Blog

Frontend-Day15——ES6到ES12