Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-21 11:58:47
original
1774 Les gens l'ont consulté

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;
      }
Copier après la connexion

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;
          }
        }
Copier après la connexion

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;
    }
Copier après la connexion

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
Copier après la connexion

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

var that = this;
Copier après la connexion

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
Copier après la connexion

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;
    }
Copier après la connexion

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; 
      }
Copier après la connexion

Essayez de l'appeler directement :

fib(5); // fib {[[GeneratorStatus]]: "suspended", [[GeneratorReceiver]]: Window}
Copier après la connexion

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}
Copier après la connexion

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)
Copier après la connexion

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;
Copier après la connexion

Résultat :

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

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"
]
  }
Copier après la connexion

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;);
Copier après la connexion

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"
]
  }
Copier après la connexion

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}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!