1
00:00:01,080 --> 00:00:03,000
Y ahora, el último método de matriz.

2
00:00:03,000 --> 00:00:04,830
del que quiero hablar rápidamente,

3
00:00:04,830 --> 00:00:07,170
porque también lo usamos con bastante frecuencia

4
00:00:07,170 --> 00:00:10,833
en aplicaciones React, es el método de clasificación.

5
00:00:12,030 --> 00:00:13,380
Y como dice el nombre,

6
00:00:13,380 --> 00:00:16,383
Podemos usar este método para ordenar una matriz.

7
00:00:18,000 --> 00:00:21,633
Así que, básicamente, comencemos con una pequeña matriz de demostración.

8
00:00:25,320 --> 00:00:27,363
Démosle solo algunos números,

9
00:00:30,150 --> 00:00:33,753
y creemos aquí una nueva matriz basada en esa matriz.

10
00:00:34,590 --> 00:00:37,650
Entonces x.ordenar,

11
00:00:37,650 --> 00:00:41,290
y aquí necesitamos pasar una función con dos argumentos

12
00:00:42,420 --> 00:00:45,720
y normalmente los llamamos simplemente a y b.

13
00:00:45,720 --> 00:00:48,240
Y en realidad no entraré en

14
00:00:48,240 --> 00:00:51,990
cómo este algoritmo y cómo funciona este método aquí,

15
00:00:51,990 --> 00:00:55,260
pero déjame decirte que para ordenar esta matriz

16
00:00:55,260 --> 00:00:59,613
de forma ascendente, hacemos un menos b.

17
00:01:01,230 --> 00:01:02,063
¿bueno?

18
00:01:02,063 --> 00:01:05,520
Y ahora, oh, y en realidad no podemos hacer esto.

19
00:01:05,520 --> 00:01:09,423
porque aparentemente ya lo usamos antes.

20
00:01:12,990 --> 00:01:15,150
Bien, ahora echemos un vistazo a ordenado.

21
00:01:15,150 --> 00:01:19,260
Y efectivamente, ahora está ordenado de forma ascendente.

22
00:01:19,260 --> 00:01:21,300
Entonces, comenzando desde el número más bajo,

23
00:01:21,300 --> 00:01:23,550
hasta llegar a lo más alto.

24
00:01:23,550 --> 00:01:26,970
Ahora muy, muy brevemente, lo que sucede aquí es que

25
00:01:26,970 --> 00:01:29,910
Básicamente, JavaScript revisa la matriz,

26
00:01:29,910 --> 00:01:33,810
entonces lo recorre y captó esta función aquí.

27
00:01:33,810 --> 00:01:38,460
Y a y b son siempre el valor actual y el siguiente valor.

28
00:01:38,460 --> 00:01:40,410
Y luego aquí en la función de devolución de llamada,

29
00:01:40,410 --> 00:01:42,780
cuando devolvemos un valor negativo,

30
00:01:42,780 --> 00:01:45,750
entonces estos dos números básicamente se ordenarán

31
00:01:45,750 --> 00:01:47,310
de forma ascendente.

32
00:01:47,310 --> 00:01:50,790
Entonces el pequeño número será lo primero,

33
00:01:50,790 --> 00:01:54,030
y luego vendrá el número mayor.

34
00:01:54,030 --> 00:01:55,710
Y si hacemos lo contrario,

35
00:01:55,710 --> 00:01:58,230
entonces si devolvemos un número positivo,

36
00:01:58,230 --> 00:02:00,750
entonces, mientras sucederá lo contrario,

37
00:02:00,750 --> 00:02:04,980
entonces estos dos valores se ordenarán de forma descendente.

38
00:02:04,980 --> 00:02:08,850
Y así, devolvemos estos números positivos o negativos.

39
00:02:08,850 --> 00:02:11,700
simplemente restando uno menos el otro.

40
00:02:11,700 --> 00:02:14,970
Entonces aquí a y b en este ejemplo serán tres y siete,

41
00:02:14,970 --> 00:02:19,140
y entonces tres menos siete es menos cuatro.

42
00:02:19,140 --> 00:02:23,010
Y entonces, sí, luego se ordenarán de forma ascendente,

43
00:02:23,010 --> 00:02:24,570
Como dije antes.

44
00:02:24,570 --> 00:02:25,950
Pero eso no es realmente importante.

45
00:02:25,950 --> 00:02:29,220
Básicamente deberías seguir esto como una receta.

46
00:02:29,220 --> 00:02:31,470
Entonces, cuando haces menos b,

47
00:02:31,470 --> 00:02:33,720
se ordenará de forma ascendente.

48
00:02:33,720 --> 00:02:37,053
Cuando haces b menos a, entonces desciendes.

49
00:02:39,330 --> 00:02:43,083
De hecho, ahora comenzamos con nueve y con uno.

50
00:02:43,980 --> 00:02:47,400
Ahora bien, ¿qué es lo más sorprendente del método de clasificación?

51
00:02:47,400 --> 00:02:51,783
es lo que sucede cuando ahora revisamos arr.

52
00:02:52,830 --> 00:02:57,150
Así que arr también se ha solucionado, ¿verdad?

53
00:02:57,150 --> 00:03:01,530
Entonces también ahora comienza desde nueve, termina en uno,

54
00:03:01,530 --> 00:03:03,930
y cambiamos esto,

55
00:03:03,930 --> 00:03:08,250
entonces verás que ambas matrices son exactamente iguales.

56
00:03:08,250 --> 00:03:09,933
Entonces, ¿qué pasó aquí?

57
00:03:10,830 --> 00:03:12,360
Bueno, lo que pasó es que

58
00:03:12,360 --> 00:03:15,600
a diferencia del método de filtrado y reducción de mapas,

59
00:03:15,600 --> 00:03:18,000
Este no es un método funcional.

60
00:03:18,000 --> 00:03:21,720
Entonces este es en realidad un método que muta,

61
00:03:21,720 --> 00:03:24,450
entonces cambia la matriz original.

62
00:03:24,450 --> 00:03:27,660
Y en realidad ni siquiera tuvimos que almacenar esto.

63
00:03:27,660 --> 00:03:29,700
en una nueva matriz, ¿verdad?

64
00:03:29,700 --> 00:03:34,680
Porque de todos modos ya cambió esta matriz original.

65
00:03:34,680 --> 00:03:37,830
Sin embargo, normalmente no queremos que eso suceda,

66
00:03:37,830 --> 00:03:40,770
especialmente en un marco de front-end como React,

67
00:03:40,770 --> 00:03:45,060
lo cual realmente no nos gusta que mutemos datos.

68
00:03:45,060 --> 00:03:47,100
Entonces, un buen truco que podemos hacer aquí.

69
00:03:47,100 --> 00:03:50,970
es tomar primero una copia de la matriz,

70
00:03:50,970 --> 00:03:55,920
simplemente haciendo array.slice y abriendo y cerrando.

71
00:03:55,920 --> 00:03:59,160
Y esto básicamente devolverá una matriz completamente nueva,

72
00:03:59,160 --> 00:04:00,597
que es una copia de éste.

73
00:04:00,597 --> 00:04:05,597
Y entonces, en esa matriz, podemos encadenar el método de clasificación.

74
00:04:06,330 --> 00:04:07,800
Y entonces ves que con esto,

75
00:04:07,800 --> 00:04:11,820
lo ordenado sigue siendo, sí, la matriz ordenada,

76
00:04:11,820 --> 00:04:15,480
pero arr is ahora vuelve a ser el original.

77
00:04:15,480 --> 00:04:19,020
Entonces ahora no se ha visto afectado porque, sí,

78
00:04:19,020 --> 00:04:21,630
antes de clasificar tomamos una copia

79
00:04:21,630 --> 00:04:26,630
y luego clasificamos solo esta copia, pero no el arr en sí.

80
00:04:30,660 --> 00:04:31,493
¿bueno?

81
00:04:31,493 --> 00:04:34,380
Pero volviendo ahora a ejemplos más prácticos,

82
00:04:34,380 --> 00:04:37,320
porque rara vez tenemos una matriz como esta

83
00:04:37,320 --> 00:04:38,610
que necesitamos ordenar,

84
00:04:38,610 --> 00:04:42,540
pero normalmente siempre tenemos una variedad de objetos.

85
00:04:42,540 --> 00:04:45,885
Entonces es muy común que tengamos que ordenar eso.

86
00:04:45,885 --> 00:04:48,360
Y entonces digamos ordenados por páginas.

87
00:04:52,980 --> 00:04:55,465
Como puedes imaginar, ahora ordenaremos

88
00:04:55,465 --> 00:04:59,553
toda la matriz de libros por el número de páginas.

89
00:05:00,690 --> 00:05:04,470
Así que books.slice, de nuevo,

90
00:05:04,470 --> 00:05:06,333
Es muy importante llevar una copia aquí.

91
00:05:08,340 --> 00:05:10,413
Entonces aquí simplemente seguimos esa receta.

92
00:05:11,580 --> 00:05:15,030
Entonces a, b, y digamos que queremos uno descendente,

93
00:05:15,030 --> 00:05:18,090
y entonces decimos b,

94
00:05:18,090 --> 00:05:20,700
pero ahora no es sólo b menos a, ¿verdad?

95
00:05:20,700 --> 00:05:24,240
Porque estos son ahora los dos objetos del libro.

96
00:05:24,240 --> 00:05:26,880
Y, por supuesto, no podemos restarlos.

97
00:05:26,880 --> 00:05:29,523
Entonces necesitamos, todavía, un valor numérico aquí.

98
00:05:30,390 --> 00:05:32,280
Y como queremos ordenar por páginas,

99
00:05:32,280 --> 00:05:33,580
hacemos b.páginas

100
00:05:34,710 --> 00:05:37,350
menos a.páginas,

101
00:05:37,350 --> 00:05:40,410
y ahora ordenados por páginas,

102
00:05:40,410 --> 00:05:42,480
y si,

103
00:05:42,480 --> 00:05:44,103
Realmente no puedo ver eso allí.

104
00:05:46,440 --> 00:05:49,350
Cerremos todos estos.

105
00:05:49,350 --> 00:05:50,183
sí.

106
00:05:51,600 --> 00:05:54,660
Entonces comenzamos con "El señor de los anillos".

107
00:05:54,660 --> 00:05:56,670
que tiene 1200 algo,

108
00:05:56,670 --> 00:05:57,783
luego 800,

109
00:05:58,950 --> 00:06:00,093
600,

110
00:06:01,517 --> 00:06:02,350
200,

111
00:06:03,450 --> 00:06:08,450
y luego el más corto es "Harry Potter", con 223 páginas.

112
00:06:08,820 --> 00:06:10,860
Entonces eso funcionó perfectamente.

113
00:06:10,860 --> 00:06:13,743
Hagamos lo contrario, sólo para estar seguros.

114
00:06:16,800 --> 00:06:19,893
Y sí, ahora "Harry Potter" es el primero en la fila,

115
00:06:20,742 --> 00:06:24,900
y sí, ahora está ordenado de forma ascendente.

116
00:06:24,900 --> 00:06:26,550
Entonces hacemos esto todo el tiempo,

117
00:06:26,550 --> 00:06:29,880
y ahora, cuando hago esto dentro del curso de React,

118
00:06:29,880 --> 00:06:32,970
Ya no necesitaré explicar lo que estamos haciendo,

119
00:06:32,970 --> 00:06:35,613
y simplemente seguiré esta receta.