ES6中Set(集合)、Map以及class类

最新推荐文章于 2023-03-28 17:17:32 发布
最新推荐文章于 2023-03-28 17:17:32 发布
阅读量599 收藏 1
点赞数 1
分类专栏： 正在路上的前端攻城狮的烂笔记 # JavaScript 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45660621/article/details/122009461
版权

目录

Set(集合)

  • ES6提供了新的数据结构Set(集合)。
  • 类似于数组，但是成员的值都是唯一的
  • 集合实现了iterator接口，所以可以使用扩展运算符和for…of进行遍历
  • 申明一个Set语法:let s = new Set();
  • 使用typeof类型检测返回一个object
  • 可以在申明时，为Set集合中传入一个可迭代的参数，例如数组。let s= new Set([1,2,3,4]);,其中会自动进行去重操作

常用的属性和方法

size

  • 该属性会返回集合的元素个数
let s = new Set(["江流", "江流", "心猿", "心猿",
 "木龙", "木龙"]);//集合会自动去重操作
console.log(s);
console.log(s.size);//3

在这里插入图片描述

add()

  • 该方法可以为集合增加一个新元素，返回到当前集合
let s = new Set(["江流", "江流", "心猿", "心猿", "木龙", "木龙"]);//集合会自动去重操作
s.add("刀圭");
s.add("意马");
console.log(s);//'江流', '心猿', '木龙', '刀圭', '意马'

在这里插入图片描述

delete()

  • 该方法可以删除一个指定元素，返回boolean值
let s = new Set(["江流", "心猿", "木龙", "意马"]);//集合会自动去重操作
s.delete("木龙")
console.log(s);//"江流", "心猿", "意马"

在这里插入图片描述

has()

  • 该方法检测集合中是否包含某个元素，返回boolean值
let s = new Set(["江流", "心猿", "木龙", "意马"]);//集合会自动去重操作
console.log(s.has("心猿"));//true
console.log(s.has("刀圭"));//false

clear()

  • 该方法可以清空一个集合
let s = new Set(["江流", "心猿", "木龙", "意马"]);//集合会自动去重操作
s.clear();
console.log(s);

在这里插入图片描述

for…of遍历

let s = new Set(["江流", "心猿", "木龙", "意马"]);//集合会自动去重操作

for(let value of s)
{
    console.log(value);
}

在这里插入图片描述

Set 实践

数组去重

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];

// 数组去重
let result = [...new Set(arr)];
console.log(result);//[1, 2, 3, 4, 5]

在这里插入图片描述

交集A ∩ B

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

并集A U B

let arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [4, 5, 6, 5, 6]
// 并集
let union = [...new Set([...arr1, ...arr2])];
console.log(union);//[ 1, 2, 3, 4, 5, 6 ]

差集A - B

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

Map

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

Map常用属性和方法

size

  • 该属性返回Map的元素个数

set()

  • 该方法可以增加一个新元素，返回当前Map，键的范围不限于字符串，各类数据的值（包括对象）都可以当作键。
// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流儿");

m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});

// 申明一个对象
let key = {name:"江流"};

m.set(key, ["心猿", "木龙", "意马"])

console.log(m);

在这里插入图片描述

get()

  • 返回键名对象的键值
// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流儿");

m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});

// 申明一个对象
let key = {name:"江流"};

m.set(key, ["心猿", "木龙", "意马"])

// 获取
console.log(m.get('name'));//江流儿

delete()

  • 该方法可以删除一个键值
// 申明Map
let m = new Map();
// 添加元素
m.set("name","江流儿");
m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});
// 申明一个对象
let key = {name:"江流"};
m.set(key, ["心猿", "木龙", "意马"])

// 删除
m.delete('name')
console.log(m);

在这里插入图片描述

has()

  • 检测Map中是否包含某个元素，返回boolean值
// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流儿");

m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});

// 申明一个对象
let key = {name:"江流"};

m.set(key, ["心猿", "木龙", "意马"])



console.log(m.has('name'));//ture

clear()

  • 清空集合，返回undefined
// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流儿");

m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});

// 申明一个对象
let key = {name:"江流"};

m.set(key, ["心猿", "木龙", "意马"])


// 清空
m.clear();
console.log(m);

在这里插入图片描述

for…of遍历

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流儿");

m.set("fun", function(){
    console.log("马少爷！您真有钱！！");
});

// 申明一个对象
let key = {name:"江流"};

m.set(key, ["心猿", "木龙", "意马"])

// 遍历
for(let v of m)
{
    console.log(v);
}

在这里插入图片描述

class类

  • ES6引入了Class(类)这个概念，作为对象的模板。
  • 通过class关键字，可以定义类
  • 新的class写法可以让对象原型的写法更加清晰、更加像面向对象编程的语法

class申明类

ES5创建类的写法

// 手机
function Phone(brand, price)
{
    this.brand = brand;
    this.price = price;
}

// 添加方法
Phone.prototype.call  = function(){
    console.log("我可以打电话！");
}
// 实例化对象
let Xiaomi = new Phone("小米", 3999);
Xiaomi.call();
console.log(Xiaomi);

在这里插入图片描述

ES6使用class创建类的写法：

/*/ 手机
function Phone(brand, price)
{
    this.brand = brand;
    this.price = price;
}

// 添加方法
Phone.prototype.call  = function(){
    console.log("我可以打电话！");
}
// 实例化对象
let Xiaomi = new Phone("小米", 3999);
Xiaomi.call();
console.log(Xiaomi);

*/

class Phone{
    // 构造方法
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    // 方法必须使用该语法，不能使用ES5的对象完整形式
    call(){
        console.log("我可以打电话！！");
    }
}

let HUAWEI = new Phone("HUAWEI", 4999);
console.log(HUAWEI);

在这里插入图片描述

static 定义静态方法和属性

  • 静态成员是构造函数本身的属性和方法
  • 不能被实例化的对象直接访问

ES5中添加静态成员的写法

// 手机
function Phone()
{

}
// ES5添加静态成员
Phone.name = "手机";
Phone.change = function(){
    console.log("热爱自己，热爱生活！");
}
// 实例化对象
let Xiaomi = new Phone();
console.log(Xiaomi.name);//undefined

在这里插入图片描述

ES6中添加静态成员的写法

class Phone{
    // 静态成员
    static name = "手机";
    static change(){
        console.log("热爱自己，热爱生活！");
    }
}
// 实例化对象
let HUAWEI = new Phone();
console.log(HUAWEI.name);//undefined

extends继承父类

如果对ES5继承不清楚的话，可以看看我之前的博客：https://blog.youkuaiyun.com/weixin_45660621/article/details/121423001?spm=1001.2014.3001.5501

ES6中继承

// 定义父类
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("拍出你的美！");
    }
    playGame(){
        console.log("支持国内高帧率游戏");
    }
}

const Xiaomi = new SmartPhone("小米", "3999", "珍珠白","4.7")
console.log(Xiaomi);
Xiaomi.call();//调用父类的方法
Xiaomi.photo();//调用子类的方法
Xiaomi.playGame();

在这里插入图片描述

getter和setter

  • ES6支持通过getter、setter在原型上定义属性。
  • 创建getter的时候需要用关键字get;创建setter的时候需要用关键字set。
  • 通过该方法可以到达动态修改实例的属性值。
class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    get name() {
        return this._name
    }
    set name(newName) {
        this._name = newName
    }
    get age() {
        return this._age;
    }
    set age(newValue) {
        this._age = newValue
    }
}

let p = new Person('张三', 20);
console.log("修改前：", p.name + ":" + p.age);
//动态修改年龄和姓名
p._age = 16;
p._name = "李四";
console.log("动态修改后：", p.name + ":" + p.age);

在这里插入图片描述

面试官：“ES6中新增的Set方法去重你会吗？”我：“看文章就知道了”
qq_49002903的博客
08-11 3万+
在ES6 之前，我们存储数的据结构主要有两种：数组、对象。在ES6中新增了另外两种数据结构，Set、Map，以及它们的另外形式WeakSet、WeakMap就行了就让我们一起了解一下ES6中新增的两个数据结构吧。希望能给大家带来帮助，共同进步！......
ES6 | Promise + Set + Map + class类 + 数值扩展 + 对象方法扩展 + 模块化
不爱吃菜的菜菜的博客
06-19 443
是 ES6 引入的异步编程的新解决方案。(解决回调地狱） 所谓，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。 从语法上说， 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。 用Promise读取文件 Promise 封装Ajax Promise-then方法 Promise实践-读取多个文件 Promise-catch方法 方法是.then(null, rejection)或.
ES6中的Set()
weixin_45377773的博客
09-14 1046
ES6中的Set() set是一种数据结构，也是一个构造函数，再set里面的数据是唯一的，大多用来储存数据 const s1 = new Set(); //声明一个set数据类型 console.log(s1.size) //不传参它的长度为0 const s2 = new Set(["a", "b"]); console.log(s2.size) //此处为2 const s3 = new Set(["a","a"
es6中set（）
weixin_44106237的博客
08-22 178
set
es6中的Set
my bolg
10-24 499
Set: 他是一个它类似于数组的数据结构 1.Set 结构不会添加重复的值。(可以解决数组去重，哈哈) const set = new Set([1, 2, 3, 4, 4]); [...set] // [1, 2, 3, 4]  注：(...属于解构赋值，复制一份后面所带的数组或者对象，复制一份新的连同地址) 附上数组去重的方法： let arr = [1, 2, 2, 3]; ...
ES6中Set()方法
passWordEnterX的博客
12-02 717
ES6中Set()方法
ES6 set()的基础用法
CC酱写前端的博客
10-12 168
Set 实例的方法分为两大类：操作方法（用于操作数据）和遍历方法（用于遍历成员）。 它的唯一特性就是所有的元素都是唯一的，没有重复；可以使用该特性进行数组去重。 Set 实例的属性和方法 //add(value)：添加某个值，返回 Set 结构本身。 //delete(value)：删除某个值，返回一个布尔值，表示删除是否成功。 //has(value)：返回一个布尔值，表示该值是否为Set的成员。 //clear()：清除所有成员，没有返回值。 let list = new S
ES6的Map集合和类
Mr_115的博客
11-11 361
ES6的Map集合和类
ES6中set的基础、map数据结构和DOM classList的基础用法
m0_67393593的博客
07-31 161
目录一、set基础用法（add,delete,has,clear）1.set定义与初始化数据2.add添加3.delete删除指定元素4.has查询指定元素5.clear删除全部二、map数据结构（set,get,delete,size,clear,has（指定key的元素）, keys）1.set get 基础用法2.delete 删除指定元素3.size获取map的长度 has获取指定元素4.获取map的所有的key5.clear删除三、DOM classList的基础用法基本效果（可以优化）代码段 2
ES6学习——set map数据结构 、 DOM classlist属性、创建对象 、Symbol应用
鹿蹊zz的博客
07-20 380
对象方法就是把对象中的属性，用匿名函数的形式编程方法(之前就有)。
ES6的Map类型
oShiQiHao的博客
11-01 577
本文内容 Map的基本使用 Map支持的数据类型 Map的迭代 Map与其他对象的转化 在Map出现之前，要实现类似需求，只能使用Object，但是Object还是存在一些问题的。 如果使用Object作为key存储在{}中，key最终是当做[object Object]来使用的 Object的keys是无序的 无法安全遍历Object 无法直接获取Object大小 Map 对象保...
ES6中Set和Map的运用
m0_62896592的博客
12-19 746
set set:ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。 基本用法： let v=new Set(); 常见方法： 1.add() 添加数据 2.delete() 删除数据 3.clear() 清空 4.forEach() 遍历 5.size 数据的个数 代码案例: let s = new Set(); s.add(10); //添加 s.add(20) s.add(30) s.add(40);...
es6之set集合和map集合
qq_45256777的博客
10-24 196
1.set集合和map集合 ES6中新增的数据存储结构，不同的场景使用不同的集合去存储数据。 2 set集合 1 创建 用于存储不重复的数据 创建set集合 ```js const s1 = new Set(iterable) console.log(s1) ``` 2 方法 实例方法： add() 添加数据 has() 判断数据是否存在 delete() 删除数据，返回值为是否删除成功 clear() 清空集合 size 集合长度 只读 for…of forEach 根据s
ES6中的set和map
qq_36049117的博客
05-25 531
这里写自定义目录标题由来ES5模拟ES5 模拟setES5 模拟mapES5模拟缺陷ES6 setapiweak setapiset 与 weakset 的区别ES6 mapapiweak mapapimap 与 weakmap 的区别 由来 在ES6之前，js中能够作为集合的数据类型就是数组。数组是数值型的索引，通常创建队列和堆栈更为方便，但是当碰到其他类型的索引时，我们往往会使用对象，对象也可以看作键值对的集合。这就是早期的set和map. ES5模拟 ES5 模拟set 判断某个属性是否存在if( o
ES6新特性总结（3）Set集合、Map集合
橘猫吃不胖的博客
12-17 813
ES6新特性（3）Set集合、Map集合1 Set集合1.1 操作方法1.2 遍历方法1.3 WeakSet2 Map集合2.1 Map概述2.2 基本方法和属性2.3 遍历方法2.4 转为数组2.5 Map的遍历和过滤2.6 forEach()2.7 WeakMap 1 Set集合 Set集合：是一种数据结构，结构类似于数组，且没有重复的值。主要用于数组去重，字符串去重。 1.1 操作方法 方法 含义 add() 添加值，返回Set结构本身 delete() 删除值，返回一个boole
ES6 从入门到精通 # 11：Map 数据类型
学习前端这门手艺，栈底到栈顶依次是：浏览器架构、Web 网络、事件循环机制、JavaScript 核心、V8 的内存管理、浏览器的渲染流程、Web 安全、CSS、React、Vue、Node、构建工具链等
07-29 341
WeakMap对象是一组键/值对的集合，其中的键是弱引用的。其键必须是对象，而值可以是任意的。另外也有一个跟Set类型类似的WeakMap对象。Map类型是键值对的有序列表，键和值是任意类型。ES6从入门到精通系列（全23讲）学习笔记。这里不做过多描述，请参考文档。...
ES6 基本语法2（class、Set和Map数据结构）
小葵坤_易安的博客
03-20 488
五、class的基本语法 1.类 （1）ES6通过class关键字，可定义类 class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; } } 说明： 定义了一个“类”，可以看到里...
es6中的map、set数据类型
weixin_50163576的博客
11-29 661
es6 新增的集合类型数据-Map和Set，他们是对原有的对象和数组类型的集合数据的补充。 1、map类型 map和对象 都是键值对集合的形式，但结构不太一样。对象中，键值对 是以`:`关联，map中一个键值对是一个数组。 { // 对象的键值对结构 name : '张三', gender : '男', age : 18 } const entries = [ // map键值对结构 ['name', '张三'], ['gender', '男'],
kettle-elasticsearch插件（支持写入list后map数据类型数据）
abments的博客
03-28 501
在kettle官方提供的elasticsearch插件中是不支持写入List或者Map类型结构的数据的，如果需要支持写入List或Map数据类型需要对源码进行扩展。这次上次的资源通过修改源码的方式实现了通过密码认证访问es接口和写入list或map类型数据的功能。
es6 map set
最新发布
08-18
ES6中的Map是一种键值对的集合，类似于对象，但有一些不同之处。Map使用set()方法来添加或更新一个键值对。使用get()方法可以获取指定键的值。Map还具有其他与Set不同的方法，如clear()、has()、size和delete()。Map...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值