JavaScript高级二

1.javascript多态：

对不同数据类型，进行同一操作时，表现出来的行为不一样
对于传统java、ts而言，实现继承，是多态体现的前提 

js灵活不要继承来实现

2.字面量增强方法-es6: enhanced object literals

1.proporty shorthand
        var obj = {name, age}
2.method shorthand
3.computed proporty names: 计算属性名     做key
var obj = {name: 'tom', [name+12]: hahhah}
        

3.解构：用途：函数参数 函数返回结果

1.数组按顺序结构: 按照下标
        var [a, b] = names
2.只解构最后一个：
        var [, b] = names 
3.解构一个，剩余放另一个数组里：
        var [a, ...b] = names
4.数组解构设置默认值：
        var [a, b,c] = names
        var [a, b,c = '哈哈哈哈'] = names

1.对象解构：按照key
        var {name, age} = obj
2.改key的名字：
        var {name: newName, age} = obj

4.let const 直到变量被赋值前，都不可访问，执行上下文中创建

var-variable
const-constant
assignment to -指派
1.const 定义引用类型，不能修改内存地址，可修改对象属性
直到变量被赋值前，都不可访问
 

                                                variables_ 的类型是variableMap

// 所以浏览器window中访问
var obj = {}
log(window.obj) // {}
const obj = {}
log(window.obj) // undefined

5.块级作用域{}：

1.es5前{}: 不存在块级作用域
2.es6后：{ class/let/const/function 下声明的，块级作用域才生效 }  // { var } 块级无效
        // 看浏览器是只支持es6的话，function有块级作用域
        //                    既支持es5又支持es5， 那function是没有块级作用域的 
直接一个{} 、if、catch、for 都有块级作用域
3.好处：for遍历中访问i, {}块级作用域中使用let，变量i不从全局作用域找i了，找的是块级作用域内的i 

6.es6~12:

ES6:
1.标签模板字符串：
        function foo(m, n) {} // m是数组， n是app代表的变量
        foo`hello${app}world${hihi}`

2.函数：
        函数默认参数：= 默认值        必须放最后
                                (m = ''20'', n = 30)
                                 (obj = {name: 'tom', age: 12}) => ({name, age} = {name:'tom', age: 12})
                                                                                      ({name='tom', age=12} = {})
                                length不会计算在内，包括默认值后面的参数也不会计算在length中
                                function foo(m,n=10) {
                                        console.log('形参foo.length:',foo.length) // 1
                                        console.log('实参foo arguments', arguments.length) // 0
                                }
                                foo()
        剩余参数：...rest        必须放最后  （n, ...rest, m）X
        箭头函数：
                a.没有显式原型 有_proto_ 为Function
        展开运算符：es2018 也叫es9
                函数传参 foo(...[1,2,3])
                info = { name: '', age: 12, friends: {name: 'hahha'} }
                obj = { ...info } // 复制一遍 info 对象
                obj.friends.name = 'tom' // info.friends.name = 'tom'

3.数值：
二进制：0b开头  0b100
八进制：0o100
十六进制：0x100  -> 内存地址
num = 100_000_000_000  大数值：方便阅读

4.Symbol:         es6新增的基本数据类型
        是个函数，Symbol() 返回唯一的一个值; 防止新加的属性名重复
        const s1 = Symbol('tom')
        log(s1) // s1  -> Symbol('tom')
a. 用在定义对象新属性中：
        const s1 = Symbol()
        const s2 = Symbol()
        const obj = { [s1]: 'abc', [s2]: 'bcd' } // 计算属性
b. 遍历Symbol数组：
        const list = Object.getOwnPropertySymbols(obj)
        for(const key of list) { log(obj[key]) } // 不能用obj.key undefined
                                                obj.key是按照key是字符串到obj里查找
c.生成同一个Symbol:
        const s = Symbol.for('name')
        const ss = Symbol.for('name')
        log(s === ss) // true
        Symbol.keyFor(s) // name

5.新数据结构：Set  WeakSet M
set\weakset:
a.使用：
        const a = new Set()
        a.add(10)
        a.add({}) // Set { 10, {} }
        a.add({}) // Set { 10, {}, {} }
b.去重：
        const a = new Set([1, 2, 2, 3])
        // const list = Array.from(a)  //转换为数组的方式
        // const list = [...a]

WeakSet: 只能存对象，弱引用【没有被引用会GC收回】
const obj = {name: ''}
let weakset = new WeakSet()
weakset.add(obj)
obj = null  // weakset里面的obj是弱引用，obj引用改变，weakset里面的obj也会被回收
Set weakSet区别：
强弱引用
WeakSet 没有clear() 没有遍历方法 只能添加对象
Set与数组区别：
1.不存在重复元素，2.不是数组

Map: 针对Object的属性只能是String类型的补充
const obj = {name:  'tom'}
const objMap = new Map(obj)

weakMap：注意：只能添加对象为key 不能使用遍历


      

 ES7：
1.includes
                以前有indexof
                区别：
                        console.log(listincluds.indexOf(NaN)) // -1
                        console.log(listincluds.includes(NaN)) // true
2.**指数运算符：
                以前有Math.pow()

ES8：
1.Object.entries() // [[key, value], [key, value]]
                 以前有 Object.keys() Object.values()
2.参数尾部逗号：foo(a,)
3.Object.getOwnPropertyDescriptors()
4.async await fn
5.async iterators
6.Object spread operators
7.Promise finally

ES10:
1.flat flatMap: 降维 默认1
        flat只能降维
        flatMap按一定方式降维: 先遍历 再对结果flat
2.     Object.entries()         obj类型 => entries结构
        Object.fromEntries()  enties类型 => obj类型
   以前Object.entries()   obj转成entries结构
       obj => [[key, value],[],[]]
3.trimStart trimEnd
 

ES11:

1.新增基本数据类型-bigInt 大整数
cosnt bigInt = 1000n + 10n
cosnt bigInt = 1000n + BigInt('10')
2.Nullish-coalescing-operators: 空值合并运算符
       null/undefined ?? 'hello' // 'hello'
        0/'' ?? 'hello' // 0或者是''
3.可选链 ?.
4.全局globalThis
5.for key in obj: 标准化 key
6.关于内存管理：
​​​​​​​        finalizationRegister: 内存销毁的回调
        const fR = new FinalizationRegistry((value) => {log(value)})
        fR.register(obj, 'obj')
7.关于内存管理：weakRef类

Proxy[构造函数] + Reflect[内置对象]

8.宏任务：定时器，ajax,  dom回调，UI render 微任务：Promise then 、queueMicrotask
main script 事件循环