函数扩展，函数参数的默认值，箭头函数

最新推荐文章于 2022-11-04 13:44:06 发布

三岁九年

最新推荐文章于 2022-11-04 13:44:06 发布

阅读量224

点赞数

分类专栏： JS 文章标签： js

本文链接：https://blog.youkuaiyun.com/xh0112/article/details/114039524

版权

JS 专栏收录该内容

24 篇文章

订阅专栏

本文详细介绍了JavaScript中函数参数的默认值、rest参数和箭头函数的使用。函数参数默认值允许在定义时设定默认值，需要注意其在作用域中的行为。rest参数用于收集函数多余的参数，它是一个真正的数组，可以使用数组方法。箭头函数提供了简洁的函数定义方式，并且其this值指向函数定义的位置，而非调用位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

函数扩展

1.函数参数的默认值

ES6之前，不能为函数的参数设置默认值，只能在代码中进行判断

function show(a,b){
    if(typeof b === "undefined"){
         b = 0;
    }
    console.log(a,b);
}
show(1);

ES6的写法

function show(a，b=0){
	console.log(a,b);
}
show(1);

设置默认值的参数应该在函数的最后面，否则默认值设置是无效的。

 function show(a=0){
 console.log(a,b);
 }
 show(1)//1 undefined

函数的length属性为函数的参数个数。若设置了默认值，length的计数中是不计算设置了默认值的参数的。

作用域

一旦设置了参数的默认值，函数进行声明初始化时，参数会形成一个单独的作用域。

等到初始化结束，这个作用域就会小时。

var a = 1;
function fn(a,b = a){
    console.log(b);
}
fn(2)//2

let a = 1;
function fn(b = a){
    let a = 2;
    console.log(b);
}
fn();//1

函数调用中，（b=a）是一个单独的作用域，a变量不存在，则会去外部寻找。

2.rest参数

2.1 基本用法

        function add(...v){
            for (var i = 0; i < v.length; i++) {
               console.log(v[i])
            }
            
        }
        add(2,1,3)

rest参数必须是最后一个正式参数。

        //错误写法
        function add(...v,a){
            
        }

2.2 rest参数和arguments对象的区别

arguments对象不是一个数组，只是一个类似数组的对象。不能使用数组的方法。

rest参数是一个真正的数据，所以可以使用数组的方法

function sort(...v){
    // return arguments.sort(); 报错
    return v.sort()
}
console.log(sort(3,1,4,8));

3.箭头函数

3.1 定义

箭头函数是对于匿名函数表达式的一种简写方法。

3.2 语法

//普通匿名函数
var a = function(a,b){

}
//箭头函数
//（）形参的位置
//=> 箭头函数的标志
//{} 函数代码块
var a=(a,b)=>{}

var fn = function(a,b){
    console.log(a+b);
    console.log("我是普通匿名函数");
}
fn(10,20);
var fn2 = (a,b)=>{
    console.log(a+b);
    console.log("我是箭头函数");
}
fn2(10,20);

3.3 其他写法

如果箭头函数只有一个形参，则可以省略小括号。

var fn = a =>{
       console.log(a);
}

如果只包含一个语句，则省略{}和return。

var fn = a => a*a

箭头函数中没有arguments对象。

var fn = a => {
   console.log(arguments.length);//报错
}

3.4 箭头函数中this指向

箭头函数内部的this是由上下文确定的。

它会找到自身定义的位置中的this值，作为自身的this。

let div = document.querySelector("div");
    div.onclick = function(){
        console.log(this);//div
    }
    div.onclick = ()=>{console.log(this);}//window
    div.onclick = function(){
         let fn = function(){
             console.log(this);
         }
         fn();//window
        //let fn = ()=>{
        //  console.log(this);
        //}
        //fn();//div
    }
    let obj = {
        name:"亚索",
        fn:function(){
            console.log(this);
        },
        fun:()=>{
            console.log(this);
        }
    }
    obj.fn();//obj
    obj.fun();//window

//指向