Maison  >  Article  >  interface Web  >  Quelles sont les façons de déclarer des variables dans es6

Quelles sont les façons de déclarer des variables dans es6

青灯夜游
青灯夜游original
2021-09-10 14:49:012177parcourir

Comment déclarer des variables : 1. Utilisez la commande var, la syntaxe "var variable name;" 2. Utilisez la commande function; 3. Utilisez la commande cosnt, la syntaxe "const variable name;"; let commande, la syntaxe "let "Nom de la variable" ; 5. Utilisez la commande import ; 6. Utilisez la commande class.

Quelles sont les façons de déclarer des variables dans es6

L'environnement d'exploitation de ce tutoriel : système Windows 7, ECMAScript version 6, ordinateur Dell G3.

ES5 n'a que deux façons de déclarer des variables : la commande var et la commande function. var命令和function命令。

ES6 除了添加letconst命令,还有两种声明变量的方法:import命令和class

ES6 En plus d'ajouter les commandes let et const, il existe deux manières de déclarer des variables : la commande import et la commande class.

Ainsi, ES6 dispose d'un total de 6 façons de déclarer des variables.

(1) commande var
  • var a ;  //undefined
    var b = 1;
  • Les variables définies par var peuvent être modifiées si elles ne sont pas initialisées,
  • non défini
  • sera affiché et aucune erreur ne sera signalée
  • var. sur la fenêtre. Utilisez let ou const pour les supprimer. Cette variable ne sera pas placée sur la fenêtre. De nombreux langages ont des portées au niveau du bloc, mais JS n'en utilise pas. fonction pour diviser la portée. Les accolades "{}" ne peuvent pas la limiter. La portée de var, donc les variables déclarées avec var ont l'effet de promotion des variables
  • La portée des variables déclarées par var est globale ou au niveau de la fonction

. (2) function command

    function add(a) {
      var sum = a + 1;
      return sum;
    }
  • Une nouvelle variable nommée add est déclarée et une définition de fonction lui est assignée. Le contenu entre
  • {} est affecté à add
  • Le code à l'intérieur de la fonction n'est pas. exécutée, juste stockée dans la variable pour une utilisation future. Les variables définies à l'aide de la commande

(3) cosnt

    const a;     //报错,必须初始化
    const b = 1;
  • const ne peuvent pas être modifiées et doivent être initialisées
  • La variable est une variable globale, ou une. variable globale dans le module
  • Si une variable est uniquement dans Elle est affectée une fois lorsqu'elle est déclarée et ne sera jamais réaffectée dans d'autres lignes de code Alors const doit être utilisé, mais la valeur initiale de la variable peut être ajustée dans le. future (variable constante)
  • Créez une constante en lecture seule, elle semble non modifiable sur différents navigateurs ; il est recommandé de ne pas la modifier après déclaration, elle a une portée au niveau du bloc
  • const représente une constanteindex d'une valeur, c'est-à-dire que le pointeur du nom de la variable en mémoire ne peut pas être modifié , mais la valeur pointant vers cette variable peut changer. Les variables définies par const ne peuvent pas être modifiées.
  • Constantes globales lorsque vous avez besoin d'un module.
  • Vous pouvez déclarer des constantes dans la portée globale ou dans une fonction Mais
  • doit être initialisée

    constant

  • constante ne peut pas avoir le même nom que d'autres variables ou fonctions dans sa portée.

(4) let command

let a;  //undefined
let b = 1; 
function add(b) {
  let sum = b + 1;
  return sum;
}
let c = add(b);

nécessite le "mode strict javascript":
    'use strict'
  • Il n'y a pas de promotion de variable
  • Les déclarations répétées ne sont pas autorisées
  • La portée de la variable déclaré par let est dans la portée au niveau du bloc. Une fois que le let est défini à l'intérieur de la fonction, il n'a aucun impact sur l'extérieur de la fonction (
  • Portée au niveau du bloc
  • )Vous pouvez attribuer une valeur à la variable lors de la déclaration. cela, la valeur par défaut n'est pas définie, ou vous pouvez attribuer une valeur à la variable plus tard dans le script, qui ne peut pas être utilisée avant la vie (zone morte temporaire)

(5) commande d'importation 1. introduit son propre système de modules. Exporter par l'exportation et importer par l'importation.

2. Différent de CommonJS, il obtient la référence du module, et la valeur n'est réellement obtenue que lorsqu'elle est utilisée.

3. Par exemple, en js :

  let student = [
    {
      name: 'xiaoming',
      age: 21,
    },
    {
      name: 'xiaohong',
      age: 18
    }
  ]
  export default student; // 这种导出方式,你可以在import时指定它的名称。

4. Dans app.js, on peut l'utiliser comme ceci :

  import StudentList from './student.js'; //指定名称
  console.log(StudentList[0].name); //xiaoming

(6) class command1 : la classe sert de sucre de syntaxe pour es6. , en fait es5 Cela peut également être réalisé.

  class Point {
    constructor (x, y) {
      this.x = x;
      this.y = y;
    }
    toString () {
      return this.x + ',' + this.y;
    }
  }
//上面是一个类
  Object.assign(Point.prototype, {
    getX () {
      return this.x;
    },
    getY () {
      return this.y;
    }
  })
  let p1 = new Point(1,2);
  console.log(p1.toString()); //1,2
  console.log(p1.getX()); //1
  console.log(p1.getY()); //2
  console.log(Object.keys(Point.prototype)); // ["getX", "getY"]

    Aucune séparation par virgule requise entre les méthodes
  • toString () {} est équivalent à toString : function () {}
  • Vous pouvez toujours utiliser Point.prototype
  • Vous pouvez utiliser Object . assign() étend plusieurs méthodes à la fois
  • La plupart des méthodes définies à l'intérieur de la classe ne peuvent pas être énumérées
  • constructor(){} est une méthode par défaut Si elle n'est pas ajoutée, une méthode vide le sera automatiquement. ajouté.
  • constructor默认返回实例对象(this),完全可以指定返回其他的对象。

  • 必须用new调用

  • 不存在变量提升

  • 当用一个变量去接受class时,可以省略classname

  • es6不提供私有方法。

2:使用extends继承

class ThreeDPoint extends Point {
    constructor (x, y, z) {
      console.log(new.target); //ThreeDPoint
      super(x, y);
      this.z = z;
}
    toString () {
      return super.toString() + ',' + this.z;
    }
    static getInfo() {
      console.log('static method');
    }
    get z() {
      return 4;
    }
    set z(value) {
      console.log(value);
    }
}
  ThreeDPoint.getInfo(); // "static method"
  let ta = new ThreeDPoint(2,3,4);
  console.log(ta.toString()); //2,3,4
  console.log(ta.z); // 4
  ta.z = 200; // 200
  console.log(Object.getPrototypeOf(ThreeDPoint)); //Point
  • constructor中必须调用super,因为子类中没有this,必须从父类中继承。

  • 子类的__proto__属性总是指向父类

  • 子类的prototype属性的__proto__总是指向父类的prototype

  • Object.getPrototypeOf()获取父类

  • super作为方法只能在constructor中

  • super作为属性指向父类的prototype.

  • 在constructor中使用super.x = 2,实际上this.x = 2;但是读取super.x时,又变成了父类.prototype.x。

  • 原生构造函数是无法继承的。

  • get set 方法可以对属性的赋值和读取进行拦截

  • (静态方法不能被实例继承。通过static声明

  • 静态属性只能 ThreeDPoint.name = “123” 声明 (与static没什么关系)

【推荐学习:javascript高级教程

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