Funcionalidades novas ES6

Funcionalidades - ES6.md

8 - Template literal

Exemplo:

const city = 'Carapicuíba';
const text = `Eu moro em ${city}`;

10 - Tagged Template

Exemplo: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/template_strings

const city = 'SP';
const something = 'Carapícuíba';
const otherThing = 'Osasco';

function green(template, ...values) {
	debugger;
}

const ireland = green`I live in ${city} the city of ${something} and ${otherThing}`;

// Outro exemplo da função acima:
function green(template, ...values) {
    return template.reduce((accumulator, part, i) => {
		return `${accumulator} <span class="green"> ${values[i - 1].toUppercase()} </span>${part}`;
});
}

Resultado

I live in SP the city of Carapícuíba and Osasco

11 - Shorthand properties

Exemplo:

let firstName = 'Eduardo';
let lastname = 'Paixão';
let age = '26';

const person = {
    firstName,
    lastname,
    age,
    // Isto é uma shorthand
    hello() { // SEM FUNCTION E ARROW!!!!
        console.log('Hello!!');
    }
};

person.hello() // EXECUTANDO

12 - Default parameters

function hello (name = 'Eduardo', lastname = 'Paixao') {
	console.log(name, lastname);
}

Novos métodos para strings

Link: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

let text = "Lorem ipsum dolor sit amet";
text.startsWith('L'); // true
text.startsWith('rem', 2); // true 

text.endsWith('amet'); // true
text.endsWith('ame', 25); // true

text.includes('dolor'); // true

"lol".repeat(10); // Resultado: lollollollollollollollollollol (10x)

15 - Array.of

const array = Array.of(1, 4, 'Eduardo', {name: 'Jonas'}); // Resultado: Retorna um array

16 - Array.find e Array.findIndex

Exemplo: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/find

Array.of(4, -5, 0, -1).find(x => x < 0); // Returna -5. O find para no -5 e não continua
Array.of(4, -5, 0, -1).findIndex(x => x < 0); // Returna 1. Retorna o index que parou no -5

17 - Array.fill

MDN: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Array/fill O método fill() preenche todos os valores do array a partir do índice inicial a um índice final com um valor estático.

const arr = new Array(50); // Preenche o array com 50 itens vazios
arr.fill('LoL'); // Preenche o 50 itens com 'LoL'

arr.fill('LoL', 3, 6); // Preenche do 3 ao 6 itens com 'LoL'

Outro Exemplo:
const newArr = [1, 2, 3, 4, 5, 6];
newArr.fill('LoL', 1, 3); // Retorna [1, 'LoL', 'LoL', 4, 5, 6]

18 - Destructuring Objects

MDN: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Atribuicao_via_desestruturacao

var data = {
	name: 'Eduardo'
	live: {
		city: 'Carapicuíba'
    }
};

const {name} = data; // Retorna: Eduardo
const {city} = data.live; // 'Carapicuíba'

// Resultado: Transforma o city em cidade, igual o 'as' no include
const { city: cidade } = data.city; 

// Resultado: Se não achar a propriedade street, ele vai retornar o default
const { street = 'Itapetininga' } = data; 

19 - Destructuring Array

const arr = ['Eduardo', 'Paixão', 26, 'Carapicuíba'];

// Retorna: 'Eduardo', 'Paixão', 26, 'Carapicuíba'
const [name, lastname, age, city] = arr;

20 - Destructuring Swap Variables

//Vai trocar o valor do a pro b
let a = 42;
let b = 21;

[a, b] = [b, a]; 
// Resultado:
// a -> 21 
// b -> 42

21 - Spread Operator

const front = ['react', 'vue'];
const back = ['python', 'ruby'];

console.log([...dudu]); // Resultado: ["d", "u", "d", "u"]
console.log(...front); // Resultado: react vue

// Concatenar
console.log([...front, ...back]); // ['react', 'vue', 'python', 'ruby']
console.log([...front, "Meio",...back]); // ['react', 'vue', 'Meio' ,'python', 'ruby']

22 - Spread Operator dentro de funções

function makeSandwich(bread, cheese, sauce) {
	console.log('Your sandwich with ${bread} bread, ${cheese} cheese and ${sauce} is done!');
}
const ingredients = ['white', 'cheddar', 'barbecue'];

makeSandwich(...ingredients); // Resultado: Your sandwich with white bread, cheddar cheese and barbecue is done!

23 - Rest params

function multiply(mult, ...args) {
	return args.map(arg => arg * multi);
}

multiply(2, 1, 2, 3, 4, 5, 6); // Resultado: [2, 4, 6, 8, 10, 12]