ES6(三点运算符、Symbol类型、Map与Set)

1、es6三点运算符(可变参数)

  • 当一个方法参数个数不确定的时候,我们可以用es6提供的三点运算符
        <script type="text/javascript">
	    function func(...params){
	        console.log(params);
	
	        // 遍历
	        params.forEach(function(item,index){
	            console.log(item,index);
	        });
	    }
	
	    func(2,4,5);
	</script>

从打印出来的东西可以发现其实这是一个数组,有属性和方法,比如 each遍历等,功能丰富

  • 当然也有可能有固定的几个参数,然后也有不固定参数,这时候固定参数要写前面
        <script type="text/javascript">
	    //当然也有可能有固定的几个参数,然后也有不固定参数,这时候固定参数要写前面;
	    function func2(a,...params){
	        console.log(params);
	
	        // 遍历
	        params.forEach(function(item,index){
	            console.log(item,index);
	        });
	    }
	
	    func2(2,4,5);
	</script>

  • es6三点运算符有时候还可以用作合并数组
        <script type="text/javascript">
	    //es6单点运算符有时候还可以用作合并数组;
	    let arr1=[2,3];
	    let arr2=[1,...arr1,4];
	    console.log(arr2);
	</script>

2、Symbol类型

es5中对象的属性名是都是字符串,容易造成重名;es6引入Symbol数据类型(已有Number 、 String 、 Boolean 、 Objec t、 null 和 undefined 类型),表示独一无二的值,最大的用法是用来定义对象的唯一属性名。

        <script type="text/javascript">
		let sb=Symbol();
		console.log(sb);
		console.log(typeof(sb))
	</script>

  • 每个定义的symbol都是唯一的
        <script type="text/javascript">
		// 每个定义的symbol都是唯一的
		let sb=Symbol();
		let sb2=Symbol();
		console.log(sb==sb2); // 返回false
	</script>
  • Symbol的实际使用
        <script type="text/javascript">
		// Symbol实际使用
		// 定义一个对象
		let symbol=Symbol('address'); // 可以加参数 指定属性名
		let symbol2=Symbol('address');
		let obj={name:'zs',age:10};
	
		// 假如我们要向对象里额外加个属性
		// obj.address='南京路' // 以前的写法,不过假如属性很多的时候,可能会出现属性重复
		obj[symbol]='南京路'; // 这样能保证属性不重复
		obj[symbol2]='南京路2';
		console.log(obj);
	</script>

  • 因为Symbol具有唯一性,所以我们可以做Symbol定义常量
        <script type="text/javascript">
		// 因为Symbol具有唯一性,所以我们可以做Symbol定义常量
		const System_key=Symbol('666');
		console.log(System_key);
	</script>
  • Symbol.for()方法

Symbol.for() 类似单例模式,首先会在全局搜索被登记的 Symbol 中是否有该字符串参数作为名称的 Symbol 值,如果有即返回该 Symbol 值,若没有则新建并返回一个以该字符串参数为名称的 Symbol 值,并登记在全局环境中供搜索

        <script type="text/javascript">
		let yellow = Symbol("Yellow");
		let yellow1 = Symbol.for("Yellow");
		console.log(yellow === yellow1);      // false
		 
		let yellow2 = Symbol.for("Yellow");
		console.log(yellow1 === yellow2);     // true
	</script>
  • Symbol.keyFor()方法

Symbol.keyFor() 返回一个已登记的Symbol 类型值的key ,用来检测该字符串参数作为名称的 Symbol 值是否已被登记

        <script type="text/javascript">
		let yellow1 = Symbol.for("Yellow");
		console.log(Symbol.keyFor(yellow1));    // 返回"Yellow"
	</script>

3、Map与Set

  • map的基本使用,key可以是任意类型
        <script type="text/javascript">
		// 基本使用 key是基本类型
		console.log('key是基本类型.............');
		let map=new Map();
		map.set('name','张三');
		map.set('age',11);
		map.set('已婚',false);
	
		console.log(map.get('name'));
		console.log(map.get('age'));
		console.log(map.get('已婚'));
	
		// key是对象
		console.log('key是对象.............');
		let obj={};
		map.set(obj,'对象');
	
		console.log(map.get(obj));
	
		// key是函数
		console.log('key是函数.............');
		let func=function(){};
		map.set(func,'函数');
	
		console.log(map.get(func));
	
		// key是NaN
		console.log('key是NaN.............');
		map.set(NaN,'NaN');
	
		console.log(map.get(NaN));
		console.log(map.get(Number('aaa')));
	</script>

  • map的迭代
        <script type="text/javascript">
		console.log('Map迭代.............');
		let map=new Map();
		map.set('name','张三');
		map.set('age',11);
		map.set('已婚',false);
		
		for(let [key,value] of map){
			console.log(key,value);
		}
		
		// 查询所有key
		console.log('查询所有key.............');
		for(let key of map.keys()){
			console.log(key);
		}
		
		// 查询所有value
		console.log('查询所有value.............');
		for(let value of map.values()){
			console.log(value);
		}
		
		// forEach方法迭代
		console.log('forEach方法迭代.............');
		map.forEach(function(key,value){
			console.log(key,value);
		});
	</script>

  • map对象操作、map与array的相互转换
        <script type="text/javascript">
		// 数组转Map
		console.log('数组转Map.............');
		let arr=[['k1','v1'],['k2','v2']];
		let map3=new Map(arr);
		map3.forEach(function(value,key){
			console.log(key,value)
		});
	
		// Map转数组
		console.log('Map转数组.............');
		let arr2=Array.from(map3);
		console.log(arr2);
	
		// Map合并
		console.log('Map合并.............');
		let map2=new Map();
		map2.set('name','张三');
		map2.set('age',11);
		map2.set('已婚',false);
		let map4=new Map([...map3,...map2]);
		console.log(map4);
	</script>

  • Set对象的唯一性
        <script type="text/javascript">
		// Set里的value值是唯一的
		console.log('Set对象的唯一性.............');
		let myMap=new Map();
		myMap.set('no001','张三');
		myMap.set('no002','李四');
		myMap.set('no003','张三');
	
		console.log(myMap);
		let mySet=new Set();
		mySet.add('张三');
		mySet.add('李四');
		mySet.add('张三');
	
		// 遍历
		for(let value of mySet.values()){
			console.log(value)
		}
	
		mySet.forEach(function(value){
			console.log(value)
		});
	</script>

  • Set 数组转换、交集并集差集
        <script type="text/javascript">
		console.log('数组转set.............');
		let arr = [['k1','v1'],['k2','v2']];
		let set = new Set(arr);
		console.log(set);
		
		console.log('set转数组.............');
		let arr2 = [...set];
		console.log(arr2);
		
		console.log('数组去重.............');
		let arr3 = [1,2,3,4,3,5];
		let set2 = new Set(arr3);
		let arr4 = [...set2];
		console.log(arr4);
		
		console.log('求并集.............');
		let a = new Set([1,2,3]);
		let b = new Set([4,3,2]);
		let union = new Set([...a,...b]);
		console.log(union); // {1, 2, 3, 4}
		
		console.log('求交集.............');
		let a2 = new Set([1,2,3]);
		let b2 = new Set([4,3,2]);
		let intersect = new Set([...a2].filter(x => b2.has(x))); 
		console.log(intersect);// {2, 3}
		
		console.log('求差集.............');
		let a3 = new Set([1,2,3]);
		let b3 = new Set([4,3,2]);
		let difference = new Set([...a3].filter(x => !b3.has(x))); 
		console.log(difference);// {1}
	</script>

发布了102 篇原创文章 · 获赞 64 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/weixin_42687829/article/details/100853306