Maison  >  Article  >  interface Web  >  Interprétation détaillée du générateur de fonctions de flèche JavaScript Date JSON

Interprétation détaillée du générateur de fonctions de flèche JavaScript Date JSON

亚连
亚连original
2018-05-21 11:58:471771parcourir

Maintenant, je vais vous présenter une brève analyse du générateur de fonctions de flèche JavaScript Date JSON. Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

La norme ES6 ajoute une nouvelle fonction : Arrow Function.

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

Les fonctions fléchées sont équivalentes aux fonctions anonymes et simplifient la définition des fonctions. Celui comme celui ci-dessus ne contient qu'une seule expression,

même { ... } et return sont omis. Il existe également une méthode qui peut contenir plusieurs instructions. Dans ce cas, { ... } et return ne peuvent pas être omis :

        x =>{ 
          if(x > 0){ 
            return x * x;
          }else{ 
            return -x *x;
          }
        }

S'il n'y a pas un seul paramètre, vous devez le mettre entre parenthèses ( ):

    // 两个参数
      (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;
    }

this

Maintenant, la fonction flèche corrige complètement le pointage de this. Cela pointe toujours vers la portée lexicale, qui est l'obj appelant externe :

    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

Si les fonctions fléchées sont utilisées, la méthode d'écriture de hack précédente

var that = this;

n'est plus nécessaire ;

Puisque cela a été lié dans la fonction flèche selon qu'elle est étendue ou non, lors de l'appel de la fonction flèche avec call() ou apply(), cela ne peut pas être

lié, cela is Le premier paramètre transmis est ignoré.

    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

générateur

générateur (générateur) est un nouveau type de données introduit par la norme ES6. Un générateur ressemble à une fonction, mais peut revenir plusieurs fois.

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

La différence entre générateur et fonction est que le générateur est défini par fonction* (notez le signe * supplémentaire) et, en plus de l'instruction return, vous pouvez également utiliser rendement pour retourner plusieurs fois.

La fonction ne peut retourner qu'une seule fois, donc Tourmaline renvoie un tableau. Cependant, si elle est remplacée par un générateur, elle peut renvoyer un nombre à la fois et plusieurs fois.

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

Essayez de l'appeler directement :

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

Appeler directement un générateur est différent de l'appel d'une fonction fib(5) crée uniquement un objet générateur et ne l'a pas encore exécuté. .

Il existe deux façons d'appeler l'objet générateur. La première consiste à appeler en continu la méthode next() de l'objet générateur :

    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}

Date

En JavaScript, les objets Date sont utilisés pour représenter les dates et les heures.

Pour obtenir l'heure actuelle du système, utilisez :

    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)

JSON

JSON est l'abréviation d'objet JavaScript Notation. C'est un format d'échange de données.

En JSON, il n'y a que quelques types de données :

1, nombre : c'est exactement le même que le nombre de JavaScript

2, booléen : c'est le vrai de JavaScript ; ou false;

3, String : C'est la chaîne de JavaScript

4, null : C'est la valeur null de JavaScript

5, array : C'est le Représentation matricielle de JavaScript—— [];

6,object : C'est la représentation {...} de JavaScript.

SON stipule également que le jeu de caractères doit être UTF-8, il n'y a donc aucun problème pour exprimer plusieurs langues. Pour une analyse unifiée, les chaînes JSON doivent utiliser des guillemets doubles "", et les clés d'objet doivent également utiliser des guillemets doubles "".

Sérialisation

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;

Résultat :

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

Le deuxième paramètre est utilisé pour contrôler la manière de filtrer la valeur clé de l'objet. Si nous Si vous souhaitez uniquement afficher les attributs spécifiés, vous pouvez transmettre dans Array :

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

Résultat :

{
  "name": "guagua",
  "skills": [
  "JavaScript",
  "Java",
  "Python",
  "Lisp"
]
  }

Vous pouvez également transmettre une fonction, afin que chaque paire clé-valeur de l'objet soit traitée en premier par la fonction :

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

Le code ci-dessus change toutes les valeurs d'attribut​​en majuscule :

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

Si nous voulons également contrôler précisément comment sérialiser Xiaoming, nous pouvons définir une méthode toJSON() pour que xiaoming renvoie directement les données que JSON doit sérialiser :

Désérialisation

Récupérer une chaîne au format JSON, on utilise directement JSON.parse() pour la transformer en objet JavaScript :

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}

Ce qui précède est ce que j'ai compilé pour tout le monde, j'espère que cela sera utile à tout le monde à l'avenir.

Articles associés :

Compréhension approfondie de la portée au niveau du bloc, des variables privées et du mode module en JavaScript (tutoriel graphique)

Contenu d'affichage de la sortie JavaScript (tutoriel de base)

La différence entre les fonctions ordinaires Javascript et les constructeurs (combinés avec le code, interprétation détaillée)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn