ท่าแปลก JavaScript ที่คุณอาจไม่รู้มาก่อน

Earthchie Thanarat
Jul 30, 2017 · 2 min read

Javascript เป็นภาษาที่ยืดหยุ่น และมีท่ายากหลายท่ามาก นั่นอาจทำให้ในบางครั้ง คุณอาจไปประสบพบเจอแล้วสงสัยว่าหมายความอย่างไร บทความนี้เป็นการรวบรวมท่าแปลก JavaScript ที่เคยมีคนมาถามผม นั่นหมายความว่า มันไม่ใช่อ้างอิงที่ดีและครบถ้วน แต่เป็นเพียงบทความประเภท “รู้ก็ดี ไม่รู้ก็ได้”

อย่างไรก็ตาม ท่ายากบางท่าก็เป็นที่กังขาว่า มันทำให้อ่านง่ายขึ้นก็จริง แต่มีคนรู้น้อย ทำให้อาจนำมาซึ่งปัญหาเรื่องการ maintain

ความเห็นส่วนตัวของผมคือ ก็ต้องทำให้มันแพร่หลายครับ ลบความรู้สึกท่าแปลกออกไป เมื่อใดที่มันแพร่หลายจนเป็นท่าปกติ สถานการณ์จะดีขึ้นเอง

มาเริ่มกันเลยครับ :)

กำหนด Default Value

options = options || {};

ท่านี้มีค่าเทียบเท่ากับ

if (!options) {
options = {};
}

ทำ String แบบหลายบรรทัดด้วย \

แทนที่จะทำแบบนี้

var html =
'<div class="text-center">'+
'Lorem Ipsum'+
'</div>';

ก็ใช้แบบนี้แทน

var html = '\
<div class="text-center">\
Lorem Ipsum\
</div>\
';

นับความยาว Object

แทนที่จะวนลูปนับ ก็ใช้ท่านี้แทน

var obj = {
child1: 1,
child2: 2,
child3: 3
};
var len = Object.keys(obj).length;

Sort Object จาก key

function sortObject(obj){
var keys = Object.keys(obj).sort(),
sorted_obj = {};
while (keys.length) {
var key = keys.shift();
sorted_obj[key] = obj[key];
}
return sorted_obj;
}
console.log(sortObject({c:'c',a:'a',b:'b',i:'i'}));

คัด Object ซ้ำ ออกจาก Array

โดยปกติ เราสามารถใช้ filter เพื่อลบค่าซ้ำออกไปได้ แบบนี้

arr.filter(function(item, i, self) {
return self.indexOf(item) === i;
});

แต่ถ้าค่าที่อยู่ใน array เป็น Object จะใช้ท่าดังกล่าวไม่ได้ ทางออกคือแปลง object เป็น String ก่อน แล้วค่อย filter แล้วก็แปลง String ที่เหลือกลับไปเป็น Object

arr.map(function(item) {
return JSON.stringify(item);
}).filter(function(item, i, self) {
return self.indexOf(item) === i;
}).map(function(item) {
return JSON.parse(item);
});

ถ้าใช้ if เพื่อเทียบตัวแปรเดียวกับหลายค่า ใช้ indexOf แทน

จากเดิมท่านี้

if (a == 1 || a == 3 || a == 7|| a == 8) {
// do something
}

เปลี่ยนไปใช้ท่านี้แทน

if ([1,3,7,8].indexOf(a) > -1) {
// do something
}

และท่ายากขึ้นไปอีกขั้นคือการใช้ ~ กับ indexOf

if (~[1,3,7,8].indexOf(a)) {
// do something
}

ว่าด้วยเรื่องการ cast string เป็นตัวเลข

เดิมใช้คำสั่งนี้

a = parseFloat(a);

สามารถย่อเหลือเพียง

a = +a;

ว่าด้วยการ cast ตัวเลขเป็น boolean

เดิมใช้วิธีนี้

a = a !== 0;

ย่อเหลือเพียง

a = !!a;

ใช้ bitwise คำนวน 2 ยกกำลัง n

จากเดิม ใช้ท่านี้

var result = Math.pow(2, n);

สามารถใช้ท่านี้แทนได้ (แถมทำงานเร็วกว่าวิธีแรกเยอะเลย)

var result = 1 << n;

การคูณ 10 ยกกำลัง n

เช่น 10 ล้าน จากเดิมอ่านยากมาก

var num = 10000000;

เขียนแบบนี้อ่านง่ายกว่าเยอะ

var num = 1e7;

ตัวอย่างอื่นๆ

var a = 2e7, // 20,000,000
b = 422e-2, // 4.22
c = 4.22e2, // 422
ms_a_day = 864e5; // 86400000 = จำนวน ms ในหนึ่งวัน

Earthchie

Earthchie’s Blog

Earthchie Thanarat

Written by

CaaH: Coding as a Hobby

Earthchie

Earthchie

Earthchie’s Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade