函数(rest 箭头)

函数(rest 箭头)

1、参数的默认值

传统方式:

function fn (n,a) {
        var name = n||'';
        var age = a||18||'';
        if(name){
            console.log(name);
        }
    }

ES6新方式:

function fn1 (a,n='zs'){
        var name =n;
        var age =a;
        return {name,age};
    }

注意:

a:函数的默认值赋初始值,需要放到后面
b:什么情况下会触发默认值  调用函数名不传参数,会调用默认值
2、rest函数
rest参数剩下的部分 reslut 第二参数 ...values
使用;
//2、rest函数  ...values (三个点+变量名) -》扩展运算符
    function sum(result,...values){
        values.forEach(function(v,i){
            result+=v;
        })
        console.log(result);
    }
    var res = 0;
    sum(res,1,2,3,4);
   //总结:rest函数:调用时排除第一个参数,其他的参数会被。。。values逐一获取到

...values 扩展运算符

它一般结合数组使用,把数组的元素用逗号分隔开来,组成一个序列。

    function sum1(a,b,c){
        return a+b+c;
    }
    var arr = [1,2,3]
    console.log(sum1(...arr))

3、箭头函数

用箭头符号(=>)

简单使用方法

    //普通函数
    var sum = function(a){
        return a;
    };
    console.log(sum(1));
    //箭头函数写法
    var sum = a=>a;
    console.log(sum(1));

当传入参数不唯一,返回不唯一

    var sum = (a,b) => {return a+b}
    sum(1,2);//3
    console.log(sum(1,2))

对一个数组[1,2,3,4]里面的数求和

    //传统方法
    var sum = 0;
    [1, 2, 3, 4,].forEach(function (v) {
        sum += v;
    });
    console.log(sum);
    //箭头函数
    var sum = 0;
    [1, 2, 3, 4].forEach(v => sum += v);
    console.log(sum);

 注意:

        // 箭头函数的this指向和function函数的this指向有什么区别
        //  1. 箭头函数this指向定义它的地方
        //  2. function 函数this指向调用它的地方
### 箭头函数中 `this` 的指向详解 在 JavaScript 中,箭头函数与普通函数在 `this` 指向方面存在显著差异。箭头函数没有自己的 `this`,其 `this` 是从外层作用域继承而来的,这种行为称为词法作用域绑定。普通函数的 `this` 在调用时动态绑定,而箭头函数的 `this` 在定义时就已经确定,且无法通过 `call`、`apply` 或 `bind` 改变 [^4]。 #### 箭头函数在对象方法中的 `this` 指向 当箭头函数作为对象的方法使用时,其 `this` 指向的是外层作用域中的 `this`,而不是该对象本身。例如: ```javascript const obj = { i: 10, b: () => { console.log(this.i, this); }, c: function() { console.log(this.i, this); } }; obj.b(); // undefined window{...} obj.c(); // 10 Object {...} ``` 在这个例子中,`obj.b` 是一个箭头函数,它的 `this` 指向全局对象(如浏览器中的 `window`),而 `obj.c` 是普通函数,其 `this` 指向调用它的对象 `obj` [^2]。 #### 箭头函数在嵌套函数中的 `this` 指向 在嵌套函数中,箭头函数的 `this` 会继承外层函数的 `this`。例如: ```javascript const obj = { aaa() { setTimeout(function() { console.log(this); // window }, 100); setTimeout(() => { console.log(this); // obj }, 100); } }; obj.aaa(); ``` 在第一个 `setTimeout` 中,普通函数的 `this` 指向全局对象;而在第二个 `setTimeout` 中,箭头函数的 `this` 继承自外层函数 `aaa`,因此指向 `obj` [^1]。 #### 箭头函数与构造函数 箭头函数不能作为构造函数使用,尝试使用 `new` 调用箭头函数会抛出错误。例如: ```javascript const Person = (name) => { this.name = name; }; const person = new Person('Alice'); // 报错:Person is not a constructor ``` 普通函数可以通过 `new` 实例化出新的对象,而箭头函数没有构造函数的能力 [^5]。 #### 箭头函数与 `arguments` 对象 箭头函数内部没有 `arguments` 对象,替代方案是使用剩余参数(`...rest`)来获取函数参数。例如: ```javascript const fn = () => { console.log(arguments); // 报错 }; const fn2 = (...rest) => { console.log(rest); // [1, 2] }; fn2(1, 2); ``` 普通函数可以通过 `arguments` 获取参数列表,而箭头函数只能使用剩余参数语法 [^5]。 #### 箭头函数与原型对象 普通函数具有原型对象(`prototype`),而箭头函数没有。例如: ```javascript const fn = () => { console.log('箭头函数'); }; console.log(fn.prototype); // undefined function fn2() { console.log('普通函数'); } console.log(fn2.prototype); // { constructor: [Function: fn2] } ``` 箭头函数不适用于需要原型对象的场景 [^5]。 --- ###
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值