ES6 学习笔记 —— （三）

幸运丫
345 阅读4分钟

笔记内容为 尚硅谷Web前端ES6教程，涵盖ES6-ES11 教学课程笔记整理

Set

  • ES6 提供了新的数据结构 Set（集合），可以 自动去重
  • 它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用 扩展运算符 和 for...of... 进行遍历
  • 集合的属性和方法
    1. size 返回集合的元素个数
    2. add 增加一个新元素，返回当前集合
    3. delete 删除元素，返回 boolean 值
    4. has 检测集合中是否包含某个元素，返回 boolean 值
    5. clear 清空集合

图片.png

集合实践

  • [1,2,3,4,5,4,3,2,1] 对这个数组进行去重、求交集、并集、差集操作

数组去重

图片.png

  1. new Set(arr) 可以对 arr 数组去重，得到去重后的 Set 集合
  2. 使用扩展运算符 ... 把 Set 转换成数组

交集

图片.png

  1. 先对 arr 去重并转换为数组 [...new Set(arr)]，得到 [ 1,2,3,4,5 ]
  2. 对该数组使用 filter 方法进行过滤
  3. 对 arr2 去重，得到去重后的集合 4,5,6
  4. 使用集合的 has 方法，判断是否交集

还有一种简便写法，原理相同，只是更简略

图片.png

并集

图片.png

  1. [...arr, ...arr2] 先合并两个数组
  2. new Set([...arr, ...arr2]) 对合并后的数组去重，得到一个集合
  3. [...new Set([...arr, ...arr2])] 把集合转换成数组

差集

图片.png

  • 差集与交集是相反的，因此只要添加一个取反符号 ! 即可

Map

  • ES6 提供了 Map 数据结构
  • 它类似于对象，也是键值对的集合
  • 但是 键 的范围不限于字符串，各种类型的值（包括对象）都可以当作键
  • Map 也实现了 iterator 接口，所以可以使用 扩展运算符 和 for...of... 进行遍历
  • Map 的属性和方法
    1. size 返回 Map 的元素个数
    2. set 增加一个新元素，返回当前 Map
    3. get 返回键名对象的键值
    4. has 检测 Map 中是否包含某个元素，返回 boolean 值
    5. clear 清空集合，返回 undefined

图片.png

图片.png

图片.png

图片.png

图片.png

class 类

  • ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板
  • 通过 class 关键字，可以定义类
  • 基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面下搞对象编程的语法而已
  • 知识点
    1. class 声明类
    2. constructor 定义构造函数初始化
    3. extends 继承父类
    4. super 调用父级构造方法
    5. static 定义静态方法和属性
    6. 父类方法可以重写

实例化一个对象

  • 先按照 ES5 的方式，用构造函数，去实例化一个对象，以手机为例 图片.png

  • 用 ES6 class 的语法来实现

    1. 关键字 class
    2. 类名 Phone
    3. 花括号 {}
    4. 构造方法 constructor(){} 这个名字不能修改，使用 new 类名 的时候，这个方法是可以自动执行的
    5. 类里的方法必须使用 方法名(){} 的形式，不能 使用 ES5 的对象完整形式 方法名: function(){}

图片.png

static

  • 构造函数本身也是一个对象，可以往对象上添加属性和方法
  • 实例对象(nokia)身上是没有构造函数(Phone)身上的属性(name)的
  • 实例对象(nokia)和函数对象(Phone)上的属性是不相通的
  • 实例对象(nokia)的属性，和构造函数原型对象(Phone.prototype)上的属性是相通的

图片.png

  • 属于函数对象(Phone)，但不属于实例对象的属性(nokia)，对于这样的属性，称为静态成员(Phone.name, Phone.change)

  • static标注的属性和方法，它属于类，不属于实例对象

图片.png

数值的扩展

  1. Number.EPSILON 是 JavaScript 表示的最小精度，Number.EPSILON 属性的值接近于2.2...-16，两个数字的差如果小于这个值，那么就认为这两个值相等
  2. 二进制和八进制
  3. Number.isFinite 检测一个数值是否为有限数
  4. Number.isNaN 检测一个数值是否为 NaN
  5. Number.parseInt、Number.parseFloat 字符串转整数
  6. Number.isInteger 判断一个数是否为整数
  7. Math.trunc 将数字的小数部分抹掉
  8. Math.sign 判断一个数到底为正数、负数、还是零

浅浅的解析一下

  1. Number.EPSILON

图片.png

  1. Number.isFinite

图片.png

  1. Number.parseInt、Number.parseFloat

图片.png

对象方法的扩展

  1. Object.is 判断两个值是否完全相等

图片.png

  1. Object.assign 用于对象的合并
    • 如果两个对象属性相等，则后者值覆盖前者值
    • 如果前者属性比后者多，则多的属性值保持不变
    • 如果后者属性比前者多，则该属性并不会添加到前者的属性上

图片.png

  1. Object.setPrototypeOf 设置原型对象，Object.getPrototypeOf 获取原型对象

图片.png

一些新特性

  1. Array.prototype.includes，includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

图片.png

  1. 指数操作符 **，用来实现幂运算，功能与 Math.pow 结果相同

图片.png

avatar
文章
阅读
粉丝