javascript/js中Array、Set、Map数据结构特性及用法
前言
本文温习前端开发中常见的3种数据结构：数组Array、有序集合Set、有序映射Map，并分别介绍其特性、用法示例
数组-Array
适用于存放和读取有序集合、不要求集合元素唯一性时；可通过索引快速访问元素，实现元素增删改查时
使用方法
1.创建、修改
// 直接创建
let arr = [6,7,8,9,0];
// 使用构造函数创建
// arr = new Array(6,7,8,9,0);
console.log('len:',arr.length); // len: 5
// 得到数组长度要用length而不是size
console.log('size:',arr.size) // size: undefined
console.log(arr.at(0)); // 6
console.log(arr[0]); // 6
arr[0] = 100; // 修改指定位置的元素
console.log(arr); // [ 100, 7, 8, 9, 0 ]
// fill(x,start?,end?) 从start索引开始填充元素x，end可选，end指定的位置不包含
console.log(arr.fill(9999,2,4)); // [ 100, 7, 9999, 9999, 0 ]
// 所有元素填充为 -1
arr.fill(-1,0);
console.log(arr); // [ -1, -1, -1, -1, -1 ]
2.添加删除元素
push添加，pop尾部删除，shift头部删除，unshift头部插入，concat合并数组
let arr = [ 6, 7, 8, 9, 0 ]
// push(x)尾部添加指定元素
let len = arr.push(10);
console.log("len:",len); // len: 6
// pop() 尾部删除一个元素，并返回这个元素，若数组为空，返回undefined
let lastVal = arr.pop();
console.log("lastVal:",lastVal,", len:",arr.length); // lastVal: 10 , len: 5
// shift() 头部删除一个元素，返回被删除元素，若数组为空返回undefined
let delHeadVal = arr.shift();
console.log("delHeadVal:",delHeadVal,",len:",arr.length); // delHeadVal: 6 ,len: 4
// unshift(x1,x2,x3...)在元素开头插入一个或多个元素，返回插入后的数组长度
len = arr.unshift(88);
console.log("len:",len); // len: 5
let arr2 = [2,4,6];
// concat合并两个或多个数组，返回新的数组，注意arr不会发生改变
let ansArr = arr.concat(arr2);
console.log("ansArr len:",ansArr.length); // ansArr len: 8
slice拷贝数组元素
let nums = [1, 2, 3, 4, 5, 6, 7];
// slice(start,exclusiveEnd) 包括start，不包括exclusiveEnd，返回一个新数组对象，该方法不会改变原始数组
let sliceNums = nums.slice(1, 3);
console.log("sliceNums:", sliceNums); // sliceNums: [ 2, 3 ]
sliceNums[0] = 888;
// 修改sliceNums，不会改变原始数组nums
console.log("nums:", nums); // nums: [ 1, 2, 3, 4, 5, 6, 7 ]
// 从索引5开始提取所有的元素
console.log(nums.slice(4)); // [5, 6, 7 ]
// 易错提示：-1表示倒数第1个元素，由于exclusiveEnd不包括，因此得到的最后一个元素是倒数第2个元素
console.log(nums.slice(5, -1)); // [ 6 ]
// slice() 提取所有元素
console.log(nums.slice()); // [ 1, 2, 3, 4, 5, 6, 7 ]
// slice 超出索引范围，返回一个空数组 []
console.log(nums.slice(88)); // []
splice修改、删除、插入元素
let nums = [1, 2, 3, 4, 5, 6, 7];
// 删除指定位置的N个元素： nums.splice(index,count) 从index位置开始连续删除count个元素，并返回删除的元素，nums本身被改变
let removedNums = nums.splice(2, 5);
console.log("removedNums:", removedNums, ", nums:", nums); // removedNums: [ 3, 4, 5, 6, 7 ] , nums: [ 1, 2 ]
// 元素替换：从索引1处删除0个元素(返回为空)，并对原始数组添加多个元素，原始数组被改变
console.log("res:",nums.splice(1, 0, 'x', 'y', 'z')); // res: []
console.log("splice nums:", nums); // splice nums: [ 1, 'x', 'y', 'z', 2 ]
// 删除后续元素：删除从索引2开始的所有元素，返回被删除元素
console.log("removed: ", nums.splice(2), "nums:", nums); // removed: [ 'y', 'z', 2 ] nums: [ 1, 'x' ]
nums = [1, 2, 3, 4];
// 删除索引2处的元素
console.log("del: ", nums.splice(2, 1),", nums:",nums); // del: [ 3 ] , nums: [ 1, 2, 4 ]
// 将索引2处的1个元素删除，并替换为78,88
nums.splice(2, 1, 78, 88);
console.log("nums:", nums); // nums: [ 1, 2, 78, 88 ]
3.筛选、查找元素
filter筛选，find查找元素，findIndex、indexOf、lastIndexOf查找元素索引，includes判断是否包含
let nums = [1, 2, 3, 4, 5, 6, 7];
// filter过滤出符合指定规则的元素
let evenNums = nums.filter(x => x % 2 == 0);
// find查找数组中满足测试函数的第一个元素的值，若没有符合的，返回undefined
console.log("evenNums:", evenNums); // evenNums: [ 2, 4, 6 ]
let targetValue = nums.find(x => x > 5);
console.log("targetvalue:", targetValue); // targetvalue: 6
// findIndex返回符合测试元素的第一个索引，找不到返回-1
let targetIndex = nums.findIndex(x => x > 5);
console.log("targetIndex:", targetIndex); //targetIndex: 5
// indexOf(x)从索引位置0开始寻找一个指定的元素，找到则返回指向第一个元素的索引，找不到则返回-1
console.log("index:", nums.indexOf(5)); // index: 4
// indexOf(x,fromIndex) 从index位置寻找一个元素x
console.log(nums.indexOf(1, 5)); // -1
// lastIndexOf(x,fromIndex) 若fromIndex缺省，默认从最后一个位置开始向前查找x元素的索引
console.log(nums.lastIndexOf(5)) // 4
// includes(x)判断数组中是否包含一个指定元素，若包含返回true，否则false
console.log(nums.includes(4)); // true
// includes(x,fromIndex) 从fromIndex位置开始查找是否包含指定元素
console.log(nums.includes(2, 1)); // true
4.成分判断
every测试所有都符合、some测试至少一个元素符合
let nums = [5, 8, 4, 6, 7];
// every 判断所有元素是否都通过测试函数，若是返回true，否则false
let isAllEven = nums.every(x => x % 2 == 0);
console.log("isAllEven:", isAllEven); // false
// some 判断是否至少有一个元素通过测试函数，若是返回true
let hasEven = nums.some(x => x % 2 == 0);
console.log("hasEven:", hasEven); // true
5.反转、排序
reverse反转数组顺序，sort排序
let ids = new Array(2, 0, 3, 5, 1, 4);
// reverse反转数组元素顺序，并返回数组本身
let reverseIds = ids.reverse();
console.log("reverseIds:", reverseIds); // reverseIds: [ 4, 1, 5, 3, 0, 2 ]
console.log("ids:", ids); // ids: [ 4, 1, 5, 3, 0, 2 ]
// sort排序会改变原始数组顺序，并返回数组本身，默认从小到大排序
console.log(ids.sort()); // [ 0, 1, 2, 3, 4, 5 ]
// 自定义排序，a-b升序，b-a降序
ids.sort((a,b)=>b-a);
console.log(ids);// [ 5, 4, 3, 2, 1, 0 ]
6.元素遍历
for…in遍历索引，for…of遍历元素， forEach遍历元素及索引
let nums = [5, 8, 4, 6, 7];
// for...in遍历数组，遍历的是索引
for (let index in nums) {
console.log("index:", index, ", value:", nums[index]);
}
// for...of遍历数组，遍历得到的是具体元素
for (let x of nums) {
console.log("x=", x);
}
// forEach遍历元素
nums.forEach(x => {
console.log("x:", x);
});
// forEach两个参数时第2个元素是索引
nums.forEach((x, index) => {
console.log("x:", x, ", index:", index);
});
// 普通遍历方法
for (let i = 0; i < nums.length; i++) {
console.log("nusm:", nums[i]);
}
7.累计、分组运算
reduce对数字元素进行算术累计运算，对字符串连接运算
let nums = [1, 2, 3];
let initVal = 0;
// reduce对数组中每个元素执行一个函数，将结果汇总为单个值返回，initVal指定初始值，preVal+curVal表示将数组元素累加
let sums = nums.reduce((preVal, curVal) => preVal + curVal, initVal);
console.log("sums:", sums); // 6
const words = ['Hello', 'World', 'JavaScript'];
// reduce将元素连接为一个字符串
const sentence = words.reduce((accumulator, currentValue) => accumulator + ' ' + currentValue);
console.log("sentence:"+sentence); // sentence:Hello World JavaScript
// join将所有元素用字符-连接为一个字符串
let str = nums.join('-');
console.log(str); // 1-2-3
reduce分组
const users = [
{name:"User-A",age:21},
{name:'User-B',age:20},
{name:'User-C',age:20},
{name:'User-E',age:20}];
let initVal = {};
let ageGroup = users.reduce((preVal,curVal)=>{
let age = curVal.age;
if(!preVal[age]){
preVal[age] = [];
}
preVal[age].push(curVal);
return preVal;
},initVal);
console.log(ageGroup);
// {
// '20': [
// { name: 'User-B', age: 20 },
// { name: 'User-C', age: 20 },
// { name: 'User-E', age: 20 }
// ],
// '21': [ { name: 'User-A', age: 21 } ]
// }
8.变换
map、flatMap将每个元素进行变换
let nums = [1, 2, 3];
console.log(nums.map(x=>'id-'+x)); // [ 'id-1', 'id-2', 'id-3' ]
// map：对数组中的每个元素执行回调函数，回调函数的返回值作为元素
let ans = nums.map(x=>[x*2]);
console.log(ans); // [ [ 2 ], [ 4 ], [ 6 ] ]
// flatMap: 对每个元素执行回调函数，并将结果展平一层后返回一个新数组，相当于先执行 map，然后再执行 flat
let ans2 = nums.flatMap(x=>[x*2]);
console.log(ans2); // [ 2, 4, 6 ]
let nums2 = nums.map(x=>[x,x*x]);
console.log(nums2); // [ [ 1, 1 ], [ 2, 4 ], [ 3, 9 ] ]
let ans3 = nums.flatMap(x=>[x,x*x]);
console.log(ans3); // [ 1, 1, 2, 4, 3, 9 ]
有序集合-Set
用于存储具有唯一性的元素，常用于元素查找、去重场景
使用方法
1.元素去重
普通类型插入元素唯一，可用于元素去重，对象插入是否唯一根据引用判断
let arr = [1,2,2,3,1];
// 数组转为集合去重
let setNums = new Set(arr);
// 集合转为数组
console.log(Array.from(setNums)); // [ 1, 2, 3 ]
let set = new Set();
set.add(3);
set.add(2);
// 2已经存在，所以不会被重复添加
set.add(2);
// 获取集合大小要使用set.size，而不是set.length(输出为undefined)
console.log("size:", set.size); // size: 2
2.元素存在
可以在内部表示为哈希表，查找时间复杂度为O(1)
// set中是否含有某个元素
let isContain = set.has(4);
console.log("isContain:", isContain); // false
3.有序遍历
元素遍历时的顺序保持与插入顺序一致，可使用forEach或 for…of遍历
let set = new Set([5,8,7,6]);
// set集合的遍历应该使用 for...of而不是for...in，以下遍历什么也不会输出：
// for(let id in set){
// console.log(id);
// }
// 遍历方法1：使用 for...of遍历
for (let id of set) {
console.log(id);
}
// 遍历方法2：使用forEach
set.forEach(id => {
console.log("id:", id);
});
// 获取迭代器对象，set.values()迭代器遍历，仍然要使用 for...of而不是for...in
for (let value of set.values()) {
console.log("value:", value);
}
//输出的 key和value其实是一样的
for (let [key, value] of set.entries()) {
console.log("key:", key, "value:", value);
}
4.删除操作
delete删除某个元素，clear清空集合
// delete 删除集合中数字5，成功返回true，否则false
let isDel = set.delete(5);
console.log("isDel:", isDel);
set.clear();
有序映射-Map
Map 适合于频繁增删改键值对的场景，可确保的键唯一性，内部实现用的是哈希表，具有较好性能
使用方法
1.键值添加、更改
新增或修改set，取值get，判断存在has，删除delete
let map = new Map();
// set进行键值添加
map.set("name", "Alice");
map.set("age", 24);
// 键已存在则会被更新
map.set("name", "Blob");
// 注意：Map不要使用[]操作符，这种设置属性的方式不会改变 Map 的数据结构，它使用的是通用对象的特性，因此使用has是查不到的
// ap['gender'] = 'female';
// console.log('! has:', map.has('gender')); // false
console.log(map.has('name')); // true
console.log(Array.from(map.entries())); // [ [ 'name', 'lisi' ], [ 1, 'apple' ] ]
// 取与键关联的值，若不存在则返回undefined
let value = map.get("name");
console.log("value:", value); // value: Blob
// 获取map大小使用size，而不是length
console.log(map.size); // 2
map.clear();
2.有序遍历
Map 的键是有序的，遍历输出保持与添加时的顺序一致
Map遍历for…of或forEach
// 使用可迭代对象初始化Map
let userMap = new Map([['id', 23], ['name', 'zhangsan'], ['age', 18]]);
console.log(userMap);
// for...of 遍历Map
for (const [key, value] of userMap) {
console.log("key:", key, ",value:", value);
}
// 或者
for (const [key, value] of userMap.entries()) {
console.log("key#:", key, ",value#:", value);
}
// 或者
for (let entry of userMap) {
console.log("entry:", entry);
// entry[0]为键，entry[1]为值
// console.log(entry[0],entry[1])
}
// forEach遍历map
userMap.forEach((value, key) => {
console.log("value=", value, ",key=", key);
});
for (const key of userMap.keys()) {
console.log("key:", key);
}
for (const value of userMap.values()) {
console.log('value:', value);
}
关于Map映射与普通Object对象的区别
1.键的有序性：
Map 中的键以简单、直接的方式排序，Map 对象按照插入的顺序迭代条目、键和值
Object 的键排序比较复杂的，最好不要依赖属性的顺序
2.键的类型：
Map 的键可以为任何值（包括函数、对象或任何原始值）
Object 的键必须为 String 或 Symbol
3.大小计算：
Map 中的项目数量确定很容易从其 size 属性中获得
Object 中的项目数量确定比较麻烦，效率也较低，一种常见的方法是通过获取 Object.keys() 返回的数组的长度
4.其他方面：
Map 性能在涉及频繁添加和删除键值对的场景中表现更好，而Object未针对频繁添加和删除键值对进行优化
关于普通Object用法
// 普通对象
// 添加或修改属性obj[property]，或obj.property,
// 遍历for...in（遍历key）, for...of（遍历entries)
function testObject2() {
// 创建一个空对象
let obj = {};
obj[2] = 'zhangsan';
obj[1] = 'lisi';
console.log(obj);
obj.msg = "hello";
console.log(obj);
// 判断对象是否有某个属性
console.log(obj.hasOwnProperty("msg")); // true
console.log('msg' in obj); // true
for (let key in obj) {
console.log("key:", key, "value:", obj[key]);
}
// 遍历键值对
Object.entries(obj).forEach((key, value) => {
console.log("key:", key, ", value:", value);
});
for (const [key, value] of Object.entries(obj)) {
console.log("key=", key, ", value=", value);
}
// 类似：Object.values(obj);
Object.keys(obj).forEach(key => {
console.log("key=", key);
});
// delete删除某个属性，删除后再访问该属性为undefined
delete obj.msg;
console.log(obj); // { '1': 'lisi', '2': 'zhangsan' }
console.log(obj.msg); // undefined
// 键的个数
console.log(Object.keys(obj).length); // 2
}
参考资料
原文地址：https://blog.csdn.net/qq_43521551/article/details/140089342
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！