ES6学习函数（四）

这里写目录标题

一、带参数默认值的函数
二、rest参数
三、箭头函数

一、带参数默认值的函数

ES6之前，不能直接为函数的参数指定默认值，只能采用变通的方法。

js 复制代码

        function log(x,y){
            y=y||'World';//y如果没有值则赋值World
            console.log(x,y);
            
        }
        log('Hello');//hello world

ES6 允许为函数的参数设置默认值，即直接写在参数定义的后面。

js 复制代码

        function log(x,y='World'){
            console.log(x,y);
        }
        log('Hello');//hello world

默认的表达式可以是一个函数

js 复制代码

        function getVal(val){
            return val+5;
        }

        function add2(a,b=getVal(5)){
            return a+b;
        }
        console.log(add2(5));
        //console.log(add2(5,20));

二、rest参数

ES6 引入 rest 参数（形式为...变量名），称为剩余参数或可变参数。它允许函数接收不定数量的参数，这些多余的参数会被收集到一个数组中，使得处理多个参数变得更加简洁和易于维护。‌

js 复制代码

        function add(...values) {
        	let sum = 0;
        	for (var val of values) {
            	sum += val;
        	}
        	return sum;
        }
        console.log(add(1,2,3,4)) // 10

三、箭头函数

一、箭头函数

ES6允许使用箭头=>定义函数

js 复制代码

	let f = x=>x;
	//等同于
	let f = function(x){
	    return x;
	}

	// 有一个参数
	let add = value => value;

	// 有两个参数
	let add = (value,value2) => value + value2;
	
	let add = (value1,value2)=>{
	    
	    return value1 + value2;
	} 
	// 无参数
	let fn = () => "hello world";

	let doThing = () => {
	
	}
	//如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
	let getId = id => ({id: id,name: 'mjj'}) //注意
	let obj = getId(1);

二、箭头函数的作用

2.1、使表达更加简洁

js 复制代码

	const isEven = n => n % 2 == 0;
	const square = n => n * n;

2.2、简化回调函数

js 复制代码

	// 正常函数写法
	[1,2,3].map(function (x) {
	  return x * x;
	});
	
	// 箭头函数写法
	[1,2,3].map(x => x * x);

三、箭头函数使用注意点

3.1、没有this绑定

js 复制代码

        //点击打印事件
        let PageHandler = {
            id: 123,
            init: function () {
                // 使用bind来改变内部函数this的指向
                document.addEventListener('click', function (event) {
                    this.doSomeThings(event.type);
                }.bind(this), false);
            },
            doSomeThings: function (type) {
                console.log(`事件类型:${type},当前id:${this.id}`);
            }
        }
        PageHandler.init();
        let PageHandler = {
            id: 123,
            init: function () {
                // 箭头函数没有this的指向，箭头函数内部的this值只能通过查找作用域链来确定

                // 如果箭头函数被一个非箭头函数所包括，那么this的值与该函数的所属对象相等，否则 则是全局的window对象
                document.addEventListener('click', (event) => {
                    console.log(this);
                    this.doSomeThings(event.type);
                }, false);
            },
            doSomeThings: function (type) {
                console.log(`事件类型:${type},当前id:${this.id}`);
            }
        }
        PageHandler.init();

3.2、箭头函数中没有arguments对象

js 复制代码

        var getVal = (a, b) => {
            console.log(arguments);
            return a + b;
        }
        console.log(getVal(1, 2)); //arguments is not defined
        //这些写就不存在问题
        function getVal(a,b){
            console.log(arguments);
            return a + b;
        }

arguments 内置对象：在 JavaScript 的每个函数的内部都可以访问内置的 arguments 对象 ,

3.3、箭头函数不能使用new关键字来实例化对象

js 复制代码

      let Person = ()=>{}
      let p1 = new Person();// Person is not a constructor