IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> ES6 set map初识 -> 正文阅读

[JavaScript知识库]ES6 set map初识

Set

SetES6给开发者带来的一种新的数据结构,类似数组,最重要的不同点是:它的值不会有重复项。Set本身是一个构造函数,你可以理解为一个类,使用的时候需要用new来创建一个实例。

var s = new Set(['a','b','c']);
console.log(s);
// Set(3)?{'a', 'b', 'c'}

四个常用方法:添加、删除、是否含有、清空

一个常用属性: size

var s = new Set(['a','b','c']);
console.log(s);

s.add(1) // 添加值
console.log(s);

console.log(s.size); // size 属性类似于数组的长度

console.log(s.delete('a')) // 删除a返回一个布尔值
console.log(s);

console.log(s.has('b')); // 是否含有b ,返回一个布尔类型

s.clear() // 清空
console.log(s.size)

// 打印结果如下
Set(3)?{'a', 'b', 'c'}
Set(4)?{'a', 'b', 'c', 1}
4
Set(3)?{'b', 'c', 1}
true
0

set最常用的就是利用不会重复的特性做数组去重:

let arr=[1,1,1,2,2,3,4,5,3]
let newArr = Array.from(new Set(arr))
console.log(newArr);
// [1, 2, 3, 4, 5]

Map

这个map类似于对象,存的是键值对:key=>value;但是它的key键名的类型不再局限于字符串类型了,它可以是各种类型的值;初始化也是需要new。并且也不会重复;先介绍一下他的基础语法

let m = new Map([
            ["name","zs"],
            ["age",18]
    ]);
console.log(m);
// Map(2)?{'name' => 'zs', 'age' => 18}

上面提到他的key可以是任意类型

let m = new Map()
 //数组类型的键名
 m.set([1],2);
//对象类型的键名
m.set({"name":"Zhangsan"},2);
//布尔类型的键名
m.set(true,2);
//Symbol类型的键名
m.set(Symbol('name'),2);
//null为键名
m.set(null,2);
//undefined为键名
m.set(undefined,2);
console.log(m);

// 如下
Map(6) {Array(1) => 2, {…} => 2, true => 2, null => 2, …}
[[Entries]]
0: {Array(1) => 2}
1: {Object => 2}
2: {true => 2}
3: 2
4: {null => 2}
5: {undefined => 2}
size: 6
[[Prototype]]: Map

四个常用方法:设置键值对、获取键值、删除、是否含有、清空

一个常用属性: size

let m = new Map([
            ["age",18]
    ]);
console.log(m.size); // 获取map的长度
m.set('name','zs') // 设置key:name value:zs
m.set('age',20) // 设置键值对,age已经存在更新值
console.log(m);
console.log(m.get('age')); // 通过key获取value
console.log(m.delete('name')) // 删除key为 1 的 返回一个布尔值
console.log(m.has('name')); // map是否含有key为 1 的键值对
m.clear() // 清空

// 结果
1
Map(2)?{'age' => 20, 'name' => 'zs'}
20
true
false

entries(条目)

set和map都有这个方法 entries() ,供我们来进行遍历写法如下

// m为map
let m = new Map([
            ["age",18],
            ['name','zs']
    ]);

// 或者set
let m = new Set(['a','b','c']);

for(let item of m.entries()){
    console.log(item);
}
// 解构赋值
for(let [key,value] of m.entries()){
    console.log(key,value);
}

// map:
['age', 18]
['name', 'zs'] 
// 解构map
age 18
name zs

// set:
['a', 'a']
['b', 'b']
['c', 'c']
// 解构set
a a
b b
c c

可以看到map是键值对格式,但是set的key,value是同一个值。其实对于遍历,它还给我们提供了另外两个函数,可以理解是entries的删减版

// 只遍历key
for(let key of m.keys()){
    console.log(key);
}
// 只遍历value
for(let value of m.values()){
    console.log(value);
}

set和map,好用就好用在,他们可以自动去重,并且提供了一些方法,让我们能更好的管理和使用他们,一般项目来说,使用他们处理大量数据,可以减轻后端压力,增删改查在前端,再来一个保存接口就可以搞定,n多个接口再能完成的事情

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章           查看所有文章
加:2022-08-06 10:34:49  更:2022-08-06 10:40:01 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 9:47:33-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码