“"=>&quot”是什么意思?(由等号&amp组成的箭头;大于)JavaScript?

我知道>=操作符意味着大于或等于,但我在一些源代码中见过=>。这个运算符是什么意思?

代码如下:

promiseTargetFile(fpParams, aSkipPrompt, relatedURI).then(aDialogAccepted => {
if (!aDialogAccepted)
return;


saveAsType = fpParams.saveAsType;
file = fpParams.file;


continueSave();
}).then(null, Components.utils.reportError);
368795 次浏览

这就是ECMAScript 6中引入的“箭头函数表达式”。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/arrow_functions

出于历史原因(如果wiki页面稍后更改),它是:

与函数表达式相比,箭头函数表达式具有更短的语法,并且在词法上绑定this值。箭头函数总是匿名的。

它是什么

这是一个箭头函数。箭头函数是一种简短的语法,由ECMAscript 6引入,可以类似于使用函数表达式的方式使用。换句话说,你可以经常使用它们来代替像function (foo) {...}这样的表达式。但它们有一些重要的区别。例如,它们不绑定自己的this值(参见下面的讨论)。

箭头函数是ECMAscript 6规范的一部分。它们尚未在所有浏览器中得到支持,但它们在Node v. 4.0+和截至2018年使用的大多数现代浏览器中得到部分或完全支持。(我在下面列出了支持浏览器的部分列表)。

您可以在Mozilla文档 中阅读更多关于箭头函数的内容

来自Mozilla文档:

函数表达式相比,箭头函数表达式(也称为胖箭头函数)具有更短的语法,并且在词法上绑定this值(不绑定自己的thisargumentssuperthis0)。箭头函数总是匿名的。这些函数表达式最适合用于非方法函数,它们不能用作构造函数。

关于this如何在箭头函数中工作的说明

箭头函数最方便的特性之一就隐藏在上面的文本中:

一个箭头函数…从词法上绑定this值(不绑定自己的this…)

简单来说,这意味着箭头函数从其上下文中保留this值,并且没有自己的this。传统函数五月绑定自己的this值,这取决于它是如何定义和调用的。这可能需要大量的操作,如self = this;等,以便从一个函数在另一个函数中访问或操作this。有关此主题的更多信息,请参见Mozilla文档中的解释和示例

示例代码

示例(同样来自文档):

var a = [
"We're up all night 'til the sun",
"We're up all night to get some",
"We're up all night for good fun",
"We're up all night to get lucky"
];


// These two assignments are equivalent:


// Old-school:
var a2 = a.map(function(s){ return s.length });


// ECMAscript 6 using arrow functions
var a3 = a.map( s => s.length );


// both a2 and a3 will be equal to [31, 30, 31, 31]

兼容性说明

您可以在Node中使用箭头函数,但浏览器的支持参差不齐。

浏览器对该功能的支持已经有了很大的改进,但对于大多数基于浏览器的用法来说,它仍然不够广泛。截至2017年12月12日,当前版本支持:

  • Chrome (v. 45+)
  • Firefox (v. 22+)
  • Edge (v. 12+)
  • 歌剧(32+)
  • Android浏览器(v47 +)
  • Opera Mobile (33+)
  • Chrome for Android (v47 +)
  • Firefox for Android (v. 44+)
  • Safari (v. 10+)
  • iOS Safari(版本10.2+)
  • 三星互联网(5+)
  • 百度浏览器(v7.12 +)

不支持:

  • IE(通过第11节)
  • Opera Mini(通过v. 8.0)
  • 黑莓浏览器(通过v. 10)
  • IE Mobile(通过v. 11)
  • UC浏览器for Android(通过v. 11.4)
  • QQ(通过1.2 .)

你可以在CanIUse.com找到更多(和最新的)信息。

我读过,这是ES6中的Arrow Functions的符号

var a2 = a.map(function(s){ return s.length });

使用Arrow Function可以写成

var a3 = a.map( s => s.length );

MDN Docs

这被称为箭头函数,是ECMAScript 2015规范

var foo = ['a', 'ab', 'abc'];


var bar = foo.map(f => f.length);


console.log(bar); // 1,2,3

比前面的语法更短:

// < ES6:
var foo = ['a', 'ab', 'abc'];


var bar = foo.map(function(f) {
return f.length;
});
console.log(bar); // 1,2,3

DEMO

另一个很棒的东西是词汇 this…通常,你会这样做:

function Foo() {
this.name = name;
this.count = 0;
this.startCounting();
}


Foo.prototype.startCounting = function() {
var self = this;
setInterval(function() {
// this is the Window, not Foo {}, as you might expect
console.log(this); // [object Window]
// that's why we reassign this to self before setInterval()
console.log(self.count);
self.count++;
}, 1000)
}


new Foo();

但可以用箭头这样重写:

function Foo() {
this.name = name;
this.count = 0;
this.startCounting();
}


Foo.prototype.startCounting = function() {
setInterval(() => {
console.log(this); // [object Object]
console.log(this.count); // 1, 2, 3
this.count++;
}, 1000)
}


new Foo();

DEMO

< p > MDN < br > 更多关于语法 < / em >

更详细地说,这是使用箭头函数的一个很好的答案。

再举一个例子,说明lambda不使用map也能做什么:

a = 10
b = 2


var mixed = (a,b) => a * b;
// OR
var mixed = (a,b) => { (any logic); return a * b };


console.log(mixed(a,b))
// 20

正如所有其他答案已经说过的,它是ES2015箭头函数语法的一部分。更具体地说,它不是一个操作符,而是一个标点符号,将参数与正文分隔开来:ArrowFunction : ArrowParameters => ConciseBody。例如(params) => { /* body */ }

正如其他人所说,创建函数是一种新的语法。

然而,这种功能不同于一般的功能:

  • 它们绑定 this值,

    箭头功能不为 arguments定义本地绑定, super this或者 new.target任何与 arguments有关的, 箭头功能内的 superthisnew.target必须 解析到词法封闭环境中的绑定。通常 这将是一个立即封闭的函数环境 功能。

    尽管 箭头功能可能包含对 super的引用,但 在步骤4中创建的函数对象没有通过 执行 MakeMethod。引用 super箭头功能 总是包含在一个非 箭头功能和必要的 实现 super的状态是可以通过 范围访问的,即 被 箭头功能的函数对象捕获。

  • 它们是非构造函数。

    这意味着它们没有[[构造]]内部方法,因此不能被实例化,例如。

    var f = a => a;
    f(123);  // 123
    new f(); // TypeError: f is not a constructor
    

这些是箭头函数

也称为 脂肪箭头函数。它们是一种简洁的函数表达式编写方法,例如 function() {}

箭头函数可以消除定义函数时对 functionreturn{}的需求。它们是一行程序,类似于 Java 或 Python 中的 Lambda 表达式。

没有参数的示例

const queue = ['Dave', 'Sarah', 'Sharon'];
const nextCustomer = () => queue[0];


console.log(nextCustomer()); // 'Dave'

如果需要在同一个 Arrow 函数中创建多个语句,那么在本例中,需要将 queue[0]换成大括号 {}。在这种情况下,不能省略 return 语句。

带有1个参数的示例

const queue = ['Dave', 'Sarah', 'Sharon'];
const addCustomer = name => {
queue.push(name);
};


addCustomer('Toby');


console.log(queue); // ['Dave', 'Sarah', 'Sharon', 'Toby']

你可以从上面省略 {}

当只有一个参数时,可以省略参数周围的方括号 ()

具有多个参数的示例

const addNumbers = (x, y) => x + y


console.log(addNumbers(1, 5)); // 6

一个有用的例子

const fruits = [
{ name: 'Apple', price: 2 },
{ name: 'Bananna', price: 3 },
{ name: 'Pear', price: 1 }
];

如果我们想得到单个数组中每个水果的价格,在 ES5中我们可以这样做:

fruits.map(function(fruit) {
return fruit.price;
}); // [2, 3, 1]

在 ES6中使用新的 Arrow 函数,我们可以使它更简洁:

fruits.map(fruit => fruit.price); // [2, 3, 1]

关于箭头函数的其他信息可以找到 给你

使用 Arrowfunction 添加简单的 CRUD 示例

 //Arrow Function
var customers   = [
{
name: 'Dave',
contact:'9192631770'
},
{
name: 'Sarah',
contact:'9192631770'
},
{
name: 'Akhil',
contact:'9928462656'
}],


// No Param READ
getFirstCustomer = () => {
console.log(this);
return customers[0];
};
console.log("First Customer "+JSON.stringify(getFirstCustomer())); // 'Dave'


//1 Param SEARCH
getNthCustomer = index=>{
if( index>customers.length)
{
return  "No such thing";
}
else{
return customers[index];
}
};
console.log("Nth Customer is " +JSON.stringify(getNthCustomer(1)));


//2params ADD
addCustomer = (name, contact)=> customers.push({
'name': name,
'contact':contact
});
addCustomer('Hitesh','8888813275');
console.log("Added Customer "+JSON.stringify(customers));


//2 param UPDATE
updateCustomerName = (index, newName)=>{customers[index].name= newName};
updateCustomerName(customers.length-1,"HiteshSahu");
console.log("Updated Customer "+JSON.stringify(customers));


//1 param DELETE
removeCustomer = (customerToRemove) => customers.pop(customerToRemove);
removeCustomer(getFirstCustomer());
console.log("Removed Customer "+JSON.stringify(customers));

箭头功能:

在 javascript 中,=>是箭头函数表达式的符号。箭头函数表达式没有自己的 this绑定,因此不能用作构造函数。例如:

var words = 'hi from outside object';


let obj = {
words: 'hi from inside object',
talk1: () => {console.log(this.words)},
talk2: function () {console.log(this.words)}
}


obj.talk1();  // doesn't have its own this binding, this === window
obj.talk2();  // does have its own this binding, this is obj

使用箭头函数的规则:

  • 如果有一个 没错参数,可以省略该参数的括号。
  • 如果返回一个表达式并在同一行上执行此操作,则可以省略 {}return语句

例如:

let times2 = val => val * 2;
// It is on the same line and returns an expression therefore the {} are ommited and the expression returns implictly
// there also is only one argument, therefore the parentheses around the argument are omitted


console.log(times2(3));

用符号(= >)表示的箭头函数可以帮助您创建匿名函数和方法。这将导致更短的语法。例如,下面是一个简单的“ Add”函数,它返回两个数相加的结果。

function Add(num1 , num2 ){
return num1 + num2;
}

通过使用“ Arrow”语法,上面的函数变得更短,如下所示。

enter image description here

上面的代码有两部分,如上图所示:-

输入: ー本节指定匿名函数的输入参数。

逻辑: ー这一节在符号“ = >”之后,这一节有实际函数的逻辑。

许多开发人员认为,箭头函数使您的语法更短、更简单,从而使您的代码具有可读性。

如果你相信上面的句子,那么我向你保证这是一个神话。如果你认为一个正确编写的函数的名称比在一行使用箭头符号创建的神秘函数更具可读性。

箭头函数的主要用途是确保代码在 来电者的上下文。

请参阅下面的代码,其中定义了一个全局变量“ context”,这个全局变量被访问到一个函数“ Some OtherMethod”中,该函数从其他方法“ Some Method”中调用。

这个“ Some Method”具有局部的“ context”变量。现在,因为从“ Some Method”调用“ Some Other Method”,所以我们希望它显示“ local context”,但是它显示“ global context”。

var context = “global context”;


function SomeOtherMethod(){
alert(this.context);
}


function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}


var instance = new SomeMethod();

但是如果使用 Arrow 函数替换调用,它将显示“本地上下文”。

var context = "global context";


function SomeMethod(){
this.context = "local context";
SomeOtherMethod = () => {
alert(this.context);
}
SomeOtherMethod();
}
var instance = new SomeMethod();

我建议您阅读这个链接(JavaScript 中的箭头函数) ,它解释了 javascript 上下文的所有场景,以及在哪些场景中调用者上下文不受尊重。

您还可以看到 在这个 youtube 视频箭头函数与 javascript的演示,它实际上演示了 Context 这个术语。

对其他答案不满意。2019/3/13年度最受欢迎的答案事实上是错误的。

=>的简短版本意味着它是一个快捷方式,编写一个函数 还有来将它绑定到当前的 this

const foo = a => a * 2;

实际上是

const foo = function(a) { return a * 2; }.bind(this);

你可以看到所有被缩短的东西。我们不需要 function,也不需要 return.bind(this),甚至不需要括号或括号

箭头函数的一个稍微长一点的例子可能是

const foo = (width, height) => {
const area = width * height;
return area;
};

显示如果我们想要函数有多个参数,我们需要括号,如果我们想要写多个表达式,我们需要大括号和一个明确的 return

了解 .bind部分很重要,这是一个很大的话题。它与 this在 JavaScript 中的含义有关。

ALL 函数有一个名为 this的隐式参数。调用函数时 this的设置方式取决于该函数的调用方式。

拿着

function foo() { console.log(this); }

如果你通常这么叫的话

function foo() { console.log(this); }
foo();

this将是全局对象。

如果你在严格模式下

`use strict`;
function foo() { console.log(this); }
foo();


// or


function foo() {
`use strict`;
console.log(this);
}
foo();

它将是 undefined

您可以使用 callapply直接设置 this

function foo(msg) { console.log(msg, this); }


const obj1 = {abc: 123}
const obj2 = {def: 456}


foo.call(obj1, 'hello');  // prints Hello {abc: 123}
foo.apply(obj2, ['hi']);  // prints Hi {def: 456}

还可以使用点运算符 .隐式设置 this

function foo(msg) { console.log(msg, this); }
const obj = {
abc: 123,
bar: foo,
}
obj.bar('Hola');  // prints Hola {abc:123, bar: f}

当您希望将函数用作回调或侦听器时,会出现一个问题。创建类并希望指派一个函数作为访问该类实例的回调函数。

class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);  // won't work
});
}
}

上面的代码将不起作用,因为当元素触发事件并调用函数时,this值将不是类的实例。

解决这个问题的一种常见方法是使用 .bind

class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click', function() {
console.log(this.name);
}.bind(this); // <=========== ADDED! ===========
}
}

因为箭头语法和我们写的是一样的

class ShowName {
constructor(name, elem) {
this.name = name;
elem.addEventListener('click',() => {
console.log(this.name);
});
}
}

如果 bind不存在,你基本上可以像这样制作你自己的

function bind(functionToBind, valueToUseForThis) {
return function(...args) {
functionToBind.call(valueToUseForThis, ...args);
};
}

在旧的 JavaScript 中,如果没有扩展运算符,那么它将是

function bind(functionToBind, valueToUseForThis) {
return function() {
functionToBind.apply(valueToUseForThis, arguments);
};
}

理解这段代码需要 对闭包的理解,但是简短的版本是 bind,这样就产生了一个新函数,它总是使用绑定到它的 this值来调用原来的函数。箭头函数做同样的事情,因为它们是 bind(this)的快捷方式

正如其他人所说,常规(传统)函数使用来自调用函数 (例如,一个按钮被点击)的对象的 this。相反,箭头函数使用来自定义函数的对象的 this

考虑两个几乎相同的函数:

regular = function() {
' Identical Part Here;
}




arrow = () => {
' Identical Part Here;
}

下面的代码片段展示了 this代表的每个函数之间的根本区别。正常功能输出 [object HTMLButtonElement],而 箭头功能输出 [object Window]

<html>
<button id="btn1">Regular: `this` comes from "this button"</button>
<br><br>
<button id="btn2">Arrow: `this` comes from object that defines the function</button>
<p id="res"/>


<script>
regular = function() {
document.getElementById("res").innerHTML = this;
}


arrow = () => {
document.getElementById("res").innerHTML = this;
}


document.getElementById("btn1").addEventListener("click", regular);
document.getElementById("btn2").addEventListener("click", arrow);
</script>
</html>

JavaScript 箭头函数大致相当于 python 中的 lambda 函数或 Ruby 中的块。这些是匿名函数具有自己独特的语法和 在其封闭范围内运作。这意味着它们没有自己的“ This”,而是从直接的封闭函数访问。

来自 ECMA 标准:

ArrowFunction 不为 争论定义本地绑定, 超级 这个新目标。 ArrowFunction 中任何对参数 super、 this 或 new.target 的引用都必须解析为 在词法封闭的环境中绑定。通常这将是 立即封闭函数的函数环境。

通常你可以读到“一个箭头函数表达式是一个传统函数表达式的简洁替代品”,这是不正确的。它们的行为与传统函数不同。

语法

// Traditional Function
// Create their own scope inside the function
function (a){
return a + 100;
}


// Arrow Function
// Do NOT create their own scope
// (Each step along the way is a valid "arrow function")


// 1. Remove the word "function" and place arrow between the argument and opening body bracket
(a) => {
return a + 100;
}


// 2. Remove the body braces and word "return" -- the return is implied.
(a) => a + 100;


// 3. Remove the argument parentheses (only valid with exactly one argument)
a => a + 100;