Saya tahu bahwa >=operator berarti lebih dari atau sama dengan, tetapi saya sudah melihatnya=> di beberapa kode sumber. Apa arti dari operator itu?

Berikut kodenya:

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

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

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

Apa itu

Ini adalah fungsi panah. Fungsi panah adalah sintaks pendek, yang diperkenalkan oleh ECMAscript 6, yang dapat digunakan mirip dengan cara Anda akan menggunakan ekspresi fungsi. Dengan kata lain, Anda sering dapat menggunakannya sebagai ganti ekspresi function (foo) {...}. Tetapi mereka memiliki beberapa perbedaan penting. Misalnya, mereka tidak mengikat nilai mereka sendirithis (lihat di bawah untuk diskusi).

Fungsi panah adalah bagian dari spesifikasi ECMAscript 6. Mereka belum didukung di semua browser, tetapi mereka sebagian atau sepenuhnya didukung di Node v. 4.0+ dan di sebagian besar browser modern yang digunakan pada 2018. (Saya sudah memasukkan sebagian daftar browser yang mendukung di bawah).

Anda dapat membaca lebih lanjut di dokumentasi Mozilla tentang fungsi panah .

Dari dokumentasi Mozilla:

Ekspresi panah fungsi (juga dikenal sebagai fungsi panah lemak) memiliki sintaks yang lebih pendek dibandingkan dengan ekspresi fungsi dan leksikal mengikat thisnilai (tidak mengikat sendiri this, arguments, super, atau new.target). Fungsi panah selalu anonim. Ekspresi fungsi ini paling cocok untuk fungsi non-metode dan tidak dapat digunakan sebagai konstruktor.

Catatan tentang Bagaimana this Bekerja pada Fungsi Panah

Salah satu fitur paling praktis dari fungsi panah terkubur dalam teks di atas:

Fungsi panah ... secara leksikal mengikat thisnilai (tidak mengikat sendiri this...)

Apa artinya ini secara sederhana adalah bahwa fungsi panah mempertahankan thisnilai dari konteksnya dan tidak memiliki sendiri this. Fungsi tradisional dapat mengikat nilainya sendiri this, tergantung pada bagaimana ia didefinisikan dan dipanggil. Ini membutuhkan banyak senam seperti self = this;, dll., Untuk mengakses atau memanipulasi thisdari satu fungsi di dalam fungsi lainnya. Untuk info lebih lanjut tentang topik ini, lihat penjelasan dan contoh dalam dokumentasi Mozilla .

Kode Contoh

Contoh (juga dari dokumen):

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]

Catatan tentang Kompatibilitas

Anda dapat menggunakan fungsi panah di Node, tetapi dukungan browser tidak tepat.

Dukungan browser untuk fungsi ini telah sedikit meningkat, tetapi masih belum cukup luas untuk sebagian besar penggunaan berbasis browser. Pada 12 Desember 2017, didukung dalam versi saat ini:

• Chrome (v. 45+)
• Firefox (v. 22+)
• Edge (v. 12+)
• Opera (v. 32+)
• Browser Android (v. 47+)
• Opera Mobile (v. 33+)
• Chrome untuk Android (v. 47+)
• Firefox untuk Android (v. 44+)
• Safari (v. 10+)
• iOS Safari (v. 10.2+)
• Samsung Internet (v. 5+)
• Baidu Browser (v. 7.12+)

Tidak didukung di:

• IE (hingga v. 11)
• Opera Mini (hingga v. 8.0)
• Browser Blackberry (melalui v. 10)
• IE Mobile (hingga v. 11)
• UC Browser untuk Android (melalui v. 11.4)
• QQ (sampai v. 1.2)

Anda dapat menemukan lebih banyak informasi (dan lebih terkini) di CanIUse.com (tidak ada afiliasi).

Itu dikenal sebagai Fungsi Panah, bagian dari spesifikasi ECMAScript 2015 ...

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

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

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

Sintaks yang lebih pendek dari sebelumnya:

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

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

DEMO

Hal luar biasa lainnya adalah leksikal this ... Biasanya, Anda akan melakukan sesuatu seperti:

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();

Tapi itu bisa ditulis ulang dengan panah seperti ini:

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

MDN
Lebih lanjut tentang Sintaks

Untuk lebih lanjut, inilah jawaban yang cukup bagus untuk kapan menggunakan fungsi panah.

Ini akan menjadi "ekspresi fungsi panah" yang diperkenalkan dalam ECMAScript 6.

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

Untuk tujuan historis (jika halaman wiki berubah nanti), itu adalah:

Ekspresi fungsi panah memiliki sintaks yang lebih pendek dibandingkan dengan ekspresi fungsi dan secara leksikal mengikat nilai ini. Fungsi panah selalu anonim.

Ini adalah Fungsi Panah

Juga dikenal sebagai Fat Arrow Functions . Mereka adalah cara yang bersih dan ringkas untuk menulis ekspresi fungsi, misalnya function() {}.

Fungsi Panah dapat menghapus kebutuhan function, returndan{} saat mendefinisikan fungsi. Mereka adalah satu-liner, mirip dengan Ekspresi Lambda di Jawa atau Python.

Contoh tanpa parameter

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

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

Jika beberapa pernyataan perlu dibuat dalam Fungsi Panah yang sama, Anda harus membungkus, dalam contoh ini, queue[0]dalam kurung kurley{} . Dalam hal ini, pernyataan pengembalian tidak dapat dihilangkan.

Contoh dengan 1 parameter

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

addCustomer('Toby');

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

Anda bisa menghilangkan {} dari yang di atas.

Ketika ada parameter tunggal, tanda kurung () sekitar parameter bisa dihilangkan.

Contoh dengan beberapa parameter

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

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

Contoh yang bermanfaat

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

Jika kami ingin mendapatkan harga setiap buah dalam satu array, di ES5 kita bisa melakukan:

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

Dalam ES6 dengan Fungsi Panah baru, kita dapat membuat ini lebih ringkas:

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

Informasi tambahan tentang Fungsi Panah dapat ditemukan di sini .

Kompatibilitas Browser

• IE: Belum Didukung
• Edge: 12+ (Semua Versi)
• Firefox: 22+
• Chrome: 45+
• Safari: 10+
• iOS Safari: 10.2+
• Browser Android: 56+

Informasi tambahan terkini dapat ditemukan pada kompatibilitas browser di sini

hanya dengan menambahkan contoh lain dari apa yang bisa dilakukan lambda tanpa menggunakan peta:

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

Seperti yang dikatakan orang lain, ini adalah sintaks baru untuk membuat fungsi.

Namun, fungsi semacam ini berbeda dari yang normal:

• Mereka mengikat thisnilai. Seperti yang dijelaskan oleh spec ,

  Sebuah ArrowFunction tidak mendefinisikan binding lokal untuk arguments, super, this, atau new.target. Referensi untuk arguments, super, this, atau new.targetdalam suatu ArrowFunction harus memutuskan untuk mengikat di lingkungan leksikal melampirkan. Biasanya ini akan menjadi Function Function dari fungsi yang langsung melingkupi.

  Meskipun ArrowFunction dapat berisi referensi super, objek fungsi yang dibuat pada langkah 4 tidak dibuat menjadi metode dengan melakukan MakeMethod . Sebuah ArrowFunction bahwa referensi super selalu terkandung dalam non ArrowFunction dan negara diperlukan untuk melaksanakan superdiakses melalui lingkup yang ditangkap oleh objek fungsi ArrowFunction .

• Mereka bukan konstruktor.

  Itu berarti mereka tidak memiliki [internal] metode internal, dan dengan demikian tidak dapat dipakai, misalnya

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

Saya sudah membaca, ini adalah simbol Arrow FunctionsdiES6

ini

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

menggunakan Arrow Function dapat ditulis sebagai

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

MDN Documents

Menambahkan contoh CRUD sederhana dengan Arrowfunction

 //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)); 

Tidak puas dengan jawaban yang lain. Jawaban suara teratas pada 2019/3/13 secara faktual salah.

Versi singkat dari =>artinya adalah pintasan yang menulis fungsi DAN untuk mengikatnya ke arusthis

const foo = a => a * 2;

Secara efektif merupakan jalan pintas untuk

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

Anda dapat melihat semua hal yang dipersingkat. Kami tidak butuh function, juga returntidak.bind(this) atau bahkan kawat gigi atau tanda kurung

Contoh fungsi panah yang sedikit lebih panjang mungkin

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

Menunjukkan bahwa jika kita ingin banyak argumen ke fungsi kita perlu tanda kurung dan jika kita ingin menulis lebih dari satu ekspresi kita perlu tanda kurung kurawal dan eksplisit return .

Sangat penting untuk memahami .bindbagian itu dan ini adalah topik besar. Ini ada hubungannya dengan apa thisartinya dalam JavaScript.

SEMUA fungsi memiliki parameter implisit yang disebut this. Bagaimanathis diatur ketika memanggil suatu fungsi tergantung pada bagaimana fungsi itu dipanggil.

Mengambil

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

Jika Anda memanggilnya dengan normal

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

this akan menjadi objek global.

Jika Anda dalam mode ketat

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

// or

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

Itu akan terjadi undefined

Anda dapat mengatur thissecara langsung menggunakan callatauapply

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}

Anda juga dapat mengatur thissecara implisit menggunakan operator titik.

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

Masalah muncul ketika Anda ingin menggunakan fungsi sebagai panggilan balik atau pendengar. Anda membuat kelas dan ingin menetapkan fungsi sebagai panggilan balik yang mengakses instance kelas.

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

Kode di atas tidak akan berfungsi karena ketika elemen menjalankan event dan memanggil fungsi, thisnilainya tidak akan menjadi instance dari kelas.

Salah satu cara umum untuk memecahkan masalah itu adalah menggunakan .bind

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

Karena sintaks panah melakukan hal yang sama yang dapat kita tulis

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

bindsecara efektif membuat fungsi baru . Jika bindtidak ada, pada dasarnya Anda bisa membuatnya sendiri seperti ini

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

Dalam JavaScript yang lebih lama tanpa operator spread

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

Memahami kode itu membutuhkan pemahaman tentang penutupan tetapi versi singkatnya bindmembuat fungsi baru yang selalu memanggil fungsi asli dengan thisnilai yang terikat padanya. fungsi panah melakukan hal yang sama karena mereka adalah jalan pintas untukbind(this)

Seperti semua jawaban lain sudah katakan, itu bagian dari sintaks fungsi panah ES2015. Lebih khusus, itu bukan operator, itu punctuator tanda yang memisahkan parameter dari tubuh: ArrowFunction : ArrowParameters => ConciseBody. Misalnya (params) => { /* body */ }.

ES6 Fungsi panah:

Dalam javascript =>adalah simbol ekspresi fungsi panah. Ekspresi fungsi panah tidak memiliki thisikatan sendiri dan oleh karena itu tidak dapat digunakan sebagai fungsi konstruktor. sebagai contoh:

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

Aturan menggunakan fungsi panah:

• Jika ada persis satu argumen Anda dapat menghilangkan tanda kurung argumen.
• Jika Anda mengembalikan ekspresi dan melakukan ini pada baris yang sama Anda bisa menghilangkan {}dan returnpernyataan itu

Sebagai contoh:

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));

Fungsi panah yang dilambangkan dengan simbol (=>) membantu Anda membuat fungsi dan metode anonim. Itu mengarah ke sintaks yang lebih pendek. Misalnya, di bawah ini adalah fungsi "Tambah" sederhana yang mengembalikan penambahan dua angka.

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

Fungsi di atas menjadi lebih pendek dengan menggunakan sintaks "Panah" seperti yang ditunjukkan di bawah ini.

Kode di atas memiliki dua bagian seperti yang ditunjukkan pada diagram di atas: -

Input: - Bagian ini menentukan parameter input ke fungsi anonim.

Logika: - Bagian ini muncul setelah simbol “=>”. Bagian ini memiliki logika fungsi yang sebenarnya.

Banyak pengembang berpikir bahwa fungsi panah membuat sintaks Anda lebih pendek, lebih sederhana dan dengan demikian membuat kode Anda dapat dibaca.

Jika Anda percaya kalimat di atas, maka izinkan saya meyakinkan Anda bahwa itu adalah mitos. Jika Anda berpikir sejenak fungsi yang ditulis dengan nama jauh lebih mudah dibaca daripada fungsi samar yang dibuat dalam satu baris menggunakan simbol panah.

Penggunaan utama fungsi panah adalah untuk memastikan bahwa kode berjalan dalam konteks penelepon.

Lihat kode di bawah ini yang memiliki variabel global "konteks" yang ditentukan, variabel global ini diakses di dalam fungsi "SomeOtherMethod" yang dipanggil dari metode lain "SomeMethod".

"SomeMethod" ini memiliki variabel "konteks" lokal. Sekarang karena "SomeOtherMethod" dipanggil dari "" SomeMethod "kami mengharapkannya menampilkan" konteks lokal ", tetapi menampilkan" konteks global ".

var context = “global context”;

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

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

var instance = new SomeMethod();

Tetapi jika mengganti panggilan dengan menggunakan fungsi Panah itu akan menampilkan "konteks lokal".

var context = "global context";

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

Saya mendorong Anda untuk membaca tautan ini ( Fungsi panah dalam JavaScript ) yang menjelaskan semua skenario konteks javascript dan di mana skenario konteks penelepon tidak dihormati.

Anda juga dapat melihat demonstrasi fungsi Panah dengan javascript di video youtube ini yang secara praktis menunjukkan istilah Konteks.

Seperti yang telah dinyatakan orang lain, fungsi biasa (tradisional) digunakan thisdari objek yang disebut fungsi, (misalnya tombol yang diklik) . Sebagai gantinya, fungsi panah menggunakan thisdari objek yang mendefinisikan fungsi.

Pertimbangkan dua fungsi yang hampir identik:

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


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

Cuplikan di bawah ini menunjukkan perbedaan mendasar antara apa yang thismewakili untuk setiap fungsi. Fungsi reguler menghasilkan [object HTMLButtonElement]sedangkan fungsi panah menghasilkan [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>