ES6中新增语法

x33g5p2x  于2022-04-12 转载在 其他  
字(4.0k)|赞(0)|评价(0)|浏览(558)

一、写在前面
ES6是目前面试中最常问的问题,下面将详细总结一下ES6的语法。
二、具体总结
2.1、字面量增强

  1. let age = 20
  2. let obj = {
  3. age,
  4. }
  5. console.log(obj) //{ age: 20 }

2.2、解构

  1. let arr = [1, 2, 3, 4, 5]
  2. let obj = [...arr]
  3. console.log(obj)

2.3、let和const和var的区别

  1. 1letconst不允许重复声明变量
  2. 2var声明的变量是会进行作用域提升的,但是let
  3. const不会(letconst定义的变量是在访问之前是被
  4. 创建出来的)
  5. 3、全局通过var来创建对象会将这个对象,constlet
  6. 不会给window添加任何属性
  7. 4、块级作用域:letconst以及function,class
  8. 会都到块级作用域的限制,但是functionjs引擎在解
  9. 析的过程中会对其进行类似于var的提升。

2.4、块级作用域的应用

  1. 1、给按钮设置点击事件

2.5、模板字符串
2.6、暂时性死区

  1. var foo = "name"
  2. if (true) {
  3. console.log(foo)
  4. // let foo = "sss"
  5. }
  6. //对比一下let foo = "sss"注释和不注释之间的差别
  7. //当注释的时候,会打印出foo, 当不注释的时候,会报错(在初始化之前无法访问'foo')
  8. //分析一下原因:当在执行代码之前块级作用域中的let foo已经生成了,但是就是不能读取。因为已经生成了,所以不能访问外部元素了。
  9. var foo = "name"
  10. function say() {
  11. console.log(foo)
  12. var foo = "ss"
  13. }
  14. say()
  15. //和这个其实是一个道理,是指上面的foo不能访问, 但是下面的foo可以访问

7、默认参数
8、剩余参数

  1. 剩余参数restarguments之间的区别
  2. rest是数组,但是arguments不是数组
  3. rest必须放在最后一个

9、箭头函数的补充

  1. const foo = () => {
  2. }
  3. // console.log(foo.prototype) //undefined
  4. let s = new foo() // 报错,foo不是构造函
  5. //因为箭头函数上不存在原型对象

10、展开语法
11、数值表示

  1. const num1 = 0b10 //二进制
  2. const num2 = 10 //十进制
  3. const num3 = 0o10 //八进制
  4. const num4 = 0x10 //十六进制
  5. console.log(num1)
  6. console.log(num2)
  7. console.log(num3)
  8. console.log(num4)
  9. //ES2021新增_语法
  10. const num1 = 11_11_11
  11. console.log(num1) //111111

12、Symbol类型

  1. 一、基本使用
  2. //Symbol数据类型用来解决属性名重复的问题
  3. const s1 = Symbol("abc")
  4. const s2 = Symbol("cba")
  5. console.log(s1 === s2) //false
  6. let obj = {}
  7. // obj[s1] = "abc"
  8. // obj[s2] = "cba"
  9. // Object.defineProperty(obj, s1, {
  10. // enumerable:true,
  11. // configurable:true,
  12. // writable:true,
  13. // value:"abc"
  14. // })
  15. obj = {
  16. [s1]: "abc",
  17. [s2]: "cba"
  18. }
  19. console.log(obj)
  20. 二、可以使用Object.getOwnPropertySymbols来获取Symbol
  21. const s1 = Symbol("abc")
  22. const s2 = Symbol("cba")
  23. let obj = {
  24. [s1]: "abc",
  25. [s2]: "cba"
  26. }
  27. console.log(Object.getOwnPropertySymbols(obj)) //[ Symbol(abc), Symbol(cba) ]
  28. 三、相同值的Symbol(在for中设置相同的key值即可)
  29. const s1 = Symbol.for("abc")
  30. const s2 = Symbol.for("abc")
  31. console.log(s1 === s2) //true
  32. 四、Symbol.keyFor()
  33. const s1 = Symbol.for("abc")
  34. const s2 = Symbol.for("abc")
  35. console.log(Symbol.keyFor(s1)) //abc
  36. console.log(Symbol.keyFor(s2)) //abc

13、set类型

  1. 1Set类型中必须存放可迭代数据类型
  2. 2Set可以用来去重操作
  3. 3Set具有的方法有:add, delete, clear, has, forEach,以及size属性,Set也是支持for--of迭代的。
  4. const s1 = new Set([1,2,3,4,5,2])
  5. console.log(s1) //{1,2,3,4,5}
  6. const s1 = new Set([1,2,3,4,5,2])
  7. s1.add(111)
  8. console.log(s1) //{1,2,3,4,5,111}
  9. const s1 = new Set([1, 2, 3, 4, 5, 2])
  10. s1.delete(5)
  11. console.log(s1) //{1,2,3,4}
  12. const s1 = new Set([1, 2, 3, 4, 5, 2])
  13. console.log(s1.has(5)) //true
  14. const s1 = new Set([1, 2, 3, 4, 5, 2])
  15. s1.clear()
  16. console.log(s1) //{}
  17. const s1 = new Set([1, 2, 3, 4, 5, 2])
  18. console.log(s1.size) // 5
  19. const s1 = new Set([1, 2, 3, 4, 5, 2])
  20. s1.forEach(item => {
  21. console.log(item) //1,2,3,4,5
  22. })
  23. const s1 = new Set([1, 2, 3, 4, 5, 2])
  24. for(let i of s1) {
  25. console.log(i) //1,2,3,4,5
  26. }

14、WeakSet

  1. //1、基本使用
  2. const ws1 = new WeakSet()
  3. const obj = {
  4. name: "sss"
  5. }
  6. ws1.add(obj)
  7. // console.log(ws1)
  8. console.log(ws1.has(obj)) //true
  9. //2、WeakSet只能存放对象类型的数据
  10. //3、WeakSet存在的方法:add, delete, has
  11. //4、WeakSet对其中的对象数据是弱引用类型,也就是说在其中的对象在没有其他引用的情况下,会进行垃圾回收。
  12. //5、由于是弱引用类型,其中的元素个数不能确定,所以不能够进行遍历。
  13. //6、stack overflow给出的用途
  14. const ws = new WeakSet()
  15. class Person {
  16. constructor() {
  17. ws.add(this)
  18. }
  19. running() {
  20. if (!ws.has(this)) {
  21. throw new Error("不能够改变this指向来执行running方法")
  22. } else {
  23. console.log("执行running方法")
  24. }
  25. }
  26. }
  27. let p = new Person()
  28. p.running() //执行running方法
  29. p.running.call({name:"zs"})
  30. //不能改变一个实例对象的this指向来执行方法。

15、map数据类型

  1. //1、常用方法的基本使用
  2. let map = new Map()
  3. let obj1 = ["sssc", "sevc"]
  4. let obj2 = ["sss", "ee"]
  5. map.set(obj2, "dl")
  6. map.set(obj1, "dmc")
  7. console.log(map.has(obj1))
  8. map.delete(obj1)
  9. console.log(map.has(obj1))
  10. map.clear()
  11. console.log(map.get(obj1))
  12. console.log(map)
  13. //2、forEach遍历
  14. let map = new Map()
  15. let obj1 = ["sssc", "sevc"]
  16. let obj2 = ["sss", "ee"]
  17. map.set(obj2, "dl")
  18. map.set(obj1, "dmc")
  19. map.forEach((value, key, map) => {
  20. console.log("====")
  21. console.log(value)
  22. console.log(key)
  23. console.log(map)
  24. console.log("====")
  25. })
  26. //3、和数组的差别
  27. 数据只能key保存基本数据类型(symbol),但是不能保存对象数据类型[object object],但是Map数据类型可以。

16、weakMap数据类型

  1. //1、WeakMap是弱引用类型
  2. //2、具有方法有:set, get, has, delete
  3. //3、应用场景:在响应式原理中应用:WeakMap和Map结合

相关文章