本次课提纲：
一、ES6箭头函数、函数默认值(函数扩展)、rest参数
二、对象的简洁表示法[属性名的简写]
三、Object.assign()
四、扩展运算符(…数组名或对象名)，类似于JQ的插件开发的extend方法。
一、箭头函数（重难点）
概念：使用箭头=>定义的函数
//php:Array('name'=>"药水哥")
function fun(a){
return a
}
//以上改箭头如何改
var fun=(a)=>{
return a;
}
//可以进一步简化为：
var fun=a=>a;
3个特征：
1）、不需要 function 关键字来创建函数
var fun= function (x){
return x;
}
可简写为：var fun= x=> x;
注意：如果只有一个参数，可以不写(),如果没有参数或多个参数就一定要写
比如 var fun=()=> 5; 等价于 var fun=function (){ return 5;}
2）、省略 return 关键字
函数语句和返回值只有一个表达式时是可以省略{}和return关键字的
3）、继承当前上下文的 this 关键字,即在哪里定义this指的就是谁，而不是看它在哪里调用
注意事项：（面试题）
1、不可以当作构造函数，也就是说，不可以使用new命令，否则会抛出一个错误
2、不可以使用arguments对象，该对象在函数体内不存在，如果要用，可以用Rest参数代替
3、在箭头函数中，this指向是固定的，也就是绑定在了定义时所在的作用域下。
4、返回一个对象，且只有一条return语句时，需要加()；函数体包含多条语句时不可省略{}，有多条语句并有返回值还需要手动写return返回
//第4个注意事项的例子：
var fun=function (a,b){
return{
a:1,
b:2
}
}
//如果函数只有一条return语句，则return关键字和{}都可以省略
var fun=(a,b)=>({a:1,b:2})
二、对象的简洁表示法
- 属性和方法的简写
var wo="属性值"; var obj={ //wo:wo, wo, //只能在对象中的方法简写 skill(){ } } - Object.assign() 合并对象
var obj1={ name:"药水哥" } var obj2={ age:18 } obj2=obj1;//不靠谱 obj2.sex="男" //之前是如何实现的 for(prop in obj){ obj2[prop]=obj[prop]; } obj2.sex="男";//不影响obj了 语法： Object.assign(target,ojb2,obj3); 作用：将多个对象合并到目标对象中，会改变目标对象。 //JQ的extend几乎一样 var newObj=$.extend(obj,obj2);//会改变obj对象 //使用场景：用户参数与系统默认参数进行合并
三、函数的默认值
//假设用户传参了，则用用户的，否则用参数默认值，比如10
//最靠谱的给参数设置默认值的方式
function fun(a=10){
alert(a);//undefined，10
}
fun();//10
fun(0);//0
//之前的写法：
function fun(a){
//给参数设置一个默认值
a=a||10;//短路运算,但是假设用户传递的是0，则会得不到用户的期待
alert(a);//undefined，10
}
fun(0);//用户没有调用
四、函数的rest参数
简单理解为arguments的升级强化版。
如同arguments那样，但是是使用…变量名表示，也就是将实参放入该参数数组中，该数组为一个真正的数组，可以使用数组的方法
arguments作用：函数的重载。根据传递不同的参数个数来实现不同的功能。
它的缺点：是伪数组。
//原来的arguments
function fun(){
if(aruments.length==0){
}
if(aruments.length==2){
aruments[0]+aruments[1]
}
}
fun();
fun(1,2);
///1、----使用rest参数
function fun(...arg){
//...rest参数
//arg是真数组
if(arg.length=0){
//假设用户没有传参
}
//假设用户传递的是2个参数
if(arg.length==2){
arg[0]+arg[1]
}
}
//调用
fun();
fun(1);
fun(2,3);
fun(1,2,3);
//作用：代替arguments参数
//2、确定的使用形参，不确定的参数使用rest参数，即可选的参数使用rest参数来代替
function fun(a,...arg){
console.log(a+arg[0]);
}
fun(1,2)
fun(1,2,3);
//例子2
function fun(a,b,...arg){
console.log(a+b+arg[0]);
}
五、对象和数组的扩展运算符
语法：…对象或…数组
作用：深度复制对象或数组（合并对象或数组）
- 对象
var obj1={ name:"药水哥" } var obj2={ sex:"男" } //需求，将obj1，obj2合并为一个对象 var obj3={...obj1,...obj2} 很明显是Ojbect.assign()的一个更简单的写法，语法糖形式。 语法糖：添加了某种语法，不影响程序功能，但更方便程序员使用。 - 数组
var arr=[1,2,3]; var brr=[4,3,4]; var crr=[...arr,...brr];//[1,2,3,4,3,4];
六、数组新增的那5个方法（重点）
共同点：写法都类似，只是功能不一样。
- forEach
相当于是JQ的each方法，遍历数组的var arr=[1,2,3,34,45]; var sum=0; //传统的JS的写法 for(var i=0;i<arr.length;i++){ sum+=arr[i] } //forEach,JS，隐式迭代 arr.forEach(function(item,index){ //item是数组中的每一项 //index是数组的索引 sum+=item; }); //JQ: $.each(arr,function(index,item){ //item是数组中的每一项 //index是数组的索引 sum+=item; }); - map
映射。地图。//需求，将数组的每一项数组元素*2并返回生成一个新的数组 //通过A数组按照某种模式或公式得到一个新的数组，他们之间存在映射关系，称之为影子数组 var arr=[3,4,54,5,1]; var brr=[6,8,108,10,2];//新数组 //语法 var 影子数组=老数组.map(function(item,index){ //item指定的是数组的每一项数组元素 //index指的是索引 return 表达式|值 }); //传统方式来写 var arr=[3,4,54,5,1]; var brr=[]; arr.forEach(function(item,index){ brr.push(item*2); }); //map方法来写 var brr=arr.map(function(item){ return item*2; }); //箭头来帮忙 var brr=arr.map(item=>item*2); - filter过滤，语法同map类似,但也有特殊的地方，也就是将过滤条件放置在return内，符合条件的就放到新数组中，不符合的就排除
//形式如下： return 条件表达式 //比如：return true,表达式的结果为true，表示每一项都通过筛选，如果是 false，则每一项都不通过筛选。 //例子：筛选出小于5的数组元素 var arr=[12,6,3,4,5]; var arr3=arr.filter(item=>item<5); // 数组中的map,fillter都不会改变原数组 console.log(arr3); //输出：[3,4] - every用于检测数组所有元素是否都符合指定条件,语法同map或filter，在回调函数中设置过滤条件，假设都满足则整个表达式返回true，如果有一个item数组元素不满足，则返回false，且剩余的不会再检测。
//比如：判断一个age数组中的年龄是否大于18，如果都大于18，则返回true。 var age=[18,29,30]; age.every(function(item,index,arr){ return item>=18 });参数说明：
item表示数组的每一项，必填
index表示该项数组的索引
arr表示当前元素属于哪个数组注意：
1、如果检测的是空数组，则直接返回true
2、不会改变原数组
3、兼容现代浏览器及IE9以上的浏览器 - find语法同ES5的map,filter类似，表示找，也就是找符合条件的项，类似于设置过滤条件，比如找符合等于3或大于3或小于3的选项。
注意：find只能找符合条件的第一个，比如说找出有5个符合条件，那么就是5个中的第一个。
如果要返回多个，请使用filter.var arr=[12,6,3,4,5]; // 场景：找到大于5的第一个 var arr2=arr.find(function(item,index){ // 如果为真，则丢到新数组中，如果为false，则跳过 // return 条件表达式; return item>5; }); //输出结果：12 console.log(arr2);
兼容性：在IE9以上和现代浏览器中支持
本次课作业+笔记链接: https://pan.baidu.com/s/1IgVKtj1yFuYcto5DjWCL0Q 提取码: nc4c
