ES6-箭头函数

￡神魔★判官ぃ 2022-03-19 15:37 197阅读 0赞

<script>
        //1.es6允许使用箭头=>定义函数
        var f = v => v;
        f(44);//44
        /*
        var f = function (v) {
            return v;
        }
        */
    
        //2.如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
        var a = () => 5;
        a();//5
        /*
        var a = function () {
            return 5;
        }
        */
    
        var sum = (num1, num2) => num1 + num2;
        sum(3,4);//7
        /*
        var sum = function (num1, num2) {
            return num1 +num2;
        }
        */
    
        //3.如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用return语句返回。
        var plus = (num1,num2) => { return num1 + num2; };
        plus(5,6);//11
    
        // 由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会报错。
        let getTempItem = id => ({ id: id, name: 'Temp' });
        getTempItem(4);//{ id: 4, name: 'Temp' }
    
        //4.箭头函数可以与变量解构结合使用
        const full = ({ first, last }) => first + ' ' + last;
        full({first: 'john', last: 'beer'});//john beer
        /*
        function full(person) {
            return person.first + ' ' + person.last;
        }
        */
    
        //5.箭头函数使得表达更加简洁。
        const isEven = n => n % 2 === 0;
        isEven(4);//true
        const square = n => n * n;
        square(4);//16
    
        //6.箭头函数的一个用处是简化回调函数。
        /*
        $re = [1,2,3].map(function (x) {
            return x * x;
        });
        */
        [1,2,3].map(x => x * x);//[1,4,9]
        /*
        var result = [2,1,3,5,4,7,9,8].sort(function (a, b) {
            return a-b;
        });
        */
        [2,1,3,5,4,7,9,8].sort((a, b) => a - b);//[1,2,3,4,5,7,8,9]
    
        //7.下面是 rest 参数与箭头函数结合的例子。
        const numbers = (...nums) => nums;
        numbers(1,2,3);//[1,2,3]
        const headAndTail = (head, ...tail) => [head, tail];
        headAndTail(1,2,3,4,5); [1,[2,3,4,5]]
    
        //8.使用注意点：函数体内的this对象，就是定义时所在的对象，而不是使用时所在的对象。也就是说this对象的指向是可变的，但是在箭头函数中，它是固定的。
        function foo() {
            setTimeout(() => {
                console.log(this.id);
            }, 100)
        }
        var id = 21;
        foo.call({ id: 42 });
        /*
        上面代码中，setTimeout的参数是一个箭头函数，这个箭头函数的定义生效是在foo函数生成时，而它的真正执行要等到 100 毫秒后。如果是普通函数，执行时this应该指向全局对象window，这时应该输出21。但是，箭头函数导致this总是指向函数定义生效时所在的对象（本例是{id: 42}），所以输出的是42。
        * */
    
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，197人围观）

还没有评论，来说两句吧...

相关阅读

相关 ES6----箭头函数

目录基本语法是：基本用法：注意：普通函数和箭头函数区别? 1.this指向问题 2.普通函数 arguments保存实际参数 3.箭头函数 rest参数保

本是古典何须时尚/ 2024年04月06日 09:21/ 0 赞/ 12 阅读

相关 ES6 箭头函数

ES6 中添加了函数新的定义语法——`箭头函数`，当有大于一个形参的时候，必须使用`()`代表部分参数，函数体大于一行时，必须使用`{}`将函数体括起来，并使用 `return

一时失言乱红尘/ 2023年08月17日 16:07/ 0 赞/ 75 阅读

相关 ES6_箭头函数

优化函数的写法如何去定义函数方式一： function sum (x, y) { return x+y } const

Bertha 。/ 2022年09月10日 02:18/ 0 赞/ 143 阅读

相关 es6箭头函数

不了解es6的童鞋，对箭头函数应该很陌生。箭头函数是用箭头（=>）标识的，是es6的新特性。闲话就不多说了，直接上代码吧！这里我们拿箭头函数和普通函数做对比，代码如下：

短命女/ 2022年06月17日 03:41/ 0 赞/ 99 阅读

相关 ES6 箭头函数理解

你看懂“箭头函数”了么？时间 2016-10-24 20:30:00 [梁桂钊的博客][Link 1] 原文 [http://blog.720ui.com/2

青旅半醒/ 2022年06月15日 05:58/ 0 赞/ 194 阅读

相关 es6 箭头函数

1.单参数 function cheng(a=3)\{ return a\a; \} let cheng= (a=3)=>a\a; console

落日映苍穹つ/ 2022年06月08日 02:12/ 0 赞/ 93 阅读

相关 ES6 箭头函数

在ES6 中，增加了箭头函数这种新的形式，其实还是函数；下面简单了解一下： < script> let func = canshu => canshu;

向右看齐/ 2022年05月27日 13:11/ 0 赞/ 106 阅读

相关 ES6 — 箭头函数

一为什么要有箭头函数我们在日常开发中，可能会需要写类似下面的代码 const Person = { 'name': 'little

港控/mmm°/ 2022年05月27日 04:13/ 0 赞/ 108 阅读

相关 ES6-箭头函数

<script> //1.es6允许使用箭头=>定义函数 var f = v => v; f(44);//44

￡神魔★判官ぃ/ 2022年03月19日 15:37/ 0 赞/ 198 阅读

相关 ES6箭头函数

ES6箭头函数一、什么是箭头函数二、写法三、箭头函数中this 一、什么是箭头函数简化了匿名函数的写法，二、写法 fu

快来打我*/ 2021年09月07日 06:10/ 0 赞/ 290 阅读