Le résumé d'apprentissage JavaScript le plus complet

Cet article partage principalement avec vous un résumé de l'apprentissage de JavaScript (1) ECMAScript, BOM, DOM (core, modèle objet de navigateur et modèle objet de document). JavaScript est un langage de script qui est interprété et exécuté. et type faible. , un langage basé sur un prototype avec prise en charge intégrée des types, qui suit la norme ECMAScript. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il est principalement utilisé pour ajouter des fonctions dynamiques au HTML.

1. Introduction à JavaScript

JavaScript est un langage de script qui est interprété et exécuté. Il s'agit d'un langage basé sur un prototype à typage dynamique, avec prise en charge intégrée des types. suit la norme ECMAScript. Son interpréteur s'appelle le moteur JavaScript, qui fait partie du navigateur et est largement utilisé dans les langages de script côté client. Il est principalement utilisé pour ajouter des fonctions dynamiques au HTML.

Presque tous les langages courants​​peuvent être compilés en JavaScript et peuvent ensuite être exécutés dans les navigateurs sur toutes les plateformes. Cela reflète également la puissance de JavaScript et son importance dans le développement Web. Tels que Blade : une extension Visual Studio qui peut convertir le code C# en JavaScript, et Ceylon : un langage JVM modulaire à typage statique qui peut être compilé en JavaScript.

JavaScript est un langage qui peut s'exécuter à la fois sur le front-end et sur le backend. Par exemple, Node.js est un environnement d'exécution JavaScript basé sur le moteur Chrome V8 (similaire à Java ou .NET). Node.js utilise un modèle d'E/S non bloquant et piloté par les événements, ce qui le rend léger et efficace.

1.1. Composition JavaScript

ECMAScript décrit la syntaxe et les objets de base du langage, tels que les types, les opérations, le contrôle de flux et les objets. -orienté, exceptions, etc.

Document Object Model (DOM) décrit les méthodes et les interfaces de traitement du contenu Web.

Browser Object Model (BOM), décrit les méthodes et interfaces pour interagir avec le navigateur.

JavaScript est composé d'objets, et tout est un objet.

1.2. Caractéristiques du langage de script JavaScript

a), langage de script interprété. JavaScript est un langage de script interprété. Les langages tels que C et C++ sont d'abord compilés puis exécutés, tandis que JavaScript est interprété ligne par ligne lors de l'exécution du programme.

Basé sur des objets. JavaScript est un langage de script basé sur les objets qui peut non seulement créer des objets mais également utiliser des objets existants.

b), simple. Le langage JavaScript utilise des types de variables faiblement typés et n'impose pas d'exigences strictes sur les types de données utilisés. Il s'agit d'un langage de script basé sur les instructions et contrôles de base de Java, et sa conception est simple et compacte.

c), dynamique. JavaScript est un langage de script basé sur des événements qui peut répondre aux entrées de l'utilisateur sans passer par un serveur Web. Lors de la visite d'une page Web, JavaScript peut répondre directement à ces événements lorsque la souris est cliquée, déplacée vers le haut ou vers le bas ou déplacée dans la fenêtre.

d), multiplateforme. Le langage de script JavaScript ne dépend pas du système d'exploitation et nécessite uniquement la prise en charge du navigateur. Par conséquent, après avoir écrit un script JavaScript, il peut être utilisé sur n'importe quelle machine, à condition que le navigateur de la machine prenne en charge le langage de script JavaScript. Actuellement, JavaScript est pris en charge par la plupart des navigateurs.

2. ECMAScript (noyau et syntaxe JavaScript)

2.1. Définition ECMAScript

1), ECMAScript est un standard (European Computer Manufacturers Association), JavaScript n'est que son seul. implémentation, d'autres implémentations incluent ActionScript (Flash Script)

2), ECMAScript peut fournir des capacités de programmation de script de base pour différents types d'environnements hôtes, c'est-à-dire qu'ECMAScript n'est pas lié à un environnement hôte spécifique, tel que JavaScript. L'environnement hôte est le navigateur et l'environnement hôte d'AS est Flash. ,

3), ECMAScript décrit les éléments suivants : syntaxe, types, instructions, mots-clés, mots réservés, opérateurs, objets, etc.

2.2, types de données

utilisés le mot-clé var dans JS pour déclarer des variables, et le type de la variable sera déterminé en fonction de la valeur qui lui est attribuée (type dynamique). Les types de données dans JS sont divisés en types de données primitifs (5 types) et types de données de référence (type d'objet).

1) 5 types de données primitifs : Indéfini, Null, Booléen, Nombre et Chaîne. Il convient de noter que les chaînes en JS sont des types de données primitifs.

2) opérateur typeof : affichez le type de variable. L'appel de l'opérateur typeof sur une variable ou une valeur renverra l'une des valeurs suivantes :

• indéfini – si la variable est de type Indéfini

• booléen – si la variable est de type Booléen

• numéro – si la variable est de type Nombre

• string – si la variable est de type String

• object – si la variable est de type référence ou Null

3) Résolvez le problème de jugement de type de référence via l'opérateur instanceof

4) Null est considéré comme un espace réservé pour l'objet, et l'opérateur typeof renvoie "object" pour la valeur nulle.

5) Les variables de type de données primitif et de type de données de référence sont stockées en mémoire comme suit :

6) Définition du type en JS : un ensemble de valeurs. Par exemple, il existe deux valeurs de type booléen : vrai et faux. Les types Indéfini et Null n’ont qu’une seule valeur, qui est respectivement indéfinie et nulle.

Le type Null n'a qu'une seule valeur, qui est nulle ; le type Indéfini n'a également qu'une seule valeur, qui est indéfinie. Les valeurs null et indéfini peuvent être utilisées directement dans le code JavaScript en tant que littéraux.

null est lié à la référence d'objet et représente une référence d'objet vide ou inexistante. Lorsqu'une variable est déclarée mais qu'aucune valeur ne lui est attribuée, sa valeur est undefined . La valeur de

indéfini apparaîtra dans les situations suivantes :

obtient un certain attribut d'un objet. Si ni l'objet ni les objets de la chaîne de prototypes n'ont l'attribut, la valeur de l'attribut. est indéfini.

Si une fonction ne renvoie pas explicitement une valeur à son appelant via return, sa valeur de retour n'est pas définie. Il existe un cas particulier lors de l'utilisation de new.

Une fonction en JavaScript peut déclarer n'importe quel nombre de paramètres formels. Lorsque la fonction est réellement appelée, si le nombre de paramètres transmis est inférieur aux paramètres formels déclarés, la valeur des paramètres extra-formels sera indéfinie. .

Exemple :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>
    <script>
      //js对象
      var user = {
        name: "张学友",
        address: "中国香港"
      };
      console.log(user.age); //访问对象中的属性，未定义
      
      var i;
      console.log(i); //变量未赋值
      
      function f(n1){
        console.log(n1);
      }
      var result=f(); //参数未赋值
      
      console.log(result); //当函数没有返回值时为undefined
      
    </script>
  </body>

</html>

Résultat :

À propos de null et non défini Il y a quelques fonctionnalités intéressantes :

Si vous utilisez l'opérateur typeof sur une variable avec une valeur nulle, le résultat est un objet

Si vous utilisez typeof sur une valeur non définie, vous get Le résultat n'est pas défini.

Par exemple, typeof null === "object" //true; typeof undefined === "undefined" //true null == non défini //true, mais null !== non défini //true

Exemple :

<!DOCTYPE html>
<html>

  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>

  <body>
    <script>
      //js对象
      var user = {
        name: "张学友",
        address: "中国香港"
      };
      console.log(typeof(user));
      console.log(typeof(null));
      console.log(typeof(undefined));
      console.log(user.name);
      console.log(user.age);
      
      if(user.age){
        console.log(user.age);
      }else{
        console.log("没有age属性");
      }
      //为false的情况
      var i;
      console.log(!!"");
      console.log(!!0);
      console.log(!!+0);
      console.log(!!-0);
      console.log(!!NaN);
      console.log(!!null);
      console.log(!!undefined);
      console.log(typeof(i));
      console.log(!!i);
      console.log(false);
      //是否不为数字,is Not a Number
      console.log(isNaN("Five"));
      console.log(isNaN("5"));
    </script>
  </body>

</html>

Résultat :

7), Spécialités de type booléen

8), == et ===

Il existe deux opérateurs en JavaScript qui déterminent si les valeurs sont égales, == et === . Par rapport aux deux, == effectuera certaines conversions de type ; tandis que === n'effectuera pas de conversion de type et les conditions d'égalité acceptées sont plus strictes.

=== comparera les types lors de la comparaison

Bien sûr, ceux qui correspondent sont != et !==

Essayez d'utiliser === au lieu de ==

console.log("5"==5); //true
console.log("5"===5); //false
console.log("5"!=5); //false
console.log("5"!==5); //true

2.3. Variables locales et variables globales

Les variables déclarées dans une fonction ne peuvent être utilisées que dans la fonction. Si elle sera publiée, ce type de variable est appelé variable locale. Étant donné que chaque variable locale n'est valide que dans sa propre fonction, vous pouvez utiliser des variables portant le même nom dans différentes fonctions.

Si vous déclarez une variable en dehors d'une fonction, toutes les fonctions de la page peuvent l'utiliser. Une fois les variables globales déclarées, elles deviennent effectives. La variable n'expirera pas tant que la page Web ne sera pas fermée.

Remarque : En langage JS, les variables déclarées dans les blocs de code sont des variables globales.

JavaScript est un langage qui a des exigences moins strictes sur les variables de type de données, il n'est donc pas nécessaire de déclarer le type de chaque variable. Bien que la déclaration de variable ne soit pas nécessaire, il est bon de la déclarer avant d'utiliser la variable. . Habitude. Les déclarations de variables peuvent être effectuées à l'aide de l'instruction var. Par exemple : var men = true; // La valeur stockée dans men est de type booléen.

Nom des variables

JavaScript est un langage sensible à la casse, donc nommer une variable Best n'est pas la même chose que la nommer Best.
De plus, la longueur du nom de la variable est arbitraire, mais doit suivre les règles suivantes :

• 1. Le premier caractère doit être une lettre (majuscule et minuscule) , ou un Un trait de soulignement (_) ou un signe dollar ($).

• 2. Les caractères suivants peuvent être des lettres, des chiffres, des traits de soulignement ou des signes dollar.

• 3. Les noms de variables ne peuvent pas être des mots réservés.

Vous pouvez définir des variables sans utiliser var, mais les variables définies de cette manière sont des variables globales.

Exemple :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <script>
      function a(){
        var n1=1;
        n2=2; //声明n2时未使用var，所以n2是全局变量，尽量避免
        console.log(n1+","+n2);
      }
      a();
      console.log(n2);
      console.log(window.n2);
      console.log(window.n1);
      console.log(n1);
    </script>
  </body>

</html>

Résultat :

2.4, Array

①Dans js, les types d'éléments de tableau peuvent être incohérents.

②En js, la longueur du tableau peut être modifiée dynamiquement.

③ En suivant le code ci-dessus, typeof arr et arr instanceof Array output object et true respectivement.

console.log(typeof(names)); //object
console.log(names instanceof Array); //true
console.log("" instanceof String); //false 不是对象类型
console.log(true instanceof Boolean); //false

Objets et méthodes de tableau

Array 对数组的内部支持
Array.concat( ) 连接数组
Array.join( ) 将数组元素连接起来以构建一个字符串
Array.length 数组的大小
Array.pop( ) 删除并返回数组的最后一个元素
Array.push( ) 给数组添加元素
Array.reverse( ) 颠倒数组中元素的顺序
Array.shift( ) 将元素移出数组
Array.slice( ) 返回数组的一部分
Array.sort( ) 对数组元素进行排序
Array.splice( ) 插入、删除或替换数组的元素
Array.toLocaleString( ) 把数组转换成局部字符串
Array.toString( ) 将数组转换成一个字符串
Array.unshift( ) 在数组头部插入一个元素

2.4.1、创建

var arrayObj = new Array();
var arrayObj = new Array([size]);
var arrayObj = new Array([element0[, element1[, ...[, elementN]]]]);

示例：

var array11 = new Array(); //空数组
var array12 = new Array(5); //指定长度，可越界
var array13 = new Array("a","b","c",1,2,3,true,false); //定义并赋值
var array14=[]; //空数组，语法糖
var array15=[1,2,3,"x","y"]; //定义并赋值

2.4.2、访问与修改

var testGetArrValue=arrayObj[1];

arrayObj[1]= "值";

array12[8]="hello array12"; //赋值或修改
console.log(array12[8]);  //取值
//遍历
for (var i = 0; i < array13.length; i++) {
  console.log("arrayl3["+i+"]="+array13[i]);
}
//枚举
for(var i in array15){ 
  console.log(i+"="+array15[i]); //此处的i是下标
}

结果：

2.4.3、添加元素

将一个或多个新元素添加到数组未尾，并返回数组新长度

arrayObj. push([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素添加到数组开始，数组中的元素自动后移，返回数组新长度

arrayObj.unshift([item1 [item2 [. . . [itemN ]]]]);

将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回被删除元素数组，deleteCount要删除的元素个数

arrayObj.splice(insertPos,deleteCount,[item1[, item2[, . . . [,itemN]]]])

示例代码：

//4.3、添加元素
      var array31=[5,8];
      //添加到末尾
      array31.push(9);
      var len=array31.push(10,11);
      console.log("长度为："+len+"——"+array31);
      //添加到开始
      array31.unshift(4);
      var len=array31.unshift(1,2,3);
      console.log("长度为："+len+"——"+array31);
      //添加到中间
      var len=array31.splice(5,1,6,7); //从第5位开始插入，删除第5位后的1个元素，返回被删除元素
      console.log("被删除："+len+"——"+array31);

运行结果：

2.4.4、删除

移除最后一个元素并返回该元素值

arrayObj.pop();

移除最前一个元素并返回该元素值，数组中元素自动前移

arrayObj.shift();

删除从指定位置deletePos开始的指定数量deleteCount的元素，数组形式返回所移除的元素

arrayObj.splice(deletePos,deleteCount);

示例：

//4.4、删除
      var array41=[1,2,3,4,5,6,7,8];
      console.log("array41："+array41);
      //删除最后一个元素，并返回
      var e=array41.pop();
      console.log("被删除："+e+"——"+array41);
      //删除首部元素，并返回
      var e=array41.shift();
      console.log("被删除："+e+"——"+array41);
      //删除指定位置与个数
      var e=array41.splice(1,4); //从索引1开始删除4个
      console.log("被删除："+e+"——"+array41);

结果：

2.4.5、截取和合并

以数组的形式返回数组的一部分，注意不包括 end 对应的元素，如果省略 end 将复制 start 之后的所有元素

arrayObj.slice(start, [end]);

将多个数组（也可以是字符串，或者是数组和字符串的混合）连接为一个数组，返回连接好的新的数组

arrayObj.concat([item1[, item2[, . . . [,itemN]]]]);

示例：

//4.5、截取和合并
      var array51=[1,2,3,4,5,6];
      var array52=[7,8,9,0,"a","b","c"];
      //截取，切片
      var array53=array51.slice(2); //从第3个元素开始截取到最后
      console.log("被截取："+array53+"——"+array51);
      var array54=array51.slice(1,4); //从第3个元素开始截取到索引号为3的元素
      console.log("被截取："+array54+"——"+array51);
      //合并
      var array55=array51.concat(array52,["d","e"],"f","g");
      console.log("合并后："+array55);

结果：

2.4.6、拷贝

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.slice(0);

返回数组的拷贝数组，注意是一个新的数组，不是指向

arrayObj.concat();

因为数组是引用数据类型，直接赋值并没有达到真正实现拷贝，地址引用，我们需要的是深拷贝。

2.4.7、排序

反转元素（最前的排到最后、最后的排到最前），返回数组地址

arrayObj.reverse();

对数组元素排序，返回数组地址

arrayObj.sort();

arrayObj.sort(function(obj1,obj2){});

示例：

var array71=[4,5,6,1,2,3];
      array71.sort();
      console.log("排序后："+array71);
      var array72=[{name:"tom",age:19},{name:"jack",age:20},{name:"lucy",age:18}];
      array72.sort(function(user1,user2){
        return user1.age<user2.age;
      });
      console.log("排序后：");
      for(var i in array72) console.log(array72[i].name+"，"+array72[i].age);

结果：

2.4.8、合并成字符

返回字符串，这个字符串将数组的每一个元素值连接在一起，中间用 separator 隔开。

arrayObj.join(separator);

示例代码：

//4.8、合并成字符与将字符拆分成数组
      var array81=[1,3,5,7,9];
      var ids=array81.join(",");
      console.log(ids);
      
      //拆分成数组
      var text="hello nodejs and angular";
      var array82=text.split(" ");
      console.log(array82);

运行结果：

所有代码：

2.5、正则表达式RegExp

RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

RegExp对象：该对象代表正则表达式，用于字符串匹配

① 两种RegExp对象创建方式：

方式一，new 一个RegExp对象：var regExp = new RegExp(“[a-zA-Z0-9]{3,8}”);

方式二，通过字面量赋值：var regExp = /^[a-zA-Z0-9]{3,8}$/;

② 正则表达式的具体写法使用时查询文档。

③ 常用方法：test(string)，返回true或false。

直接量语法

/pattern/attributes

创建 RegExp 对象的语法：

new RegExp(pattern, attributes);

参数

Le modèle de paramètre est une chaîne qui spécifie un modèle d'expression régulière ou une autre expression régulière.

Le paramètre attributs est une chaîne facultative contenant les attributs "g", "i" et "m", qui sont utilisés pour spécifier respectivement la correspondance globale, la correspondance sensible à la casse et la correspondance multiligne. Avant la normalisation d'ECMAScript, l'attribut m n'était pas pris en charge. Si pattern est une expression régulière plutôt qu'une chaîne, ce paramètre doit être omis.

Valeur de retour

Un nouvel objet RegExp avec le mode et les indicateurs spécifiés. Si le modèle d'argument est une expression régulière plutôt qu'une chaîne, le constructeur RegExp() crée un nouvel objet RegExp avec le même modèle et les mêmes indicateurs que le RegExp spécifié.

Si vous n'utilisez pas l'opérateur new et appelez RegExp() en tant que fonction, il se comporte de la même manière que lorsque vous l'appelez avec l'opérateur new, sauf que lorsque pattern est une expression régulière, il renvoie uniquement pattern à la place. de Créer un nouvel objet RegExp.

Lance

SyntaxError - Cette exception est levée si le modèle n'est pas une expression régulière légale, ou si les attributs contiennent des caractères autres que "g", "i" et "m".

TypeError - Cette exception est levée si le motif est un objet RegExp mais que le paramètre d'attributs n'est pas omis.

Modificateurs

修饰符	描述
i	执行对大小写不敏感的匹配。
g	执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m	执行多行匹配。

Crochets

Les crochets sont utilisés pour rechercher des caractères dans une plage :

表达式	描述
[abc]	查找方括号之间的任何字符。
[^abc]	查找任何不在方括号之间的字符。
[0-9]	查找任何从 0 至 9 的数字。
[a-z]	查找任何从小写 a 到小写 z 的字符。
[A-Z]	查找任何从大写 A 到大写 Z 的字符。
[A-z]	查找任何从大写 A 到小写 z 的字符。
[adgk]	查找给定集合内的任何字符。
[^adgk]	查找给定集合外的任何字符。
(red|blue|green)	查找任何指定的选项。

Métacaractères

Les métacaractères sont des caractères ayant une signification particulière :

元字符	描述
.	查找单个字符，除了换行和行结束符。
w	查找单词字符。
W	查找非单词字符。
d	查找数字。
D	查找非数字字符。
s	查找空白字符。
S	查找非空白字符。
b	匹配单词边界。
B	匹配非单词边界。

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!