- usar
let
na maioria das vezes (escopo) - usar
const
sempre que a variável não alterar de calor - objetos são na maioria das vezes
const
, mesmo que suas propriedades sejam alteradas
Inserir variaáveis dentro do texto
Antigo:
let surname = "Schmitz"
let name = " Daniel " + surname
Novo:
let surname = "Schmitz"
let name = ` Daniel ${surname} `
Se uma funcao retorna um objeto com varios parametros, pode-se usar destructing para obter somente alguns deles
function bar() { return {a:1, b:2, c:3 } }
let {a, c} = bar() // a = 1, b = undefinded
let {b} = bar() // b = 2
Antes
var multiply = function(x, y) {
y = y | 1;
return x * y;
};
multiply(3, 2); // 6
multiply(3); // 3
Novo:
const multiply = (x, y = 1) => {
return x * y
}
multiply(3, 2) // 6
multiply(3) // 3
ou até melhor: const multiply = (x, y = 1) => x * y
Duas funcionalidades basicas: mantém o escopo e nao precisa do function.
Antes:
var sum = function(x, y) {
return x + y;
};
Novo:
const sum = (x, y) => {
return x + y
}
ou: const sum = (x, y) => x + y
let bar = (a, b) => a * b
// comum no uso do map, forEach, sort
let arr = [ 5, 6, 7, 8, 'a' ];
let b = arr.map( item => item + 3 );
console.log(b); // [ 8, 9, 10, 11, 'a3' ]
// Exemplo foreach
arr.forEach((element, index) => {
console.log(`Current index: ${index}`);
console.log(element);
});
Uso comum no Vue:
// getAll retorna um promise do axios
getAll().then(r => {
this.table = r.data
})
Uso comum em um objeto do Quasar
Uso duplo em um objeto do Quasar, o this continua o escopo do Vue
Exemplo de criação de um modulo:
http.js
import axios from 'axios'
const client = axios.create({
baseURL: 'http://127.0.0.1:8181',
timeout: 1000,
headers: {'Content-Type': 'application/json'}
})
export default client
usando este módulo:
category.js
import http from '../http'
export const getAll = () => {
return http.get('/category')
}
export const deleteRow = (row) => {
return http.delete(`/category`, {data: {id: row.Id}})
}
O category.js
tem dois métodos arrow functions que sao exportados para uso. por exemplo:
import { getAll, deleteRow } from '../model/category'
...
handler: () => {
deleteRow(row).then(r => {
Toast.create('Done!')
this.refresh()
})
}
Outra forma de criar um módulo:
import http from './http'
const CategoryService = {
getAll: () => {
return http.get('/categories')
},
getById: (id) => {
return http.get(`/category/${id}`)
}
}
export default CategoryService