重学前端es6

今年是深刻的感受到，都是高中不努力的眼泪

目录

• ECMAScript6
  • let or const
    • 跟var的区别
    • 延伸-数据类型
      • 队列 Event Loop
    • 顶层对象globalThis
• string-array-object
  • • 字符串的扩展
    • 字符串新增方法
    • 数值
    • 函数扩展
    • 数组
    • 对象扩展
    • 对象新增方法

ECMAScript6

[阮一峰的es6]（https://es6.ruanyifeng.com/）
请拿出看小说的精神

let or const

跟var的区别

1. 不会变量提升
2. 不能重复声明
3. 不绑定全局作用域

       var a = 0;
       window.a;  //此时 0
       // let or const 不行
       let b = 1;
       window.b;  // undefined
   

const

1. 声明必须初始化
2. 值不可变(实际上并不是变量的值不得改动，而是变量指向内存地址所保存的数据不得改动)

 const a = 1;
 // a = 2; 就会报错Assignment to constant variable.
 const obj = { 
    age: 18
 }
 obj.age = 20
 // 此时不会报错 并且 obj = { age: 20 }

延伸-数据类型

这个是说到基本类型与引用类型

基本类型： String , Number , Boolean , Null , Undefined , Symbol (6个)

(补充一个BigInt)BigIntMDN链接

引用类型： Object , Array , Date , RegExp , Function

特殊的引用类型：Boolean , Number , String (基本包装类型)

这里还是推荐去看《JavaScript高级程序设计》

接着延伸就到了栈(stack) , 堆(heap) , 队列(queue)

• 栈 stack
  一种LIFO(Last-In-First-Out , 后进先出)的数据结构
  就行一个被堵住的胡同，排着队进，最后进的先出来

• 队列 queue
  FIFO(First-In-First-out , 先进进出)

• 堆 heap
  存取方式跟顺序没有关系, 不局限出入口('无序的' key-value 键值对存储)

此外

1. 栈中项的插入(存取)都在顶部一个出入口
2. 队列为列表末端添加, 列表前端移除 . 一个出口, 一个入口

这里是否还记得 push pop shift unshift呢 返回值呢
push unshift 是返回的长度
pop shift 是返回的删除项

基本类型保存在栈 引用类型保存在堆

队列 Event Loop

换个地方写

顶层对象globalThis

• window （浏览器）
• global （Node）
• self （浏览器和Web Worker）

又扯到this

全局中， this返回顶层对象 . 但是Node中 this 返回的是当前模块， ES6中 this是undefined .

还有函数中的this this还是另起一章节说

所以呢 ES2020 , 引入了globalThis . 任何环境globalThis都是存在的，可以从它拿到顶层对象

string-array-object

字符串的扩展

1. 模板字符串

字符串新增方法

得会读(你们跳过)
实例方法:

• includes()

• startsWith()

• endWith()

• repeat

  • replace(替换)有点像

• padStart()

• padEnd()

• trimStart() or trimLeft()

• tirmEnd() or trimRight()

数值

BigInt 基本类型

函数扩展

• 默认参数

数组

• Array.from()
• Array.of()

数组实例的方法

• copyWithin()
• find() or findIndex
• fill() //填充数组
• entries() or keys() or values()
• includes
• flag()
• flagMap()

Array.from()

类数组转成数组

1. 第二个参数 类似于数组的map,对每个元素进行处理
2. 第三个参数 绑定this

copyWithin

会修改当前数组

1. target
2. start
3. end

find() or findIndex

• 都有第二个参数用于绑定this
• indexOf相比. indexOf 无法识别NaN

fill()

** 填充类型为对象是 是浅拷贝对象 **

flag() or flagMap()

flag()

• 会跳过数组空位
• 不管多少层 => infinity

flagMap()

• 只能展开一层数组

数组空位

• forEach(), filter(), reduce(), every() 和some()都会跳过空位。
• map()会跳过空位，但会保留这个值
• join()和toString()会将空位视为undefined，而undefined和null会被处理成空字符串。

对象扩展

• 属性简写
• 属性名表达式
• 方法的name属性

属性的遍历

1. for...in // 自身的和继承的可枚举属性（不含 Symbol 属性）
2. Object.keys(obj) //(不含继承的 , 不含 Symbol 属性 , 不含不可枚举的)
3. Object.getOwnPropertyNames(obj) //(不包括 Symbol, 但是包括不可枚举)
4. Object.getOwnPropertySymbols(obj)
5. Reflect.ownKeys(obj) // 除了继承的都可以 ,(不管是否可枚举)

遍历规则

• 首先遍历所有数值键，按照数值升序排列。
• 其次遍历所有字符串键，按照加入时间升序排列。
• 最后遍历所有 Symbol 键，按照加入时间升序排列。

对象新增方法

• Object.is()
• Object.assign()
• Object.getOwnPropertyDescriptors()
• proto , Object.setPrototypeOf() , Object.getPrototypeOf()
• Object.keys or Object.values or Object.entries
• Object.fromEntries

Object.fromEntries小技巧

Object.fromEntries(new URLSearchParams('foo=bar&baz=qux'))
// { foo: "bar", baz: "qux" }