专栏首页Nian糕的私人厨房ECMAScript6 基础知识点(下)

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

行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • JavaScript Console的常见用法

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优...

    Nian糕
  • ECMAScript6 基础知识点(上)

    ECMAScript 是 JavaScript 的组成部分,它规范了 JS 的语法(解析规则,关键字,语句,声明,操作等)、类型(布尔型,数字,字符串,对象等)...

    Nian糕
  • JavaScript 通过简写增加代码可读性

    行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优...

    Nian糕
  • Spring Cloud 之 Hystrix.

     在微服务架构中,我们将系统拆分成了很多服务单元,各单元的应用间通过服务注册与订阅的方式互相依赖。由于每个单元都在不同的进程中运行,依赖通过远程调用的方式执行,...

    JMCui
  • Swift 基本语法03-"if let"和"guard let"

    用户1890628
  • typescript基础篇(6):泛型

    软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,在定义函数,接口或类的时候,...

    一粒小麦
  • 联动picker组件

    联动其实跟没联动思路一样的,只是把联动的数据处理成不联动的,只是另外要加一些改变。

    wade
  • 变量的解构赋值

    上面代码中,函数move的参数是一个对象,通过对这个对象进行解构,得到变量x和y的值。如果解构失败,x和y等于默认值。

    达达前端
  • Tomcat中用JNDI方式加载JDBC DataSource以连接数据库

    下载与所要连接的数据库版本对应的JDBC驱动程序,加入到应用的CLASSPATH。如果用tomcat部署,tomcat中最好也加上(笔者觉得好像没必要加,可是不...

    Java天坑
  • 【JavaWeb】97:Redis五大数据类型

    因为Redis是非关系型数据库,它是不支持sql语言的,所以其有特有的命令需要我们去学习。

    刘小爱

扫码关注云+社区

领取腾讯云代金券