Потрясающие советы по ES6

Привет всем, сегодня я предлагаю вам несколько советов по ES6, которые могут сделать вашу разработку на Javascript более чистой и продуктивной. Так что, если вы все еще изучаете ES6, этот пост для вас!

Я пытаюсь быть прямолинейным, поэтому сделайте небольшую подборку наиболее частых функций ES6, которые я использую во время написания кода.

Литералы шаблонов

Объединить строку с оператором плюс? Никогда больше!!!

const firstName = "Dellean"
const lastName = "Santos"
//BAD
const fullName = firstName + " " + lastName
//AWESOME
const fullName = `${firstName} ${lastName}`

Мультилинии

//BAD
const animals = cat\n' + 'dog\n' + 'frog'
//AWESOME
cons animals = `cat
                dog
                frog`

Литералы шаблонов сохранят новые строки, а также могут оценивать выражения.

//BAD
const todayText = "now in timestamp is " + Date.now()
//AWESOME
const todayText = `now in timestamp is ${Date.now()}`

Разрушение массивов

//BAD
const numArray = [0, 1]
const zero = numArray[0]
const one = numArray[1]
//AWESOME
const [zero, one] = [0, 1]

Разрушение объектов

const author = { name: "Dellean", age: 28 }
//BAD
const name = author.name
const age = author.age
//AWESOME
const { name, age } = author
//Destructuring inside functions
//BAD
function myName(author){
   return author.name
}
//AWESOME
function myName({ name }){
   return name
}

Определение объектов

Если имя переменной совпадает с атрибутом объекта, вы можете опустить двоеточие и значение.

const name = "Dellean"
const age = 28
//BAD
const author = { name: name, age: age }
//AWESOME
const author = { name, age }

ЛитералыФункции F =› F+1

//BAD
callback(function(a){
  return a+1
})
//AWESOME
callback( a => a+1 )
//BAD
callback(function(a,b){
 doSomething(a)
 doSomethingElse(b)
})
//AWESOME
callback((a,b)=>{
 doSomething(a)
 doSomethingElse(b)
})

Примечание. Стрелочные функции, лексическое значение this не скрыто, подробнее об этом читайте здесь.

Параметры по умолчанию (по умолчанию = true)

//BAD
function myFuncion(firstParam, secondParam){
  const x = firstParam || 'xDefaultValue'
  const y = secondParam|| 'yDefaultValue'
  ...
}
//AWESOME
function myFunction(x = 'xDefaultValue', y = 'yDefaultValue'){
  ...
}

Классы { }

//BAD
function Author(name, age){
  this.name = name
  this.age = age
}
const dellean = new Author('Dellean', 28)
//AWESOME
class Author {
  constructor({ name, age }){
    this.name = name
    this.age = age
  }
}
cons dellean = new Author({ name: 'Dellean', age: 28 })

Оператор распространения …

Для меня оператор Spread — это самая крутая функция в javascript, которая в большинстве случаев может значительно ускорить вашу разработку, поэтому для вас очень важно все, что может делать оператор.

Массивы

let myArray = [3,4]
let myNumberArray = [1,2, ...myArray,5,6]
console.log( myNumberArray )
//output [1,2,3,4,5,6]

Объекты сливаются

const author = { name: "Dellean", age: 28 }
const merged = { from: "Brazil", ...author }
console.log( merged )
//output { name: "Dellean", age: 28, from: "Brazil" }

Выдающиеся параметры/аттр.

function something({ name, age, ...rest }){
 console.log(`name: ${name}`)
 console.log(`age: ${age}`)
 console.log('rest', rest)
}
something({ name: "Dellean" age: 28, from: "Brazil", dev: true })
//name: Dellean
//Age: 28
//rest { from: "Brazil", dev: true }

Динамическое свойство

let age = 'age'
let myObg = { [age] : 28 }
//myObg { age: 28 }
let otherObj = { [`${age}Test`]: 28 }
//otherObj {ageTest: 28}

Надеюсь, вам понравились эти советы, поэтому, если они вам помогут, оставьте свой зажим, а в противном случае оставьте свой комментарий!

Пока!!!