├── img-ilustrativa.jpg ├── src ├── es6 │ ├── module.js │ ├── tempCodeRunnerFile.js │ └── index.js ├── es7 │ ├── tempCodeRunnerFile.js │ └── index.js ├── es10 │ ├── tempCodeRunnerFile.js │ └── index.js ├── es9 │ ├── tempCodeRunnerFile.js │ └── index.js └── es8 │ ├── tempCodeRunnerFile.js │ └── index.js ├── package.json └── README.md /img-ilustrativa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexcamachogz/ECMAScript6/HEAD/img-ilustrativa.jpg -------------------------------------------------------------------------------- /src/es6/module.js: -------------------------------------------------------------------------------- 1 | // Module 2 | const hello = () => { 3 | return 'Hello!'; 4 | } 5 | 6 | export default hello; -------------------------------------------------------------------------------- /src/es7/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | let base = 4; 2 | let exponent = 4; 3 | let result = base ** exponent 4 | console.log(result); -------------------------------------------------------------------------------- /src/es10/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | // symbol 2 | let mySymbl = `My symbol`; 3 | let symbol = Symbol(mySymbl); 4 | console.log(symbol.description); -------------------------------------------------------------------------------- /src/es9/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; 2 | const match = regexData.exec('2020-04-20'); 3 | const year = match[1]; 4 | const month = match[2]; 5 | const day = match[3]; 6 | 7 | console.log(year, month, day); -------------------------------------------------------------------------------- /src/es7/index.js: -------------------------------------------------------------------------------- 1 | // Includes 2 | let numbers = [1, 2, 3, 7, 8]; 3 | 4 | if (numbers.includes(7)) { 5 | console.log('Found Value'); 6 | } else { 7 | console.log('Not found'); 8 | } 9 | 10 | // Pow 11 | let base = 4; 12 | let exponent = 4; 13 | let result = base ** exponent 14 | console.log(result); -------------------------------------------------------------------------------- /src/es6/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | // Generator 2 | function* helloWorld() { 3 | if (true) { 4 | yield 'Hello, '; 5 | } 6 | if (true) { 7 | yield 'World'; 8 | } 9 | }; 10 | 11 | const generatorHello = helloWorld(); 12 | console.log(generatorHello.next().value); 13 | console.log(generatorHello.next().value); 14 | console.log(generatorHello.next().value); -------------------------------------------------------------------------------- /src/es8/tempCodeRunnerFile.js: -------------------------------------------------------------------------------- 1 | const helloWorld = () => { 2 | return new Promise((resolve, reject) => { 3 | (true) 4 | ? setTimeout(() => resolve('Hello World!'), 3000) 5 | : reject(new Error('Test error')); 6 | }); 7 | }; 8 | 9 | const helloAsync = async () => { 10 | const hello = await helloWorld(); 11 | console.log(hello); 12 | }; 13 | 14 | helloAsync(); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecmascript-6", 3 | "version": "1.0.0", 4 | "description": "Understanding ECMAScript 6+", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "keywords": [ 10 | "ECMAScript", 11 | "Js" 12 | ], 13 | "author": "Alejandra Camacho ", 14 | "license": "MIT" 15 | } 16 | -------------------------------------------------------------------------------- /src/es10/index.js: -------------------------------------------------------------------------------- 1 | // array.flat 2 | let array = [1, 2, 3, [1, 2, 3, [1, 2, 3]]]; 3 | let depth = 2; 4 | console.log(array.flat(depth)); 5 | 6 | // flatmap 7 | let array = [1, 2, 3, 4, 5]; 8 | console.log( 9 | array.flatMap( value => 10 | [value, value * 2] 11 | ) 12 | ); 13 | 14 | // trim start 15 | let hello = ' hello world!' 16 | console.log(hello); 17 | console.log(hello.trimStart()); 18 | 19 | // trim end 20 | let hello = 'hello world! ' 21 | console.log(hello); 22 | console.log(hello.trimEnd()); 23 | 24 | // fromEntries array to object 25 | let entries = [["name", "Alex"], ["age", 26]]; 26 | console.log(Object.fromEntries(entries)); 27 | 28 | // symbol 29 | let mySymbl = `My symbol`; 30 | let symbol = Symbol(mySymbl); 31 | console.log(symbol.description); -------------------------------------------------------------------------------- /src/es9/index.js: -------------------------------------------------------------------------------- 1 | const obj = { 2 | name: 'Alex', 3 | age: 26, 4 | country: 'MX' 5 | } 6 | 7 | // spread operator 8 | let { name, ...all } = obj; 9 | console.log(name, all); 10 | 11 | const obj = { 12 | name: 'Alex', 13 | age: 26, 14 | } 15 | 16 | const obj1 = { 17 | ...obj, 18 | country: 'MX', 19 | } 20 | 21 | console.log(obj1); 22 | 23 | // Promise finally 24 | const helloWorld = () => { 25 | return new Promise((resolve, reject) => { 26 | (true) 27 | ? resolve('Hello World!') 28 | : reject(new Error('Test error')); 29 | }); 30 | }; 31 | 32 | helloWorld() 33 | .then(response => console.log(response)) 34 | .catch(error => console.log(error)) 35 | .finally(() => console.log('Promise end')); 36 | 37 | // Regex 38 | const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; 39 | const match = regexData.exec('2020-04-20'); 40 | const year = match[1]; 41 | const month = match[2]; 42 | const day = match[3]; 43 | 44 | console.log(year, month, day); -------------------------------------------------------------------------------- /src/es8/index.js: -------------------------------------------------------------------------------- 1 | const data = { 2 | frontend: 'Alex', 3 | backend: 'Samuel', 4 | design: 'Mariana' 5 | } 6 | 7 | // Object entries 8 | const entries = Object.entries(data); 9 | console.log(entries); 10 | console.log(entries.length); 11 | 12 | // Object values 13 | const values = Object.values(data); 14 | console.log(values); 15 | console.log(values.length); 16 | 17 | // Padding 18 | const string = 'Hello'; 19 | let maxLength = 8; 20 | let addStart = 'Hi '; 21 | let addEnd = "!!!" 22 | console.log(string.padStart(maxLength, addStart)); 23 | console.log(string.padEnd(maxLength, addEnd)); 24 | 25 | // Trailing commas 26 | const names = { 27 | name: 'Alex', 28 | } 29 | 30 | // Async await 31 | const helloWorld = () => { 32 | return new Promise((resolve, reject) => { 33 | (true) 34 | ? setTimeout(() => resolve('Hello World!'), 3000) 35 | : reject(new Error('Test error')); 36 | }); 37 | }; 38 | 39 | const helloAsync = async () => { 40 | const hello = await helloWorld(); 41 | console.log(hello); 42 | }; 43 | 44 | helloAsync(); 45 | 46 | const anotherFunction = async () => { 47 | try { 48 | const hello = await helloWorld(); 49 | console.log(hello); 50 | } catch (err) { 51 | console.log(err); 52 | } 53 | } 54 | 55 | anotherFunction(); -------------------------------------------------------------------------------- /src/es6/index.js: -------------------------------------------------------------------------------- 1 | // ----------- Class 001 2 | // Before ECMAScript 6 -> Default Params 3 | function newFunction(name, age, country) { 4 | var name = name || 'Alex'; 5 | var age = age || 26; 6 | var country = country || 'MX' 7 | console.log(name, age, country); 8 | } 9 | // ES6 -> Default Params 10 | function newFunction2(name = 'Alex', age = 26, country = 'MX') { 11 | console.log(name, age, country); 12 | } 13 | 14 | // With default Params 15 | newFunction2(); 16 | // Specifying parameters 17 | newFunction2('Mariana', 24, 'JA'); 18 | 19 | // Template literals 20 | let hello = 'Hello'; 21 | let world = 'World'; 22 | // Before ES6 -> Concatenation 23 | let epicPhrase = hello + ' ' + world + '!'; 24 | console.log(epicPhrase); 25 | // ES6 -> Concatenation 26 | let epicPhrase2 = `${hello} ${world}!`; 27 | console.log(epicPhrase2); 28 | 29 | // ----------- Class 002 30 | // Before ES6 -> Multiline 31 | let lorem = 'Lorem ipsum dolor sit amet. \n' + 'Praesentium, nesciunt!'; 32 | // ES -> Multiline 33 | let lorem2 = `Lorem ipsum dolor sit amet. 34 | Praesentium, nesciunt!` 35 | 36 | console.log(lorem); 37 | console.log(lorem2); 38 | 39 | // Elements Destructuring 40 | let person = { 41 | 'name': 'Alex', 42 | 'age': 32, 43 | 'country': 'MX' 44 | } 45 | // Before ES6 46 | console.log(person.name, person.age, person.country); 47 | // ES6 48 | let { name, age, country } = person; 49 | console.log(name, age, country); 50 | 51 | // Spread Operator 52 | let team1 = ['Alex', 'Oscar', 'Manuel']; 53 | let team2 = ['Valeria', 'Mariana', 'Camila']; 54 | // ES6 55 | let education = ['David', ...team1, ...team2]; 56 | console.log(education); 57 | 58 | // Let 59 | // Before ES6 -> Global Scope, deprecate 60 | var hello = 'Hello'; 61 | { 62 | var globalVar = "Global Var"; 63 | } 64 | { 65 | // ES6 -> Local Scope 66 | let globalLet = 'Global Let'; 67 | console.log(globalLet); 68 | } 69 | console.log(globalVar); 70 | 71 | // Const 72 | // ES6 -> Const, cannot be reassigned 73 | const HELLO = 'Hello World!'; 74 | 75 | // ----------- Class 003 76 | // Object 77 | let name = 'Alex'; 78 | let age = 26; 79 | 80 | // Before ES6 -> Create object 81 | obj = { name: name, age: age }; 82 | // ES6 83 | obj2 = { name, age }; 84 | console.log(obj2); 85 | 86 | // Arrow function 87 | const NAMES = [ 88 | {name: 'Alex', age: 26}, 89 | {name: 'Matty', age: 24} 90 | ] 91 | // Before ES6 92 | let listOfNames = NAMES.map(function(item) { 93 | console.log(item.name); 94 | }); 95 | // ES6 96 | let listOfName2 = NAMES.map( (item) => { 97 | console.log(item.age); 98 | }); 99 | 100 | // Promises 101 | const helloPromise = () => { 102 | return new Promise((resolve, reject) => { 103 | if (true) { 104 | resolve('Hey!'); 105 | } else { 106 | reject('Ups!!'); 107 | } 108 | }); 109 | } 110 | 111 | helloPromise() 112 | .then(response => { 113 | console.log(response); 114 | }) 115 | .catch(error => { 116 | console.log(error); 117 | }); 118 | 119 | // ----------- Class 004 120 | // Class 121 | class calculator { 122 | constructor() { 123 | this.valueA = 0; 124 | this.valueB = 0; 125 | } 126 | 127 | add(valueA, valueB) { 128 | this.valueA = valueA; 129 | this.valueB = valueB; 130 | return this.valueA + this.valueB; 131 | } 132 | } 133 | 134 | const calc = new calculator(); 135 | console.log(calc.add(2,2));; 136 | 137 | // Module 138 | import { hello } from './module'; 139 | hello(); 140 | 141 | // Generator 142 | function* helloWorld() { 143 | if (true) { 144 | yield 'Hello, '; 145 | } 146 | if (true) { 147 | yield 'World'; 148 | } 149 | }; 150 | 151 | const generatorHello = helloWorld(); 152 | console.log(generatorHello.next().value); 153 | console.log(generatorHello.next().value); 154 | console.log(generatorHello.next().value); -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ECMAScript 6+ 2 | 3 | Created: Aug 22, 2020 7:55 PM \ 4 | Created by: [Alex Camacho](https://twitter.com/alexcamachogz) \ 5 | Tags: JavaScript, 📓Notes \ 6 | Updated: Aug 23, 2020 2:46 PM 7 | 8 | ![](img-ilustrativa.jpg) 9 | 10 | ## ECMAScript 6 (2015) 11 | 12 | ECMAScript es el estándar que define cómo debe de ser el lenguaje Javascript. Incluyó bastante novedades y actualizaciones respecto a sus versiones anteriores. En cada sección se ilustrará como se realizaba antes del ES6 y como se debe de realizar con el estandar actual. 13 | 14 | ### Parámetros por defecto 15 | 16 | Los parámetros por defecto *(default params)* son aquellos valores que se le envian a una función en caso de que al ser invocada no se le especifique algún parámetro. 17 | 18 | → Antes ES6 19 | 20 | ```jsx 21 | function newFunction(name, age, country) { 22 | var name = name || 'Alex'; 23 | var age = age || 26; 24 | var country = country || 'MX' 25 | console.log(name, age, country); 26 | } 27 | ``` 28 | 29 | → ES6 30 | 31 | ```jsx 32 | function newFunction2(name = 'Alex', age = 26, country = 'MX') { 33 | console.log(name, age, country); 34 | } 35 | ``` 36 | 37 | Como podemos ver el código se vuelve más simple y limpio. 38 | 39 | ### Template literals 40 | 41 | Los template literals fueron introducidos también dentro del ES6 y es una forma más intuitiva de concatenar valores. 42 | 43 | → Antes ES6 44 | 45 | ```jsx 46 | let hello = "Hello"; 47 | let world = "World"; 48 | 49 | let epicPhrase = hello + ' ' + world + '!'; 50 | ``` 51 | 52 | → ES6 53 | 54 | ```jsx 55 | let epicPhrase2 = `${hello} ${world}!`; 56 | ``` 57 | 58 | ### Multilinea 59 | 60 | La multilinea es una caracteristica introducida en el ES como parte de las facilidades que traen los template literals. 61 | 62 | → Antes ES6 63 | 64 | ```jsx 65 | let lorem = 'Lorem ipsum dolor sit amet. \n' + 'Praesentium, nesciunt!'; 66 | ``` 67 | 68 | → ES6 69 | 70 | ```jsx 71 | let lorem2 = `Lorem ipsum dolor sit amet. 72 | Praesentium, nesciunt!` 73 | ``` 74 | 75 | ### Desestructuración de objetos 76 | 77 | La desestructuración de objetos nos permite obtener los valores de los objetos de una forma más sencilla y sin utilizar la notación de punto. 78 | 79 | → Antes ES6 80 | 81 | ```jsx 82 | let person = { 83 | 'name': 'Alex', 84 | 'age': 32, 85 | 'country': 'MX' 86 | } 87 | console.log(person.name, person.age, person.country); 88 | ``` 89 | 90 | → ES6 91 | 92 | ```jsx 93 | let { name, age, country } = person; 94 | console.log(name, age, country); 95 | ``` 96 | 97 | ### Operador de propagación 98 | 99 | Este operador, mejor conocido como *spread* fue introducido en el ES6 como nueva caracteristica. Nos permite 'expandir' varios elementos cuando por ejemplo tenemos elementos en arreglos y buscamos unirlos en uno solo. 100 | 101 | → ES6 102 | 103 | ```jsx 104 | 105 | let team1 = ['Alex', 'Oscar', 'Manuel']; 106 | let team2 = ['Valeria', 'Mariana', 'Camila']; 107 | 108 | // ES6 109 | let education = ['David', ...team1, ...team2]; 110 | console.log(education); 111 | ``` 112 | 113 | ### Let y const 114 | 115 | Let y const son dos formas nuevas de declarar variables y constantes, dejando de lado el uso de var. Donde let tiene un scope local y de bloque al igual que const que además actua como constate a la que no se le puede reasignar un valor. 116 | 117 | → ES6 118 | 119 | ```jsx 120 | { var globalVar = "Global Var"; } 121 | 122 | { 123 | // ES6 124 | let globalLet = 'Global Let'; 125 | console.log(globalLet); 126 | } 127 | 128 | console.log(globalVar); 129 | 130 | // Const, cannot be reassigned 131 | const HELLO = 'Hello World!'; 132 | ``` 133 | 134 | ### Objetos 135 | 136 | Una de las caracteristicas de los objetos dentro del ES6 es la manera en que se simplifico la asignación de valores. 137 | 138 | → Antes ES6 139 | 140 | ```jsx 141 | let name = 'Alex'; 142 | let age = 26; 143 | 144 | obj = { 145 | name: name, 146 | age: age 147 | }; 148 | ``` 149 | 150 | → ES6 151 | 152 | ```jsx 153 | obj2 = { name, age }; 154 | ``` 155 | 156 | ### Funciones de flecha 157 | 158 | Las funciones de flecha son una forma más elegante de escribir funciones anónimas. 159 | 160 | → Antes ES6 161 | 162 | ```jsx 163 | const NAMES = [ 164 | {name: 'Alex', age: 26}, 165 | {name: 'Matty', age: 24} 166 | ] 167 | 168 | let listOfNames = NAMES.map(function(item) { 169 | console.log(item.name); 170 | }); 171 | ``` 172 | 173 | → ES6 174 | 175 | ```jsx 176 | let listOfName2 = NAMES.map((item) => { 177 | console.log(item.age); 178 | }); 179 | ``` 180 | 181 | ### Promesas 182 | 183 | Las promesas fueron introducidas en el ES6 para mejorar el asincronismo en javascript y como una solución al *callback hell*. 184 | 185 | → ES6 186 | 187 | ```jsx 188 | const helloPromise = () => { 189 | return new Promise((resolve, reject) => { 190 | if (true) { 191 | resolve('Hey!'); 192 | } else { 193 | reject('Ups!!'); 194 | } 195 | }); 196 | } 197 | 198 | helloPromise() 199 | .then(response => { 200 | console.log(response); 201 | }) 202 | .catch(error => { 203 | console.log(error); 204 | }) 205 | ``` 206 | 207 | ### Clases 208 | 209 | Las clases vinieron a mejorar la sintaxis de los prototipos y es una forma que implementó javascript para poder manejar la herencia como hacen otros lenguajes. 210 | 211 | → ES6 212 | 213 | ```jsx 214 | class calculator { 215 | constructor() { 216 | this.valueA = 0; 217 | this.valueB = 0; 218 | } 219 | 220 | add(valueA, valueB) { 221 | this.valueA = valueA; 222 | this.valueB = valueB; 223 | return this.valueA + this.valueB; 224 | } 225 | } 226 | 227 | const calc = new calculator(); 228 | console.log(calc.add(2,2));; 229 | ``` 230 | 231 | ### Modulos 232 | 233 | Los módulos nos permiten segmentar nuestro código en diferentes archivos y poderlos trabajar en conjunto, haciendo la lógica de nuestra aplicación más ordenada. 234 | 235 | → ES6 236 | 237 | Archivo [module.js] 238 | 239 | ```jsx 240 | const hello = () => { 241 | return 'Hello!'; 242 | } 243 | 244 | export default hello; 245 | ``` 246 | 247 | Archivo [index.js] 248 | 249 | ```jsx 250 | import { hello } from './module'; 251 | console.log(hello()); 252 | ``` 253 | 254 | ### Generadores 255 | 256 | Los generadores llegaron a complementar a los iteradores ya que permiten definir un algoritmo iterativo al escribir una sola función que puede mantener su propio estado. 257 | 258 | ```jsx 259 | function* helloWorld() { 260 | if (true) { 261 | yield 'Hello, '; 262 | } 263 | if (true) { 264 | yield 'World'; 265 | } 266 | }; 267 | 268 | const generatorHello = helloWorld(); 269 | console.log(generatorHello.next().value); 270 | console.log(generatorHello.next().value); 271 | ``` 272 | 273 | ## ECMAScript 7 (2016) 274 | 275 | ### Includes 276 | 277 | El método includes nos ayuda a determinar si un array incluye un elemento determinado, nos retorna `true` o `false` dependiendo si lo encontró o no. 278 | 279 | → ES7 280 | 281 | ```jsx 282 | let numbers = [1, 2, 3, 7, 8]; 283 | 284 | if (numbers.includes(7)) { 285 | console.log('Found Value'); 286 | } else { 287 | console.log('Not found'); 288 | } 289 | ``` 290 | 291 | ### Potencia 292 | 293 | → ES7 294 | 295 | Esta revisión de javascript incluyó un nuevo operador para realizar el cáclulo de una potencia. 296 | 297 | ```jsx 298 | let base = 4; 299 | let exponent = 4; 300 | let result = base ** exponent 301 | console.log(result); 302 | ``` 303 | 304 | ## ECMAScript 8 (2017) 305 | 306 | ### Object entries 307 | 308 | Esta caracteristica del ES8 nos permite devolver la clave y valores de un objeto en forma de matríz. 309 | 310 | → ES8 311 | 312 | ```jsx 313 | const data = { 314 | frontend: 'Alex', 315 | backend: 'Samuel', 316 | design: 'Mariana' 317 | } 318 | 319 | const entries = Object.entries(data); 320 | console.log(entries); 321 | console.log(entries.length); 322 | ``` 323 | 324 | ### Object values 325 | 326 | A diferencia de la anterior, esta característica nos permite los valores del objeto en forma de arreglo. 327 | 328 | → ES8 329 | 330 | ```jsx 331 | const data = { 332 | frontend: 'Alex', 333 | backend: 'Samuel', 334 | design: 'Mariana' 335 | } 336 | 337 | const values = Object.values(data); 338 | console.log(values); 339 | ``` 340 | 341 | ### Padding 342 | 343 | El paddin en javascript nos permite añadir valores a una cadena de texto, ya sea al inicio al final de esta. 344 | 345 | → ES8 346 | 347 | ```jsx 348 | const string = 'Hello'; 349 | let maxLength = 8; 350 | let addStart = 'Hi '; 351 | let addEnd = "!!!" 352 | 353 | console.log(string.padStart(maxLength, addStart)); 354 | console.log(string.padEnd(maxLength, addEnd)); 355 | ``` 356 | 357 | ### Async Await 358 | 359 | El async y await complementan el uso de las promesas. 360 | 361 | → ES8 362 | 363 | ```jsx 364 | const helloWorld = () => { 365 | return new Promise((resolve, reject) => { 366 | (true) 367 | ? setTimeout(() => resolve('Hello World!'), 3000) 368 | : reject(new Error('Test error')); 369 | }); 370 | }; 371 | 372 | const helloAsync = async () => { 373 | const hello = await helloWorld(); 374 | console.log(hello); 375 | }; 376 | ``` 377 | 378 | Esta característica incluye el correcto manejo de errores en las promesas, que sería haciendo uso del `try-catch`. 379 | 380 | ```jsx 381 | const anotherFunction = async () => { 382 | try { 383 | const hello = await helloWorld(); 384 | console.log(hello); 385 | } catch (err) { 386 | console.log(err); 387 | } 388 | } 389 | ``` 390 | 391 | ## ECMAScript 9 (2018) 392 | 393 | ### Operador de propagación 394 | 395 | El operador *spread* recibió mejoras en el ES9 ahora nos permite utilizarlo dentro de los objetos. 396 | 397 | → ES9 398 | 399 | ```jsx 400 | const obj = { name: 'Alex', age: 26, } 401 | 402 | const obj1 = { 403 | ...obj, 404 | country: 'MX', 405 | } 406 | 407 | console.log(obj1); 408 | ``` 409 | 410 | ### Promise Finally 411 | 412 | Se añade una nueva caracteristica a las promesas y es el `.finally` que se ejecuta cuando la promesa ya acabo su ejecución, sin importar si fue resuelta o no. 413 | 414 | → ES9 415 | 416 | ```jsx 417 | // Promise finally 418 | const helloWorld = () => { 419 | return new Promise((resolve, reject) => { 420 | (true) 421 | ? resolve('Hello World!') 422 | : reject(new Error('Test error')); 423 | }); 424 | }; 425 | 426 | helloWorld() 427 | .then(response => console.log(response)) 428 | .catch(error => console.log(error)) 429 | .finally(() => console.log('Promise end')); 430 | ``` 431 | 432 | ### Match con Regex 433 | 434 | Los regex nos permiten comprarar si una dato cumple con un patrón, en esta actualización del estándar se incluyó el método `.match` que nos permite obtener los valores de la cadena separando los elementos. 435 | 436 | → ES9 437 | 438 | ```jsx 439 | const regexData = /([0-9]{4})-([0-9]{2})-([0-9]{2})/; 440 | const match = regexData.exec('2020-04-20'); 441 | const year = match[1]; 442 | const month = match[2]; 443 | const day = match[3]; 444 | 445 | console.log(year, month, day); 446 | ``` 447 | 448 | ## ECMAScript 10 (2019) 449 | 450 | ### Array flat 451 | 452 | Esta característica nos permite volver un arreglo de N dimensiones de una sola. 453 | 454 | → ES10 455 | 456 | ```jsx 457 | let array = [1, 2, 3, [1, 2, 3, [1, 2, 3]]]; 458 | let depth = 2; 459 | console.log(array.flat(depth)); 460 | ``` 461 | 462 | ### Array flatMap 463 | 464 | FlatMap nos permite manipular los datos dentro del arreglo. 465 | 466 | → ES10 467 | 468 | ```jsx 469 | let array = [1, 2, 3, 4, 5]; 470 | console.log( 471 | array.flatMap( value => 472 | [value, value * 2] 473 | ) 474 | ); 475 | ``` 476 | 477 | ### Trim 478 | 479 | El método `.trim` nos permite remover los espacios en blanco de una cadena de texto, en esta especificación del estandar se añadieron los métodos `.trimStart` y `.trimEnd` para manipular especificamente el inicio o fin de una cadena de texto. 480 | 481 | → ES10 482 | 483 | ```jsx 484 | // trim start 485 | let hello = ' hello world!'; 486 | console.log(hello); 487 | console.log(hello.trimStart()); 488 | 489 | // trim end 490 | let hello = 'hello world! '; 491 | console.log(hello); 492 | console.log(hello.trimEnd()); 493 | ``` 494 | 495 | ### From Entries 496 | 497 | Nos permite convertir arrays a un objeto. Es la caracteristica inversa de `entries`. 498 | 499 | → ES10 500 | 501 | ```jsx 502 | let entries = [["name", "Alex"], ["age", 26]]; 503 | console.log(Object.fromEntries(entries)); 504 | ``` 505 | --------------------------------------------------------------------------------