ES6新特性（箭头函数、SET和MAP、扩展）

箭头函数

变量名=参数=>函数体 var f=function(v){ return v; } var f=v=>v; 箭头函数调用函数 let f=function a(v){ return v; } //let f=v=>a(v); function a(v){ console.log(v*v); } f(3) //rest 参数 //...变量名 function fun(...values){//arguments console.log(values); } fun(1,2,31,32,1) //...扩展运算符  数组的扩展 let f=(...nums)=>a(nums); function a(v){ console.log(v); }; var arr=[1,2,3,4]; f(...arr); 不传; var f=()=>"11"; f(); //参数为空 function f(){ return '123'; } let f=()=>"123" f() let f=(n1,n2)=>(n1+n2) f(1,3) let f=(n1,n2)=>{return n1+n2} f(1,3) //对象( 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号。) let f=(n1,n2)=>({name:n1,age:n2}); f(1,3) 使用箭头函数注意几点： 1、函数体内的this对象就是定义时所在的对象，而不是使用时所在对象； 2、不可以当作构造函数使用，也就是不能用new命令实例化一个对象，否则会抛出一个错误； 3、不可以使用arguments对象，该对象在函数体内不存在，如果要用的话，可以用rest参数代替； 4、不可以使用yield命令，箭头函数不能用作Generator函数；

SET

类似数组 成员是唯一的（重复的值 ） set本身是一个构造函数，有对应的方法和属性 const arr4=new Set().add(1).add(2).add(3); add(); arr4.add(1); arr4.add(2); arr4.add(3); const arr5=new Set([1,2,3,2]);//会去重 console.log(arr5)//{1,2,3} //成员总数 arr5.size;//3 delete()删除 返回布尔值 has()是否会存在 返回布尔值 判断是否为set成员 clear()清除所有的set成员，没有返回值  转换为数组 扫描二维码关注公众号，回复： 1587475 查看本文章 const arr6=new Set(['q','w','e','r']);//{'q','w','e','r'} const arr7=Array.from(arr6); console.log(arr7)//['q','w','e','r'] console.log(arr6.has('a'));console.log(arr6.clear()); forEach() Set 结构的实例与数组一样，也拥有forEach方法，用于对每个成员执行某种操作，没有返回值。 set = new Set([1, 4, 9]); set.forEach((value, key) => console.log(key + ' : ' + value))// 1 : 1 // 4 : 4 // 9 : 9 上面代码说明，forEach方法的参数就是一个处理函数。该函数的参数与数组的forEach一致，依次为键值、键名、集合本身（上例省略了该参数）。这里需要注意，Set 结构的键名就是键值（两者是同一个值），因此第一个参数与第二个参数的值永远都是一样的。 另外，forEach方法还可以有第二个参数，表示绑定处理函数内部的this对象。

//key()键的值

//values()值

//entries 键值对

const arr8=new Set(['a','b','c']);
for(var list of arr8.keys()){
console.log(list);// a b c
}

for(var list of arr8.values()){
console.log(list);// a b c
}

for(var list of arr8.entries()){
console.log(list);//['a','a'] ['b','b']['c','c']
}

//合并

let a=new Set(['a','b','c','d']);

let b=new Set(['a','e','f']);

let c=new Set([...a,...b]);

//交集

let arr1=new Set(['a','b','c']);

let arr2=new Set(['a','d'.'e']);

let arr3=new Set([..arr1].filter(x=>arr2.has(x)))

MAP(对象)  键值对的集合

var obj={ name:'111', age:32 }; const m=new Map(); m.set("str","111");//m ==//{"str" => "111"} m.get("str");//111 它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。 const m = new Map(); const o = {p: 'Hello World'}; m.set(o, 'content') m.get(o) // "content" m.has(o) // true m.delete(o) // true m.has(o) // false 上面代码使用 Map 结构的 set 方法，将对象 o 当作 m 的一个键，然后又使用 get 方法读取这个键，接着使用 delete 方法删除了这个键。 上面的例子展示了如何向 Map 添加成员。作为构造函数，Map 也可以接受一个数组作为参数。该数组的成员是一个个表示键值对的数组。 如果对同一个键多次赋值，后面的值将覆盖前面的值。 const map = new Map(); map .set(1, 'aaa') .set(1, 'bbb'); map.get(1) // "bbb" 上面代码对键1连续赋值两次，后一次的值覆盖前一次的值。 const m=new Map([['x',1],['y',2],['z',3]]); [...m];//转换成数组 let m1=new Map([...m]);//转换成Map m1 Map转换成对象 const m=new Map([['x',1],['y',2],['z',3]]); let obj={}; for(let[k,v] of m){     obj[k]=v; } console.log(obj);//{x: 1, y: 2, z: 3} Map 结构转为数组结构，比较快速的方法是使用扩展运算符（...）。 const map = new Map([ [1, 'one'], [2, 'two'], [3, 'three'], ]); [...map.keys()] // [1, 2, 3] [...map.values()] // ['one', 'two', 'three'] [...map.entries()] // [[1,'one'], [2, 'two'], [3, 'three']] [...map] // [[1,'one'], [2, 'two'], [3, 'three']] let arr=['a','b','c']; for(let v of arr){//打印出来的是里面的值 console.log(v); } let arr1=['a','b','c']; for(let v1 in arr1){//打印出来的是索引 console.log(v1); } let obj1={'x':1,'y':2}; for(let a in obj1){ console.log(a);//x y }; for(let a in obj1){ console.log(obj1[a]);//1 2 };

扩展

//字符串扩展 var str="hello world"; // str.substring(1,4); // str.substr(1,4); // str.indexOf(1,4) str.startWith("hello",3);//字符串是否在头部，从下标为3的位置开始查找 str.endsWith("hello",3);//字符串是否在尾部 str.includes("o");//是否存在字符串 str.repeat("2");//重复N次 //补全 var s='s'; s.padStart(4,'xy');//xyxs s.padEnd(4,'xy');//sxyx //如果长度大于要 补全的长度，就不会有操作 var s1='s22211'; s1.padStart(4,'xy');//s22211 //模板字符串 $(".list").html('<li>'+item.name+'</li>'); $(".list").html(`<li>${item.name}</li>`); $(result).each(function(index,item){ $(".list").html(`<li>${item.name}</li>`); }) $(result).each((index,item)=>{ $(".list").html(`<li>${item.name}</li>`); }) //数值的扩展 //Number.parseInt(); //Number.parseFloat(); //函数扩展 //ES5 function fun(x,y){//分页 如果sessionStorage有记录则取那一条，否则每页10条数据 y=y||'10'; console.log(x,y); } fun=(x,y)=>{ y=y||'10'; console.log(x,y); } fun(1,2) //ES6 function fun(x,y="10"){//分页 如果sessionStorage有记录则取那一条，否则每页10条数据 console.log(x,y); }