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

4, Autoriteit 4%

Dit zou de “pijlfunctie-uitdrukking” zijn die in ECMAScript 6 is geïntroduceerd.

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

Voor historische doeleinden (als de wikipagina later verandert), is dit:

Een pijlfunctie-uitdrukking heeft een kortere syntaxis in vergelijking met functie-uitdrukkingen en bindt de this-waarde lexicaal. Pijlfuncties zijn altijd anoniem.

Antwoord 5, autoriteit 4%

om nog een voorbeeld toe te voegen van wat een lambda kan doen zonder kaart te gebruiken:

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

Antwoord 6, autoriteit 2%

Zoals anderen al hebben gezegd, is het een nieuwe syntaxis om functies te maken.

Dit soort functies verschillen echter van normale:

• Ze binden de waarde this. Zoals uitgelegd door de spec,

  Een ArrowFunctiondefinieert geen lokale bindingen voor arguments,
  super, thisof new.target. Elke verwijzing naar arguments,
  super, thisof new.targetbinnen een ArrowFunctionmoet
  oplossen naar een binding in een lexicaal omsluitende omgeving. Typisch
  dit wordt de functie-omgeving van een onmiddellijk omsluitende
  functie.

  Ook al kan een ArrowFunctionverwijzingen naar superbevatten, de
  Functieobject gemaakt in stap 4 is niet gemaakt in een methode door
  makeemethod . Een arrowcten die referenties super
  is altijd ingesloten in een niet-arrowcten en het noodzakelijke
  Staat om te implementeren superis toegankelijk via de Scope dat is
  vastgelegd door het functie-object van de arrowctionen .

• Zij zijn niet-constructeurs.

  Dat betekent dat ze geen [[construct]] interne methode hebben en dus niet kan worden geïnstantieerd, b.g.

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

7

Ik heb gelezen, dit is een symbool van Arrow Functionsin ES6

Dit

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

Gebruik Arrow FunctionKan worden geschreven als

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

MDN DOCS

Antwoord 8

Eenvoudig CRUD-voorbeeld toevoegen met Pijlfunctie

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

Antwoord 9

Pijlfuncties die worden aangegeven met een symbool (=>) helpen u bij het maken van anonieme functies en methoden. Dat leidt tot een kortere syntaxis. Hieronder is bijvoorbeeld een eenvoudige functie “Toevoegen” die de optelling van twee getallen retourneert.

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

De bovenstaande functie wordt korter door de syntaxis van de “Pijl” te gebruiken, zoals hieronder weergegeven.

Bovenstaande code bestaat uit twee delen zoals weergegeven in het bovenstaande diagram: –

Invoer: — Deze sectie specificeert de invoerparameters voor de anonieme functie.

Logica: — Deze sectie komt na het symbool “=>”. Deze sectie heeft de logica van de eigenlijke functie.

Veel ontwikkelaars denken dat de pijlfunctie je syntaxis korter en eenvoudiger maakt en dus je code leesbaar maakt.

Als je de bovenstaande zin gelooft, laat me je verzekeren dat het een mythe is. Als je een moment denkt dat een correct geschreven functie met naam veel leesbaar is dan cryptische functies die in één regel worden gemaakt met behulp van een pijlsymbool.

Het hoofdgebruik van de pijlfunctie is om ervoor te zorgen dat code wordt uitgevoerd in de
bellers context.

Zie de onderstaande code waarin een globale variabele “context” gedefinieerd is, deze globale variabele is toegankelijk binnen een functie “eenothermethod” die wordt genoemd van andere methode “SOMEMETHOD”.

Deze “SOMEMETHOD” heeft lokale “context” -variabele. Nu omdat “Syothermethod” wordt genoemd van “” SOMEMETHOD “, verwachten we dat het” Lokale context “weergeven, maar het weergeeft” Global Context “.

var context = “global context”;
function SomeOtherMethod(){
alert(this.context);
}
function SomeMethod(){
this.context = “local context”;
SomeOtherMethod();
}
var instance = new SomeMethod();

Maar als u de oproep vervangt door de pijl-functie te gebruiken, wordt het “Lokale context” weergegeven.

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

Ik zou u aanmoedigen om deze link te lezen (pijl-functie in Javascript ) die alle scenario’s van JavaScript-context uitleggen en waarin scenario’s de context van de bellers niet worden nageleefd.

Je kunt ook de demonstratie van pijlfunctie met javascript bekijken in deze YouTube-videowat praktisch de term Context demonstreert.

Antwoord 10

Zoals alle andere antwoorden al hebben gezegd, maakt het deel uit van de syntaxis van de pijlfunctie van ES2015. Meer specifiek, het is geen operator, het is een token met leestekens dat de parameters van de body scheidt: ArrowFunction : ArrowParameters => ConciseBody. bijv. (params) => { /* body */ }.

Antwoord 11

Zoals anderen al hebben aangegeven, gebruiken reguliere (traditionele) functies thisvan het object dat de functie heeft aangeroepen, (bijvoorbeeld een knop waarop is geklikt). In plaats daarvan gebruiken pijlfuncties thisvan het object dat de functie definieert.

Beschouw twee bijna identieke functies:

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

Het onderstaande fragment laat het fundamentele verschil zien tussen wat thisvoor elke functie vertegenwoordigt. De gewone functievoert [object HTMLButtonElement]uit terwijl de pijlfunctie[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>

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

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