Comment convertir et trier des tableaux en Javascript ?

Ce chapitre vous présentera comment convertir et trier des tableaux en Javascript, afin que vous puissiez comprendre les méthodes de conversion et de tri de tableaux en Javascript. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Conversion de tableau

Dans notre processus de développement de projet, la conversion entre les types de données joue un rôle très important, et la conversion de tableau en d'autres types de données est un commun pour nous.

toString

Cette méthode convertit le tableau en chaîne Chaque élément du tableau appellera la méthode "toString" et renverra une nouvelle. chaîne. La chaîne est concaténée sous la forme d'une chaîne de chaque élément du tableau et les éléments sont séparés par des virgules.

Je ne comprends pas la définition. Regardons un exemple et nous le comprendrons tout de suite !

//语法
array.toString()

Cas 1

const numbers = [1, 2, 3, 4, 5];
const result = numbers.toString();
console.log(result); //1,2,3,4,5
console.log(typeof  result); //string

Cas 2

const numbers = ["A", "B", "C"];
const result = numbers.toString();
console.log(result); //A,B,C
console.log(typeof  result); //string

//利用 reduce 方法模拟 toString 的执行过程
const numbers = [1, 2, 3, 4, 5];
const result = numbers.reduce((prev, current) => {
    return  prev.toString() + "," + current.toString();
});
console.log(result); //1,2,3,4,5

Certaines personnes devraient avoir des questions après avoir vu ça, n'est-ce pas ? Ne peut-il être séparé que par des virgules ? Est-ce possible si je les sépare avec d'autres personnages ? Je peux vous dire que la méthode "toString" ne fonctionnera certainement pas, mais nous pouvons utiliser d'autres méthodes.

Comme d'habitude, nous regarderons toujours la compatibilité à la fin de chaque méthode.

join

Cette méthode convertit également un tableau en chaîne et renvoie une nouvelle chaîne de caractères. La méthode

convertira chaque élément du tableau en chaîne, puis utilisera les caractères donnés pour le concaténer en une nouvelle chaîne et nous la retournera.

Cette méthode accepte un paramètre : le séparateur que nous avons donné.

//语法
array.join(separator)

Bien que la syntaxe semble relativement simple, il y a quelques points auxquels nous devons faire attention.

Les paramètres sont facultatifs. S'il n'y a pas de paramètres, la valeur par défaut est la virgule (,. )

Le paramètre peut être une chaîne vide (""), auquel cas une chaîne sans aucun délimiteur de caractères sera renvoyée

S'il y a undéfini ou null dans les éléments du tableau, elle sera convertie en chaîne vide (" ")

les paramètres peuvent être des espaces, et les éléments seront séparés par des espaces

const numbers = [1, 2, 3, 4, 5];
const result1 = numbers.join();
console.log(result1);//1,2,3,4,5
const result2 = numbers.join("");
console.log(result2);//12345
const result3 = numbers.join(" ");
console.log(result3);//1 2 3 4 5
const result4 = numbers.join("-");
console.log(result4);//1-2-3-4-5
const result5 = numbers.join("A");
console.log(result5);//1A2A3A4A5

Quelle est la compatibilité de la méthode "sort" ? Directement au-dessus de la photo.

Tri des tableaux

Il existe de nombreux scénarios pour le tri des tableaux, tels que l'ordre croissant des tables. est utilisé par ordre décroissant, en organisant les données de grande à petite ou en les organisant selon certaines règles. Comment utiliser efficacement les méthodes de tri des données, vous devez tout d'abord avoir une certaine compréhension de ces méthodes avant de pouvoir utiliser des méthodes plus appropriées.

reverse

On devrait pouvoir deviner la fonction de cette méthode à partir du nom, qui est d'inverser l'ordre des éléments dans le tableau.

//语法
array.reverse()

//案例
const numbers = [1, 2, 3, 4, 5];
numbers.reverse();
console.log(numbers); //[5, 4, 3, 2, 1]

La méthode est relativement simple, et il n'y a rien à expliquer, mais il existe relativement peu de scénarios d'application dans les projets réels, nous n'avons pas une structure de données aussi simple ou aussi simple. règle de tri, comme suit Concentrons-nous sur une méthode de tri très puissante et flexible.

Compatibilité de la méthode "inverse".

sort

Cette méthode trie les éléments du tableau, par défaut par ordre croissant. Regardons d'abord deux exemples

//案例1
const numbers = [1, 3, 5, 2, 4];
numbers.sort();
console.log(numbers); //[1, 2, 3, 4, 5]

//案例2
const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort();
console.log(numbers2);//[1, 15, 2, 20, 3]

Vous constaterez que les règles de tri ne sont pas ce que l'on pensait, que se passe-t-il ?
En fait, lorsque la méthode "sort" est exécutée, chaque élément du tableau exécutera d'abord une fois la méthode toString(), puis triera selon l'encodage Unicode de la chaîne.

Alors, que pouvons-nous faire pour trier selon nos propres souhaits ou règles ?

其实「sort」方法还接受一个可选的参数：该参数是一个函数，它可以用来指定我们数组排序的规则。

//语法
array.sort([callback])

那么我们应该如何利用这个参数去指定我们排序的规则呢？参数函数接受两个参数，然后会根据返回的两个参数的比较值进行排序。

array.sort(compare(a, b){
    return a- b
});

排序的规则如下：

• 如果 a - b 小于 0 ，那么 a 在 b 的前面，也就是会按照升序排列

• 如果 a - b 等于 0 ，那么 a 和 b 的位置相对不变

• 如果 a - b 大于 0 ，那么 b 在 a 的前面，也就是会按照降序排列。

例如我们想把上面的案例2中的数组按照数字的大小进行排列，我们只需要加入上面我们说的比较函数

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return a- b;
});
console.log(numbers2);//[1, 2, 3, 15, 20]

是不是 so easy！如果我们想要进行降序排列也很简单，调换一个我们的计算方法就行。

const numbers2 = [1, 15, 20, 2, 3];
numbers2.sort(function(a ,b){
    return b - a;
});
console.log(numbers2);//[20, 15, 3, 2, 1]

但是在实际的使用当中我们不仅仅比较的是数字与字符类型，也可以能是比较的是对象，不过没关系我们依旧可以使用对象的属性去进行排序。

const friends = [{
    name: "大B哥",
    age: 25
}, {
    name: "二B哥",
    age: 30
}, {
    name: "三B哥",
    age: 28
}, {
    name: "我",
    age: 14
}];
friends.sort(function(a, b){
    return b.age - a.age;
});
console.log(friends);

//排序之后
//[{name: "二B哥", age: 30},
//{name: "三B哥", age: 28},
//{name: "大B哥", age: 25},
//{name: "我", age: 14}]

可以看到我交的朋友一般都比较偏大，一眼就能看出哪个是最大的，哪个是最小的，不过我相信大家也看出来了，最小的哪个就是我（… 哈哈）。

至于 sort 更多更有趣的方法，小伙伴们不妨自己去寻找尝试吧。

继续来看看「sort」方法的兼容性。

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!