JS五种集合的存取查询数据表现形式

JS四种集合分别是对象集合、数组集合、json集合，set集合和map集合，常用于不同情景下的存放数据，实现对数据的缓存、增添、删除、修改及查询等多种数据处理与操作功能，为复杂数据处理提供了多种手段与便利。

一、对象集合

对象是一种无序的键值对集合，可以包含多个属性，每个属性都有一个名称（键）和一个值，名称具有唯一性，会自动清除重复项。对象用于表示现实世界中的实体，并可以包含复杂的数据类型，如数组或其他对象。

(一)增添、删除、修改

let objList={one:1,two:2};//初始定义，如果名称（键）重复，只保留一个

objList.three=3;//添加项

objList.four=4;//添加项

console.log(objList);//输出结果：{one:1,two:2,three:3,four:4}

delete objList.four;//删除项

console.log(objList);//输出结果：{one:1,two:2,three:3}

objList.three=30;//修改项

console.log(objList); //输出结果：{one:1,two:2,three:30}

(二)查询

1.for-in遍历查询

var data = {a:1,b:2,c:3}

for(var item in data){  //for in遍历查询，此种方式会进行全部遍历，可在找到对应项后通过break进行中止

if (item == 'b') {

console.log(data.b);//此种为已知名称，指定名称下进行输出

console.log(data[item]);//此种为未知名称，item为泛指代替

       break;//找到对应项后，进行中止剩余遍历

}

}

2.选择性解构查询

(1)单层对象集合查询

let node={

id:1,

       number:0325,

       type:"学生",

       name:"张小玉",

       sex:"女",

       address:"四海市"

}

let {type,name}=node;//只要变量名能对上，不管数量和顺序

console.log(type);//输出结果：学生

console.log(name);//输出结果：张小玉

(2)多层对象集合查询

let node={

       type:"学生",

       name:"张小玉",

       loc:{

              start:{

                     line:1,

                     column:2

              },

              end:{

                     line:2,

                     column:4

              }

       }

};

let {loc:{start}}=node;//选择性的定义嵌套对象解构体(复制)，从而将遍历才能取得个别数据方法大大简化

console.log(start.line);//输出结果：1

console.log(start.column);//输出结果：2

二、数组集合

数组是JavaScript中最基本且常用的集合类型，用于处理有序列表数据。数组可以包含不同类型的值，并通过索引访问和操作这些值。

(一)增添、删除、修改

let numbers=[1,2,3];//数组集合初始定义，为有序列表集合，可以有重复项

numbers.push(4);//添加项，默认添加到末尾

console.log(numbers);//输出结果：[1,2,3,4]

numbers=numbers.concat(5,6);    //添加其他数据到尾部,注意此处不能直接写成不带等号的值numbers.concat(5,6)，必须要有赋值等号，不然不起作用

console.log(numbers);//输出结果：[1,2,3,4,5,6]

numbers.shift();//删除数组中第一个元素，删除中间位元素只能通过间接方法实现

console.log(numbers);//输出结果：[2,3,4,5,6]

numbers.pop();//删除数组中最后一个元素，删除中间位元素只能通过间接方法实现

console.log(numbers);//输出结果：[2,3,4,5]

numbers.unshift(-1,0);//向数据开头添加一个或多个元素

console.log(numbers);//输出结果：[-1,0,2,3,4,5]

numbers.reverse();//颠倒数组中元素的顺序

console.log(numbers);//输出结果：[5,4,3,2,0,-1]

numbers.sort(function(a,b){return a-b;});//进行排序，函数参数中a-b为从小到大排序，b-a为从大到小排序

console.log (numbers);//输出结果：[-1,0,2,3,4,5]

(二)查询

1.遍历查询

(1)for遍历查询

let numbers=[1,2,3,4];//数组集合初始定义，为有序列表集合，可以有重复项

for(let i=0;i<numbers.length;i++){

       if(numbers[i]==2){

              console.log("第"+(i+)+"个元素："+numbers[i]);//输出结果：第2个元素：2

        break;//找到对应项后，进行中止剩余遍历

       }

}

(2)forEach遍历查询

let numbers=[1,2,3,4];//数组集合初始定义，为有序列表集合，可以有重复项

numbers.forEach(function(value,item){

       if(value==2){

              console.log("第"+(item+1)+"个元素："+value);//输出结果：第2个元素：2

        return;//Js的forEach循环不能通过break中止，可以通过return中止当次循环，也可以通过抛出异常中止后面循环

       }

});

(3)for-of遍历查询

let numbers=[10,20,30,40];//数组集合初始定义，为有序列表集合，可以有重复项

for(let item of numbers){

      if(item==30){

            break;//满足条件后，进行中止剩余遍历

          }

       console.log(item);//输出结果：10,20

};

2.选择性查询

(1)分割查询

let numbers=[1,2,3,4];//数组集合初始定义，为有序列表集合，可以有重复项

console.log("获取数据中第2个元素后所有元素："+numbers.slice(1));//输出结果：2,3,4

console.log("获取数据中第2个到第4个元素后所有元素："+numbers.slice(1,4));//输出结果：2,3,4

console.log("获取数据中倒数第2个元素后所有元素："+numbers.slice(-2));//输出结果：3,4

(2)单层数组解构查询

let colors=["red","green","blue"];//单层数组结构

let [,,thirdColor]=colors;//选择性数组解构，将不需要的序号处用占位符逗号表示

console.log(thirdColor);//输出结果：blue

(3)多层数组解构查询

let colors=["red",["green","lightgreen"],"blue"];//嵌套数组结构

let [firstColor,[secondColor]]=colors;//嵌套数组解构

console.log(firstColor);//输出结果：red

console.log(secondColor);//输出结果：green

(4)条件匹配查询

let numbers=[25,30,35,40,45];

//通过数组的find(function(n){return n>33})方法查找数组中第一个大于33的元素值

console.log(numbers.find(n=>n>33));//输出结果：35

//通过数组的findindex(function(n){return n>33})方法查找数组中第一个大于33的元素值序号

console.log(numbers.findIndex(n=>n>33));//输出结果：2

三、json集合

Json集合，为对象集合与数组集合相互嵌套结果。严格意义上说，Json集合是具有自我描述的字符串，具可以通过JavaScrip的eval()转换为对象集合或数组集合，如var obj = eval ("(" +json txt + ")");。其存取及查询操作除前两者对应函数手段嵌套操作 (本处不再举例) 外，还具有Json自身的一些存取操作函数。

// 存储数据：

myObj = { "name":"Bill", "age":19, "city":"Seattle" };

myJSON = JSON.stringify(myObj);

localStorage.setItem("testJSON", myJSON);

// 取回数据：

text = localStorage.getItem("testJSON");

obj = JSON.parse(text);

document.getElementById("demo").innerHTML = obj.name;

四、set集合

Set集合是一种不重复元素的集合，常被用于检查对象中是否存在某个键名，适用于需要唯一值的场景。Set 中的元素是唯一的，每个元素只能出现一次。例如，let uniqueNumbers = new Set([1, 2, 3, 1, 2]); 创建了一个包含唯一数字的Set‌2。

(一)增添、删除、修改

let set=new Set([1,2]);//定义Set集合,并有初始赋值,有点类似于数组，区别是Set集合自动消除重复值，而数组允许重复项，Set集合自动去重的功能对于将已有代码或Json结构转换为Set集合是非常友好，再者Set集合与数组函数方法各不相同

set.add(3);set.add(4);//添加项，Set集合中可添加几乎所有数据类型，包括基本类型、对象、数组、Set集合、Map集合等

set.add(5);set.add("5");//Set集合不进行类型的转换，5与"5"是两种不同的项，但唯一的例外是+0和-0会被认为是相同值

console.log(set);//输出结果：Set[1,2,3,4,5,"5"]

console.log(set.size);//输出结果：6

set.add({});//set项可为不同类型数据，这里添加了一个空对象，由于空对象可以装载不同值，连续添加空对象不会被认为是相同项。

console.log(set);//输出结果：Set[1,2,3,4,5,"5",Object]

//通过has()方法可以检查Set集合中是否存在某个值

console.log(set.has(5));//输出结果：true

//调用delete()方法可以移除Set集合中某一个元素，调用clear()方法会移除集合中所有元素

set.delete(5);

console.log(set);//输出结果：Set[1,2,3,4,"5",Object]

(二)查询

1.遍历查询

(1)forEach遍历查询

let set =new Set([1,2,3,4]);//定义初始Set集合

set.forEach(function(value,key,ownerSet){//key是从1开始编序号的，第三个参数ownerSet是被遍历的本身，该参数名可以随意取，其与永远与set相等

       if(key==2 || key==3 || key==4){

              return;//Js的forEach循环不能通过break中止，可以通过return中止当次循环，也可以通过抛出异常中止后面循环

       }

       console.log(key+"-----"+value);//输出结果：1-----1

});

(2)for-of遍历查询

let set=new Set([10,20,30,40]);//定义初始Set集合,自动去重

for(let item of set){

if(item==30){

              break;//找到对应项后，进行中止剩余遍历

       }

    console.log(item);//输出结果：10,20

}

2.选择性查询

let set=new Set([10,20,30,40]);//定义初始Set集合,自动去重

console.log(set.has(30));//输出结果：true

五、map集合

Map 是一种键值对的集合，与对象类似，但提供了更灵活的数据组织方式。Map 可以存储任何类型的键和值，包括函数、对象或其他复杂的数据类型。例如，let userMap = new Map(); userMap.set('name', 'Alice'); userMap.set('age', 30); 创建了一个存储姓名和年龄的Map‌23。

(一)增添、删除、修改

let map=new Map([["one",1],["two",2]]);//初始化Map，Map集合是一种多键值对的有序列表，其中键名(键名不允许重复)和值支持所有的数据类型

console.log(map);//输出结果：Map[{"one"=>1},{"two"=>2}]

console.log(map.size);//输出结果：2

map.set("three",3);//添加项

console.log(map);//输出结果：Map[{"one"=>1},{"two"=>2},{"three"=>3}]

console.log(map.get("three"));//输出结果：3

map.delete("two");//删除指定项，Map集合的clear()方法会移除所有项

console.log(map);//输出结果：Map[{"one"=>1},{"three"=>3}]

map.set("three",30);//修改指定项

console.log(map);//输出结果：Map[{"one"=>1},{"three"=>30}]

(二)查询

Map集合的查询同Set集合查询一样，可以进行遍历查询与选择性查询，在这里就不举例，可以参照Set集合进行代码编写。