Heim > Web-Frontend > js-Tutorial > Detaillierte Interpretation des JavaScript-Pfeilfunktionsgenerators Date JSON

Detaillierte Interpretation des JavaScript-Pfeilfunktionsgenerators Date JSON

亚连
Freigeben: 2018-05-21 11:58:47
Original
1805 Leute haben es durchsucht

Jetzt werde ich Ihnen eine kurze Analyse des JavaScript-Pfeilfunktionsgenerators Date JSON geben. Lassen Sie mich es jetzt mit Ihnen teilen und es allen als Referenz geben.

Der ES6-Standard fügt eine neue Funktion hinzu: Pfeilfunktion.

    x => x *x
    上面的箭头相当于:
      function (x){ 
          return x*x;
      }
Nach dem Login kopieren

Pfeilfunktionen entsprechen anonymen Funktionen und vereinfachen die Funktionsdefinition. Eine wie die obige enthält nur einen Ausdruck,

sogar { ... } und return werden weggelassen. Es gibt eine andere Methode, die mehrere Anweisungen enthalten kann. In diesem Fall können { ... } und return nicht weggelassen werden:

        x =>{ 
          if(x > 0){ 
            return x * x;
          }else{ 
            return -x *x;
          }
        }
Nach dem Login kopieren

Wenn kein Parameter vorhanden ist, muss er in Klammern eingeschlossen werden ():

    // 两个参数
      (x,y) => x*x + y *y
    // 无参数;
      () =>3.14
    // 可变参数
      (x,y,...rest) =>{ 
        var i, sum = x +y;
        for(i=0;i<rest.length;i++){ 
          sum += rest[i];
        }
      return sum;
    }
Nach dem Login kopieren

this

Jetzt legt die Pfeilfunktion die Ausrichtung von this vollständig fest. Dies zeigt immer auf den lexikalischen Bereich, der der äußere Aufrufer ist obj:

    var obj = { 
        birth:1990,
        getAge:function(){ 
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj 对象。
        return fn();
        }
    }
    obj.getAge(); // 25
Nach dem Login kopieren

Wenn Pfeilfunktionen verwendet werden, ist die bisherige Hack-Schreibmethode

var that = this;
Nach dem Login kopieren

nicht mehr erforderlich.

Da dies in der Pfeilfunktion abhängig davon gebunden wurde, ob es einen Gültigkeitsbereich hat oder nicht, kann dies beim Aufruf der Pfeilfunktion mit call() oder apply() nicht

gebunden werden ist Der erste übergebene Parameter wird ignoriert.

    var obj = { 
        birth:1990,
        getAge:function(year){ 
          var b = this.burth; // 1990
          var fn = (y) =>y-this.birth; // this.birth 仍是1990
          return fn.call({birth:2000},year);
      }
    };
    obj.getAge(2015); // 25
Nach dem Login kopieren

generator

generator (generator) ist ein neuer Datentyp, der durch den ES6-Standard eingeführt wurde. Ein Generator sieht aus wie eine Funktion, kann aber mehrmals zurückkehren.

    function* foo(x){ 
        yield x +1;
        yieldx + 2;
        return x +3;
    }
Nach dem Login kopieren

Der Unterschied zwischen Generator und Funktion besteht darin, dass der Generator durch die Funktion* definiert wird (beachten Sie das zusätzliche *-Zeichen) und Sie zusätzlich zur Return-Anweisung auch yield verwenden können, um mehrmals zurückzugeben.

Die Funktion kann nur einmal zurückkehren, daher gibt Tourmaline ein Array zurück. Wenn sie jedoch durch einen Generator ersetzt wird, kann sie jeweils eine Zahl und mehrere Male zurückgeben.

    function* fib(max){ 
        var t,
        a = 0,
        b=1,
        n=1;
        while (n < max){ 
          yield a;
          t = a +b;
          a = b;
          b = t;
          n++;
        }
        return a; 
      }
Nach dem Login kopieren

Versuchen Sie es direkt aufzurufen:

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
Nach dem Login kopieren

Der direkte Aufruf eines Generators unterscheidet sich vom Aufruf einer Funktion. fib(5) erstellt nur ein Generatorobjekt und führt es noch nicht aus.

Es gibt zwei Möglichkeiten, das Generatorobjekt aufzurufen. Eine besteht darin, die next()-Methode des Generatorobjekts kontinuierlich aufzurufen:

    var f = fib(5);
    f.next(); // {value: 0, done: false}
    f.next(); // {value: 1, done: false}
    f.next(); // {value: 1, done: false}
    f.next(); // {value: 2, done: false}
    f.next(); // {value: 3, done: true}
Nach dem Login kopieren

Date

In JavaScript werden Date-Objekte verwendet, um Datums- und Uhrzeitangaben darzustellen.

Um die aktuelle Systemzeit zu erhalten, verwenden Sie:

    var now = new Date();
    now; //// Wed Jun 24 2015 19:49:22 GMT+0800 (CST)
    now.getFullYear(); //2015,年份
    now.getMonth(); // 5,月份,注意月份范围为0~11,5表示六月
    now.getDate();// 24 ,表示24 号
    now.getHours(); // 3,表示星期三
    now.getMinutes(); // 19 ,24小时制
    now.getSeconds(); // 22,秒
    now.getMilliseconds(); //875 毫秒
    now.getTime(); // 1435146562875, 以number形式表示的时间戳
    如果要创建一个执行日期和时间的Date对象,可以用:
    var d = new Date(2015,5,19,20,15,30,123);
    d;// Fri Jun 19 2015 20:15:30 GMT+0800 (CST)
Nach dem Login kopieren

JSON

JSON ist die Abkürzung für JavaScript Object Notation. Das ist ein Datenaustauschformat.

In JSON gibt es nur wenige Datentypen:

1, Zahl: Es ist genau das Gleiche wie die Zahl von JavaScript.

2, Boolescher Wert: Es ist JavaScript wahr oder false;

3, String: Es ist der String von JavaScript;

4, null: Es ist der Nullpunkt von JavaScript; Array-Darstellung von JavaScript—— [];

6,object: Es ist die {...}-Darstellung von JavaScript.

SON schreibt außerdem vor, dass der Zeichensatz UTF-8 sein muss, sodass die Darstellung mehrerer Sprachen kein Problem darstellt. Für eine einheitliche Analyse müssen JSON-Strings doppelte Anführungszeichen „“ verwenden, und Objektschlüssel müssen ebenfalls doppelte Anführungszeichen „“ verwenden.

Serialisierung

var guagua = {
name: &#39;小明&#39;,
age: 14,
gender: true,
height: 1.65,
grade: null,
&#39;middle-school&#39;: &#39;\"W3C\" Middle School&#39;,
 skills: [&#39;JavaScript&#39;, &#39;Java&#39;, &#39;Python&#39;, &#39;Lisp&#39;]
};
 JSON.stringify(xiaoming); // &#39;{"name":"小明","age":14,"gender":true,"height":1.65,"grade":null,"

middle-school":"\"W3C\" Middle School","skills":  ["JavaScript","Java","Python","Lisp"]}&#39;
Nach dem Login kopieren
Ergebnis:

  {
"name": "小明",
"age": 14,
"gender": true,
"height": 1.65,
"grade": null,
"middle-school": "\"W3C\" Middle School",
"skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
  ]
  }
Nach dem Login kopieren

Der zweite Parameter wird verwendet, um zu steuern, wie der Schlüsselwert des Objekts gefiltert wird, wenn wir nur wollen Zur Ausgabe können die angegebenen Attribute an das Array übergeben werden:

JSON.stringify(xiaoming, ['name', 'skills'], ' ');

Ergebnis:

{
  "name": "guagua",
  "skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
]
  }
Nach dem Login kopieren

Sie können auch eine Funktion übergeben, sodass jedes Schlüssel-Wert-Paar des Objekts zuerst von der Funktion verarbeitet wird:

function convert(key, value) {
if (typeof value === &#39;string&#39;) {
  return value.toUpperCase();
}
  return value;
}
JSON.stringify(guagua, convert, &#39; &#39;);
Nach dem Login kopieren

Der obige Code ändert alle Attributwerte in Großbuchstaben:

{
  "name": "guagua",
  "age": 14,
  "gender": true,
  "height": 1.65,
  "grade": null,
  "middle-school": "\"W3C\" MIDDLE SCHOOL",
  "skills": [
  "JAVASCRIPT",
  "JAVA",
  "PYTHON",
  "LISP"
]
  }
Nach dem Login kopieren

Wenn wir immer noch genau steuern möchten, wie Xiaoming serialisiert wird, können Sie eine toJSON()-Methode für Xiaoming definieren, die direkt die Daten zurückgibt, die JSON serialisieren soll:

Deserialisierung

Get Um eine Zeichenfolge im JSON-Format zu erhalten, verwenden wir JSON.parse() direkt, um sie in ein JavaScript-Objekt umzuwandeln:

JSON.parse(&#39;[1,2,3,true]&#39;); //[1,2,3,true]
JSON.parse(&#39;{"name":"瓜瓜","age":14}&#39;); // Object{name:&#39;瓜瓜&#39;,age:14}
JSON.parse(&#39;true&#39;); // true
JSON.parse(&#39;123.45&#39;):// 123.45

JSON.parse()还可以接收一个函数,用来转换解析出的属性:
JSON.parse(&#39;{"name":"guagua","age":14}&#39;,function(key,value){ 
//把number * 2
if(key ===&#39;name&#39;){ 
return value + &#39;同学&#39;
}
return value;
}) ; // Object{name: &#39;瓜瓜同学&#39;,age: 14}
Nach dem Login kopieren

Das Obige habe ich für alle zusammengestellt. Ich hoffe, dass es in Zukunft für alle hilfreich sein wird.

Verwandte Artikel:

Detailliertes Verständnis des Bereichs auf Blockebene, privater Variablen und des Modulmodus in JavaScript (grafisches Tutorial)

JavaScript-Ausgabeanzeigeinhalt (grundlegendes Tutorial)

Der Unterschied zwischen gewöhnlichen Javascript-Funktionen und Konstruktoren (kombiniert mit dem Code, detaillierte Interpretation)

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation des JavaScript-Pfeilfunktionsgenerators Date JSON. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
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