首页 > 其他分享 >【补充】箭头函数

【补充】箭头函数

时间:2023-08-06 22:35:57浏览次数:30  
标签:console 函数 补充 箭头 log var name

【补充】箭头函数

  • 函数写法变简单
  • 箭头函数没有自己的this,在箭头函数中使用this,就是它上一层的

【1】简解

  • 箭头函数是ES6中的语法特性,它提供了一种更简洁的函数定义方式。
  • 相比传统函数,箭头函数具有以下特点:
    • 简化的语法:
      • 箭头函数的语法非常简洁,可以帮助我们更快速地编写函数。
    • 没有自己的this:
      • 箭头函数没有自己的this绑定,它的this指向的是它被定义时所处的词法环境中的this值。
      • 这就意味着在箭头函数中使用this,实际上是使用了上一层作用域中的this。
// 传统函数
function multiply(a, b) {
  return a * b;
}

// 箭头函数
const multiply = (a, b) => a * b;

// 传统函数
function printName(name) {
  console.log(`My name is ${name}`);
}

// 箭头函数
const printName = (name) => {
  console.log(`My nam
  • 我们可以看到箭头函数的语法更加简洁
    • 去掉了function关键字和花括号
    • 并且还可以省略return关键字(如果只有一个表达式的话)。
  • 同时,在箭头函数中,在使用this时,它会继承外部作用域的this值,而不是创建自己的this。
  • 需要注意的是,由于箭头函数没有自己的this,因此它也不能被用作构造函数,并且不能使用call、apply和bind方法来改变this的指向。
  • 另外,在箭头函数中也无法使用arguments对象,但可以使用 ...rest 参数来替代。

【2】演示

  • 无参数,无返回值
var f = function () {
    console.log('我是匿名函数')
}
var f = () => {
    console.log('我是匿名函数')
}
f()
  • 有一个参数,没有返回值 ,可以省略括号
var f = function (name) {
    console.log('我是匿名函数', name)
}
var f = name => {
    console.log('我是匿名函数', name)
}
f('dream')
  • 多个参数,不能省略括号
var f = (name, age) => {
    console.log('我是匿名函数', name, age)
}
f('dream', 19)
  • 多个参数,不能省略括号,一个返回值
var f = (name, age) => {
    return name + 'nb'
}

// 简写成  省了return和大括号
var f = (name, age) => name + 'nb'
var res=f('dream', 19)
console.log(res)
  • 一个参数,一个返回值
var f = name => name + 'nb'
var res = f('dream')
console.log(res)

标签:console,函数,补充,箭头,log,var,name
From: https://www.cnblogs.com/dream-ze/p/17610242.html

相关文章

  • 【补充】es6的简写推导
    【补充】es6的简写推导//es6的简写形式vara={"name":"dream","age":19}varb={name:"dream",age:19}//一次简写varname="dream"varage=19varf=function(){}vard={"name":name,"age"......
  • 【补充】vm对象简解
    【补充】vm对象简解<body><divid="app"><!--插值语法--><h1>{{name}}</h1><br><h2>方法中的this对象</h2><button@click="handleClick1">点我</button></div></bod......
  • 【补充】数组的过滤
    【补充】数组的过滤数组.filter(匿名函数,接收一个参数,函数必须返回true/false)返回true则表示该数据保留vararr=['a','at','atom','attoo','be','beyond','cs','csrf']//数组.filer(匿名函数,接受一个参数,函数必须......
  • 【补充】JS中的for循环操作
    【补充】JS中的for循环操作//补充:js循环vararr=[33,2,3,4,6,7,4]//1基础for循环//for(vari=0;i<arr.length;i++){//console.log(arr[i])//}//2in的循环(不怎么用),循环出索引//for(iinarr){////console.log(i)//console.l......
  • 【6.0】Vue之生命周期函数
    【一】Vue的生命周期【1】详解Vue.js生命周期是指在Vue实例从创建到销毁的过程中,会经历一系列的钩子函数,这些钩子函数可以让我们在不同的阶段插入自定义的代码。Vue的生命周期分为三个主要阶段:创建阶段更新阶段销毁阶段。(1)创建阶段beforeCreate:在实例初始化之后,......
  • 欧拉函数与积性函数
    \(Update\:\:on\:\:2023.8.3\):增加了积性函数的内容,修改了内容排版Part1:欧拉函数及其性质定义:欧拉函数\(φ(n)\)表示小于等于\(n\),且与\(n\)互质的正整数的个数。公式:若在算数基本定理中,\(n=p_1^{c_1}p_2^{c_2}...p_m^{c_m}\)(\(p\)为质数),则由容斥原理:\[φ(n)=n*\d......
  • C与C++之间的相互调用及函数区别
    最近项目需要使用googletest(以下简称为gtest)作为单元测试框架,但是项目本身过于庞大,main函数无从找起,需要将gtest框架编译成静态库使用。因为项目本身是通过纯c语言编写,而gtest则是一个c++编写的测试框架,其中必然涉及c与c++之间的相互调用。注意,本文的前提是,c代码采用gcc等c语言编......
  • 【JavaScript17】eval函数
    eval本身在js里面正常情况下使用的并不多.但是很多网站会利用eval的特性来完成反爬操作.我们来看看eval是个什么鬼?从功能上讲,eval非常简单.它和python里面的eval是一样的.它可以动态的把字符串当成js代码进行运行.vars="1+2+3+4+5+6+7+8";varc=eval(s);//帮你......
  • 【JavaScript14】函数基础
    函数定义函数定义的方法有多种,主要分为函数声明和函数表达式//函数声明functionfunc(arg1,arg2){console.log("arg1=",arg1);console.log("arg2=",arg2);return"返回一些东西"}varret=func("苹果","鸭梨");console.log(......
  • 使用print()函数控制小数位
     方法一:round(x,N)这种方法不是严格有效的,当数字总的小数位小于控制输出的小数位时没有效果。num=3.1round(3.1,2)3.1round(3.141,2)3.14round(3,2)3  方法二:print("%.nf"%x)'%.2f'%3.1'3.10''%.2f'%3.1415'3.14' 方法三:print(form......