ES6中新增语法

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

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

let age = 20
let obj = {
  age,
}
console.log(obj) //{ age: 20 }

2.2、解构

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

2.3、let和const和var的区别

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

2.4、块级作用域的应用

1、给按钮设置点击事件

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

var foo = "name"

if (true) {

  console.log(foo)
  // let foo = "sss"
}
//对比一下let foo = "sss"注释和不注释之间的差别
//当注释的时候,会打印出foo, 当不注释的时候,会报错(在初始化之前无法访问'foo')
//分析一下原因:当在执行代码之前块级作用域中的let foo已经生成了,但是就是不能读取。因为已经生成了,所以不能访问外部元素了。

var foo = "name"
function say()  {
  console.log(foo)
  var foo = "ss"
}
say()

//和这个其实是一个道理,是指上面的foo不能访问, 但是下面的foo可以访问

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

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

9、箭头函数的补充

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

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

const num1 = 0b10 //二进制
const num2 = 10 //十进制
const num3 = 0o10 //八进制
const num4 = 0x10 //十六进制
console.log(num1)
console.log(num2)
console.log(num3)
console.log(num4)

//ES2021新增_语法
const num1 = 11_11_11
console.log(num1)  //111111

12、Symbol类型

一、基本使用
//Symbol数据类型用来解决属性名重复的问题
const s1 = Symbol("abc")
const s2 = Symbol("cba")
console.log(s1 === s2)   //false
let obj = {}
// obj[s1] = "abc"
// obj[s2] = "cba"

// Object.defineProperty(obj, s1, {
//   enumerable:true,
//   configurable:true,
//   writable:true,
//   value:"abc"
// })

obj = {
  [s1]: "abc",
  [s2]: "cba"
}
console.log(obj)

二、可以使用Object.getOwnPropertySymbols来获取Symbol
const s1 = Symbol("abc")
const s2 = Symbol("cba")
let obj = {
  [s1]: "abc",
  [s2]: "cba"
}
console.log(Object.getOwnPropertySymbols(obj))  //[ Symbol(abc), Symbol(cba) ]

三、相同值的Symbol(在for中设置相同的key值即可)
const s1 = Symbol.for("abc")
const s2 = Symbol.for("abc") 
console.log(s1 === s2) //true

四、Symbol.keyFor()
const s1 = Symbol.for("abc")
const s2 = Symbol.for("abc")
console.log(Symbol.keyFor(s1))  //abc
console.log(Symbol.keyFor(s2))  //abc

13、set类型

1、Set类型中必须存放可迭代数据类型
2、Set可以用来去重操作
3、Set具有的方法有:add, delete, clear, has, forEach,以及size属性,Set也是支持for--of迭代的。
const s1 = new Set([1,2,3,4,5,2])
console.log(s1)  //{1,2,3,4,5}

const s1 = new Set([1,2,3,4,5,2])
s1.add(111)
console.log(s1)   //{1,2,3,4,5,111}

const s1 = new Set([1, 2, 3, 4, 5, 2])
s1.delete(5)
console.log(s1)  //{1,2,3,4}

const s1 = new Set([1, 2, 3, 4, 5, 2])
console.log(s1.has(5)) //true

const s1 = new Set([1, 2, 3, 4, 5, 2])
s1.clear()
console.log(s1) //{}

const s1 = new Set([1, 2, 3, 4, 5, 2])
console.log(s1.size)  // 5

const s1 = new Set([1, 2, 3, 4, 5, 2])
s1.forEach(item => {
  console.log(item)   //1,2,3,4,5
})

const s1 = new Set([1, 2, 3, 4, 5, 2])
for(let i of s1) {
  console.log(i)   //1,2,3,4,5
}

14、WeakSet

//1、基本使用
const ws1 = new WeakSet()
const obj = {
  name: "sss"
}
ws1.add(obj)
// console.log(ws1)
console.log(ws1.has(obj))  //true

//2、WeakSet只能存放对象类型的数据
//3、WeakSet存在的方法:add, delete, has
//4、WeakSet对其中的对象数据是弱引用类型,也就是说在其中的对象在没有其他引用的情况下,会进行垃圾回收。
//5、由于是弱引用类型,其中的元素个数不能确定,所以不能够进行遍历。

//6、stack overflow给出的用途
const ws = new WeakSet()
class Person {
  constructor() {
    ws.add(this)
  }
  running() {
    if (!ws.has(this)) {
      throw new Error("不能够改变this指向来执行running方法")
    } else {
      console.log("执行running方法")
    }
  }
}
let p = new Person()
p.running()  //执行running方法
p.running.call({name:"zs"})
//不能改变一个实例对象的this指向来执行方法。

15、map数据类型

//1、常用方法的基本使用
let map = new Map()
let obj1 = ["sssc", "sevc"]
let obj2 = ["sss", "ee"]
map.set(obj2, "dl")
map.set(obj1, "dmc")
console.log(map.has(obj1))
map.delete(obj1)
console.log(map.has(obj1))
map.clear()
console.log(map.get(obj1))
console.log(map)

//2、forEach遍历
let map = new Map()
let obj1 = ["sssc", "sevc"]
let obj2 = ["sss", "ee"]
map.set(obj2, "dl")
map.set(obj1, "dmc")
map.forEach((value, key, map) => {
  console.log("====")
  console.log(value)
  console.log(key)
  console.log(map)
  console.log("====")
})

//3、和数组的差别
数据只能key保存基本数据类型(symbol),但是不能保存对象数据类型[object object],但是Map数据类型可以。

16、weakMap数据类型

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

相关文章