JavaScript中数组的集合和映射

集合

集合(set)是在ES6中引入的一种数据结构,用于表示唯一值的集合,所以它不能包含重复值。接 下来这一小节,就让我们具体来看一下这种新的数据结构。

Set集合是一种无重复元素的列表,这是这种数据结构的最大的一个特点。

要创建一个集合,方法很简单,直接使用new就可以创建一个Set对象。如果想要集合在创建时 就包含初始值,那么我们可以传入一个数组进去。

let s1 = new Set();

let s2 = new Set([1,2,3]);

console.log(s1);//Set {}

console.log(s2);//Set { 1, 2, 3 }

使用add()方法可以给一个集合添加值,由于调用add()方法以后返回的又是一个Set对象,所 以我们能连续调用add()方法进行值的添加,这种像链条一样的方法调用方式被称为链式调用。

let s1 = new Set();

s1.add(1);

console.log(s1);//Set { 1 }

s1.add(2).add(3).add(4);

console.log(s1);

//Set { 1, 2, 3, 4 } 我们还可以直接将一个数组传入add()方法里面 let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set { [ 1, 2, 3 ] }

需要注意的是建立Set对象时传入数组与调用add()方法时传入数组是效果是不一样,区别 如下:

建立Set对象时传入数组,数组每一项成为Set对象的一个元素

let s1 = new Set([1,2,3]);

console.log(s1);

//Set { 1, 2, 3 }

console.log(s1.size);//3

调用add()方法时传入数组,就是作为Set对象的一个元素

let s1 = new Set();

s1.add([1,2,3]);

console.log(s1);

//Set { [ 1, 2, 3 ] }

console.log(s1.size);//1

在Set对象中,不能够添加相同的元素,这是很重要的一个特性

let s1 = new Set();

s1.add(1).add(2).add(2).add(3);

console.log(s1);

//Set { 1, 2, 3 }

集合相关属性和方法

  1. 用size属性获取元素个数

let s1 = new Set([1,2,3]);

console.log(s1.size);//3

  1. 使用has()方法来查看一个集合中是否包含某一个值

let s1 = new Set([1,2,3]);

console.log(s1.has(1));//true

  1. 删除集合值

使用delete删除Set对象里面的某一个元素

let s1 = new Set([1,2,3]);

s1.delete(2);

console.log(s1);//Set { 1, 3 }

//没有的元素也不会报错

s1.delete("2");

console.log(s1);//Set { 1, 3 }

如果要一次性删除所有的元素,可以使用clear方法

let s1 = new Set([1,2,3]);

s1.clear()

console.log(s1);//Set {}

遍历集合

集合也是可以枚举的,我们同样可以使用for-o f来对集合进行遍历,如下:

let s = new Set([1,2,3,4,5]);

for(let i of s){ console.log(i);

}

// 1

// 2

// 3

// 4

// 5

或者通过for Each来进行遍历,示例如下:

//使用forEach进行遍历

let s = new Set([1,2,3,4,5]); s.forEach(ele => console.log(ele));

//1

//2

//3

//4

//5

除此之外,我们也可以使用集合里面自带的keys() , values()以及ent ries()方法来对集合 进行遍历。顺便要说一下的是,在集合里面键和值是相同的。

keys()方法遍历集合的键

let s = new Set(["Bill","Lucy","David"]); for(let i of s.keys()){

console.log(i);

}

// Bill

// Lucy

// David

values()方法遍历集合的值

let s = new Set(["Bill","Lucy","David"]); for(let i of s.values()){

console.log(i);

}

// Bill

// Lucy

// David

ent ries()方法同时遍历集合的键与值

let s = new Set(["Bill","Lucy","David"]); for(let i of s.entries()){

console.log(i);

}

// [ ‘Bill‘, ‘Bill‘ ]

// [ ‘Lucy‘, ‘Lucy‘ ]

// [ ‘David‘, ‘David‘ ]

集合转数组

集合转为数组,最快的方法就是使用前面所讲过的扩展运算符,如下:

let s1 = new Set([1,2,3]);

console.log(s1);//Set { 1, 2, 3 }

let arr = [...s1]; console.log(arr);//[ 1, 2, 3 ]

除此之外,我们还可以使用Arra y对象所提供的from。方法来进行转换

let s1 = new Set([1,2,3]); console.log(s1);//Set { 1, 2, 3 }

let arr = Array.from(s1); console.log(arr);//[ 1, 2, 3 ]

前面我们有提到过,Set对象里面是不能够存放相同的元素的,利用这个特性,我们可以快速的 为数组去重,如下:

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

let s1 = new Set(arr);

let arr2 = [...s1]; console.log(arr2);//[ 1, 2, 3, 4, 6, 7, 5 ]

弱集合(扩展)

当对象添加到集合中时,只要集合存在,它们就一直存储在集合。即使对象的引用被删除了也依 然如此,我们来看下面的这个例子:

let arr = [1,2,3];

let s = new Set(arr);

arr = null;//删除arr数组的指向

console.log(s);//Set { 1, 2, 3 }数组依然存在于集合中 console.log(arr);//null

映射

映射(Map)也是ES6规范中引入的一种数据结构。

使用new关键字与Map()构造函数,就可以创建一个空的m ap对象。如果要向Map映射中添加 新的元素,可以调用set()方法并分别传入键名和对应值作为两个参数。如果要从集合中获取 信息,可以调用get()方法。

let m = new Map();

m.set("name","xiejie");

m.set("age",18);

console.log(m);

//Map { ‘name‘ => ‘xiejie‘, ‘age‘ => 18 }

console.log(m.get("name"));

//xiejie

在对象中,无法用对象作为对象属性的键名。但是在Map映射中,却可以这样做,可以这么说, 在Map映射里面可以使用任意数据类型来作为键。

let m = new Map();

m.set({},"xiejie"); m.set([1,2,3],18);

m.set(3581,18);

console.log(m);

//Map { {} => ‘xiejie‘, [ 1, 2, 3 ] => 18, 3581 => 18 }

传入数组来初始化Map映射 可以向Map构造函数传入一个数组来初始化Map映射,这一点同样与Set集合相似。数组中的每 个元素都是一个子数组,子数组中包含一个键值对的键名与值两个元素。因此,整个Map映射中 包含的全是这样的两个元素的二维数组

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(m);

//Map { ‘name‘ => ‘xiejie‘, ‘age‘ => 18 }

映射相关属性和方法

在设计语言新标准时,委员会为Map映射与Set集合设计了如下3个通用的方法 has(key):检测指定的键名在Map映射中是否已经存在 delete(key):从Map映射中移除指定键名及其对应的值

clear。:移除M ap映射中的所有键值对

Map映射同样支持size属性,其代表当前集合中包含的键值对数量

let arr = [["name","xiejie"],["age",18]]; let m = new Map(arr);

console.log(m);//Map { ‘name‘ => ‘xiejie‘, ‘age‘ => 18 } console.log(m.size);//2 console.log(m.has("name"));//true console.log(m.get("name"));//xiejie m.delete("name");

console.log(m);//Map { ‘age‘ => 18 } m.clear();

console.log(m);//Map {}

映射的遍历

与集合一样,映射也是可以枚举的,所以可以用与集合类似的方式进行遍历。 使用for-of来遍历映射

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m){

console.log(i);

}

// [ ‘name‘, ‘xiejie‘ ]// [ ‘age‘, 18 ]

keys()方法遍历映射的键

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.keys()){

console.log(i);

}

// name

// age

values()方法遍历映射的值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.values()){

console.log(i);

}

// xiejie

// 18

ent ries()方法同时遍历映射的键与值

let m = new Map([["name","xiejie"],["age",18]]); for(let i of m.entries()){

console.log(i);

}

// [ ‘name‘, ‘xiejie‘ ]

// [ ‘age‘, 18 ]

映射转为数组

Map结构转为数组结构,比较快速的方法还是使用前面介绍过的扩展运算符...。

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log([...m.keys()]);//[ ‘name‘, ‘age‘ ]

console.log([...m.values()]);//[ ‘xiejie‘, 18 ]

console.log([...m.entries()]);//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ]

console.log([...m]);//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ] 或者使用Array对象的from。方法

let arr = [["name","xiejie"],["age",18]];

let m = new Map(arr);

console.log(Array.from(m));

//[ [ ‘name‘, ‘xiejie‘ ], [ ‘age‘, 18 ] ]

原文地址:https://www.cnblogs.com/zai1/p/11148491.html

时间: 2024-10-21 03:14:44

JavaScript中数组的集合和映射的相关文章

私人定制javascript中数组小知识点(Only For Me)

先上笑话,1.刚看到一个游泳的,想起公司组织去三亚旅游,老板跳海里,各种挣扎,捞上来老板第一句话:我记得我会游泳的啊. 2.媳妇说:老公对不起,我把你新买的自行车撞散架了! 老公:没事宝贝,你若安好,便是晴天! 媳妇说:老公你太有诗意了. 老公:滚犊子,安不好我整死你! 数组的概念 javascript数组是值得有序集合,不过它实属一个javascript对象的特殊形式,这是一个很重点的定性. 创建数组 1.var a=new Array();//等同于[] 2.var a=new Array(

深入理解javascript中的动态集合——NodeList、HTMLCollection和NamedNodeMap

× 目录 [1]NodeList [2]HTMLCollection [3]NamedNodeMap[4]注意事项 前面的话 一说起动态集合,多数人可能都有所了解.但是,如果再深入些,有哪些动态集合,以及这些动态集合有什么表现.区别和联系?可能好多人就要摇头了.本文就javascript中的动态集合做详细介绍 NodeList NodeList实例对象是一个类数组对象,它的成员是节点对象,包括childNodes和querySelectorAll()方法返回值 <div id="test&

JavaScript中数组Array.sort()排序方法详解

JavaScript中数组的sort()方法主要用于对数组的元素进行排序.其中,sort()方法有一个可选参数.但是,此参数必须是函数. 数组在调用sort()方法时,如果没有传参将按字母顺序(字符编码顺序)对数组中的元素进行排序,如果想按照其他标准进行排序,就需要进行传一个参数且为函数,该函数要比较两个值,并且会返回一个用于说明这两个值的相对顺序的数字. 1.对数字数组进行由小到大的顺序进行排序. 代码: var arr = [22,12,3,43,56,47,4]; arr.sort();

javascript中数组常用方法总结

原文:javascript中数组常用方法总结 在javascript的基础编程中,数组是我们最常遇到的,那么数组的一些常用方法也是我们必须要掌握的,下面我们总结一下数组中常用的方法. toString()和valueOf()方法 toString()方法,就是将数组拼接成字符串返回,默认情况下以逗号分隔.valueOf返回数组本身. 1 var a=["a3","bs","c1","d邓"]; 2 var c=a.toStri

JavaScript中数组高级编程实践

今天我们来全面介绍 JavaScript 中 数组的高级使用,与EcmaScript5 Array API 实战. 利用这些新的API 和 技巧,将提高你的开发效率 和 代码的水平. 理解这些原生的API是 非常有必要的,假以时日,我们也可以写出 underscore ...这样的工具库来. Come on Baby! 先看一下 Array.prototype 的全家福. 在JavaScript 中,数组就是有顺序的存储一系列值,长度动态扩容. ,先看我们的EcmaScript 规范中的  对

浅谈JavaScript中数组操作常用方法

JavaScript中数组操作常用方法 1.检测数组 1)检测对象是否为数组,使用instanceof 操作符 if(value instanceof Array) { //对数组执行某些操作 } 2)获取对象的类型,比较是否为object类型(此方法只能检测是否为Object,不推荐) if(typeof(value)=="Object") { //对数组执行某些操作 } 3)检测对象是否为数组,使用Array.isArray()方法(只支持ie9+,firefox 4+,safar

java中数组、集合、字符串之间的转换,以及用加强for循环遍历

java中数组.集合.字符串之间的转换,以及用加强for循环遍历: 1 @Test 2 public void testDemo5() { 3 ArrayList<String> list = new ArrayList<String>(); 4 list.add("甲乙1"); 5 list.add("甲乙2"); 6 list.add("甲乙3"); 7 list.add("甲乙4"); 8 //

javascript中数组比较大小方法

javascript中数组取最大值和最小值 1.排序法 我们给数组进行排序,可以按照从小到大的顺序来排,排序之后的数组中第一个和最后一个就是我们想要获取的最小值和最大值.排序我们会用到数组的 sort 方法. var arr = [12,56,25,5,82,51,22]; arr.sort(function (a, b) { return a-b; }); // [5,12,22,25,51,56] var min = arr[0]; // 5 var max = arr[arr.length

javascript中数组常用的方法

在JavaScript中,数组可以使用Array构造函数来创建,或使用[]快速创建,这也是首选的方法.数组是继承自Object的原型,并且他对typeof没有特殊的返回值,他只返回'object'. 运行[] instanceof Array他会返回ture.虽然结果是这样,但也有复杂的类数组对象,如字符串或arguments对象,但arguments对象并非是Array的实例,但他却拥有length属性,而且他的值是可以被索引的,因此他可以像一个数组那样被遍历. 这本文中,我将介绍数组原型的一