【ES6】ES6的新特性[课堂笔记-二]

课堂笔记 胡成
文章标签: ES6 课堂笔记

ES6新特性第二章课堂笔记

课堂笔记里有我的亲手注释如果看不清楚可以直接复制代码查看,方便学习。下面开始!

(一)Set 和 Map 数据结构

Set

ES6 提供了新的数据结构 Set。它类似于数组,但是成员的值都是唯一的,没有重复的值。

Set 本身是一个构造函数,用来生成 Set 数据结构。

实例代码如下:

			//		Set:类似数组,但元素是唯一的
			//		初始化操作
			//		var set = new Set ();//肯呢个原数对象
			//		var set1 = new Set([1,3,3,4,4,5]);////用数组初始化,会去掉重复元素
			//		console.log(set1);//输出1,3,4,5
			//		var array = [];
			//		for (var i=0;i<100000;i++) {
			//			array.push(i);
			//		}
			//console.time("数组去重计时")
			//		let res = [];
			//		for(let i =0; i<array.length;i++){
			//			if (res.indexOf(array[i])===-1) {
			//				res.push(array[i])
			//			} 
			//		}
			//		console.log(res);//indexOf方法;测试时间13秒左右

			//		let res = [array[0]];
			//		for (let i =1;i<array.length;i++) {
			//			if (array[i] !==array[i-1]) {
			//				res.push(array[i])
			//			}
			//		}
			//		console.log(res);//相邻原数去重;最慢100毫秒;最快33毫秒

			//		let res = [];
			//		obj = {};
			//		for (let i =0 ; i<array.length;i++) {
			//			if (!obj[array[i]]) {
			//				res.push(array[i]) 
			//			} else{
			//				
			//			}
			//		}
			//console.timeEnd("数组去重计时");
			//添加元素 add(任何类型),返回Set本身
			//		var set=new Set();
			//		var arr=new Set();
			//		set.add("name").add("老李").add("age").add(20)//通过set对象点出add属性添加多个参数
			//		console.log(set);//输出{"name", "老李", "age", 20}
			//size:数组的长度
			//		console.log(set.size);//返回4
			//delete(value):删除某个值,返回一个布尔值,表示删除是否成功
			//		console.log(set.delete("20"));//删除的时字符串“20”返回false :注意要删除的值的类型要相同
			//		console.log(set.delete(20));//返回true,删除成功。
			//has(value):返回一个布尔值,表示该值是否为Set的成员
			//		console.log(set.has(20));//返回true
			//		console.log(set.has("铁头"));//返回fasle
			//clear():清除所有成员,没有返回值。
			//		console.log(set.clear()); 
			//检查一下看对象还有数据没		
			//		console.log(set.has(20));//结果返回 fasle
			//		console.log(set);//对象是空的 输出:Set(0) {}
			//Array.from方法可以将 Set 结构转为数组。
			//		var a = new Set([1,3,3,2,1,4,"4"]);
			//		在转换时 Array.from 会把“===”相同的数据去重,比如:(4===4,"4"==="4");
			//		var x = Array.from(a);//返回:(5) [1, 3, 2, 4, "4"]
			//		console.log(x);

			//遍历操作
			//keys():返回键名的遍历器
//			let x = new Set(["铁头", "老顾", "age", 22, 28, 22]);
			//		for (let a of x.keys()){
			//			console.log(a);//输出:"铁头","老顾","age",22,28
			//		}
			//values():返回键值的遍历器
			//		for (let a of x.values()){
			//			console.log(a);//输出:"铁头","老顾","age",22,28
			//		}
			//entries():返回键值对的遍历器
			//		for (let a of x.entries()){//entries方法返回的遍历器,同时包括键名和键值,所以每次输出一个数组,它的两个成员完全相等。
			//			console.log(a);//输出:"铁头","铁头","老顾","老顾","age","age",22,22,28,28
			//		}
			//forEach():使用回调函数遍历每个成员
			//		x.forEach((Key)=>console.log(Key))//输出:铁头,老顾,age,22,28



Map 

ES6 提供了 Map 数据结构。它类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

实例代码如下:

var m = new Map();
//			var m2 = new Map([
//				["name", "铁头"],
//				["addre", "湖南"]
//			]);
			//		console.log(m2);//输出:{"name" => "铁头", "addre" => "湖南"}
			//size属性返回 Map 结构的成员总数。
			//		console.log(m2.size)//输出:2
			//set(key, value) 设置key所对应的键值,然后返回整个Map结构,key、value可以是任何类型
			//		console.log(m2.set("name","老顾"));//输出:Map(2) {"name" => "老顾", "addre" => "湖南"}
			//get(key) 读取key对应的键值,如果找不到key,返回undefined
			//		console.log(m2.get("name"));//输出:铁头
			//has(key) 返回一个布尔值,表示某个键是否在Map数据结构中
			//		console.log(m2.has("name"))//输出:true
			//delete(key) 删除某个键,返回true。如果删除失败,返回false
			//		console.log(m2.delete("name"))//删除成功,输出:true
			//		console.log(m2);//输出:Map(1) {"addre" => "湖南"}
			//clear()清除所有成员,没有返回值
			//		console.log(m2.clear());//清除成功
			//		console.log(m2);//输出Map结构 但是没有数据。 Map(0) {}

			//遍历方法
			//keys():返回键名的遍历器	
			//		for (let Key of m2.keys()) {
			//			console.log(Key);//输出:name addre
			//		}
			//values():返回键值的遍历器
			//		for (let value of m2.values()) {
			//			console.log(value);//输出:铁头  湖南
			//		}
			//entries():返回所有成员的遍历器。
			//		for (let i of m2.entries()) {
			//			console.log(i[0],i[1]);//输出:name 铁头 addre 湖南
			//		}
			// 		或者
			//		for (let [key, value] of m2.entries()) {
			//		  console.log(key, value);//输出结果同上
			//		}
			// 等同于使用map.entries()
			//		for (let [key, value] of m2) {
			//		  console.log(key, value);//输出结果同上
			//		}
			//forEach():遍历Map的所有成员
			//		m2.forEach(function(key,value){
			//			console.log(key,value);//输出:铁头 name 湖南 addre 通过回调过来的数据第1个是“值” 第2个才是“键”
			//		});
			//forEach()第2种写法
			//		m2.forEach((Key,value)=>console.log(Key,value));
			//与其他数据结构的互相转换
			//		var array=[...m2];//转成二维数组
			//		console.log(array);//输出:(2) [Array(2), Array(2)]
			//Map 转为对象
			//		function strMapToObj(strMap) {
			//		  let obj = Object.create(null);
			//		  for (let [key,value] of strMap) {
			//		    obj[key] = value;
			//		  }
			//		  console.log(obj);//输出:{name: "老李", addre: "深圳"}
			//		  return obj;
			//		}
			//		
			//		var mm =new Map().set('name','老李').set('addre','深圳');
			//		strMapToObj(mm);

			//对象转为Map
			//		function objToStrMap(obj) {
			//		  let strMap = new Map();
			//		  for (let k of Object.keys(obj)) {
			//		    strMap.set(k, obj[k]);
			//		  }
			//		  console.log(strMap);//输出:Map(2) {"name" => "铁头", "addre" => "深圳"}
			//		  return strMap;
			//		}
			//		
			//		objToStrMap({name: "铁头", addre:"深圳"});



(二)Reflect

Reflect对象是 ES6 为了操作对象而提供的新 API,有了Reflect对象以后,很多操作会更易读

常用的方法几种方法如下:

Reflect.apply(target,thisArg,args)

Reflect.apply方法等同于Function.prototype.apply.call(func, thisArg, args),用于绑定this对象后执行给定函数

Reflect.get(target,name)

Reflect.get方法查找并返回target对象的name属性,如果没有该属性,则返回undefined

Reflect.set(target,name,value)

Reflect.set方法设置target对象的name属性等于value

Reflect.defineProperty(target,name,desc)

Reflect.defineProperty方法基本等同于Object.defineProperty,用来为对象定义属性。未来,后者会被逐渐废除,请从现在开始就使用Reflect.defineProperty代替它。

Reflect.deleteProperty(target,name)

Reflect.deleteProperty方法等同于delete obj[name],用于删除对象的属性。

Reflect.ownKeys(target)

Reflect.ownKeys方法用于返回对象的所有属性,基本等同于Object.getOwnPropertyNamesObject.getOwnPropertySymbols之和。

Reflect.has(target,name)

Reflect.has方法对应name in obj里面的in运算符。

上面这些方法的作用,大部分与Object对象的同名方法的作用都是相同的



实例代码如下:

			//			列子:
			//			var ages = [11,10,25,3];
			//			var a = Reflect.apply(Math.min,Math,ages);//Math.min(目标函数),Math调用时绑定的this对象,Math调用时传入的实参列表,该参数应该是一个类数组的对象
			//			console.log(a);//输出:3
			//Reflect.get(target, propertyKey)方法查找并返回target对象的name属性,如果没有该属性,则返回undefined。
			//			var obj = {
			//				q:1,
			//				w:2,
			//			};
			//			var a =Reflect.get(obj,"q");
			//			console.log(a);//输出:1
			//Reflect.set方法设置target对象的name属性等于value。
			// Object
			//			var obj = {};
			//			Reflect.set(obj, "name", "铁头"); // true
			//			console.log(obj.name) // "铁头"
			//Reflect.defineProperty(target,name,desc)添加或修改对象Š的属性
			//			var obj = {};
			//			console.log(Reflect.defineProperty(obj,"name",{value:"老李"}));//修改或者添加成功会返回一个Boolean值指示了属性是否被成功定义。输出true
			//			console.log(obj);//输出:{name: "老李"}
			//Reflect.deleteProperty(target,name)删除属性.
			//			var obj = { a: 1, b: 2 };
			//			console.log(Reflect.deleteProperty(obj, "a"));//返回一个布尔值, 删除成功输出: true
			//			console.log(obj); //输出:{ b: 2 }
			//Reflect.ownKeys(target)返回对象的属性
			//target
			//  获取自身属性键的目标对象
			//返回值
			//  由目标对象的自身属性键组成的 Array。
			//			var a =Reflect.ownKeys({z: 3, y: 2, x: 1});
			//			console.log(a);//输出结果:(3) ["z", "y", "x"]

			//检查一个对象是否拥有某个属性, 相当于in 操作符 。
			//Reflect.has(target, propertyKey)
			//target
			//  目标对象
			//propertyKey
			//  属性名,需要检查目标对象是否存在此属性。
			//返回值一个 Boolean 类型的对象指示是否存在此属性
			//		var obj= {z:1,a:2,c:3};
			//		console.log(Reflect.has(obj,"z"));//输出结果:true



——来自胡小哥原创ES6课堂笔记(持续更新中...)

还能输出{{restrictNumber}}个字符  
  • {{reply.author}}

    {{CommonUtil.formateDate(reply.ac_CommentDate).shortTime}}
  • 回复了{{Comments.author}} :