Programmation avancée JavaScript approfondie d'objets et de tableaux (méthodes de pile, méthodes de file d'attente, méthodes de réorganisation, méthodes d'itération)_compétences Javascript

L'héritage est l'un des concepts les plus évoqués dans les langages OO. De nombreux langages OO prennent en charge deux types d'héritage : l'héritage d'interface et l'héritage d'implémentation. L'héritage d'interface hérite uniquement des signatures de méthodes, tandis que l'héritage d'implémentation hérite des méthodes réelles. Comme indiqué, l'héritage d'interface n'est pas possible dans ECMAScript puisque les fonctions n'ont pas de signature. ECMAScript ne prend en charge que l'héritage d'implémentation, et son héritage d'implémentation repose principalement sur la chaîne de prototypes.

1. Utilisez des littéraux d'objet pour définir des objets

var person={};

Lors de la création d'un objet de cette façon, le constructeur Object n'est pas réellement appelé.

Les développeurs préfèrent la syntaxe littérale d'objet.

2. Parfois, lorsqu'un grand nombre de paramètres facultatifs doivent être transmis, de manière générale, des littéraux d'objet sont utilisés pour encapsuler plusieurs paramètres facultatifs.

3. La différence entre la notation par points et la notation entre crochets des attributs d'objet

(1) Fonctionnellement : il n'y a pas de différence entre les deux

(2) Mais l'avantage des crochets est que les attributs sont accessibles via des variables

Par exemple :

  var person={
  name:"Nic"
}

Notation par points : personne.nom

Notation entre crochets : var prop="name";
personne[prop]

(3) Un autre avantage est :

Si le nom de l'attribut contient des caractères ou des mots-clés qui provoqueront des erreurs grammaticales ou des mots réservés, il n'est pas faux d'utiliser des crochets

Par exemple : personne["prénom"]="OK";

(4) De manière générale, il est recommandé d'utiliser la notation par points

4. Problèmes de création de tableaux

var colours=[1,2,] //Ne fais pas ça. Cela créera un tableau avec 2 ou 3 éléments
var opy=[,,,,,] //Ne fais pas ça. Cela créera un tableau de 5 ou 6 éléments

C'est parce que IE8 et les versions précédentes ont des bugs dans l'implémentation des littéraux de tableau

Lors de la création d'un tableau à l'aide de littéraux, le constructeur Array ne sera pas appelé

5. Si l'indice de définition d'une certaine valeur dépasse le nombre existant d'éléments dans le tableau.

Par exemple : var color=[1,2,3]

color[3], le tableau augmentera automatiquement jusqu'à la longueur de la valeur d'index plus 1

À l'heure actuelle, la valeur de color[3] n'est pas définie

6. La longueur du tableau n'est pas uniquement en lecture seule. En définissant la propriété length, vous pouvez ajouter continuellement de nouveaux éléments à la fin du tableau.

7. Convertir le tableau en chaîne en String() join()

array.toString()  //返回以逗号分隔的字符串
array.valueOf()  //返回的还是数组
array.join(",")  //也可以

8. Méthode de pile de tableau push() pop()

La pile est une structure de données, c'est-à-dire que le dernier élément ajouté est le premier à être supprimé (dernier entré, premier sorti). L'insertion et la suppression d'éléments de la pile ne se produisent qu'à un seul endroit : le sommet de la pile.
ECMAScript fournit les méthodes push() et pop() pour implémenter ce type de pile.

push() ajoute un ou plusieurs éléments à la fin du tableau et renvoie la nouvelle longueur.

La méthode pop() est utilisée pour supprimer et renvoyer le dernier élément du tableau.

Exemple :

var arr=[];
var count=arr.push('a','b');  //count=2
arr.push('c');
var item=arr.pop();  //移除最后一项 c item=c 并且改变数组长度

9. Méthode de file d'attente shift() unshift()

La règle d'accès aux données de file d'attente est le premier entré, premier sorti
ECMAScript fournit shift() pour implémenter cela.
La méthode shift() est utilisée pour supprimer le premier élément du tableau et renvoyer la valeur du premier élément.
La méthode unshift() ajoute un ou plusieurs éléments au début du tableau et renvoie la nouvelle longueur.

10. Méthode de réorganisation sort() reverse()

ECMAScript fournit sort() et reverse() pour l'implémentation.

sort() appellera la méthode tostring() de chaque élément du tableau et comparera les chaînes résultantes pour le tri.

11. Concaténation de tableaux concat()

La méthode concat() est utilisée pour concaténer deux ou plusieurs tableaux.

Cette méthode ne modifie pas le tableau existant, mais renvoie uniquement une copie du tableau connecté.

12. La méthode slice() renvoie les éléments sélectionnés à partir d'un tableau existant.

13. Méthodes de positionnement : indexOf() et lastIndexOf()

14. Méthode d'itération

ECMAScript5 définit les cinq méthodes suivantes, qui reçoivent toutes trois paramètres : la valeur de l'élément du tableau, la position de l'élément dans le tableau et la paire de tableau elle-même      

every(),filter(),forEach(),map(),some()

Exemple :

var num=[1,2,3,4];
var res=num.every(function(item,index,array){
  return (item>2)
})  //false  必须每一项都大于2，才返回true
var res=num.some(function(item,index,array){
  return (item>2)
})  //true 只要有一个大于2，就返回true
var res=num.filter(function(item,index,array){
  return (item>2)
})  //[3,4]   
var res=num.forEach(function(item,index,array){
  return (item>2)
})  //[1,4,9,16]  

Méthode d'itération dans un objet tableau javascript

/* javascript 数组对象中的迭代方法 
 * ECMAScript5为数组定义了5个迭代方法。每个方法都接受两个参数，第一个是进行迭代的函数，第二个是该函数的作用域对象【可选】。 


 * 进行迭代的函数接受三个参数，第一个是数组中要进行迭代的元素的值，第二个是数组候总要进行迭代的元素的位置，第三个是迭代数组本身。 


* 1. every()  对数组中的每一项运行给定的函数，如果该函数对每一项都返回true，则返回true 
 * 2. filter() 对数组中的每一项运行给定的函数，返回该函数返回true的项组成的数组。 
 * 3. forEach() 对数组中的每一项运行给定的函数，这个方法没有返回值 
 * 4. map()   对数组中的每一项运行给定的函数，返回每次函数调用的结果组成的数组 
 * 5. some()  对数组中的每一项运行给定的函数，如果该函数对任意一项返回true，则返回true 
 * 
 * 这些迭代方法支持的浏览器有，IE9+，Firefox2+，Safari3+，Opera 9.5+，chrome 
 */ 
var num = [1,2,3,4,5,6,7,8,9]; 
var everyResult = num.every(function(item, index, array) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(everyResult); 
var someResult = num.some(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(someResult); 
var filterResult = num.filter(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(filterResult); 
var mapResult = num.map(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(mapResult); 
var forEachResult = num.forEach(function(item) { 
  if(item > 2) { 
    return true; 
  } 
}); 
alert(forEachResult);