ES6第三天

最新推荐文章于 2024-06-14 11:01:38 发布

狗都不干机械

最新推荐文章于 2024-06-14 11:01:38 发布

阅读量129

点赞数

文章标签： javascript es6

本文链接：https://blog.csdn.net/I_love_bc/article/details/117091456

版权

ES6第三天

一.set

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

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值
has 检测集合中是否包含某个元素，返回 boolean 值
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 的属性和方法：

size 返回 Map 的元素个数
set 增加一个新元素，返回当前 Map
get 返回键名对象的键值
has 检测 Map 中是否包含某个元素，返回 boolean 值
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 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

class 声明类
constructor 定义构造函数初始化

 class phone {
            constructor(brand, price) {
                this.brand = brand;
                this.price = price;
            }
            call() {
                console.log('我可以打电话');
            }
        }
        let xiaomi = new phone('小米', 1999);
        console.log(xiaomi);

extends 继承父类
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)

static 定义静态方法和属性
父类方法可以重写

四.模块化

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

4.1模块化的好处

防止命名冲突
代码复用
高维护性

4.2模块化规范产品

ES6 之前的模块化规范有：

CommonJS => NodeJS、Browserify
AMD => requireJS
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>

狗都不干机械

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
ES6第三天

ES6第三天一.setES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用扩展运算符和for…of…进行遍历.集合的属性和方法： size 返回集合的元素个数add 增加一个新元素，返回当前集合 delete 删除元素，返回 boolean 值 has 检测集合中是否包含某个元素，返回 boolean 值clear 清空集合，返回 undefined//创建一个空集合let s = new Set();
复制链接

扫一扫