ES6第三天

ES6第三天

一.set

ES6 提供了新的数据结构 Set(集合)。它类似于数组,但成员的值都是唯
一的,集合实现了 iterator 接口,所以可以使用扩展运算符for…of…
行遍历.
集合的属性和方法:

  1. size 返回集合的元素个数
  2. add 增加一个新元素,返回当前集合
  3. delete 删除元素,返回 boolean 值
  4. has 检测集合中是否包含某个元素,返回 boolean 值
  5. clear 清空集合,返回 undefined
//创建一个空集合
let s = new Set();
//创建一个非空集合
let s1 = new Set([1,2,3,1,2,3]);
//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

二.Map

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合。但是“键”
的范围不限于字符串,各种类型的值(包括对象)都可以当作键。
Map 也实现了iterator 接口,所以可以使用扩展运算符和for…of…进行遍历。
Map 的属性和方法:

  1. size 返回 Map 的元素个数
  2. set 增加一个新元素,返回当前 Map
  3. get 返回键名对象的键值
  4. has 检测 Map 中是否包含某个元素,返回 boolean 值
  5. clear 清空集合,返回 undefined
//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
 ['name','重庆大学'],
 ['slogon','勤学业 爱国家']
]);
//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

三.class

ES6 提供了更接近传统语言的写法,引入了 Class(类)这个概念,作为对
象的模板。通过 class 关键字,可以定义类。

基本上,ES6 的 class 可以看作只是一个语法糖,它的绝大部分功能,ES5 都可以做到,新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

  1. class 声明类
  2. constructor 定义构造函数初始化
 class phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log('我可以打电话');
            }
        }
        let xiaomi = new phone('小米', 1999);
        console.log(xiaomi);
  1. extends 继承父类
  2. super 调用父级构造方法
 class phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log('我可以打电话');
            }
        }
        class smartphone extends phone {
            constructor(brand, price, color, size) {
                super(brand, price);
                this.color = color;
                this.size = size;
            }
            photo() {
                console.log('拍照');
            }
        }
        const xiaomi = new smartphone('小米', 1999, 'blue', '5inch');
        console.log(xiaomi)
  1. static 定义静态方法和属性
  2. 父类方法可以重写

四.模块化

模块化是指将一个大的程序文件,拆分成许多小的文件,然后将小文件组合起来。

4.1模块化的好处
  1. 防止命名冲突
  2. 代码复用
  3. 高维护性
4.2模块化规范产品

ES6 之前的模块化规范有:

  1. CommonJS => NodeJS、Browserify
  2. AMD => requireJS
  3. CMD => seaJS
4.3模块化语法

模块功能主要由两个命令构成:export 和 import。

⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能

五.案例

5.1set实践
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        let arr1 = [1, 2, 2, 3, 4, 5, 5, 6];
        let arr2 = [2, 4, 6, 8];
        //1.数组去重
        let result1 = [...new Set(arr1)];
        console.log(result1);
        //2.交集
        let result2 = [...new Set(arr1)].filter(iteam => new Set(arr2).has(iteam));
        console.log(result2);
        // 3.并集
        let result3 = [...new Set([...arr1, ...arr2])];
        console.log(result3);
        //4.差集
        let result4 = [...new Set(arr1)].filter(item => !(new Set(arr2).has(item)))
        console.log(result4);
    </script>
</body>
</html>
上一篇:SQL:1158. 市场分析 1-2


下一篇:vue的watch属性