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

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 ในหนึ่งวัน