首页
学习
活动
专区
圈层
工具
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
  • 来自专栏前端学习笔记

    箭头函数

    箭头函数(★★★) ES6中新增的定义函数的方式。 this关键字,箭头函数中的this,指向的是函数定义位置的上下文this const obj = { name: '张三'} function fn () { console.log( this);//this 指向 是obj对象 return () => { console.log(this);//this 指向 的是箭头函数定义的位置,那么这个箭头函数定义在 this,箭头函数中的this指向是它所定义的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁 箭头函数的优点在于解决了this执行环境所造成的一些问题。 ,而对象没有作用域的,所以箭头函数虽然在对象中被定义,但是this指向的是全局作用域 剩余参数(★★) 剩余参数语法允许我们将一个不定数量的参数表示为一个数组,不定参数定义方式,这种方式很方便的去声明不知道参数情况下的一个函数

    1.7K20发布于 2020-10-26
  • 来自专栏快乐阿超

    箭头函数

    最近在代码中用到大量箭头函数,例如 result = page.stream().map(p -> { //这个p相当于list里的每一项,map需要return Map<String, Object product.getReCover()); tempMap.put("productId", product.getId()); } }); 然后今天写后台管理系统的时候发现前端的箭头函数我还没用过 真香~ var newArray = [2, 4, 6, 8, 10] //var声明的变量,其作用域为该语句所在的函数内,且存在变量提升现象 var newArrays = newArray.map

    1.6K10编辑于 2022-08-16
  • 来自专栏网络收集

    箭头函数

    今天我来总结一下ES6 对函数做的一些处理。结合我ES5的函数特征,能够让我们根据实际情况,来很好的完成我们的项目需求。 一、ES6的箭头函数 1. 带参数的箭头函数 let fun = (x) => x console.log(fun(2)) //2 这种写法等同于ES5的 function fun(x){ return x } console.log fun = ()=>({name:"jhon",age:23}); console.log(fun()) //返回对象 {name:"jhon",age:23} 6.在对象的方法中我们可以这样简化函数 1.箭头函数不可以用new 在去实例化对象,如果你这样操作,将会报错 let fun = (x = 0,b = 0)=>{console.log(x+b);}; let funClone = new > { // 使用箭头函数 console.log(this); },1000) }, fuc:function(){ setTimeout

    1.5K00编辑于 2022-05-14
  • 来自专栏从零开始学自动化测试

    JavaScript 学习-8.JavaScript 箭头函数的使用

    前言 ES6 中引入了箭头函数() =>。箭头函数不需要使用function关键字,允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { return "Hello World!" 使用箭头函数() =>格式 fun2 = () => { return "Hello World!"; } console.log(fun2()); // Hello World! ,则 this 表示函数的拥有者: // 箭头函数: hello = () => { document.getElementById("demo").innerHTML += this; } // ("btn").addEventListener("click", hello); //Window 对于箭头函数,this 关键字始终表示定义箭头函数的对象。

    87910编辑于 2022-05-18
  • 来自专栏程序猿的栖息地

    TypeScript 箭头函数

    TypeScript 箭头函数 Lambda 函数也称之为箭头函数箭头函数表达式的语法比函数表达式更短。 函数只有一行语句: ( [param1, param2,…param n] )=>statement; 示例 : const add =(a:number, b:number):number => a+ b; console.log(add(1, 2)); 箭头函数 + {} 示例 const add =(a:number, b:number):number=>{ console.log("add

    65910编辑于 2024-01-30
  • 来自专栏全栈程序员必看

    Vue 箭头函数

    箭头函数 1.1 认识箭头函数 传统定义函数: const aaa = function(parse) { } 对象字面量中定义函数: const obj = { bbb(parse ) { } } Es6中箭头函数; const ccc = ()=>{ } 箭头函数的参数和返回值 放入两个参数: const obj = (num1, num2) => { ('2'); } 函数中只有一行代码可以省略return const mul = (num1, num2) => num1 * num2; console.log(mul); 箭头函数中this使用 什么时候使用箭头函数 高阶函数 1. filter过滤函数 const num = [2,5,9,8,7,4,1,2,5,6,22,55]; let newNum = num.filter(function(item) { return item>10; }) console.log(newNum); 2. map过滤函数 const num = [2,5,9,8,7,4,1,2,5,6,22,55]; let

    1.4K20编辑于 2022-09-07
  • 来自专栏子舒的个人博客

    揭秘箭头函数

    ://javascript.plainenglish.io/demystifying-javascript-arrow-functions-7b2a0908a2b3 通过掘金翻译计划活动进行翻译 箭头函数函数表达式的替代方法 如果您还没有阅读 JavaScript 中的函数表达式,我建议您在继续阅读之前先阅读这篇文章。 现在,让我们试着从语法、执行、作用域和提升以及代码示例方面来理解箭头函数。 1. 主要区别在于函数的编写方式。 以下是我们可以根据其语法从上述代码中得出的观察结果: 它不包含 function 关键字。 它没有 函数名 ,这意味着这些是匿名函数。 引入了箭头 => 符号。 根据箭头函数的语法,如果函数只接受一个参数,可以忽略括号()。如果函数只包含一条语句,则可以忽略块{},最后其实也可以忽略return ,如果函数只包含一个语句。 2. 与普通函数相比,主要区别在于 this 的声明。 箭头函数没有自己的 this 变量; this 在箭头函数中使用时会得到词法解析。 在创建阶段之后不久,执行阶段开始。

    1.6K20编辑于 2022-06-09
  • 来自专栏黄啊码【CSDN同名】

    js箭头函数

    箭头函数 箭头函数表达式没有自己的this,arguments,super或new.target。 引入箭头函数作用 引入箭头函数的作用:更简短的函数并且不绑定this 更简短的函数 let sum = (x,y,z) => { return x+y+z; } 不绑定this 在箭头函数出现之前,每个新定义的函数都有他自己的 通过call、apply调用箭头函数 由于箭头函数没有自己的this指针,通过call()、apply()方法调用时,第一个参数会被忽略。 箭头函数不能使用new操作符 箭头函数不能用作构造器,和 new一起用会抛出错误。 因此,箭头函数不能用作生成器。

    6K10发布于 2021-09-26
  • 来自专栏Czy‘s Blog

    Js箭头函数

    Js箭头函数 箭头函数是ES6新增的语法,提供了一种更加简洁的函数书写方式,类似于匿名函数,并且简化了函数定义。 完整写法 完整写法类似于匿名函数,省略了function关键字。 this,在箭头函数函数体中使用this时,会取得其上下文context环境中的this。 箭头函数调用时并不会生成自身作用域下的this,它只会从自己的作用域链的上一层继承this。 由于箭头函数没有自己的this指针,使用apply、call、bind仅能传递参数而不能动态改变箭头函数的this指向。 var s = () => {}; console.log(s.prototype); // undefined 不能用作函数生成器 箭头函数不能用作Generator,yield关键字通常不能在箭头函数中使用

    6.6K20发布于 2020-08-27
  • 来自专栏web share

    普通函数箭头函数

    一、区别 箭头函数是匿名函数,不能作为构造函数,不能使用new let FunConstructor = () => { console.log('lll'); } let fc = new FunConstructor(); 箭头函数不绑定arguments,取而代之用rest参数...解决 function A(a){ console.log(arguments); } A(1,2,3,4,5,8 ); //  [1, 2, 3, 4, 5, 8, callee: ƒ, Symbol(Symbol.iterator): ƒ] let B = (b)=>{ console.log(arguments is not defined let C = (...c) => { console.log(c); } C(3,82,32,11323); // [3, 82, 32, 11323] 箭头函数不绑定 箭头函数比较特殊没有调用者,不存在this.箭头函数()的概念,但是它内部可以有this,而内部的this由上下文决定 例子1: var o = { user:"追梦子", fn:function

    1.3K40发布于 2021-01-20
  • 来自专栏大史住在大前端

    javascript基础修炼(8)——指向FP世界的箭头函数

    箭头函数 箭头函数是ES6语法中加入的新特性,而它也是许多开发者对ES6仅有的了解,每当面试里被问到关于“ES6里添加了哪些新特性?”这种问题的时候,几乎总是会拿箭头函数来应付。 箭头函数,=>,没有自己的this , arguments , super , new.target ,“书写简便,没有this”在很长一段时间内涵盖了大多数开发者对于箭头函数的全部认知(当然也包括我自己 如果你也曾以为【函数式编程】就是“用箭头函数函数写的精简一些”,如果你也被各种复杂的this绑定弄的晕头转向,那么就一起来看看这个胖箭头指向的新世界——Functional Programming吧! /** *定义一个工具函数compose,接受两个函数作为参数,返回一个新函数 *新函数接受一个x作为入参,然后实现函数的迭代调用。 函数Vs纯函数 函数式编程中所传递和使用的函数,被要求为【纯函数】。纯函数需要满足如下两个条件: 只依赖自己的参数 执行过程没有副作用 为什么纯函数只能依赖自己的参数?

    66430发布于 2018-10-25
  • 来自专栏随便写写-kifuan

    箭头函数和对象

    有一个函数很短,比如这样: function getData() { return { data: 1 } } console.log(getData()) // { data: 1 } 想用 ES6箭头函数语法简化一下,于是写成这样: const getData = () => { data: 1 } console.log(getData()) // undefined 怎么会是呢?

    1.3K20编辑于 2022-10-24
  • 来自专栏程序技术知识

    js 箭头函数详解

    认识箭头函数 es6 新增了使用胖箭头(=>)语法定义函数表达式的能力,很大程度上,箭头函数实例化的函数对象与正式的函数表达式创建的函数对象行为是相同的。 任何可以使用函数表达式的地方,都可以使用箭头函数: // 普通函数 let sum = function(a, b) { return a + b; } // 箭头函数 let sum1 = (a, b) => { return a + b; } 箭头函数简洁的语法对开发者来说是十分友好的,从上面的例子可以得知箭头函数的简单用法: (参数) => { 函数体 } 2. 嵌入函数 箭头函数简洁的语法非常适合嵌入函数的场景: let arr = [1, 2, 3, 4, 5]; arr.map(val => val * 2); // [2, 4, 6, 8, 10] 6. 箭头函数不能使用arguments 如果函数是使用箭头语法定义的,那么传给函数的参数将不能使用 arguments 关键字访问: // 普通函数 let sum = function() { return

    2.1K10编辑于 2022-05-12
  • 来自专栏软件工程

    箭头函数和this指向

    箭头函数基本使用 // 箭头函数: 也是一种定义函数的方式 // 1.定义函数的方式: function const aaa = function () { } // 2.对象字面量中定义函数 const obj = { bbb() { } } // 3.ES6中的箭头函数 // const ccc = (参数列表) => { // // } const ccc = () => { } 带返回值的箭头函数 // 1.参数问题: // 1.1.放入两个参数 const sum = (num1, num2) => { return 一般我我们准备把一个函数作为参数放在另外一个函数里的时候使用. setTimeout(() => { console.log(this); //打印的this是 obj对象 }) } } obj.aaa() 箭头函数中的

    1.7K10编辑于 2021-12-23
  • 来自专栏杨龙飞前端

    箭头函数不会修改this

    18 setTimeout(function(){ console.log(this ) }) } var a = new Person() setTimeout里的this代表window 由于箭头函数不改变 this,所以setTimeout里面的箭头函数this,不能改变

    88430发布于 2018-06-14
  • 来自专栏杨龙飞前端

    箭头函数不会修改this

    18 setTimeout(function(){ console.log(this ) }) } var a = new Person() setTimeout里的this代表window 由于箭头函数不改变 this,所以setTimeout里面的箭头函数this,不能改变

    86850发布于 2018-06-21
  • 来自专栏JavaEdge

    Js的箭头函数

    更简短的函数并且不绑定this。箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。 箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。 elements.map(function(element) { return element.length; }); // 返回数组:[8, 6, 7, 9] // 上面的普通函数可以改写成如下的箭头函数 elements.map((element) => { return element.length; }); // [8, 6, 7, 9] // 当箭头函数只有一个参数时,可以省略参数的圆括号 elements.map(element => { return element.length; }); // [8, 6, 7, 9] // 当箭头函数函数体只有一个 `return` 语句时

    2.6K10发布于 2021-03-14
  • 来自专栏Vue开发社区

    面试官:箭头函数和普通函数的区别?箭头函数的this指向哪里?

    一、箭头函数更直观、简洁 箭头函数为匿名函数 let a = () => {} 有一个参数可省略(),多个的话不能省略(),用 ,号分开 let a = m => {} let b = (m, n this 的执行环境') // 当前对象 test } } people.fn() people.fn2() 结果: 四、箭头函数没有prototype let a = () => 1 let arguments,值是有外围非箭头函数所决定的 // 报错 let a = (m) => { console.log(arguments) } a(1,2,3) // arguments is not defined // 值是有外围非箭头函数所决定的 function fn(){ let f = ()=> { console.log(arguments) } f(); ) // 1,2,3 六、箭头函数不能当做Generator函数,不能使用yield关键字 箭头函数的this指向为其上下文的this,一级一级往上找,直到找到 window 当然箭头函数与普通函数的区别还有很多

    93730编辑于 2022-12-01
  • 来自专栏全栈程序员必看

    普通函数箭头函数的区别

    详解箭头函数和普通函数的区别以及箭头函数的注意事项、不适用场景 箭头函数是ES6的API,相信很多人都知道,因为其语法上相对于普通函数更简洁,深受大家的喜爱。 就是这种我们日常开发中一直在使用的API,大部分同学却对它的了解程度还是不够深… 普通函数箭头函数的区别: 箭头函数的this指向规则: 箭头函数没有prototype(原型),所以箭头函数本身没有this 下面栗子中在一个函数中定义箭头函数,然后在另一个函数中执行箭头函数箭头函数的this指向普通函数时,它的argumens继承于该普通函数 使用new调用箭头函数会报错,因为箭头函数没有constructor 箭头函数不支持new.target 箭头函数不支持重命名函数参数 ,普通函数函数参数支持重命名 箭头函数相对于普通函数语法更简洁优雅 箭头函数的注意事项及不适用场景 箭头函数的注意事项: 箭头函数一条语句返回对象字面量,需要加括号 箭头函数在参数和箭头之间不能换行

    1.3K30编辑于 2022-09-07
  • 来自专栏编程微刊

    箭头函数与普通函数的区别?

    箭头函数(Arrow Functions)和普通函数(Regular Functions)在语法和功能上有一些区别。 以下是箭头函数和普通函数的主要区别: 1:语法简洁性:箭头函数具有更简洁的语法形式,可以帮助减少代码量。它使用箭头(=>)来定义函数,省略了function关键字和大括号。 // 普通函数 function sum(a, b) { return a + b; } // 箭头函数 const sum = (a, b) => a + b; 2:this绑定:箭头函数没有自己的 但是箭头函数没有自己的arguments对象,它会继承外部函数的arguments对象。 :普通函数可以用作构造函数来创建新的对象实例,而箭头函数不能使用new关键字来创建对象。

    66920编辑于 2023-10-26
领券