ຂຽນ JavaScript ແນວໃດ ໃຫ້ເບີ່ງຄື Intermediate

ຂຽນຂື້ນເມື່ອ

ຂຽນ JavaScript ແນວໃດ ໃຫ້ເບີ່ງຄື Intermediate

ຮູບພາບທີ່ງາມຍ່ອມປະກອບໄປດ້ວຍການໃສ່ສີ ວາງອົງປະກອບຕ່າງໃຫ້ເຫມາະສົມ, ສຳລັບການຂຽນ Code ກໍເປັນສິນລະປະຢ່າງໜື່ງເຊັ່ນດຽວກັນ.

ເຫັນໝູ່ຄູ່ຫຼາຍໆຄົນທີ່ເຂົ້າວົງການໄອທີມາດົນແລ້ວ ແຕ່ຍັງຂຽນ Code ບໍ່ງາມປານໃດ. ມື້ນີ້ຂ້ອຍເລີຍຢາກແນະນຳ ສອງສາມເທັກນິກສຳລັບການຂຽນ Code ໃຫ້ມີຄວາມສວຍງາມຂື້ນ.

Destructuring
// 👎 ແບບທຳມະດາ
function getNameAndPosition(data) {
    const name = data.name
    const position = data.position
    return `${name} ${position}`
}

// 👍 ຈະດີກວ່າຖ້າຂຽນແບບນີ້
function getNameAndPosition({ name, position }) {
    return `${name} ${position}`
}

// 👍 ຫຼື ແບບນີ້ກໍຍັງໄດ້ຢູ່
function getNameAndPosition(data) {
    const { name, position } = data
    return `${name} ${position}`
}
ໃຊ້ Template Strings ແທນ Concatenation
// 👎 ແບບທຳມະດາ
function sayGreeting(name) {
    return 'How are you doing, ' + name + '?'
}

// 👍 ຈະດີກວ່າຖ້າຂຽນແບບນີ້
function sayGreeting(name) {
    return `How are you doing, ${name}?`
}
JS Blocks
// 👎 ແບບທຳມະດາ
if (somethingIsTrue) {
    return true
}

// 👍 ຈະດີກວ່າຖ້າຂຽນແບບນີ້
if (somethingIsTrue) return true
Function arguments
// 👎 ແບບທຳມະດາ
function insertNewUser(name, surname, age, position) {
    // ...
}

// 👍 ຈະດີກວ່າຖ້າຂຽນແບບນີ້
function insertNewUser({ name, surname, age, position }) {
    // ...
}
ຕ້ອງການຜົນບວກຈາກ Array
// 👎 ແບບທຳມະດາ
const menuList = [{ amount: 100 }, { amount: 50 }, { amount: 30 }]

let totalAmount = 0
for (let i = 0; i < menuList.length; i++) {
    totalAmount += menuList[i].amount
}

// 👍 ຈະດີກວ່າຖ້າຂຽນແບບນີ້
const menuList = [{ amount: 100 }, { amount: 50 }, { amount: 30 }]
const totalAmount = menuList.reduce((total, menu) => total + menu.amount, 0)

ເຄັດລັບ

ການປ່ຽນຄ່າຕົວປ່ຽນ
let a = 111
let b = 222

;[a, b] = [b, a]

// a = 222 ແລະ b = 111
ການປ່ຽນ String ເປັນ Integer
let a = '123'

let b = parseInt(a)
// ຫຼື ເຮົາສາມາໃຊ້
let b = ~~a
ການສ້າງ Deep Copy ສຳລັບ Array
const original = [{ id: '1', name: 'Yeng' }]

const deepCopyArray = JSON.parse(JSON.stringify(original))

ຜູ້ຂຽນ: Kayengxiong Tongsuatong

@Facebook