ES6——箭头函数

最新推荐文章于 2025-08-09 17:24:41 发布

原创最新推荐文章于 2025-08-09 17:24:41 发布 · 146 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#es6

ES6 专栏收录该内容

16 篇文章

订阅专栏

本文详细介绍了JavaScript中的箭头函数，包括其基本格式、特点及常见应用场景。箭头函数简化了函数定义，其this指向与上下文一致，不适用作构造函数，不拥有arguments对象，且无法使用yield命令。文中通过实例展示了箭头函数在数组方法如find、map、sort和reduce中的运用，并强调了对象方法中使用箭头函数可能导致的this指向问题。

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

一、格式

1.只有一个参数

    function f(a){}
    //只有一个参数 括号可省略
    let f=a=>{};

2.无参或多个参数

    let fun= function () {
        return '123';
    }
    //无参或多个参数括号必写
    let fun=()=>'123';

3.如果函数返回值为对象，使用圆括号

    let fun=()=>({id:1,name:'张三'});

4.也可以不带返回值函数体内写逻辑代码

5.使用举例：

console.log([1,2,3,4].find(item=>item%2==0)); //2

console.log([1,2,3,4].map((item,index)=>item*2)); //[2, 4, 6, 8]

console.log([1,4,2,5,3].sort((a1,a2)=>a1-a2)); // [1, 2, 3, 4, 5]

console.log([1,2,3,4].reduce((all,item)=>all+item)); //10

二、特点

1.上下文this指针一致（没有自己的this）

    let obj={
        sleep(){
            console.log(this);  //obj
            setTimeout(function () {
                console.log(this);  //Window 
            },2000);
        }
    }
    obj.sleep();

    let obj={
        sleep(){
            console.log(this);  //obj
            setTimeout(()=>{
                console.log(this);  //obj 
            },2000);
        }
    }
    obj.sleep();

2.不可以当做构造函数

不能对箭头函数使用new命令（会报错）
(也没有prototype）

3.不存在arguments对象

如果要用，用rest对象代替

4.不可以使用yield命令，因此不能用作Generator函数

5.对象中的函数不能使用箭头函数

    let o={
        eat:()=>{
            console.log(this);
        }
    }
    o.eat();  //window