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.getOwnPropertyNames与Object.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课堂笔记(持续更新中...)