Heim  >  Artikel  >  Web-Frontend  >  Ist es6 ein Framework?

Ist es6 ein Framework?

青灯夜游
青灯夜游Original
2022-11-16 19:03:091283Durchsuche

es6 ist kein Framework, sondern ein Standard für die JavaScript-Sprache. es6 ist die 6. Version von ECMAScript, einer von Ecma International (einem internationalen Mitgliedersystem für Informations- und Telekommunikationsstandardisierungsorganisationen) standardisierten Skriptsprache. Sie ist der Kern der Skriptsprache JavaScript und stellt die Syntax und Syntax der bereit Sprache. Grundlegende Objekte.

Ist es6 ein Framework?

Die Betriebsumgebung dieses Tutorials: Windows 7-System, ECMAScript Version 6, Dell G3-Computer.

es6 ist kein Framework, sondern ein Standard für die JavaScript-Sprache.

es6, der vollständige Name von ECMAScript6 (der 6. Version von ECMAScript), ist der im Juni 2015 offiziell veröffentlichte JavaScript-Sprachstandard mit dem offiziellen Namen ECMAScript 2015 (ES2015). Ziel ist es, die Verwendung der JavaScript-Sprache zum Schreiben komplexer Großanwendungen zu ermöglichen und sie zu einer Entwicklungssprache auf Unternehmensebene zu machen.

Und ECMAScript ist eine von Ecma International durch ECMA-262 standardisierte Skript-Programmiersprache. Diese Sprache ist im World Wide Web weit verbreitet und wird oft als JavaScript oder JScript bezeichnet, sodass sie als Standard von JavaScript verstanden werden kann. Tatsächlich handelt es sich bei den beiden letztgenannten um Implementierungen und Erweiterungen des ECMA-262-Standards.

Die Beziehung zwischen JavaScript und ECMAScript

Manchmal betrachten die Leute JavaScript und ECMAScript als gleich, aber tatsächlich enthält JavaScript viel mehr Inhalt als in ECMA-262 angegeben besteht aus den folgenden drei Teilen:

  • Core (ECMAScript): Stellt die Syntax und Basisobjekte der Sprache bereit;

  • Document Object Model (DOM): Stellt Methoden und Schnittstellen für die Verarbeitung von Webinhalten bereit

  • Browserobjektmodell (BOM): Stellt Methoden und Schnittstellen für die Interaktion mit dem Browser bereit.

ECMAScript ist der Kern von JavaScript und beschreibt die grundlegende Syntax der Sprache (var, for, if, array usw.) und Datentypen (Zahlen, Strings, Boolean, Funktionen, Objekte (obj, [], { }) , null, undefiniert) ist ECMAScript eine Reihe von Standards, die definieren, wie eine Sprache (z. B. JS) aussieht.

ECMAScript ist durch ECMA-262 definiert und eine international anerkannte Standard-Skriptsprachenspezifikation, die nicht von Webbrowsern abhängig ist. Der ECMA-262-Standard schreibt hauptsächlich vor, dass diese Sprache aus den folgenden Komponenten besteht:

  • Grammatik

  • Variablen und Datentypen

  • Schlüsselwörter und reservierte Wörter

  • Operatoren

  • Kontrollanweisungen

  • Objects

ECMAScript 6 ist im Grunde genommen zum Industriestandard geworden. Seine Popularität ist viel schneller als ES5. Der Hauptgrund dafür ist, dass moderne Browser ES6 sehr schnell unterstützen, insbesondere Chrome- und Firefox-Browser, die ES6 bereits unterstützen Merkmale. [Empfohlenes Lernen: Erweitertes JavaScript-Tutorial]

Warum sollten Sie ES6 lernen? Wofür wird ES6 verwendet?

ES5 kann der aktuellen Situation zunehmend komplexer und riesiger Frontends nicht gerecht werden. Man kann sagen, dass ES6 eine Erweiterung und ein Upgrade auf ES5 ist.

1. Mainstream-Browser unterstützen vollständig die ES6-Syntax

3. WeChat-Applets, Uni-Apps usw. basieren alle auf der ES6-Syntax

4. Von der Anstellung über kleine und mittelständische Unternehmen bis zum Full Stack, noch eine Fähigkeit im Lebenslauf und schon können Sie in der Probezeit schneller durchstarten.

Variablen

    let
  • In einem Bereich kann nur eine Let-Variable deklariert werden. Wenn eine Let-Variable auch im untergeordneten Bereich deklariert wird, hat dies keine Auswirkungen auf die Let-Variable im übergeordneten Bereich.
  • var
  • Mehrere var-Variablen können in einem Bereich deklariert werden. Wenn eine var-Variable auch im untergeordneten Bereich deklariert wird, wirkt sich dies auch auf die var-Variable im übergeordneten Bereich aus.
  • const
  • Konstante, äquivalent zu final, kann nicht geändert werden.
  • global
  • Variablen, die keinen Variablentyp deklarieren, verwenden standardmäßig globale Variablen (Fensterattribute).

Objektorientiert

    Prinzip
  • Die objektorientierten Funktionen von JavaScript basieren auf Prototypen und Konstruktoren, die sich von den üblichen, auf Klassen basierenden unterscheiden. JavaScript stellt keine Funktionen der Objektvererbung auf Sprachebene bereit, sondern tut dies durch das Kopieren von Prototypen.
  • Drei Methoden zum Erstellen von Objekten
  •   1. {pojo}(实例变量、实例方法、get、set) 
      2. function(实例变量、实例方法、prototype、apply、call) 
      3. class(实例变量、实例方法、prototype、extends、super)

Prototyp Nur Funktionen und Klassen haben Prototypen, was bedeutet, dass Instanzvariablen und Instanzmethoden dynamisch hinzugefügt und Vererbung implementiert werden.

Vererbung

  • call/apply
          应用在继承关系中,子类向父类传参时应用此关键字
  • extends
          继承关系中使用,A extends B,则A是B的父类
  • super
          在子类中调用父类的方法时应用次关键字
  • ES5继承方式
          接下来我们手写一套组合继承(原型链继承(继承原型) + 构造继承(继承属性))。这种方式即可避免原型链继承中无法实现多继承,创建子类实例时,无法向父类构造函数传参的弊端,也可避免构造继承中不能继承原型属性/方法的弊端。
function Person(name,age){                                             /* 父类 */
    this.name = name || 'father';                            //实例变量
    this.namesonF = this.nameson;
    this.age = age;
    this.talk = function(){alert("talk");};                 //实例方法
};
function Son(name){                                                     /* 子类 */
    this.nameson = name || 'son';
    // Person.call(this,'name',18);                          //继承:构造继承,复制父类的实例属性给子类,不能继承原型属性/方法
    Person.apply(this,['name',18]);                          //继承:构造继承,复制父类的实例属性给子类,不能继承原型属性/方法
}
// Son.prototype = new Person("zhangsan",19);                   //继承:原型链继承,父类的实例作为子类的原型,拷贝属性两次,不合理
Son.prototype = Person.prototype;                            //继承:原型链继承,父类的实例作为子类的原型

Person.prototype.publicParam="param1";                       //动态添加实例变量
Person.prototype.talk=function(){alert("talk");}            //动态添加实例方法

var son = new Son();                                         //实例化对象,调用构造函数(constructor)
  • ES6继承方式
          ES6的继承创造了一种新的写法,与Java、Scala等语言非常类似,默认使用组合继承(原型链继承(继承原型) + 构造继承(继承属性))的方式。
class Point {
    constructor(x, y) {
        this.x = x;                                           //实例变量
        this.y = y;
    }
}
class Son extends Point {
    constructor(z, w) {
        super(z,w);
        this.z = z;                                           //实例变量
        this.w = w;
    }
}
var son = new Son(1,2);

arrow functions

      箭头函数,是ES6中新加入的语法,于Java的lambda,scala的函数式语法非常相似

  • 代码
var single = a => console.log(a);
var single = (a) => (console.log(a));
var single = (a, b) => {console.log(a + b)};
var single = (a, b) => {return a + b};

template string

      模版字符串,字符串拼接的新语法

  • 代码
var templateStr = () => {
    var str1 = "adsf\nsdfa";

    var template1 = `<ul><li>first</li> <li>second</li></ul>`;

    var x = 1;
    var y = 2;
    var template2 = `${x} + ${y} = ${x + y}`;

    var template3 = `${lettest4()}`;
    console.log(str1)
    console.log(template1)
    console.log(template2)
    console.log(template3)
}

destructuring

      重构/解构,变量交互的语法

  • 代码
var destructuring = () => {
    var [a,b,...c]=[1,2,3,4,5,6,7,8,9,10];
    let [temp="replaceString"] = ["tempString"];
    let [age2, [{name: fname},{age: fname2="replaceString"}]] = [20, [{name: &#39;qc&#39;},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:&#39;cursor&#39;,age:19,id:&#39;vc6dfuoc91vpdfoi87s&#39;};
    let {type:tipType,min:minNumber}={type:&#39;message&#39;,min:20};
    let {sin,cos,tan,log}=Math;

    var fun = function({x,y}={}){return [x,y];}
    fun({x:100,y:2});

    [a,b]=[b,a];                                        //交换

    var map = [1,2,3]
    var map=new Map();
    map.set("id","007");
    map.set("name","cursor");
    for(let [key,value] of map){}
    for(let [key] of map){}
    for(let [,value] of map){}

    var arr = [1,2,3,4]
    for(let val of arr){val}

}

arguments

      实参,ES6中加入的直接读取参数的变量

  • 代码
function argumentsTest(a,b) { 
	for(let val of arguments)
		{console.log(val)
	}
}

【相关推荐:javascript视频教程编程视频

Das obige ist der detaillierte Inhalt vonIst es6 ein Framework?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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