ES6 学习总结5

琳琳在哪

已于 2022-04-12 20:56:06 修改

阅读量147

点赞数

分类专栏：前端文章标签：前端 javascript es6

于 2022-04-12 20:46:02 首次发布

本文链接：https://blog.csdn.net/qq_63479468/article/details/124110516

版权

前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、set集合

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

set集合的属性和方法：

size 返回集合的元素个数；
add 增加一个新元素，返回当前集合；
delete 删除元素，返回 boolean 值；
has 检测集合中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

<!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>Set集合</title>
</head>
<body>
    <script>
        //Set集合
        let s = new Set();
        console.log(s,typeof s);
        let s1 = new Set(["wjk","wy","yyqx"]);
        console.log(s1);
        //1.size返回集合的元素个数
        console.log(s1.size);
        //2.add增加一个新元素
        s1.add("TFBOYS");
        console.log(s1);
        //3.delete删除元素，返回Boolean值
        let re = s1.delete("TFBOYS");
        console.log(re);
        console.log(s1);
        //4.has检测集合中是否包含某个元素，返回Boolean值
        let r1 = s1.has("xd");
        console.log(r1);
        //5.clear清空集合，返回undefined
        s1.clear();
        console.log(s1);
    </script>
</body>
</html>

Set集合实践

1.数组去重

let arr = ['马嘉祺','宋亚轩','张真源','贺峻霖','丁程鑫','宋亚轩','刘耀文','张真源','严浩翔','贺峻霖'];
//数组去重
let s1 = new Set(arr);
console.log(arr);
console.log(s1);

2.交集

 //交集
        let arr1 = ['2','0','2','2','4','1','1'];
        let arr2 = ['2','2','1','5','3','1','1'];
        let result = [...new Set(arr1)].filter(item=>new Set(arr2).has(item));
        console.log(result);

3.并集

//并集
        //...为扩展运算符，将数组转化为逗号分隔系列
        let arr1 = ['2','0','2','2','4','1','1'];
        let arr2 = ['2','2','1','5','3','1','1'];
        let un = [...new Set([...arr1,...arr2])];
        console.log(un);

这里可以看到，两个集合不仅并了起来，且是去重之后，主要是因为将这两个数组放在Set里，去重和并集两个功能同时实现了

4.差集

 //差集
        let arr1 = ['2','0','2','2','4','1','1'];
        let arr2 = ['2','2','1','5','3','1','1'];
        let resu = [...new Set(arr1)].filter(item=>!new Set(arr2).has(item));
        console.log(resu);

主要思想是：数组1和数组2求差集，就是数组1 里有的，数组2没有，所以只需在交集的基础上关键的地方加上一个！就可以了

二、Map集合

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

Map的属性和方法：

size 返回 Map 的元素个数；
set 增加一个新元素，返回当前 Map；
get 返回键名对象的键值；
has 检测 Map 中是否包含某个元素，返回 boolean 值；
clear 清空集合，返回 undefined；

//创建一个空的map
        let m1 = new Map();
        //创建一个非空的map
        let m2 = new Map([
            ['name','宋亚轩'],
            ['function','唱歌']
        ]);
        //1.size返回Map元素个数
        console.log(m2.size);
        //2.set增加一个元素，返回当前Map
        m1.set("lyw","刘耀文");
        m1.set("syx","宋亚轩");
        console.log(m1);
        //3.get返回键名对象的的键值
        console.log(m1.get("lyw"));
        //has检测Map中是否包含某个元素，返回Boolean值
        console.log(m1.has("yaya"));
        //5.clear清空集合,返回undefined
        m2.clear();
        console.log(m2);

三、class类

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

class 声明类；

constructor 定义构造函数初始化；

class TNT{
            constructor(name,age){
                this.name = name;
                this.age = age;
            }

            sing(){
                console.log("唱歌！");
            }
        }

        let syx = new TNT('宋亚轩',18);
        syx.sing();
        console.log(syx);

与Java中的类一样

extends 继承父类；

super 调用父级构造方法；

//class类继承
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("我可以拍照！");
}
game(){
console.log("我可以玩游戏！");
}
}
const chuizi = new SmartPhone("小米",1999,"黑色","5.15inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();

static 定义静态方法和属性；静态属性不能直接调用，需要通过类名打点调用

class Phone {
            // 静态属性
            static name = "手机";
            static change() {
                console.log("我可以改变世界！");
            }
        }
        let nokia = new Phone();
        console.log(nokia.name);//静态属性不能直接调用，需要通过类名打点调用
        console.log(Phone.name);
        Phone.change();

父类方法可以重写；

// class类继承
        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;
            }
            call(){
                console.log("我可以进行视频通话！");
            }
            photo(){
                console.log("我可以拍照！");
            }
            game(){
                console.log("我可以玩游戏！");
            }
    }
        const chuizi = new SmartPhone("小米", 1999, "黑色", "5.15inch");
        console.log(chuizi);
        chuizi.call();
        chuizi.photo();
        chuizi.game();

class中的getter和setter 设置

class Phone{
               get price(){
                   console.log("价格！");
                   return 123;
               }

               set price(value){
                   console.log("被修改了！！！！！");
               }
           }

           let ph = new Phone();
           console.log(ph.price);
           ph.price = 2000;

琳琳在哪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6 学习总结5

一、set集合ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。set集合的属性和方法：size 返回集合的元素个数； add 增加一个新元素，返回当前集合； delete 删除元素，返回 boolean 值； has 检测集合中是否包含某个元素，返回 boolean 值； clear 清空集合，返回 undefined；<!DOCTYPE html>
复制链接

扫一扫