Conversions et transformations de tableaux JavaScript

Array est une structure de données basique et puissante en programmation. Leur pouvoir ne vient pas seulement de leur capacité à stocker plusieurs objets ou valeurs. Ils exposent également une variété d’outils qui facilitent la manipulation et l’utilisation des données qu’ils contiennent.

Nous devons souvent modifier les baies pour répondre à des besoins spécifiques. Par exemple, vous devrez peut-être réorganiser les objets d'un tableau afin qu'ils soient classés en fonction de la valeur d'une propriété spécifique, ou vous devrez peut-être fusionner plusieurs tableaux en un seul tableau. Dans de nombreux cas, vous devrez peut-être convertir complètement un tableau d'objets en un autre tableau d'objets complètement différents.

Dans ce didacticiel, vous découvrirez les outils fournis par JavaScript pour fusionner, copier, transformer et filtrer des tableaux. Cependant, avant de commencer, je dois souligner que même si j'utilise les termes « fusionner », « convertir », « convertir » et « filtrer », ces processus modifient rarement les tableaux existants. Au lieu de cela, ils créent un nouveau tableau contenant les données fusionnées, transformées et filtrées, laissant le tableau d'origine inchangé dans son format d'origine.

Accédez à cette section :

• Fusionner les tableaux
• Copier le tableau
• Convertir un tableau en chaîne
• Convertir le tableau
• Matrice de filtres

Fusionner les tableaux

Peut-être que vous traitez des données provenant de différentes sources, ou peut-être avez-vous plusieurs tableaux et souhaitez-vous les combiner en un seul tableau pour faciliter leur traitement. Quelle que soit la raison, vous devez parfois combiner plusieurs tableaux en un seul. JavaScript nous offre deux façons de combiner des tableaux. Vous pouvez utiliser concat() 方法或展开运算符 (...).

concat() est utilisée pour fusionner deux ou plusieurs tableaux et renvoyer un nouveau tableau contenant les éléments des tableaux fusionnés. Le nouveau tableau sera d'abord rempli d'éléments de l'objet tableau sur lequel vous avez appelé la méthode. Il sera ensuite rempli avec les éléments de l'objet tableau que vous avez passé à la méthode. Par exemple :

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = array1.concat(array2);
console.log(mergedArray); // output: [1, 2, 3, 4, 5, 6]

Dans ce code, nous avons deux tableaux, array1 et array2. Nous fusionnons ces tableaux dans un nouveau tableau appelé mergedArray en utilisant la méthode array1 和 array2。我们使用 concat() 方法将这些数组合并到一个名为 mergedArray 的新数组中，您可以看到生成的数组包含元素 [1, 2, 3, 4, 5, 6]。下面的示例更改代码，以便在 array2 上调用 concat(), vous pouvez voir que le tableau résultant contient les éléments [1, 2, 3, 4, 5, 6] </ code>. L'exemple suivant modifie le code pour appeler la méthode </p> sur <code>array2 :

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray2 = array2.concat(array1);
console.log(mergedArray2); // output: [4, 5, 6, 1, 2, 3]

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const mergedArray = [...array1, ...array2];
console.log(mergedArray); // output: [1, 2, 3, 4, 5, 6]

Il existe plusieurs raisons pour lesquelles vous souhaiterez peut-être copier un tableau. Vous souhaiterez peut-être conserver les données d'origine du tableau (s'il s'agit de valeurs simples) ou éviter tout effet secondaire involontaire lié à l'utilisation ou à la manipulation de l'objet tableau lui-même. Pour une raison quelconque, JavaScript facilite la création de copies de tableaux.

slice()Pour créer une copie d'un tableau, vous pouvez utiliser la méthode . Cette méthode renvoie une copie superficielle du tableau sur lequel vous l'avez appelée (nous y reviendrons plus tard). Par exemple :

const originalArray = [1, 2, 3, 4, 5];
const copiedArray = originalArray.slice();

console.log(copiedArray); // output: [1, 2, 3, 4, 5]

const originalArray = [1, 2, 3, 4, 5];
const slicedArray = originalArray.slice(1, 4);

console.log(slicedArray); // output: [2, 3, 4]

const originalArray = [1, 2, { a: 3 }];
const shallowCopy = originalArray.slice();
const deepCopy = JSON.parse(JSON.stringify(originalArray));

originalArray[2].a = 4;

console.log(shallowCopy); // output: [1, 2, { a: 4 }]
console.log(deepCopy); // output: [1, 2, { a: 3 }]

const fruitArray = ['apple', 'banana', 'cherry'];
const fruitString = fruitArray.join(', ');

console.log(fruitString); // output: "apple, banana, cherry"

const queryParamsArray = [
  'search=JavaScript',
  'page=1',
  'sort=relevance',
];

const queryString = queryParamsArray.join('&');

const url = 'https://example.com/api?' + queryString;
console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

map(function (currentElement[, index, array]));

const numbers = [1, 2, 3, 4, 5];

function square(number) {
  return number * number;
}

const squaredNumbers = numbers.map(square);

console.log(squaredNumbers); // output: [1, 4, 9, 16, 25]

const queryParams = [
  { param: 'search', value: 'JavaScript' },
  { param: 'page', value: 1 },
  { param: 'sort', value: 'relevance' },
];

function createParams(obj) {
  return obj.param + '=' + obj.value;
}

const queryStringArray = queryParams.map(createParams);

const queryString = queryStringArray.join('&');

const url = 'https://example.com/api?' + queryString;
console.log(url); // output: "https://example.com/api?search=JavaScript&page=1&sort=relevance"

filter(function(currentElement[, index, array]));

const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];

function isEven(number) {
  return number % 2 === 0;
}

const evenNumbers = numbers.filter(isEven);

console.log(evenNumbers); // output: [2, 4, 6, 8, 10]