一、写在前面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结合
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/weixin_47450807/article/details/124100300
内容来源于网络,如有侵权,请联系作者删除!