ECMAScript6 基础知识点（下）
Unsplash
01 Symbol
Symbol 为独一无二的值，当 Symbol 值作为对象的属性名的时候，不能用点运算符获取对应的值，因为用点运算符的话，会导致 JavaScript 把后面的属性名为理解为一个字符串类型，而不是 Symbol 类型
let name = Symbol()
let person = {
[name]: 'Nian糕'
}
person[name] // 'Nian糕'
person.name // undefined
02 Proxy
Proxy 对象用于拦截并代理目标对象，包括函数，原生数组，甚至另一个代理，常见的方法有：ownKeys() 方法，用于拦截 Object.ownKeys() 对过滤对象属性的遍历；has() 方法，拦截 key in object 的操作，结果会返回一个布尔值；apply() 方法，代理对象为函数时进行拦截；Proxy.revocable() 取消代理
let niangao = {"age": 17}
let xlb = new Proxy(bankAccount, {
get:(target, property) => {
if(target[property] > 17){
return target[property]
}else{
return "未成年"
}
},
set:(target, property, value) => {
if(!Number.isInteger(value)){
return "请设置正确的年龄"
}
target[property] = value
}
})
xlb.age // "未成年"
xlb.age = 18 // 18
xlb.age //18
03 for...of 循环
JavaScript 的循环有很多，常用的 for 循环遍历数组代码不够简洁，forEach 循环写法简洁，但无法中断整个循环， for...in 循环常用于对象的循环，若用于数组的循环，得到的 i 为字符串类型，for...of 循环与 for...in 循环类似，可以用 break 来终止整个循环，或使用 continute 跳出当前循环，结合 keys() 还可获取到 Number 类型的循环索引
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
console.log(value) // 1 2 3 4 5
}
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
if(value == 3){
break;
}
console.log(value) // 1 2
}
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
if(value == 3){
continue;
}
console.log(value) // 1 2 4 5
}
const arr = [ 1, 2, 3, 4, 5 ]
for(let index of arr.keys()){
console.log(index) // 0 1 2 3 4
}
04 Set 结构
Set 的值不会包含重复项，通过 size 属性来获取成员的个数， delete() 方法用于删除指定值，has() 方法用于判断是否含有指定的值，clear() 方法用于清除所有成员，Set 结构的键名和键值是同一个值，可通过 keys() 方法和 values() 方法进行验证
let s = new Set([1,2,3])
console.log(s) // Set(3) {1, 2, 3}
s.add(4)
console.log(s) // Set(4) {1, 2, 3, 4}
s.size // 4
s.delete(2)
console.log(s) // Set(3) {1, 3, 4}
s.delete(5) // false
s.has(1) // true
s.clear()
console.log(s) // Set(0) {}
const s = new Set(['a', 'b', 'c'])
s.keys() // SetIterator {"a", "b", "c"}
s.values() // SetIterator {"a", "b", "c"}
const s = new Set(['a', 'b', 'c'])
// entries()方法返回一个键值对的遍历器
for(let [i, v] of s.entries()){
console.log(i, v)
}
// a a
// b b
// c c
const s = new Set(['a', 'b', 'c'])
s.forEach((value, key) => {
console.log(value, key)
})
// a a
// b b
// c c
05 WeakSet 结构
WeakSet 结构和 Set 类型很相似，同样不会存储重复的值，并提供了 add() 方法，delete() 方法，has() 方法供开发者使用，不同的是，它的成员必须是对象类型的值，其成员都是对象的弱引用，随时被回收机制所回收，所以 WeakSet 结构不可遍历
let ws = new WeakSet([{"age": 17}])
console.log(ws) // WeakSet {Object {age: 17}}
06 Map 结构
Map 结构跟 Object 对象很像，但更为灵活，它的 key 键名的类型可以是各种类型的值，不再局限于字符串类型，跟 Set 结构一样，参数通过数组进行传递，常用的方法有 set() 方法，用于给实例设置一对键值对
let m = new Map([
["name", "Nian糕"],
["age", 17]
])
console.log(m) // Map(2) {"name" => "Nian糕", "age" => 17}
m.set("food", "小笼包") // Map(3) {"name" => "Nian糕", "age" => 17, "food" => "小笼包"}
m.size // 3
m.get("name") // "Nian糕"
m.delete("food") // true
console.log(m) // Map(2) {"name" => "Nian糕", "age" => 17}
m.has('name') // true
m.clear()
console.log(m) // Map(0) {}
let m = new Map([
["name", "Nian糕"],
["age", 17]
])
for(let key of m.keys()){
console.log(key) // name age
}
for(let value of m.values()){
console.log(value) // "Nian糕" 17
}
let m = new Map([
["name", "Nian糕"],
["age", 17]
])
for(let [key, value] of m.entries()){
console.log(key, value);
}
// name Nian糕
// age 17
let m = new Map([
["name", "Nian糕"],
["age", 17]
])
m.forEach(function(value,key){
console.log(key, value);
})
// name Nian糕
// age 17
07 WeakMap 结构
WeakMap 结构和 Map 结构很类似，不同点在于 WeakMap 结构的键名只支持引用类型的数据，即数组，对象，函数，跟 Map 一样，WeakMap 也拥有 get(), has(), delete() 方法，但不支持 clear() 方法，键名中的引用类型是弱引用，和 WeakSet 同样不支持遍历
let wm = new WeakMap()
wm.set([1], 2)
wm.set({'name': 'Nian糕'}, 17)
function fn(){}
wm.set(fn, 6)
console.log(wm) // WeakMap { function fn(){} => 6, Array(1) => 2, Object => 17 }
08 Class 类
JavaScript 的类 Class 本质上也是基于原型 prototype 的实现方式做了进一步的封装，通过关键字 Class 进行类的声明，其中包含了 constructor 构造方法，默认返回实例对象，构造方法中的 this，指向的是该类实例化后的对象，子类对父类的继承通过 extends 关键字实现，通过 super 方法来访问父类
class Animal {
costructor(name) {
this.name = name
}
eat() {
console.log(`this is ${this.name}`)
}
}
class Dog extends Animal {
constructor(name) {
super(name) // 让Animal也有name参数
this.name = name
}
bark() {
console.log(`${this.name} bark`)
}
}
const hhh = new Dog('哈士奇')
hhh.eat() // this is 哈士奇
hhh.bark() // 哈士奇 bark
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
发表评论 (审核通过后显示评论)：