ES6学习笔记六(新增数据结构)

1、Set 数据结构

/*
 * Set 对象允许你存储任何类型的值，且存储的值是唯一的，
 * 存储的值可以是原始类型或者是引用类型。
 */
 
// 创建一个空的 Set 实例(可以传参，定义set的长度)
var  set  =  new Set() // Set(0) {}
// 添加数据
set.add('ES6') // Set(1) {"ES6"}
// 还可以链式添加数据
set.add('Javascript').add('7') // Set(3) {"ES6", "Javascript", "7"}
// 接受一个可遍历的对象，作为默认值，大部分情况是数组
var  set  =  new Set([1, 2, 3])
console.log(set) // Set(3) {1, 2, 3}

2、Map数据结构

/*
 * Map 数据结构用于存储复杂的数据类型。Map 保存的是键值对，
 * 并且能够记住键的插入顺序，而且任何值都可以作为 Map 的键来使用，包括对象类型。
 */

// 创建一个空的 Map 对象(可以传参，定义set的长度)
var  map1  =  new Map()
map1.set('a', 1);
map1.set('b', 2);
map1.set('c', 3);
console.log(map1) // Map(3) {"a" => 1, "b" => 2, "c" => 3}

// map也可以进行链式调用
var  map2  =  new Map()
map2.set('a', 1).set('b', 2).set('c', 3)
console.log(map2) // Map(3) {"a" => 1, "b" => 2, "c" => 3}

// 接收一个二维数组，二维数组中包含两个值，key和value
var  map3  =  new Map([["x", 10], ["y", 20], ["z", 30]]);
console.log(map3) // Map(3) {"x" => 10, "y" => 20, "z" => 30}
console.log(map1.get('a')) // 1
console.log(map3.get('z')) // 30

3、Set、Map 和 Array、Object相互转化

//Set 转 Array
let  set  =  new Set([1, 2, 3, 4]);
let  a  = [...set]// [1,2,3,4]
Array.from(set) //[1,2,3,4]

//Array转Map
let arr=[
     ['name','xiaoming'],
     [
      	{name:'xiaoming'},
      	['JavaScript','Java']
     ]
      ]
let map  =  new Map(arr);
   console.log(map)//效果图见图一

//Map 转 Array
const  map  =  new Map()
map.set('name', 'xiaoming')
map.set({name: 'xiaoming'}, ['JavaScript', 'Java']);
console.log([...map])//效果图见图二

// Object 转 Map
function  objToMap(obj){
	let  map  =  new Map();
	for (let [key, value] of  Object.entries(obj)){
		map.set(key, value);
	}
	return  map;
}
objToMap({name:'xiaoming', age: 7})//效果图见图三


/* Map 转 Object
 * Map 的键都是字符串，它可以转为对象，
 * 如果键是一个对象，在转为对象时会被进行 toString 操作。
 */
function  mapToObj(map){
	const  obj  = {}
	for (let [key, value] of  map){
		 obj[key] =  value;
	   }
	return  obj;
}
  const  map1  =  new Map()
  map1.set('name', 'xiaoming')
  map1.set('age', 7);
  console.log(mapToObj(map1))//效果图见图四

  const  map2  =  new Map()
  map2.set('name', 'xiaoming')
  map2.set({name: 'xiaoming'}, ['JavaScript', 'Java']);
  console.log(mapToObj(map2))//效果图见图五
  

效果图：

图一：

图二：

图三：

图四：

图五：

欢迎访问我的个人博客