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

代码如下:

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

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

    continueSave();
}).then(null, Components.utils.reportError);

当前回答

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

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

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

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

其他回答

这些是箭头函数

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

箭头函数可以在定义函数时去掉function、return和{}。它们是一行程序,类似于Java或Python中的Lambda表达式。

不带参数的示例

const queue = ['Dave', 'Sarah', 'Sharon']; const nextCustomer = () => queue[0] console.log (nextCustomer ());/ /“大卫”

如果需要在同一个箭头函数中执行多条语句,那么在本例中,您需要将队列[0]封装在尖括号{}中。在这种情况下,return语句不能省略。

带有1个参数的示例

const queue = ['Dave', 'Sarah', 'Sharon']; const addCustomer = name => { queue.push(名称); }; addCustomer(“托比”); console.log(队列);// ['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的新箭头函数中,我们可以让它更简洁:

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

关于箭头函数的更多信息可以在这里找到。

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

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

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

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

这被称为箭头函数,是ECMAScript 2015规范的一部分…

Var foo = ['a', 'ab', 'abc']; Var bar = foo。Map (f => f.length); console.log(栏);/ / 1、2、3

比前面的语法更短:

// < es6: Var foo = ['a', 'ab', 'abc']; Var bar = foo.map(函数(f) { 返回f.length; }); console.log(栏);/ / 1、2、3

DEMO

另一件很棒的事情是词汇上的。通常,你会这样做:

函数Foo() { This.name = name; 这一点。计数= 0; this.startCounting (); } Foo.prototype.startCounting = function() { Var self = this; setInterval(函数(){ //这是窗口,而不是Foo{},因为你可能期望 console.log(这个);//[对象窗口] //这就是为什么我们在setInterval()之前重新分配给self console.log (self.count); self.count + +; }, 1000) } 新Foo ();

但可以用箭头这样重写:

函数Foo() { This.name = name; 这一点。计数= 0; this.startCounting (); } Foo.prototype.startCounting = function() { setInterval(() => { console.log(这个);// [object对象] console.log (this.count);// 1, 2, 3 this.count + +; }, 1000) } 新Foo ();

DEMO

中数 更多关于语法

这里有一个关于何时使用箭头函数的很好的答案。

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

但这类函数与普通函数不同:

They bind the this value. As explained by the spec, An ArrowFunction does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function. Even though an ArrowFunction may contain references to super, the function object created in step 4 is not made into a method by performing MakeMethod. An ArrowFunction that references super is always contained within a non-ArrowFunction and the necessary state to implement super is accessible via the scope that is captured by the function object of the ArrowFunction. They are non-constructors. That means they have no [[Construct]] internal method, and thus can't be instantiated, e.g. var f = a => a; f(123); // 123 new f(); // TypeError: f is not a constructor

正如其他人所述,常规(传统)函数使用调用该函数的对象的this(例如,被单击的按钮)。相反,箭头函数使用定义该函数的对象中的this。

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

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


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

下面的代码段演示了这对于每个函数所代表的内容之间的基本区别。常规函数输出[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>