Maison > interface Web > js tutoriel > le corps du texte

Explication des astuces pour les tableaux Array en JavaScript

不言
Libérer: 2018-07-13 10:01:30
original
1517 Les gens l'ont consulté

Cet article présente principalement les conseils sur les tableaux Array en JavaScript. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

1.

Utilisez des objets comme des tableaux :

var obj = {
    length: 0,

    addElem: function addElem (elem) {
        // obj.length is automatically incremented 
        // every time an element is added.
        [].push.call(this, elem);
    }
};

// Let's add some empty objects just to illustrate.
obj.addElem({});
obj.addElem({});
console.log(obj.length);
// → 2
Copier après la connexion

Bien que obj ne soit pas un tableau, la méthode push réussit à faire croître la propriété length de obj, tout comme nous le ferions avec un tableau réel.

2. Array.prototype.sort()

arr.sort(compareFunction)

Paramètres : compareFunction
Facultatif. Utilisé pour spécifier des fonctions disposées dans un certain ordre. En cas d'omission, les éléments sont triés en fonction de la Position Unicode de chaque caractère de la chaîne vers laquelle est converti.

Si compareFunction est spécifié, le tableau sera trié en fonction de la valeur de retour de l'appel de fonction. Autrement dit, a et b sont deux éléments à comparer :

  • Si compareFunction(a, b) est inférieur à 0, alors a sera disposé avant b ; >

    Si
  • est égal à 0, les positions relatives de a et b restent inchangées
  • compareFunction(a, b)

    Si
  • est supérieur à 0, b sera disposé avant a ; .
  • compareFunction(a, b)

    Le format de la fonction de comparaison est le suivant (les chaînes et les tableaux peuvent être comparés) :

Array.prototype.unshift()

function compare(a, b) {
    if (a < b ) {           // 按某种排序标准进行比较, a 小于 b
        return -1;
    }
    if (a > b ) {
        return 1;
    }
    // a must be equal to b
    return 0;
}
Copier après la connexion

4. Array.prototype.concat()

var arr = [1, 2];
arr.unshift(-2, -1);    // = 5
// arr is [-2, -1, 1, 2]
Copier après la connexion
Renvoie un nouveau tableau (

copie superficielle

) sans affecter le tableau d'origine.

Si le paramètre est un tableau, mettez les éléments du tableau dans le résultat
  • Si le paramètre n'est pas un tableau, mettez le paramètre lui-même Les résultats sont en cours.
  • 5. Array.prototype.forEach()
var num1 = [1, 2, 3],
    num2 = [4, 5, 6],
    num3 = [7, 8, 9];

var nums = num1.concat(num2, num3);

console.log(nums); 
// results in [1, 2, 3, 4, 5, 6, 7, 8, 9];

var alpha = ['a', 'b', 'c'];

var alphaNumeric = alpha.concat(1, [2, 3]);

console.log(alphaNumeric); 
// results in ['a', 'b', 'c', 1, 2, 3]
Copier après la connexion

où :

est un paramètre facultatif, utilisé lors de l'exécution de la fonction de rappel. valeur de
array.forEach(callback(currentValue, index, array){
    //do something
}, thisArg)

array.forEach(callback[, thisArg])
Copier après la connexion
(objet de référence).

thisArgLes fonctions suivantes ont également le paramètre facultatif this, et l'utilisation est cohérente avec

 :

thisArgArray.prototype.forEach()

Array.prototype.forEach()
  • Array.prototype.every()
  • Array.prototype.some()
  • Array.prototype .filter()
  • Array.prototype.map()
  • Array.prototype.reduce()
  • Array.prototype.reduceRight()
  • 6. Array.prototype.map()
Cas de conseils d'utilisation

7.Array. prototype.reduce()

// 下面的语句返回什么呢:
["1", "2", "3"].map(parseInt);
// 你可能觉的会是[1, 2, 3]
// 但实际的结果是 [1, NaN, NaN]

// 通常使用parseInt时,只需要传递一个参数.
// 但实际上,parseInt可以有两个参数.第二个参数是进制数.
// 可以通过语句"alert(parseInt.length)===2"来验证.
// map方法在调用callback函数时,会给它传递三个参数:当前正在遍历的元素, 
// 元素索引, 原数组本身.
// 第三个参数parseInt会忽视, 但第二个参数不会,也就是说,
// parseInt把传过来的索引值当成进制数来使用.从而返回了NaN.

function returnInt(element) {
  return parseInt(element, 10);
}

['1', '2', '3'].map(returnInt); // [1, 2, 3]
// 意料之中的结果

// 也可以使用简单的箭头函数,结果同上
['1', '2', '3'].map( str => parseInt(str) );

// 一个更简单的方式:
['1', '2', '3'].map(Number); // [1, 2, 3]
// 与`parseInt` 不同,下面的结果会返回浮点数或指数:
['1.1', '2.2e2', '3e300'].map(Number); // [1.1, 220, 3e+300]
Copier après la connexion

arr.reduce(callback[, initialValue]) est similaire à son utilisation, traversant de droite à gauche.

Paramètres : Array.prototype.reduceRight()

     : Une fonction qui exécute chaque valeur du tableau, contenant quatre paramètres :
  • callback

    •  : L'accumulateur accumule la valeur de retour du rappel ; c'est la valeur accumulée renvoyée la dernière fois que le rappel a été appelé, ou
    • (comme indiqué ci-dessous).

      accumulatorinitialValue

    •  : L'élément en cours de traitement dans le tableau.
    • currentValue

    •  : Facultatif, l'index de l'élément actuel en cours de traitement dans le tableau. Si initialValue est fourni, le numéro d'index est 0, sinon l'index est 1.
    • currentIndex

    •  : Facultatif, appelant le tableau de
    • .

      arrayreduce

     : Facultatif, utilisé comme valeur du premier paramètre du premier appel de rappel. Si aucune valeur initiale n'est fournie, le premier élément du tableau sera utilisé. L'appel de
  • sur un tableau vide sans valeur initiale générera une erreur.

    initialValuereduce

    Comment exécuter réduire

Exemple : Convertir un tableau bidimensionnel en un tableau unidimensionnel

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array){
  return accumulator + currentValue;
}, 10);

// 20
Copier après la connexion

Exemple : Utilisez l'opérateur spread et initialValue lie le tableau contenu dans le tableau d'objets

var flattened = [[0, 1], [2, 3], [4, 5]].reduce(
  function(a, b) {
    return a.concat(b);
  },
  []
);
// flattened is [0, 1, 2, 3, 4, 5]
Copier après la connexion

Exemple : Déduplication de tableau

// friends - an array of objects 
// where object field "books" - list of favorite books 
var friends = [{
  name: 'Anna',
  books: ['Bible', 'Harry Potter'],
  age: 21
}, {
  name: 'Bob',
  books: ['War and peace', 'Romeo and Juliet'],
  age: 26
}, {
  name: 'Alice',
  books: ['The Lord of the Rings', 'The Shining'],
  age: 18
}];

// allbooks - list which will contain all friends' books +  
// additional list contained in initialValue
var allbooks = friends.reduce(function(prev, curr) {
  return [...prev, ...curr.books];
}, ['Alphabet']);

// allbooks = [
//   'Alphabet', 'Bible', 'Harry Potter', 'War and peace', 
//   'Romeo and Juliet', 'The Lord of the Rings',
//   'The Shining'
// ]
Copier après la connexion

Ce qui précède représente l'intégralité du contenu de cet article, j'espère que ce sera le cas. être utile à l'apprentissage de chacun. Plus Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

let arr = [1,2,1,2,3,5,4,5,3,4,4,4,4];
let result = arr.sort().reduce((init, current)=>{
    if(init.length===0 || init[init.length-1]!==current){
        init.push(current);
    }
    return init;
}, []);
console.log(result); //[1,2,3,4,5]
Copier après la connexion
Recommandations associées :

Comment utiliser le composant Angular-UI Bootstrap pour implémenter des alertes

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!