Heim > Web-Frontend > js-Tutorial > Hauptteil

Was Sie über JavaScript-Pfeilfunktionen und Restparameter wissen müssen

WBOY
Freigeben: 2021-12-21 18:35:08
nach vorne
2148 Leute haben es durchsucht

Dieser Artikel vermittelt Ihnen relevantes Wissen über Pfeilfunktionen und verbleibende Parameter in JavaScript. Ich hoffe, dass er für alle hilfreich ist.

Was Sie über JavaScript-Pfeilfunktionen und Restparameter wissen müssen

1. Was ist eine Pfeilfunktion?

Die Syntax des Pfeilfunktionsausdrucks ist präziser als der Funktionsausdruck, bei dem es sich um eine vereinfachte Form der Funktion handelt.
Seine Schreibmethode:

() => {};   // 可以用来写一个匿名函数
Nach dem Login kopieren

Seine Struktur:

const / let 函数名 参数 => 函数体
Nach dem Login kopieren

Zum Beispiel gibt es einen allgemeinen Funktionsausdruck

let add = function(x, y) {
	return x + y;};
Nach dem Login kopieren

, der mit der Pfeilfunktion geschrieben werden kann:

let add = (x, y) => {
	return x + y;};
Nach dem Login kopieren

2. Die Abkürzung der Pfeilfunktion

  • Einzelner Parameter
// 对于单个参数,我们可以省略外面的圆括号let addOne = x => {
	return x + 1;}
Nach dem Login kopieren
  • Einzeiliger Funktionskörper
// 对于单行返回函数体,可以同时省略 {} 和  returnlet add (x, y) => x + y;
Nach dem Login kopieren
  • Einzeiliges Objekt
// 对于返回单行对象,在外面加个 ()let add (x, y) => ({
	value: x + y;});
Nach dem Login kopieren

3. Grundlagen von Pfeilfunktionen

Die Pfeilfunktion hat dies nicht, sie sucht entsprechend in der äußeren Ebene zur Bereichskette.
Zum Beispiel:

var A = 1;let fun = {
    A: 2,
    printA: () => {
        console.log(this.A);
    },
    printAA: function() {
        let print = () => {
            console.log(this.A);
        }
        print();
    }};fun.printA();  // 1fun.printAA();  // 2
Nach dem Login kopieren

Rufen Sie printA auf, was this.A ausgibt. Da die Pfeilfunktion kein this hat, sucht sie danach in der äußeren Schicht Die äußere Schicht macht Spaß. Hier wird fun.printA() im globalen Bereich aufgerufen, sodass das äußere this auf window verweist, da vorher A = 1 definiert ist mit var, also ist die Ausgabe 1. printA,里面是输出 this.A,由于箭头函数没有 this,所以在外层寻找,外层是 fun。在这里,fun.printA()是在全局作用域中调用的,所以外层的 this 指向的是 window,由于之前用 var 定义了一个 A = 1,所以输出的是 1。

调用 printAA,在里面调用了 print(),输出 this.A,看 print 这个函数,是个箭头函数,他没有 this,所以找外层,它的外层是 printAA,它是由 fun 调用的,所以它的 this 指向 fun,所以输出 fun 中定义的 A,也就是 2。


4. 箭头函数不适用的场景

  1. 作为构造函数

实例化构造函数之后,它的 this 指向实例化的对像,而箭头函数没有 this,所以它不能用来做构造函数。

  1. 需要 this 指向调用对象的时候

  2. 需要使用 arguments 的时候

箭头函数中没有 arguments,可以使用剩余参数来存参数。


5. 剩余参数

5.1) 什么是剩余参数 ?

举个例子:

let add = (x, y, z, ...args) => {
	console.log(x, y, z, args);};
Nach dem Login kopieren

args 就是剩余参数。
剩余参数是个数组,它即使没有值,也是以一个空数组形式存在。
比如:

let add = (x, y, z, ...args) => {
    console.log(x, y, z, args);}add(1, 2, 3);
Nach dem Login kopieren

Was Sie über JavaScript-Pfeilfunktionen und Restparameter wissen müssen
x, y, z 对应参数 1, 2, 3,由于剩余参数没有值,所以空数组形式存在。

5.2) 作用

由于箭头函数没有 arguments,所以我们可以使用剩余参数替代 arguments
Rufen Sie printAA auf, rufen Sie print() auf und geben Sie this.A aus. Siehe die Funktion print. ist eine Pfeilfunktion. Sie verfügt nicht über this, also suchen Sie nach der äußeren Ebene printAA, die von fun aufgerufen wird , also zeigt this auf fun, sodass das in fun definierte A ausgegeben wird, das 2 ist.

Was Sie über JavaScript-Pfeilfunktionen und Restparameter wissen müssen4. Szenarien, in denen Pfeilfunktionen nicht anwendbar sind

    Als Konstruktor

    Nach der Instanziierung des Konstruktors zeigt dies auf das instanziierte Objekt, die Pfeilfunktion verfügt jedoch nicht über diese Funktion Kann nicht als Konstruktor verwendet werden.
    Wenn Sie dies benötigen, um auf das aufrufende Objekt zu verweisen
    Wenn Sie Argumente verwenden müssen

    Die Pfeilfunktion enthält keine Argumente, Sie können sie verwenden die restlichen Parameter zum Speichern von Parametern.

    5. Restparameter🎜🎜5.1) Was sind Restparameter? 🎜🎜Zum Beispiel: 🎜
    const print = (...args) => {
        console.log(args);};print(1, 2);
    Nach dem Login kopieren
    🎜args sind die restlichen Parameter. 🎜 Der verbleibende Parameter ist ein Array. Auch wenn er keinen Wert hat, liegt er in Form eines leeren Arrays vor. 🎜 Zum Beispiel: 🎜
    let add = (...args) => {};
    Nach dem Login kopieren
    🎜Bildbeschreibung hier einfügen🎜 x , y, z entsprechen den Parametern 1, 2 und 3. Da die übrigen Parameter keine Werte haben, liegen sie in Form leerer Arrays vor. 5.2) Funktion 🎜🎜🎜5.3 ) Hinweise🎜🎜🎜In Pfeilfunktionen können die Klammern nicht weggelassen werden, auch wenn nur noch ein Parameter übrig ist.🎜🎜rrreee🎜🎜Der verbleibende Parameter kann nur der letzte Parameter sein und es dürfen keine weiteren Parameter danach folgen andernfalls wird ein Fehler gemeldet🎜🎜🎜【 Verwandte Empfehlungen: 🎜Javascript-Lerntutorial🎜🎜】🎜🎜

    Das obige ist der detaillierte Inhalt vonWas Sie über JavaScript-Pfeilfunktionen und Restparameter wissen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

    Verwandte Etiketten:
    Quelle:csdn.net
    Erklärung dieser Website
    Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
    Beliebte Tutorials
    Mehr>
    Neueste Downloads
    Mehr>
    Web-Effekte
    Quellcode der Website
    Website-Materialien
    Frontend-Vorlage