ES6新特性_Map用法和使用场景size,get,set,has,clear,delete

ES6新特性之map,先看Map的使用测试图

ES6新特性之Map 的属性和方法:

1. size 返回 Map 的元素个数;
2. set 增加一个新元素，返回当前 Map;
3. get 返回键名对象的键值;
4. has 检测 Map 中是否包含某个元素，返回 boolean 值;
5. clear 清空集合，返回 undefined;
6. delete 删除元素;

ES6新特性之Map 基本使用

1. 创建一个空map

let m = new Map();

2. 创建一个非空map

let m2 = new Map([['name','fujuhao.com'],['age',22]]);

3. Size 查询个数

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

4. Set 增加新元素

m2.set('height','1.88'); m2.set('weight','80KG'); console.log(m2); 
// Map(4) {'name' => 'fujuhao.com', 'age' => 22, 'height' => '1.88', 'weight' => '80KG'}

5. Get 返回键名对应的值

console.log(m2.get('name')); // fujuhao.com

6. Has 检测map中是否包含某个元素

console.log(m2.has('name')); // true

7. Delete 删除

m2.delete('weight'); console.log(m2); 
// Map(3) {'name' => 'fujuhao.com', 'age' => 22, 'height' => '1.88'}

8. 遍历

for(let v of m2){ 
    console.log(v); 
    // 打印出的结果 
    // ['name', 'fujuhao.com'] 
    // ['age', 22]
    // ['height', '1.88']
}

9. 清空

m2.clear(); console.log(m2); // Map(0) {size: 0}

Map的使用场景

假设后台返回的数据是一个数组对象，如果想对数组里的对象的元素增加，减少或改变一些值，此时我们就可以使用map进行重组。

var array = [
    { title: '测试1', status: 0},
    { title: '测试2', status: 1},
    { title: '测试3', status: 0},
    { title: '测试4', status: 1}
];
console.log(array)
let status = array.map((item) => {
    // 重组成一个新的对象返回
    return {
        name: item.title,
        statusText: item.status ? '通过' : '未通过'
    }
})
console.log(status);
// (4) [
//     0: {name: '测试1', statusText: '未通过'}
//     1: {name: '测试2', statusText: '通过'}
//     2: {name: '测试3', statusText: '未通过'}
//     3: {name: '测试4', statusText: '通过'}
//     length: 4
// ]