ES6中新增的Map和Set两种新的数据结构
Map是类似Object的一种键值对集合,区别在于Map的键不仅限于是字符串,其他各种类型的值包括对象都可以为Map的键
// 创建一个Map
const a = new Map()
// 往Map里面添加键,值
a.set(0, 'a') // Map(1) {0 => 'a'}
// 根据键获取对应值
a.get(0) // 'a'
// has方法可以用来检测Map是否包含某个key对应的元素
let isHasA = a.has(0) // 结果为true
// 删除
let ADelete = a.delete(0) // 结果是 删除true
//另外,因为一个key只能对应一个value,所以多次对一个key放入value,后面的值会覆盖前面的值
Set是类似数组的一种数据结构,不同点在于Set中没有重复的值
// 创建一个Set, set中没有重复的值
const set = new Set([1,1,2,3,4,4,2]) // Set(4) {1, 2, 3, 4}
// 添加元素 add(value): 添加某个值,返回Set结构本身
set.add(66) // Set(5) {1,2,3,4,66}
// 删除元素 delete(value): 删除某个值,返回一个布尔值,表示删除是否成功
set.delete(1) // true
// 长度
set.size // 4
// has(value): 返回一个布尔值,表示该值是否为Set的成员
set.has(1) // true
// clear(): 清除所有成员,没有返回值
迭代器 iterable,可以用于Map Set和Array
// 创建一个Map
var oneMap = new Map([
['zhang', 90],
['wang', 91],
['bai', 88]
]);
// 具有iterable类型的集合,可以通过新的for...of循环遍历,并且遍历得到的是value,而不是key
for ( let x of oneMap) {
console.log(x.toString())
// zhang,90
// wang,91
// bai,88
}
// 对于map集合,可以获取key以及对应的value
for( let x of oneMap) {
console.log(x[0] +" " +x[1])
zhang 90
wang 91
bai 88
}
// 创建一个set集合
var secondSet = new Set();
secondSet.add('li');
// 对于set集合
for( let x of secondSet) {
console.log(x); // 结果是li
}
for… in和for…of的区别
// for...in实际上遍历的是对象的属性名称,对于数组Array来说,实际上也是对象,它的每个元素的索引都被视为属性;当我们手动给数组对象添加额外的属性时候,使用for...in就会带来意外的效果
let myArray = [1, 3, 5]
myArray.name = 'heihei';
for(let x in myArray) {
console.log(x); // 结果是0 1 2 name ,会把name也遍历出来
}
// 但是使用for...of就不会出现这样的问题,它只循环集合本身的元素
for(let x of myArray) {
console.log(x); // 结果是 1 3 5
}
// forEach方法是iterable内置的方法,接收一个函数,每次迭代就自动回调该函数
myArray.forEach(function(element, index, array) {
// element: 指向当前元素的值
// index: 指向当前索引
// array: 指向Array对象本身
console.log(element + ', index = ' + index);
}
// 对Map集合来说,第一个参数value,第二个参数是key;
oneMap.forEach(function(value,key,map) {
console.log(value + ', key = ' + key);
})
对于set集合来说,因为没有索引,所以第一个第二个参数都是value
secondSet.forEach(function(value,sameValue,set){
console.log(value + ', sameValue = ' + sameValue);
})
// 另外,js函数调用不要求参数一致,所以如果我们只关心value,可以这么写
myArray.forEach(function(element){
console.log(element);
//结果是 1 3 5
})