Vous apprendre une explication détaillée sur la façon de démarrer avec JavaScript en 10 minutes

Avec l'échec du vote de partage de technologie interne (JS avancé) de l'entreprise, je vais d'abord traduire un bon article de blog d'introduction à JS pour permettre aux enfants qui ne connaissent pas grand-chose en JS d'apprendre et de maîtriser rapidement ce langage magique.

Introduction

JavaScript est un langage dynamique orienté objet Il est généralement utilisé pour gérer les tâches suivantes :

1. Modifier des pages Web

• Générer du HTML et du CSS

• Générer du contenu HTML dynamique

• Générer des effets spéciaux

Fournir une interface d'interaction utilisateur

• Générer des composants d'interaction utilisateur

• Vérifier l'utilisateur input

• Formulaire de remplissage automatique

Une application frontale qui peut lire des données locales ou distantes, telles que http:/ /www.php.cn /

Implémenter des programmes côté serveur comme JAVA, C#, C via Nodejs

Implémenter des programmes WEB distribués, notamment front-end et côté serveur

La version de JavaScript actuellement supportée par les navigateurs s'appelle "ECMAScript 5.1", ou simplement "ES5", mais les deux versions suivantes s'appellent "ES6" et "ES7" (ou "ES2015" et "ES2016", comme la nouvelle version porte le nom de cette année), qui possède de nombreuses fonctionnalités supplémentaires et une syntaxe améliorée, mérite d'être attendu avec impatience (et a été partiellement adopté par les versions actuelles). navigateurs et prise en charge environnementale back-end JS).

Cet article de blog est extrait du livre "Créer des applications Web frontales avec du JavaScript simple".

Types et constantes JavaScript

JS a 3 types de valeurs : chaîne, nombre et booléen. Nous pouvons utiliser une variable v pour enregistrer différents types de valeurs pour comparaison avec typeof(v), typeof (v)===”numéro”.

JS dispose de 5 types de référence : Objet, Tableau, Fonction, Date et RegExp. Les tableaux, les fonctions, les dates et les expressions régulières sont des types spéciaux d'objets, mais sur le plan conceptuel, les dates et les expressions régulières sont des types de valeur regroupés sous forme d'objet.

Les variables, tableaux, paramètres de fonction et valeurs de retour n'ont pas besoin d'être déclarés. Ils ne sont généralement pas vérifiés par le moteur JavaScript et seront convertis automatiquement.

La valeur de la variable peut être :

1. Des données, telles qu'une chaîne, un nombre, un booléen

2. Référence de l'objet : tel comme objet ordinaire, tableau, fonction, date, expression régulière

3. La valeur spéciale null, qui est souvent utilisée comme valeur par défaut pour les variables d'objet initialisées

4. La valeur spéciale non définie, la valeur initiale qui a été déclarée mais non initialisée

la chaîne est une séquence de caractères Unicode. Les constantes de chaîne seront entourées de guillemets simples ou doubles, tels que "Hello World!", "A3F0′ ou la chaîne vide "". Deux expressions de chaîne peuvent être connectées à l'aide d'opérateurs et peuvent Par comparaison égale :

if (firstName + lastName === "James Bond")

Le nombre de caractères dans la chaîne peut être obtenu grâce à l'attribut length :

console.log( "Hello world!".length);  // 12

Toutes les valeurs numériques sont en 64 bits Nombres à virgule flottante< 🎜 > Mot. Il n'y a pas de différence de type claire entre les entiers et les nombres à virgule flottante. Si une constante numérique n'est pas un nombre, sa valeur peut être définie sur NaN ("pas un nombre"), qui peut être déterminée à l'aide de la méthode isNaN. >Malheureusement, il n'existe pas de méthode Number.isInteger jusqu'à ES6, qui est utilisée pour tester si un nombre est un entier. Par conséquent, dans les navigateurs qui ne le prennent pas encore en charge, pour garantir qu'une valeur numérique est un entier ou une chaîne de caractères. nombres Pour convertir en entier, vous devez utiliser la fonction parseInt. De même, une chaîne contenant des décimales peut être convertie avec la méthode parseFloat. La meilleure façon de convertir un nombre n en chaîne est d'utiliser <. comme Java, nous avons également deux valeurs booléennes prédéfinies, vraies et fausses, et des symboles d'opérateur booléen : ! (non), && (et), || lorsque les valeurs non booléennes sont ET. les valeurs non booléennes seront converties implicitement. Les chaînes vides, les nombres 0, non définis et nuls seront convertis en faux, et toutes les autres valeurs seront converties en vrais. Vous devez utiliser les symboles congruents (===. et !==) au lieu de == et ! =. Sinon, le nombre 2 est égal à la chaîne "2", (2 == "2") est vrai

VAR= [] et var. a = new Array() peut tous deux définir un tableau vide (Erhu : le premier est recommandé)

VAR O ={} et var o = new Obejct() peuvent tous deux être définis (Erhu : le premier est toujours recommandé). Notez qu'un objet vide {} n'est pas vraiment vide car il contient la propriété héritée Object.prototype. Par conséquent, un objet vide réel doit être prototypé avec Null, var o =. .

Tableau 1 Tests de type et conversions

Portée variable

Dans la version actuelle de JavaScript, ES5, il existe deux types de variables de portée : portée globale et portée de la fonction, il n'y a pas de portée de bloc. Par conséquent, vous devez éviter de déclarer des variables à l'intérieur d'un bloc

et écrire à la place

Toutes les variables devraient. être déclaré au début de la fonction. Ce n'est que dans la prochaine version de JavaScript, ES6, que nous pouvons déclarer une variable de niveau bloc à l'aide du mot-clé let.

严格模式

从ES5开始，我们可以使用严格模式，获得更多的运行时错误检查。例如，在严格模式下，所有变量都必须进行声明。给未声明的变量赋值抛出异常。

我们可以通过键入下面的语句作为一个JavaScript文件或script元素中的第一行开启严格模式：’use strict’;

通常建议您使用严格模式，除非你的代码依赖于与严格的模式不兼容的库。

不同类型的对象

JS对象与传统的OO/UML对象不同。它们可以不通过类实例化而来。它们有属性、方法、键值对三种扩展。

JS对象可以直接通过JSON产生，而不用实例化一个类。

var person1 = { lastName:"Smith", firstName:"Tom"};
var o1 = Object.create( null);  // an empty object with no slots

对象属性可以以两种方式获得：

1. 使用点符号（如在C ++/ Java的）：person1.lastName = “Smith”

2. 使用MAP方式person1["lastName"] = “Smith”

JS对象有不同的使用方式。这里有五个例子：

1. 记录，例如，var myRecord = {firstName:”Tom”, lastName:”Smith”, age:26}

2. MAP（也称为“关联数组”，“词典”或其他语言的“哈希表”)var numeral2number = {“one”:”1″, “two”:”2″, “three”:”3″}

3. 非类型化对象

   var person1 = { lastName: "Smith", firstName: "Tom", getFullName: function () { return this.firstName +" "+ this.lastName; } };

4. 命名空间

   var myApp = { model:{}, view:{}, ctrl:{} };

可以由一个全局变量形式来定义，它的名称代表一个命名空间前缀。例如，上面的对象变量提供了基于模型 – 视图 – 控制器（MVC）架构模式，我们有相应的MVC应用程序的三个部分。

正常的类

数组

可以用一个JavaScript数组文本进行初始化变量：

var a = [1,2,3];

因为它们是数组列表，JS数组可动态增长：我们可以使用比数组的长度更大的索引。例如，上面的数组变量初始化后，数组长度为3，但我们仍然可以操作第5个元素 a[4] = 7;

我们可以通过数组的length属性得到数组长度：

for (i=0; i < a.length; i++) { console.log(a[i]);} //1 2 3 undefined 7 `

我们可以通过 Array.isArray(a) 来检测一个变量是不是数组。

通过push方法给数组追加元素：a.push( newElement);

通过splice方法，删除指定位置的元素：a.splice( i, 1);

通过indexOf查找数组，返回位置或者-1：if (a.indexOf(v) > -1) …

通过for或者forEach（性能弱）遍历数组：

var i=0;
for (i=0; i < a.length; i++) {
  console.log( a[i]);
}
a.forEach(function (elem) {
  console.log( elem);
})

通过slice复制数组：var clone = a.slice(0);

Maps

map（也称为“散列映射”或“关联数组’）提供了从键及其相关值的映射。一个JS map的键是可以包含空格的字符串：

var myTranslation = { 
"my house": "mein Haus", 
"my boat": "mein Boot", 
"my horse": "mein Pferd"
}

通过Object.keys(m)可以获得map中所有的键：

var i=0, key="", keys=[];
keys = Object.keys( myTranslation);
for (i=0; i < keys.length; i++) {
  key = keys[i];
  alert(&#39;The translation of &#39;+ key +&#39; is &#39;+ myTranslation[key]);
}

通过直接给不存在的键赋值来新增元素：

myTranslation["my car"] = "mein Auto";

通过delete删除元素：

delete myTranslation["my boat"];

通过in搜索map：

`if ("my bike" in myTranslation)  ...`

通过for或者forEach（性能弱）和Object.keys()遍历map：

var i=0, key="", keys=[];
keys = Object.keys( m);
for (i=0; i < keys.length; i++) {
  key = keys[i];
  console.log( m[key]);
}
Object.keys( m).forEach( function (key) {
  console.log( m[key]);
})

通过 JSON.stringify 将map序列化为JSON字符串，再JSON.parse将其反序列化为MAP对象 来实现复制：

var clone = JSON.parse( JSON.stringify( m))

请注意，如果map上只包含简单数据类型或（可能嵌套）数组/map,这种方法效果很好。在其他情况下，如果map包含Date对象，我们必须写我们自己的clone方法。

Functions

JS函数是特殊的JS的对象，它具有一个可选的名字属性和一个长度属性（参数的数目）。我们可以这样知道一个变量是不是一个函数：

if (typeof( v) === "function") {...}

JS函数可以保存在变量里、被当作参数传给其他函数，也可以被其他函数作为返回值返回。JS可以被看成一个函数式语言，函数在里面可以说是一等公民。

正常的定义函数方法是用一个函数表达式给一个变量赋值：

var myFunction = function theNameOfMyFunction () {...}
function theNameOfMyFunction () {...}

其中函数名（theNameOfMyFunction）是可选的。如果省略它，其就是一个匿名函数。函数可以通过引用其的变量调用。在上述情况下，这意味着该函数通过myFunction()被调用，而不是通过theNameOfMyFunction()调用。

JS函数，可以嵌套内部函数。闭包机制允许在函数外部访问函数内部变量，并且创建闭包的函数会记住它们。

当执行一个函数时，我们可以通过使用内置的arguments参数，它类似一个参数数组，我们可以遍历它们，但由于它不是常规数组，forEach无法遍历它。arguments参数包含所有传递给函数的参数。我们可以这样定义一个不带参数的函数，并用任意数量的参数调用它，就像这样：

var sum = function () {
  var result = 0, i=0;
  for (i=0; i < arguments.length; i++) {
    result = result + arguments[i];
  }
  return result;
};
console.log( sum(0,1,1,2,3,5,8));  // 20

prototype原型链可以访问函数中的每一个元素，如Array.prototype.forEach（其中Array代表原型链中的数组的构造函数）。

var numbers = [1,2,3];  // create an instance of Array
numbers.forEach( function (n) {
  console.log( n);
});

我们还可以通过原型链中的prototype.call方法来处理:

var sum = function () {
  var result = 0;
  Array.prototype.forEach.call( arguments, function (n) {
    result = result + n;
  });
  return result;
};

Function.prototype.apply是Function.prototype.call的一个变种，其只能接受一个参数数组。

立即调用的JS函数表达式优于使用纯命名对象，它可以获得一个命名空间对象，并可以控制其变量和方法哪些可以外部访问，哪些不是。这种机制也是JS模块概念的基础。在下面的例子中，我们定义了一个应用程序，它对外暴露了指定的元素和方法：

myApp.model = function () {
  var appName = "My app's name";
  var someNonExposedVariable = ...;
  function ModelClass1 () {...}
  function ModelClass2 () {...}
  function someNonExposedMethod (...) {...}
  return {
    appName: appName,
    ModelClass1: ModelClass1,
    ModelClass2: ModelClass2
  }
}();  // immediately invoked

这种模式在WebPlatform.org被当作最佳实践提及：http://www.php.cn/

定义和使用类

类是在面向对象编程的基础概念。对象由类实例化而来。一个类定义了与它创建的对象的属性和方法。

目前在JavaScript中没有明确的类的概念。JavaScript中定义类有很多不同的模式被提出，并在不同的框架中被使用。用于定义类的两个最常用的方法是：

构造函数法，它通过原型链方法来实现继承，通过new创建新对象。这是Mozilla的JavaScript指南中推荐的经典方法。

工厂方法：使用预定义的Object.create方法创建类的新实例。在这种方法中，基于构造函数继承必须通过另一种机制来代替。

当构建一个应用程序时，我们可以使用这两种方法创建类，这取决于应用程序的需求 。mODELcLASSjs是一个比较成熟的库用来实现工厂方法，它有许多优点。（基于构造的方法有一定的性能优势）

ES6中构造函数法创建类

在ES6，用于定义基于构造函数的类的语法已推出（新的关键字类的构造函数，静态类和超类）。这种新的语法可以在三个步骤定义一个简单的类。

基类Person 定义了两个属性firstName 和lastName，以及实例方法toString和静态方法checkLastName：

class Person {
  constructor( first, last) {
    this.firstName = first;
    this.lastName = last;
  }
  toString() {
    return this.firstName + " " +
        this.lastName;
  }
  static checkLastName( ln) {
    if (typeof(ln)!=="string" || 
        ln.trim()==="") {
      console.log("Error: " +
          "invalid last name!");
    }
  }
}

类的静态属性如下定义：

Person.instances = {};

一个子类定义的附加属性和可能会覆盖超类的方法：

class Student extends Person {
  constructor( first, last, studNo) {
    super.constructor( first, last);
    this.studNo = studNo; 
  }
  // method overrides superclass method
  toString() {
    return super.toString() + "(" +
        this.studNo +")";
  }
}

ES5中构造函数法创建类

在ES5，我们可以以构造函数的形式定义一个基于构造函数的类结构，下面是Mozilla的JavaScript指南中推荐的编码模式。此模式需要七个步骤来定义一个简单的类结构。由于这种复杂的模式可能很难记住，我们可能需要使用cLASSjs之类的库来帮助我们。

首先定义构造函数是隐式创建一个新的对象，并赋予它相应的值：

function Person( first, last) {
  this.firstName = first; 
  this.lastName = last; 
}

这里的this指向新创建的对象。

在原型中定义实例方法：

Person.prototype.toString = function () {
  return this.firstName + " " + this.lastName;
}

可以在构造函数中定义静态方法，也可以用.直接定义：

Person.checkLastName = function (ln) {
  if (typeof(ln)!=="string" || ln.trim()==="") {
    console.log("Error: invalid last name!");
  }
}

定义静态属性：

Person.instances = {};

定义子类并增加属性：

function Student( first, last, studNo) {
  // invoke superclass constructor
  Person.call( this, first, last);
  // define and assign additional properties
  this.studNo = studNo;  
}

通过Person.call( this, …) 来调用基类的构造函数。

将子类的原型链改为基类的原型链，以实现实例方法的继承（构造函数得改回来）：

// Student inherits from Person
Student.prototype = Object.create( 
    Person.prototype);
// adjust the subtype's constructor property
Student.prototype.constructor = Student;

通过Object.create( Person.prototype) 我们基于 Person.prototype创建了一个新的对象原型。

定义覆盖基类方法的子类方法：

Student.prototype.toString = function () {
  return Person.prototype.toString.call( this) +
      "(" + this.studNo + ")";
};

最后通过new关键字来实例化一个类

var pers1 = new Person("Tom","Smith");

JavaScript的prototype

prototype是函数的一个属性（每个函数都有一个prototype属性），这个属性是一个指针，指向一个对象。它是显示修改对象的原型的属性。

__proto__是一个对象拥有的内置属性（prototype是函数的内置属性。__proto__是对象的内置属性），是JS内部使用寻找原型链的属性。

每个对象都有个constructor属性，其指向的是创建当前对象的构造函数。

工厂模式创建类

在这种方法中，我们定义了一个JS对象Person,并在其内部定义了一个create方法用来调用Object.create来创建类。

var Person = {
  name: "Person",
  properties: {
    firstName: {range:"NonEmptyString", label:"First name", 
        writable: true, enumerable: true},
    lastName: {range:"NonEmptyString", label:"Last name", 
        writable: true, enumerable: true}
  },
  methods: {
    getFullName: function () {
      return this.firstName +" "+ this.lastName; 
    }
  },
  create: function (slots) {
    // create object
    var obj = Object.create( this.methods, this.properties);
    // add special property for *direct type* of object
    Object.defineProperty( obj, "type", 
        {value: this, writable: false, enumerable: true});
    // initialize object
    Object.keys( slots).forEach( function (prop) {
      if (prop in this.properties) obj[prop] = slots[prop];
    })
    return obj;
  }
};

这样，我们就有了一个Person的工厂类，通过调用create方法来实例化对象。

var pers1 = Person.create( {firstName:"Tom", lastName:"Smith"});

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!