ES6新特性--Set与Map与ES7新特性--空值运算符与?. 操作符

Set用法

//创建Set对象的两种方式

// 通过一维数组，创建Set对象。
const mySet = new Set([1,2,3,1,2,3]);
console.log(mySet)


// 通过New的方式
const mySet3 = new Set();

		// set中一些内置的方法
		const mySet3 = new Set();
		// 1 添加方法
		mySet3.add(1);
		mySet3.add(2);
		mySet3.add(3);
		mySet3.add(4);
		console.log('添加方法',mySet3)
		
		// 2 删除方法
		mySet3.delete(4)
		console.log('删除方法',mySet3)
		
		// 3 has方法，查看是否有某个元素
		console.log('has方法',mySet3.has(1))
		console.log('has方法',mySet3.has(5))
		
		// 4 size方法，计算长度
		console.log('size方法',mySet3.size)
		
		// 5 clear方法 Set集合全部清空
		mySet3.clear()
		console.log('clear方法',mySet3)

		// set常见的应用场景
		// 数组去重
		const arr2 = ['a','b','c','d','a','b','c'];
		// 1 数组转成Set，转成Set后，自动去重
		const mySet2 = new Set(arr2);
		// 2 Set转成数组
		const arr3 = [...mySet2];
		console.log(arr3)


        // 给数组对象去重
        /*
		   思路：Set是没法给对象去重的，但是可以给字符串去重
		   
		   1 先把数组对象中的各个item转成字符串
		   2 用set给字符串去重
		   3 再把字符串转成对象即可
		*/	
        const list5 =[
			{ name: "张三", age: 18, address: "北京" },
			{ name: "李四", age: 20, address: "天津" },
			{ name: "王五", age: 22, address: "河北" },
			{ name: "张三", age: 18, address: "北京" },
			{ name: "李四", age: 20, address: "天津" },
		]
	    
		// 1 先把数组对象中的各个item转成字符串
		const strings = list5.map((item) => JSON.stringify(item));
		
		// 2 用set给字符串去重
		const removeDupList = [...new Set(strings)];
        
		// 3 再把字符串转成对象即可
		const result = removeDupList.map((item) => JSON.parse(item));

        console.log(result)

Map用法

        //创建Map对象的两种方式

        // 通过二维数组参数，创建Map对象
		const myMap1 =  new Map([ 
			["key1", "val1"], 
			["key2", "val2"], 
			["key3", "val3"] 
		]); 
		console.log(myMap1)
		
		// 通过New的方式，创建对象
		const myMap2 = new Map();

        // map中一些内置的方法
        const myMap2 = new Map();
		// 1 添加方法
		myMap2.set('name','flx');
		myMap2.set('age',10);
		myMap2.set('sex','男');
		console.log(myMap2)
		
		// 2 删除方法
		myMap2.delete('sex')
		console.log(myMap2)
		
		// 3 has方法，查看是否有某个元素
		console.log('has方法',myMap2.has('name'))
		console.log('has方法',myMap2.has('sex'))
		
		// 4 size方法，计算长度
		console.log('size方法',myMap2.size)
		
		// 5 get方法 获取Map中的键对应的值
		console.log('get方法',myMap2.get('name'))
		
		// 6 clear方法 Set集合全部清空
		myMap2.clear()
		console.log('clear方法',myMap2)

空值运算符 — ?? undefined就显示提示语，否则显示默认值

	  // 当这个值是空值null,或者undefined的时候，执行??右边的值，否则执行自己本身的值
	  
	  // 1 情况是undefined的时候
	  const obj = {
	      name:'flx'
	  }
	  console.log(obj.age??'不存在年龄字段，默认年龄26岁')
	  
	  
	  // 2 情况是null的时候
	  const obj2 = {
	      name:'flx',
		  age:null
	  }
	  console.log(obj2.age??'没有填年龄字段，默认年龄26岁')
	  
	  
	  const obj3 = {
	      name:'flx',
		  age:26
	  }
	  console.log(obj3.age??'填年龄字段了，显示年龄字段')

可选链操作符 — ?. 判断有没有这个属性，有就显示，没有就undefined

	  const obj4 = {
	      name:'flx',
		  location:{
		      city:'QingDao'
		  }
	  }
	  
	  const obj5 = {
	      name:'flx',
		  //location:{
		  //    city:'QingDao'
		  //}
	  }
	  // 如果没有location的话，再  .city 更会报错。前端经常会出现这个问题
	  console.log(obj4 && obj4.location && obj4.location.city)
	  console.log(obj5 && obj5.location && obj5.location.city)
	  
	  
	  // 使用  ?. 操作符。如果有就继续执行，如果没有就不执行了
	   console.log(obj4.location.city)   // 一般调用
	   console.log(obj4?.location?.city) // 使用 ?. 运算符
	   
	   console.log(obj5?.location?.city)

混合使用

	   const obj6 = {
	       name:'cxy',
		   location:{
		      city:'JiangXI'
		   }
	   }
	   
	   const obj7 = {
	       name:'cxy',
		   //location:{
		   //   city:'JiangXI'
		   //}
	   }
	   
	   /*
	      1 判断有没有这个属性
	      2 没有属性的话，就显示提示语
       */
	    console.log(obj6?.location?.city ?? '未填写地址，默认北京')
		
		console.log(obj7?.location?.city ?? '未填写地址，默认北京')