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 ?? '未填写地址，默认北京')