ECMAScript6 基础知识点（下）

2024-03-19 14:47:32 浏览数 (1)
UnsplashUnsplash

Symbol

Symbol 为独一无二的值，当 Symbol 值作为对象的属性名的时候，不能用点运算符获取对应的值，因为用点运算符的话，会导致 JavaScript 把后面的属性名为理解为一个字符串类型，而不是 Symbol 类型

代码语言：javascript复制
let name = Symbol()
let person = {
    [name]: 'Nian糕'
}
person[name] // 'Nian糕'
person.name // undefined

Proxy

Proxy 对象用于拦截并代理目标对象，包括函数，原生数组，甚至另一个代理，常见的方法有：ownKeys() 方法，用于拦截 Object.ownKeys() 对过滤对象属性的遍历；has() 方法，拦截 key in object 的操作，结果会返回一个布尔值；apply() 方法，代理对象为函数时进行拦截；Proxy.revocable() 取消代理

代码语言：javascript复制
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

for...of 循环

JavaScript 的循环有很多，常用的 for 循环遍历数组代码不够简洁，forEach 循环写法简洁，但无法中断整个循环， for...in 循环常用于对象的循环，若用于数组的循环，得到的 i 为字符串类型，for...of 循环与 for...in 循环类似，可以用 break 来终止整个循环，或使用 continute 跳出当前循环，结合 keys() 还可获取到 Number 类型的循环索引

代码语言：javascript复制
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
    console.log(value) // 1 2 3 4 5
}
代码语言：javascript复制
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
    if(value == 3){
        break;
    }
    console.log(value) // 1 2
}
代码语言：javascript复制
const arr = [ 1, 2, 3, 4, 5 ]
for(let value of arr) {
    if(value == 3){
        continue;
    }
    console.log(value) // 1 2 4 5
}
代码语言：javascript复制
const arr = [ 1, 2, 3, 4, 5 ]
for(let index of arr.keys()){
    console.log(index) // 0 1 2 3 4
}

Set 结构

Set 的值不会包含重复项，通过 size 属性来获取成员的个数， delete() 方法用于删除指定值，has() 方法用于判断是否含有指定的值，clear() 方法用于清除所有成员，Set 结构的键名和键值是同一个值，可通过 keys() 方法和 values() 方法进行验证

代码语言：javascript复制
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) {}
代码语言：javascript复制
const s = new Set(['a', 'b', 'c'])
s.keys() // SetIterator {"a", "b", "c"}
s.values() // SetIterator {"a", "b", "c"}
代码语言：javascript复制
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
代码语言：javascript复制
const s = new Set(['a', 'b', 'c'])
s.forEach((value, key) => {
    console.log(value, key)
})
// a a
// b b
// c c

WeakSet 结构

WeakSet 结构和 Set 类型很相似，同样不会存储重复的值，并提供了 add() 方法，delete() 方法，has() 方法供开发者使用，不同的是，它的成员必须是对象类型的值，其成员都是对象的弱引用，随时被回收机制所回收，所以 WeakSet 结构不可遍历

代码语言：javascript复制
let ws = new WeakSet([{"age": 17}])
console.log(ws) // WeakSet {Object {age: 17}}

Map 结构

Map 结构跟 Object 对象很像，但更为灵活，它的 key 键名的类型可以是各种类型的值，不再局限于字符串类型，跟 Set 结构一样，参数通过数组进行传递，常用的方法有 set() 方法，用于给实例设置一对键值对

代码语言：javascript复制
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) {}
代码语言：javascript复制
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
}
代码语言：javascript复制
let m = new Map([
    ["name", "Nian糕"],
    ["age", 17]
])

for(let [key, value] of m.entries()){
    console.log(key, value);
}
// name Nian糕
// age 17
代码语言：javascript复制
let m = new Map([
    ["name", "Nian糕"],
    ["age", 17]
])

m.forEach(function(value,key){
    console.log(key, value);
})
// name Nian糕
// age 17

WeakMap 结构

WeakMap 结构和 Map 结构很类似，不同点在于 WeakMap 结构的键名只支持引用类型的数据，即数组，对象，函数，跟 Map 一样，WeakMap 也拥有 get(), has(), delete() 方法，但不支持 clear() 方法，键名中的引用类型是弱引用，和 WeakSet 同样不支持遍历

代码语言：javascript复制
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 }

Class 类

JavaScript 的类 Class 本质上也是基于原型 prototype 的实现方式做了进一步的封装，通过关键字 Class 进行类的声明，其中包含了 constructor 构造方法，默认返回实例对象，构造方法中的 this，指向的是该类实例化后的对象，子类对父类的继承通过 extends 关键字实现，通过 super 方法来访问父类

代码语言：javascript复制
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
编程算法 网络安全 javascript

0 人点赞