ES6进阶

作者: t遇见 | 来源:发表于2022-10-29 17:20 被阅读0次

一、Set类型
（1）什么是Set
Set是ES6提供的一种集合类型，内部可以存储多个没有顺序的、不能重复的数据！
（2）基本语法

// 创建空集合对象
const set = new Set() // new Set([])
// 创建包含数据的集合对象
const set = new Set([1,2,2,3,4,5])

（3）常见函数

add(dat)：向集合中添加一个数据
delete(dat)：删除集合中的一个数据
has(dat)：判断集合中是否包含某个数据，类似数组中的includs()
clear()：清空集合中的所有的数据
size()：获取集合中数据的总数
forEach()：遍历集合中的所有数据，和数组的forEach()功能相同
二、Map类型
（1）什么是Map
Map是ES6中提供的一种映射、字典类型，可以包含多个key:value键值对数据，其中key可以是任意类型的、不能重复的数据；是对原生JSON对象的扩展
（2）基本语法

创建空映射/字典
const map = new Map()
// const map = new Map({}) // 错误语法

（3）常见函数

set(key, value)：给Map中添加一个数据
get(key)：从Map中根据key获取对应的value
has(key)：判断Map中是否包含某个key值
delete(key)：从Map中根据key删除一个数据
forEach()：遍历Map数据
clear()：清空Map
三、函数扩展
（1）默认参数
一个函数声明完成后，调用执行时传递的参数数据，不一定满足形式参数的需要

// 1、原生JS中，原始函数出现的参数问题
function fn(n1, n2, n3) {
  console.log(n1, n2, n3)
  var _total = n1 + n2 + n3
  console.log("_total: ", _total)
}
// 正常调用
fn(11, 22, 33)
// 缺少参数
fn(12, 23)
// 2、原生JS解决参数缺失问题
function fn2(n1, n2, n3) {
  // 参数重新赋值：如果某个参数缺失，就会赋值1（默认值）
  n1 = n1 || 1
  n2 = n2 || 1
  n3 = n3 || 1
  console.log(n1, n2, n3)
  var _total = n1 + n2 + n3
  console.log("_total: ", _total)
}
// 正常调用
fn2(11, 22, 33)
// 缺少参数
fn2(12, 23)
// 3、ES6中，可以给形式参数赋值默认数据
// 如果某个形式参数没有传递数据，就使用默认数据参与运算
function fn3(n1 = 1, n2 = 1, n3 = 1) {
  console.log(n1, n2, n3)
  _total = n1 + n2 + n3
  console.log('_total', _total)
}
fn3(4, 5, 6)
fn3(6, 7)
fn3()

(2）箭头函数
基本语法

// 原始函数
function fn (n1, n2) {
  return n1 + n2
}
// 赋值函数
const fn = function(n1, n2) {
  return n1 + n2
}
// ES6箭头函数
const fn = (n1, n2) => n1 + n2

四、面向对象扩展
（1）基本语法
ES6提供一个新的关键词class，专门用来声明类型

// 声明一个用户类型
class User {
  // ... 声明各种属性、方法
}
// 创建对象
const tom = new User()

（2）构造方法
构造方法：主要通过类型创建对象时，针对属性进行初始化的操作

// 原生
function Person(name) {
  this.name = name
}
// ES6
// 声明一个用户类型
class User {
  // 初始化属性的构造函数
  constructor(username, password, nickname) {
    this.username = username // 账号
    this.password = password // 密码
    this.nickname = nickname // 昵称
  }
}
// 创建对象
const tom = new User('tom', '123', "汤姆")
console.log('tom', tom)

（3）成员属性/方法
每个类型创建的多个对象，都会包含自己的特征属性、行为方法；这些属性和方法称为成员属性或者成员方法：
通过这个类型创建的对象，都包含这些属性和方法，但是每个对象的数据都是互相独立的，如用户的账号、密码；不同的用户都包含账号/密码特征属性，但是每个用户的账号/密码数据都是互不相同的！

// 声明一个用户类型
class User {

  // 初始化属性的构造函数
  constructor(username, password, nickname) {
    // 成员属性
    this.username = username // 账号
    this.password = password // 密码
    this.nickname = nickname // 昵称
  }
  // 成员方法
  showInfo() {
    console.log(`账号：${this.username},昵称：${this.nickname}`)
  }
}
// 创建对象
const tom = new User('tom', '123', "汤姆")
console.log('tom', tom, "；账号：", tom.username)
console.log("账号:", tom.username)  // 访问属性=常用
console.log("账号：", tom['username'])  // 访问属性
tom.showInfo()
const jerry = new User('jerry', 'qwe', "杰瑞")
console.log('jerry', jerry, "；账号：", jerry.username)
jerry.showInfo()

（4）静态属性/方法
原生面向对象，发表文章，文章包含一个公共属性：最多字数；通过原型对象上挂载属性实现的

function Article() {}
// 最大字数属性，通过Article创建的所有对象，都可以使用这个数据
Article.prototype.maxWords = 2000

ES6中针对所有对象都需要访问的公共数据和方法，提供了一种静态属性/静态方法的语法

class Article {
  // 静态属性：控制文章最大字数，所有当前类型的对象都需要访问的公共数据
  static maxWords = 2000
  // 静态方法
  static getOrgInfo() {
    console.log("公共信息：网站介绍")
  }
  constructor(title, content) {
    // 成员属性：每篇文章对象的数据都互相独立
    this.title = title
    this.content = content
  } 
}
// 静态属性和静态方法，只能被类型访问
console.log(Article.maxWords)
Article.getOrgInfo()
// 不允许被对象访问
const a1 = new Article("标题", "内容")
console.log(a1.maxWords) // undefined

（5）面向对象特性
面向对象包含三大特征：封装、继承、多态

封装：数据的统一管理，就是一种封装的形式
继承：类型和类型之间的关系，通过继承关系，子类可以复用父类的代码
多态：基于继承实现功能的扩展
① 继承
ES6提供了继承的简洁语法，对原生JS继承（原型继承/冒充继承/组合继承/寄生组合继承）方式进行了优化

// 面向对象特征：封装、继承、多态
class Animal { // 父类
  // 抽取公共属性进行<封装>
  constructor(nickname, color, age) {
    this.nickname = nickname // 昵称
    this.color = color // 颜色
    this.age = age  // 年龄
  }
  // 抽取公共方法进行<封装>
  move() {
    console.log(`${this.nickname}在快速移动中`)
  }
}
// 子类：继承
// ES6提供了extends关键字，主要用于继承
// 猫 继承 动物
class Cat extends Animal { }
// 老鼠
class Mouse extends Animal {
  // 成员属性扩展
  constructor(nickname, color, age, gender) {
    // 通过父类初始化公共属性：使用super关键字指代父类
    super(nickname, color, age)
    // 扩展自己的属性
    this.gender = gender
  }
  // 子类中重写父类的函数/方法
  move() {
    super.move()//调用父类移动的方法
    console.log("老鼠在逃命中...") // 扩展方法功能
  }
}
// 鸟
class Birds extends Animal {
  move() {
    super.move()
    console.log("小鸟在飞行中...")
  }
}
// 创建对象
const tom = new Cat('汤姆', "蓝色", 12)
console.log(tom)
const jerry = new Mouse('杰瑞', '棕色', 8, "女")
console.log(jerry)
const birds = new Birds('愤怒的小鸟', '黑色', 5)
// 表现：两个对象调用的都是同一个函数，但是运行结果不同
// 多态：操作同一个行为，表现出来不同的状态
jerry.move() // 调用了jerry移动的函数
birds.move() // 调用了birds移动导函数

五、循环的扩展
原生JS中提供了各种循环，用于数据的遍历

while
do-while
for(初始化;条件;自增){...}
for(let 变量 in 集合数据) {..}
forEach()循环函数
（1）基本语法
ES6又提供了一种新的循环结构，for..of循环，对有的循环进行扩展

// 声明数组
const arr = ['html/css', 'javascript', 'nodejs', 'vue']
// for..in
// 临时变量index，遍历的是索引数据
for (let index in arr) {
  console.log(index, "-->", arr[index])
}
// for..of
// 临时变量name，遍历的就是真实数据
for (let name of arr) {
  console.log("for.of循环：", name)
}

（2）底层原理
数组可以使用for.of，对象不可以使用for.of循环，因为对象中没有包含迭代器属性
如何让对象，也支持for.of循环？可以给对象添加Symbol(iterator)迭代属性

class User {
  constructor(username, password, nickname ){
    this.username = username
    this.password = password
    this.nickname = nickname
  }
  // 提示代码
  [Symbol(iterator)]() {
    // TODO 获取遍历数据 
  }
}
const tom = new User('tom', '123', "汤姆")
// 需要这样遍历，尝试让User类型的对象支持for.of循环
for(let u of tom){
  console.log("用户：", u)
}

ES6进阶

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读