首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

为什么我不能省略箭头函数中getElementById()的参数?

箭头函数是ES6中引入的一种新的函数定义方式,它具有简洁的语法和特殊的作用域规则。箭头函数的语法形式是(参数) => {函数体}

在箭头函数中,如果函数体只有一条语句,并且该语句是一个返回值,可以省略花括号和return关键字。例如:

代码语言:javascript
复制
const add = (a, b) => a + b;

在这种情况下,箭头函数会自动将该语句的结果作为返回值返回。

然而,如果你想在箭头函数中使用getElementById()方法获取DOM元素,你不能省略该方法的参数。这是因为getElementById()方法需要一个参数,即要获取的元素的ID。如果省略了参数,该方法将无法正确获取到对应的元素。

例如,如果你想在箭头函数中获取ID为"myElement"的元素并进行操作,你应该这样写:

代码语言:javascript
复制
const myFunction = () => {
  const element = document.getElementById("myElement");
  // 其他操作
};

需要注意的是,箭头函数中的this指向的是定义时的上下文,而不是调用时的上下文。这也是箭头函数与普通函数的一个重要区别。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

Objective-C编写省略参数多参函数

Objective-C编写省略参数参数函数 引语: 在Object-C,我们会遇到很多像NSLog这样函数,其中参数个数不确定,由程序员自由控制,在初始化数组,字典等方面应用广泛,那么,这类函数是如何实现呢...我们怎么编写我们自己省略参数函数呢?当然,这不是唯一多参函数处理方法,你也可以通过一个字典或者数组传递参数。但C为我们提供这样一种机制,无疑是最方便。...va_end(ap) 这个宏用于关闭取参列表 二、多参函数取参原理 在编写我们自己多参函数之前,明白函数取参原理是十分重要,首先,函数参数是被放入我们内存栈段,而且放入顺序是从后往前放入...而上面介绍几个宏,就是帮助我们做这些。 三、声明与实现省略参数多参函数 "..."这个符号就是我们用来实现省略参数函数符号。...{//省略参数写法     va_list list;//创建一个列表指针对象     va_start(list, str);//进行列表初始化,str为省略第一个参数,及...之前那个参数

99510

nextline函数_在JAVAScannernext()和nextLine()为什么不能一起使用?

大家好,又见面了,是你们朋友全栈君。...、tab 键、enter 键都不能当作结束符。...回车符 “\r” 它被丢弃在缓冲区,现在缓冲区,只有一个 \r ,于是 下一次 nextLine 扫描时候就又扫描到了 \r,返回它之前内容,也是啥都没有 “” ,然后再把 \r 去掉, 对于...这个扫描器在扫描过程判断停止依据就是“结束符”,空格,回车,tab 都算做是结束符 而坑点在于 next 系列,也就是下面这些函数:next nextInt nextDouble nextFloat...这些函数与 nextLine 连用都会有坑 坑点就是 next 系列函数返回了数据后,会把回车符留在缓冲区,因此我们下一次使用 nextLine 时候会碰到读取空字符串情况 解决方案:输入都用

2.6K10

es6箭头函数详解

('箭头函数') fun1() // 只有一个形参时候,可以省略小括号 let fun2 = a => console.log(a) fun2('是a') // 两个及两个以上 let fun3...= (x, y) => console.log(x, y) fun3(30, 31) // 函数体只有一条语句或者是表达式时候,大括号{}可以省略 // 会自动返回语句执行结果,或者是表达式结果...console.log(x, y) return x + y } fun5(30, 31) 箭头函数this: 箭头函数没有自己this,箭头函数this不是调用时候决定,而是在定义时候处在对象就是它...this 箭头函数this看外层是否有函数,如果有,外层函数this就是内部箭头函数this,如果没有,则this是window let btn1 = document.getElementById...箭头函数要想接收不定参数,应该使用rest参数...解决。

26730

浅浅分析下es6箭头函数

不适用场景 定义对象方法 一般情况下如果想定义对象下函数,是多少涉及使用对象其他属性,如果用箭头函数会因为对象无法形成作用域,没有相关上下文,导致this指向全局。...特别需要说明一点是,如果你对象属性方法需要定义方法,同时想使用对象属性,那么此时建议使用箭头函数。...因为箭头函数无法形成作用域,所以在实例化时候构造器会失败,不能使用箭头函数实现构造器,真实使用会报错。...总之,个人建议是:上面提到几种不适合场景不要用箭头函数箭头函数适用于那些参数业务逻辑以及返回值都简单方法实现。...参考文档 什么时候不能使用箭头函数 arowFun,codepen案例 mdn链接 深入浅出箭头函数 不能滥用箭头函数

33310

普通函数箭头函数区别

被继承普通函数this指向改变,箭头函数this指向会跟着改变 不能直接修改箭头函数this指向 上个例子foo函数修改一下,尝试直接修改箭头函数this指向。...(全局对象) 唔,这个问题实际上是面试官提出来,当时认为箭头函数规则就是:箭头函数this指向继承自外层第一个普通函数this,现在看来真是不严谨(少说一个定义时候),要是面试官问我:定义和执行不在同一个普通函数...箭头函数都是匿名函数,并且都不用写function 只有一个参数时候可以省略括号: var f = a => a; // 传入a 返回a 函数只有一条语句时可以省略{}和return var f =...,可读性高 }; }; 箭头函数参数箭头之间不能换行!...,普通函数函数参数支持重命名 箭头函数相对于普通函数语法更简洁优雅 箭头函数注意事项及不适用场景 箭头函数注意事项: 箭头函数一条语句返回对象字面量,需要加括号 箭头函数参数箭头之间不能换行

83130

简单说 JavaScript箭头函数

说明 箭头函数本质还是函数,我们来看看他与JavaScript普通函数区别,先看看写法上区别。 ?...解释 写箭头函数,我们记住一个顺序就好,参数箭头函数体、这个顺序记住就足够了,参数箭头函数体、这三个是必须函数名可以没有,但这三项必须有,一些简写方式也是简写这三项里东西。...https://www.zhihu.com/question/40902815 所以这也解释了为什么会出现下面代码情况 // 不报错 var demo = () =>{x:1}; // 报错...,在上面这段代码对象括号是不能封闭作用域,所以此时this还是指向window。...4、箭头函数没有arguments对象,不能通过arguments对象访问传入参数,但是可以用rest参数实现 rest参数,剩余参数,不了解朋友看这里 var demo = (...theArgs

51320

论普通函数箭头函数区别以及箭头函数注意事项、不适用场景

箭头函数this指向在定义时候继承自外层第一个普通函数this。 下面栗子在一个函数定义箭头函数,然后在另一个函数执行箭头函数。...被继承普通函数this指向改变,箭头函数this指向会跟着改变 3. 不能直接修改箭头函数this指向 上个栗子foo函数修改一下,尝试直接修改箭头函数this指向。...箭头函数都是匿名函数,并且都不用写function 只有一个参数时候可以省略括号: ```js var f = a => a; // 传入a 返回a ``` 函数只有一条语句时可以省略{}和return...{ foo: 1 // 更推荐直接当成多条语句形式来写,可读性高 }; }; 箭头函数参数箭头之间不能换行!...,普通函数函数参数支持重命名 箭头函数相对于普通函数语法更简洁优雅 箭头函数注意事项及不适用场景 箭头函数注意事项: 箭头函数一条语句返回对象字面量,需要加括号 箭头函数参数箭头之间不能换行

1.5K00

什么场景不适合箭头函数

通常,新特性会带来一些混乱,其中之一就是箭头函数被误导了。本文将介绍一些场景,在这些场景,你应该绕过箭头函数,转而使用良好函数表达式或较新简写语法。...当执行new MyFunction()时,构造函数MyFunction上下文是一个新对象:this instanceof MyFunction === true。 注意,箭头函数不能用作构造函数。...,其中Message是一个箭头函数,JavaScript抛出一个 TypeError 错误,Message不能用作构造函数。...; 简写语法 箭头函数有一个很好属性,它可以省略参数圆括号()、块大括号{},如果函数主体只有一条语句,则返回。这有助于编写非常短函数。...当需要动态上下文时,不能使用箭头函数:定义方法,使用构造函数创建对象,在处理事件时从 this 获取目标。

80110

浅学前端:JavaScript篇(一)

鼠标单击了..."); });箭头函数 (参数) => { // 函数体 return 结果; }如果没有参数,() 还是要保留如果只有一个参数,() 可以省略如果函数体内只有一行代码,...{} 可以省略如果这一行代码就是结果,return 可以省略例 document.getElementById("p1").onclick = () => console.log("aa");函数是对象以下形式在...,不带是属性带有 ➡ 符号可以继续展开,限于篇幅省略了带有 [[ ]] 是内置属性,不能访问,只能查看相对重要是 [[Prototype]] 和 [[Scopes]] 会在后面继承和作用域时讲到可以作为方法参数.../ 箭头函数 arr.map( i => i * 10 ); // 箭头函数传给 map 函数参数代表旧元素,返回值代表新元素map 内部实现(伪代码) function map(a) { //...this 是个隐式参数Java ,我们说 this 代表就是调用方法那个对象js this 也是隐式参数,但它与函数运行时上下文相关例如,一个“落单”函数 function study(

18130

前端小知识10点(2020.6.28)

① 写法不同 普通函数: function a(){ //xxx } 箭头函数: const a=()=>{ //xxx } ② 箭头函数不会创建自身执行上下文(词法环境、变量环境) ③ 因为箭头函数没有自身执行上下文...,所以就不会创建自身 this,而是从外层作用域继承 this 注意: 箭头函数是在声明时,就从外层作用域继承了this,而不是在运行时 ④ 因为是在声明时,就指定了this,所以this指向永远不变...⑤ 根据 ③ 可知,箭头函数不能作为构造函数使用,所以也就不能new 3、new 原理 比如 new 对象为: function father(){ } ① 根据 father 构造函数创建对象...① 发送参数位置不同 get参数放在url post封装在body参数长度限制 get请求参数因为放在url,所以长度有限制 post请求参数长度没有限制 ③ 编码方式 GET请求只能进行...(觉得.bind()是破坏可读性函数) 7、yarn run start 和 yarn start 是没有区别的 参考:https://segmentfault.com/q/1010000022092499

40010

前端面试比较好回答

(1)箭头函数比普通函数更加简洁如果没有参数,就直接写一个空括号即可如果只有一个参数,可以省去参数括号如果有多个参数,用逗号分割如果函数返回值只有一句,可以省略大括号如果函数体不需要返回值,且只有一句话...(4)call()、apply()、bind()等方法不能改变箭头函数this指向var id = 'Global';let fun1 = () => { console.log(this.id...但是由于箭头函数时没有自己this,且this指向外层执行环境,且不能改变指向,所以不能当做构造函数使用。(6)箭头函数没有自己arguments箭头函数没有自己arguments对象。...(7)箭头函数没有prototype(8)箭头函数不能用作Generator函数不能使用yeild关键字参考:前端进阶面试题详细解答什么是作用域链?...执行效果依赖 next 方法调用参数。介绍了路由守卫及用法,在项目中路由守卫起到作用等等箭头函数和普通函数有啥区别?箭头函数能当构造函数吗?

1K30

ES6——函数

,在函数参数默认值表达式,还未初始化赋值参数值无法作为其他参数默认值。...箭头函数提供了一种更加简洁函数书写方式。...var f = (a,b) => a+b; f(6,2); //8 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。...} var a = 20; // fn this 对象为 {a: 19} fn.call({a: 18}); // 18 不可以作为构造函数,也就是不能使用 new 命令,否则会报错 适合使用场景...ES6 之前,JavaScript this 对象一直很令人头大,回调函数,经常看到 var self = this 这样代码,为了将外部 this 传递到回调函数,那么有了箭头函数,就不需要这样做了

38520

js 箭头函数详解

(a, b) => { return a + b; } 箭头函数简洁语法对开发者来说是十分友好,从上面的例子可以得知箭头函数简单用法: (参数) => { 函数体 } 2....箭头函数一些用法 3. 省略包含参数小括号 如果只有一个参数,那也可以不用括号。...省略包含函数大括号 箭头函数也可以不用大括号,但这样会改变函数行为。使用大括号就说明包含“函数体”,可以在一个函数包含多条语句,跟常规函数一样。...省略大括号箭头后面就只能有一行代码; 省略大括号会隐式返回这行代码值; 省略大括号不能写return。...箭头函数不能使用arguments 如果函数是使用箭头语法定义,那么传给函数参数不能使用 arguments 关键字访问: // 普通函数 let sum = function() { return

1.2K10

React--7: 组件三大核心属性1:state

为什么会没有this呢? 首先这个函数是我们自定义函数,而Babel在将我们jsx转为js时候是严格模式。它不允许自定义函数this指向window。...isHot}) console.log(isHot) } 那么为什么那? 箭头函数是没有this,那在箭头函数里使用 this 会报错吗?...不会,他会去找其外层函数 this 去使用。找外侧,就找到了类里面的区域。 我们打印一下 空白区域 this ,可以吗?可以看到已经报错了。因为这是类不能随便写代码。...那么我们怎么看空白区域 this ? 看不了了?我们刚才说过箭头函数 this 就是它外层 this指向。所以我们在 箭头函数 打印 this 就是空白区域 this。...(1)强制绑定 this :通过函数对象bind() (2)箭头函数 状态数据,不能直接修改或更新,用 setState()

1.5K20

在你学习 React 之前必备 JavaScript 基础

始终在对象初始化调用构造函数方法。 传递给这个对象任何参数都将传递给新对象。...区别在于 const 在声明后不能改变它值,而 let 则可以。 这两个声明都是本地,这意味着如果在函数作用域内声明 let ,则不能函数外部调用它。...greeting 并不会发生改变,所以我们在这里使用 const 箭头函数 箭头函数是 ES6 一种新特性,在现代代码库几乎被广泛使用,因为它使代码简洁易读。...当我学习箭头函数时,用这两个简单步骤来重写函数: 移除 function 关键字 在 () 后面加上 => 括号仍然用于传递参数,如果只有一个参数,则可以省略括号。.../App 目录导入 App ,并省略了 .js 扩展名。 我们只能在导入 JavaScript 文件时省略文件扩展名,但在其他文件我们必须包含扩展名,例如 .css 。

1.7K10

javascript js(=>) 箭头函数 详细解说 案例大全

ES6标准新增了一种新函数:Arrow Function(箭头函数)。 为什么叫Arrow Function?...因为它定义用就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 箭头函数相当于匿名函数,并且简化了函数定义。...箭头函数有两种格式,一种像上面的,只包含一个表达式,连{ ... }和return都省略掉了。还有一种可以包含多条语句,这时候就不能省略{ ... }和return: ?...=> ({ foo: x }) this 箭头函数看上去是匿名函数一种简写,但实际上,箭头函数和匿名函数有个明显区别:箭头函数内部this是词法作用域,由上下文确定。...由于this在箭头函数已经按照词法作用域绑定了,所以,用call()或者apply()调用箭头函数时,无法对this进行绑定,即传入第一个参数被忽略: ?

1.3K40

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

    运营活动

    活动名称
    广告关闭
    领券