Top JavaScript Code Snippets nên biết

JavaScript là ngôn ngữ phổ biến nhất khi nói đến phát triển web, làm nền tảng cho hầu hết các trang web và ứng dụng web.

JavaScript không chỉ được sử dụng ở phía client (kết hợp với HTML và CSS) mà còn hỗ trợ phía server (xây dựng bằng Nodejs).

Dưới đây là một số đoạn mã JavaScript quan trọng mà bạn nên biết.

Snippet là các mẫu mã được sử dụng thường xuyên để thực hiện một nhiệm vụ duy nhất và cũng có thể giảm công việc lặp lại một cách đáng kể.

Tìm được đoạn mã mẫu bạn cần có thể tiết kiệm rất nhiều thời gian và rắc rối trong quá trình lập trình JavaScript.

Với những điều này, chúng ta tiếp tục với bài viết về những đoạn mã JavaScript hay nhất để giúp bạn có thời gian học tập và xây dựng với JavaScript dễ dàng hơn.

1. Lấy giá trị từ URL | Get Value Param from URL

var getURLParam = function (paramName, url) {
  url = url ? url : window.location.href;
  var parsedURL = new URL(url);
  var searchParamsString = parsedURL.search.substring(1);
  var urlVariables = searchParamsString.split("&");
  for (var i = 0; i < urlVariables.length; i++) {
    var parameter = urlVariables[i].split("=");
    if (
      (parameter[0] + "").toLowerCase() == (paramName + "").toLowerCase()
    ) {
      return decodeURIComponent(parameter[1]);
    }
  }
};

var urlString =
  "https://www.progcoder.com/tool/url-parser?code=123&name=progcoder.com&date=30/05/2023";

var paramValue = getURLParam("name", urlString);

console.log(paramValue);

//Output: progcoder.com

2. Lấy Timezone, Time Offset | Get Current Timezone, Time Offset Client

var getTimezoneOffsetClient = function () {
  var currentDate = new Date();
  var timeOffset = currentDate.getTimezoneOffset();
  var offsetHours = Math.floor(Math.abs(timeOffset) / 60);
  var offsetMinutes = Math.abs(timeOffset) % 60;
  var offsetSign = timeOffset >= 0 ? "-" : "+";

  var offsetString = `${offsetSign}${offsetHours
    .toString()
    .padStart(2, "0")}:${offsetMinutes.toString().padStart(2, "0")}`;

  var timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;

  return {
    TimeOffset: timeOffset,
    UTC: offsetString,
    Timezone: timeZone,
  };
};

console.log(getTimezoneOffsetClient());

//Output: {
//    "TimeOffset": -420,
//    "UTC": "+07:00",
//    "Timezone": "Asia/Bangkok"
// }

3. Kiểm tra xem một biến có phải là một mảng không | Check if a variable is an array

var variable = [1, 2, 3];
var isArray = Array.isArray(variable);

console.log(isArray);

//Output: true

4. Hợp nhất hai mảng | Merge two arrays

var array1 = [1, 2, 3];
var array2 = [4, 5, 6];
var newArray = array1.concat(array2);

console.log(newArray);

//Output: [1, 2, 3, 4, 5, 6]

5. Xóa các phần tử trùng nhau trong mảng | Remove duplicates from an array

var array = [1, 2, 3, 4, 5, 6, 6, 2, 7];
var uniqueArray = [...new Set(array)];

console.log(uniqueArray);

//Output: [1, 2, 3, 4, 5, 6, 7]

6. Xóa object trùng lặp bằng key | Remove duplicate object by key

var array = [
    { id: 1, name: "Java", point: "other 1" },
    { id: 2, name: "C#", other: "other 2" },
    { id: 3, name: "Python", other: "other 3" },
    { id: 1, name: "Java 1", other: "other 4" },
    { id: 1, name: "Java", other: "other 4" },
    { id: 4, name: "Javascript", other: "other 4" },
    { id: 2, name: "Javascript", other: "other 4" },
    { id: 4, name: "Javascript 1", other: "other 4" }
];

var getUniqueList = function (arr, key) {
    return [...new Map(arr.map(item => [item[key], item])).values()];
}

var newArray = getUniqueList(array, 'id');

console.log(newArray)

//Output: [{"id":1,"name":"Java","other":"other 4"},{"id":2,"name":"Javascript","other":"other 4"},{"id":3,"name":"Python","other":"other 3"},{"id":4,"name":"Javascript 1","other":"other 4"}]

7. Tạo Guid ID | Generate Guid ID

const generatorGuid = () =>
  ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, (c) =>
    (
      c ^
      (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)))
    ).toString(16)
  );

var id = generatorGuid();

console.log(id);

//Output: 7982fcfe-5721-4632-bede-6000885be57d

//The value will be different every time you run the code 
//The value is unique

8. Lấy khoảng cách giữa 2 ngày 

var getDaysDiffBetweenDates = (dateInitial, dateFinal) =>
  (dateFinal - dateInitial) / (1000 * 3600 * 24);

var value = getDaysDiffBetweenDates(
  new Date("2023-05-15"),
  new Date("2023-05-30")
);

console.log(value);

//Output: 15

9. Lặp Key Value Json Object | Loop Key Value Json Object

var obj = {
  Name: "Huy",
  Age: 24,
  Array: [1, 2, 3],
};

Object.keys(obj).forEach((e) => console.log(e + " - " + obj[e]));

//Output: 
// Name - Huy
// Age - 24
// Array - 1,2,3

10. Kiểm tra giá trị có trong mảng | Check item constain in array

var array = ["cat", "brid", "chicken", "dragon"];
var item_1 = "brid";
var item_2 = "mouse";

var check_1 = array.includes(item_1);
console.log(check_1); // true

var check_2 = array.includes(item_2);
console.log(check_2); // false

11. Tạo số ngẫu nhiên từ a-b | Generate a random number between two values

var min = 0, max = 100;
var randomNumber = Math.floor(Math.random() * (max - min + 1)) + min;

console.log(randomNumber);

//Output: 1 
//The value will be different every time you run the code