JS中数组(Array)和字典(Map)的常用方法和属性

geekfly

发布于 2022-04-24 14:38:43

4.5K00

代码可运行

文章被收录于专栏：geekflygeekfly

运行总次数：0

代码可运行

0. 数组 Array [ ]

初始化

var arr1 = new Array();
var arr2 = [];
var arr3 = [1, 2, 3];

添加元素 - push

向数组的末尾添加一个或更多元素，并返回新的长度。

arr1.push(1);
arr1.push('aaa', 'bbb');

与push相反的方法：unshift 向数组的开头添加一个或更多元素，并返回新的长度。
取出元素 - pop 删除并返回数组的最后一个元素。

 var item = arr1.pop();

与pop相反的方法：shift() 删除并返回数组的第一个元素。
数组长度 - length

var arr = [2, 4, 1, 5, 9, 12, 8];
var arr1 = new Array();
console.log(arr.length); // 7
console.log(arr1.length); // 0

数组遍历

var arr = [2, 4, 1, 5, 9, 12, 8];

// 1.传统for循环
for(var i = 0; i < arr.length; i++){ 
    console.log(arr[i]);
}

//item为当前元素，index为下标
arr.forEach(function(item, index){ 
    console.log(item + '|' + index);
});

// 增强for循环 i为下标
for(var i in arr){ 
    console.log(arr[i]);
}

查找元素 - indexOf

indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。

lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。

var arr = [1,3,5,7,7,5,3,1];
console.log(arr.indexOf(5)); //2
console.log(arr.lastIndexOf(5)); //5

数组排序 - sort

var arr = [2, 4, 1, 5, 9, 12, 8];
arr.sort();
console.log(arr); //[1, 12, 2, 4, 5, 8, 9]

注：如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序。所以即使数组的元素为数字，默认也不会按照数字大小排序。

如需对数组中的数字排序，可参考如下：

var arr = [2, 4, 1, 5, 9, 12, 8];
arr.sort(sortNumber);
console.log(arr); //[1, 2, 4, 5, 8, 9, 12]

function sortNumber(a,b)
{
    return a - b
}

完整方法可查看：JavaScript Array 对象

1. 字典 Map { }

初始化

var map = new Map();

// 使用常规的Map构造函数可以将一个二维键值对数组转换成一个Map对象
var kvArray = [["key1", "value1"], ["key2", "value2"]];
var myMap = new Map(kvArray);

添加元素 - set

设置Map对象中键的值。返回该Map对象。

map.set('key1', 'value1');

获取元素 - get

返回键对应的值，如果不存在，则返回undefined。

map.get('key1'); // value1

判断元素是否存在 - has

返回一个布尔值，表示Map实例是否包含键对应的值。

map.has('key1'); // true

获取所有的key - keys

返回一个新的 Iterator对象，它按插入顺序包含了Map对象中每个元素的键。

var map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map.keys()); //MapIterator {"key1", "key2"}

对应的还有values方法，返回一个新的Iterator对象，它按插入顺序包含了Map对象中每个元素的值。

移除某个元素 - delete

如果 Map 对象中存在该元素，则移除它并返回 true；否则如果该元素不存在则返回 false

map.delete('key1'); // true

获取字典长度 - size

size为属性，不是方法，不加()!!!

var map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(map.size); // 2

循环

var map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

map.forEach(function (value, key) {
  console.log(key, '-->', value);
});

for(var key of map.keys()){
  console.log(key, '-->', map.get(key));
}

2. 序列化为Json

数组Array可以直接使用JSON.stringify()

var arr = new Array();
arr.push('aaa');
arr.push('bbb');

console.log(JSON.stringify(arr)); //["aaa","bbb"]

但字典Map使用JSON.stringify()获取到的为空{},字典需要先转为Obj再转为Json。

var map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');

console.log(JSON.stringify(map)); // {}

function strMapToObj(strMap) {
    let obj = Object.create(null);
    for (let [k,v] of strMap) {
        obj[k] = v;
    }
    return obj;
}
console.log(JSON.stringify(strMapToObj(map))); //{"key1":"value1","key2":"value2"}

参考：

1. js数组方法大全

2. Map

3. Converting ES6 Maps to and from JSON

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2019/04/08 ，如有侵权请联系 cloudcommunity@tencent.com 删除

json