04.对象的简化写法及箭头函数

一、对象属性新写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法.

let name="lhh";
let change=function(){
	console.log("hello world");
}
const school={
//新的写法
	name,
	change,
	imporve(){}
//旧的写法
	name:name,
	change:change,
	imporve:function(){}
}

二、箭头函数

1.基础声明

   //当返回的内容只有一条时，可以不写return 
	   var f=(a,b)=>a+b; 
        var s3=f(6,2);
        console.log(s3);
        

	   //当有多条语句的，用{}括起来，表示代码块，
        var f=(a,b)=>{
            let result=a+b;
            return result;
        }

        //当箭头函数返回的是一个对象时要用()括起来
        var f=()=>({x:1,y:2});

2. this

this是静态的, this 始终指向函数声明时所在作用域下的this的值

window.name="123";
let getName=()=>{
	console.log(this.name);
}
let school={
	name:'abc';
}
//使用es5中改变调用函数的对象，从而改变this的指向
getName.call(school);	//"123" 函数在声明时this指向的是window

3.不能作为构造函数实例化对象

4.不能使用arguments变量

let fn=()=>{
	console.log(arguments);
}
fn(1,2,3);		//会报错

三、箭头函数的应用场景

下面用实例来说明this的指向问题

• 为元素绑定事件

这个是es5的写法

//点击一个元素，两秒之后变色
let ad=document.getElementById("ad");
//绑定事件
ad.addEventListener("click",function(){
	//保存this的值
	let _this=this;
	//定时器
	setTimeout(function({
		_this.style.background='red';
	}),1000)
})

es6的写法

let ad=document.getElementById("ad");
ad.addEventListener("click",function(){
	setTimeout(()=>{
//this指向的是声明该函数时所在作用域下this的值。而该函数所在的作用域是上一个function函数作用域，它的this指向的是事件对象ad，所以下面的this指向的也是ad对象
		this.style.background="red";
	},1000)
})

• 从数组中返回偶数的元素

const arr=[1,2,3,4,5,6,7,8];
//这里使用es5中的方式
arr.filter(function(item){
	if(item%2===0){
		return true;
	}else{
		return false
	}
})

//下面使用es6中的箭头函数
arr.filter((itme)=>item%2===0);

//上面的两种方式返回相同的结果

四、箭头函数适用/不适用的地方

箭头函数中this存在于三种坏境下：

​ 1.当箭头函数是一个对象中的方法时，方法中的this指向定义该方法所在对象的对象：

​ 2.如果该对象是一个实例对象，那么this指向该对象，如果该对象是一个es5函数，则this为函数中的this。

​ 3.如果该函数是一个es6箭头函数，this取的是箭头函数的this值。

不适用的两种环境：

​ 1.事件的回调不适合

​ 2.对象的方法

五、函数参数赋值初始值

1.函数参数默认值

        //若参数y没有获得实参，则获得默认值，默认值不会覆盖实参
        function log1(x,y='world'){
            console.log(x,y);
        }
        log1('hello');//hello world;
        log1('hello', 'China')//hello China

2.参数默认值跟解构赋值结合

//参数默认值可以与解构赋值的默认值结合起来用
            function log5({x,y=5}){
                console.log(x,y);
            }
            log5({x:2,y:4});//2 4
            log5({x:5});//5 5

3.rest参数代替arguemnts

 //不定参数 表示不确定参数个数 ...变量名
        function f(...values){
            console.log(value)	//[1,2] [1,2,3,4] 
            console.log(values.length);	//2  4
        }
        f(1,2);
        f(1,2,3,4)

注意：rest参数必须放在参数的最后

六、扩展运算符

• […]扩展运算符能将[数组]转换为逗号分隔的[参数序列]

const starts=['杨幂','赵丽颖','王丽坤'];
//声明一个函数
function start(){
    console.log(arguments);	//
}
start(...starts);//会将数组转换为都好分隔的参数('杨幂','赵丽颖','王丽坤');
start(starts);

• 数组的合并

 //数组的合并
      const num=[1,2,3];
      const str=['4','5','6'];
      //1.返回合并后的数组
      const to=num.concat(str);
      //2.改变了数组num的值
      [].push.apply(num,str);
	  //3.扩展运算符合并
	 const  to2=[...num,...str];
      console.log(num);	//[1,2,3,'4','5','6'];
      console.log(to);//[1,2,3,'4','5','6'];
	  console.log(to2);//[1,2,3,'4','5','6'];

• 数组的克隆

//常规我们想要将一个数组的值赋给另一个变量
const one=[1,2,3,4];
const sec=[...one];
console.log(sec);//实现了克隆 

• 将伪数组转为真正的数组

const divs=document.querySelectorAll("div");//这里获取的是一个Nolist类型的伪数组
const divArr=[...divs];
console.log(divArr);//是一个真正的数组，可以使用数组的一切方法