Es6 est-il un framework ?

es6 n'est pas un framework, mais un standard pour le langage JavaScript. es6 est la 6ème version d'ECMAScript, un langage de programmation de script standardisé par Ecma International (un système international d'adhésion aux organisations de normalisation de l'information et des télécommunications) via ECMA-262. Il constitue le cœur du langage de script JavaScript, fournissant la syntaxe et la syntaxe du langage de script ; langage. Objets de base.

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

es6 n'est pas un framework, mais un standard pour le langage JavaScript.

es6, le nom complet d'ECMAScript6 (la 6ème version d'ECMAScript), est le standard de langage JavaScript officiellement publié en juin 2015, officiellement nommé ECMAScript 2015 (ES2015). Son objectif est de permettre au langage JavaScript d'être utilisé pour écrire des applications complexes à grande échelle et de devenir un langage de développement au niveau de l'entreprise.

Et ECMAScript est un langage de programmation de script standardisé par Ecma International via ECMA-262. Ce langage est largement utilisé sur le World Wide Web. Il est souvent appelé JavaScript ou JScript, il peut donc être compris comme un standard de JavaScript, mais en fait ces deux derniers sont des implémentations et des extensions de la norme ECMA-262.

La relation entre JavaScript et ECMAScript

Parfois, les gens considèrent JavaScript et ECMAScript comme identiques, mais en fait, ils ne le sont pas. JavaScript contient beaucoup plus de contenu que ce qui est spécifié dans ECMA-262. Le JavaScript complet en est composé. se compose des trois parties suivantes :

• Core (ECMAScript) : fournit la syntaxe et les objets de base du langage

• Document Object Model (DOM) : fournit des méthodes et des interfaces pour le traitement du contenu Web ; Modèle d'objets du navigateur (BOM) : fournit des méthodes et des interfaces pour interagir avec le navigateur.

• ECMAScript est le cœur de JavaScript, décrivant la syntaxe de base du langage (var, for, if, array, etc.) et les types de données (nombres, chaînes, booléens, fonctions, objets (obj, [], { }) , null, undefined), ECMAScript est un ensemble de normes qui définissent à quoi ressemble un langage (tel que JS).

ECMAScript est défini par ECMA-262. ECMAScript est une spécification de langage de script standard reconnue au niveau international qui ne dépend pas des navigateurs Web. La norme ECMA-262 stipule principalement que ce langage est constitué des composants suivants :

Grammaire

• Variables et types de données

• Mots clés et mots réservés

• Opérateurs

• Déclarations de contrôle

• Objects

• ECMAScript 6 est fondamentalement devenu le standard de l'industrie. Sa popularité est beaucoup plus rapide que ES5. La raison principale est que les navigateurs modernes prennent en charge ES6 très rapidement, en particulier les navigateurs Chrome et Firefox, qui prennent déjà en charge ES6. caractéristiques. [Apprentissage recommandé :

  Tutoriel JavaScript avancé
]

Pourquoi devriez-vous apprendre ES6 ? A quoi sert ES6 ?

ES5 ne peut pas répondre à la situation actuelle où le front-end devient de plus en plus complexe et énorme. On peut dire qu'il est obsolète. ES6 est une amélioration et une mise à niveau vers ES5. 1. Les navigateurs grand public ont entièrement pris en charge ES6

2. Les nouveaux frameworks frontaux du secteur ont entièrement utilisé la syntaxe ES6

3. Les applets WeChat, l'uni-app, etc. sont tous basés sur la syntaxe ES6

4. En partant de l'emploi, des petites et moyennes entreprises, du full stack, une compétence de plus sur votre CV, et vous pourrez démarrer plus rapidement pendant la période d'essai.

Variables

let

Une seule variable let peut être déclarée dans une portée. Si une variable let est également déclarée dans la portée enfant, elle n'affectera pas la variable let dans la portée parent.
• var
  
Plusieurs variables var peuvent être déclarées dans une seule portée. Si une variable var est également déclarée dans la portée enfant, elle affectera également la variable var dans la portée parent.
• const
  
Constante, équivalente à final, ne peut pas être modifiée.
• global
  
Les variables qui ne déclarent pas de type de variable sont par défaut des variables globales (attributs de fenêtre).
• 
  
Orienté objet

Principe

Les fonctionnalités orientées objet de JavaScript sont basées sur des prototypes et des constructeurs, qui sont différents des fonctionnalités courantes basées sur les classes. JavaScript ne fournit pas de fonctionnalités d'héritage d'objet au niveau du langage, mais le fait via la copie de prototypes.
• Trois méthodes de création d'objets
  

•   1. {pojo}（实例变量、实例方法、get、set） 
    2. function（实例变量、实例方法、prototype、apply、call） 
    3. class（实例变量、实例方法、prototype、extends、super）

prototype

Seules les fonctions et les classes ont des prototypes, ce qui signifie ajouter dynamiquement des variables d'instance et des méthodes d'instance et implémenter l'héritage.

Héritage

• 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: 'qc'},{}]];
    const [aa,bb,cc,dd,ee,ff]="hello";

    let {name="replaceName",age,id}={name:'cursor',age:19,id:'vc6dfuoc91vpdfoi87s'};
    let {type:tipType,min:minNumber}={type:'message',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视频教程、编程视频】

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!