Những hàm JavaScript hữu ích

Ngày nay, JavaScript là một trong những ngôn ngữ lập trình phổ biến nhất trên thế giới. Nó được sử dụng bởi nhiều công ty như Google, Facebook, Microsoft, v.v. để xây dựng các ứng dụng web. JavaScript là một ngôn ngữ rất mạnh mẽ có thể được sử dụng để xây dựng các ứng dụng web phức tạp. Nó cũng là một ngôn ngữ rất linh hoạt có thể được sử dụng để xây dựng các ứng dụng web đơn giản.

Trong bài viết này, tôi sẽ liệt kê một số hàm tiện ích JavaScript hữu ích nhất mà tôi đã sử dụng trong các dự án của mình.

1. GetValuesByKey

Hàm này sẽ giúp bạn lấy các giá trị có cùng tên field trong một object, bao gồm các object con lồng nhau. Nó sẽ trả về một mảng các giá trị tìm được.

Source code 📃

GetValuesByKey.js

/**
 * Get all values of specific key in object
 * @param {object} obj A javascript object to get values
 * @param {string} key A key of object
 * @returns 
 */
function GetValuesByKey(obj, key) {
    let values = [];
    for (let i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            values = values.concat(GetValuesByKey(obj[i], key));
        } else if (i == key) {
            values.push(obj[i]);
        }
    }
    return values;
}

Chạy thử 🧑‍💻

Trình soạn thảo trực tuyến

function GetValuesByKey(obj, key) { let values = []; for (let i in obj) { if (!obj.hasOwnProperty(i)) continue; if (typeof obj[i] == 'object') { values = values.concat(GetValuesByKey(obj[i], key)); } else if (i == key) { values.push(obj[i]); } } return values; } const data = { "id": 1, "name": "Item 1", "link": "/item-1", "relatedItems": [ { "id": 2, "name": "Item 2", "link": "/item-2" }, { "id": 3, "name": "Item 3", "link": "/item-3" }, { "id": 4, "name": "Item 4", "link": "/item-4" } ] } var result = GetValuesByKey(data, "link"); render(JSON.stringify(result));

function GetValuesByKey(obj, key) {
    let values = [];
    for (let i in obj) {
        if (!obj.hasOwnProperty(i)) continue;
        if (typeof obj[i] == 'object') {
            values = values.concat(GetValuesByKey(obj[i], key));
        } else if (i == key) {
            values.push(obj[i]);
        }
    }
    return values;
}

const data = {
    "id": 1,
    "name": "Item 1",
    "link": "/item-1",
    "relatedItems": [
        {
            "id": 2,
            "name": "Item 2",
            "link": "/item-2"
        },
        {
            "id": 3,
            "name": "Item 3",
            "link": "/item-3"
        },
        {
            "id": 4,
            "name": "Item 4",
            "link": "/item-4"
        }
    ]
}

var result = GetValuesByKey(data, "link");
render(JSON.stringify(result));

Kết quả

Loading...

2. Flatten object

2.1. Flatten object

Hàm này sẽ giúp bạn làm phẳng một object có các object con lồng nhau. Nó sẽ trả về một object mới với các key là key của các object con lồng nhau.

Source code 📃

FlattenObject.js

/**
 * Flattens an object to a single level object
 * @param {object} obj Object to flatten 
 * @returns An object with all keys and values flattened
 */
function FlattenObject(obj) {
    const flattened = {};

    Object.keys(obj).forEach((key) => {
        if (typeof obj[key] === 'object' && obj[key] !== null) {
            Object.assign(flattened, flattenObject(obj[key]));
        } else {
            flattened[key] = obj[key];
        }
    });

    return flattened;
}

Chạy thử 🧑‍💻

Trình soạn thảo trực tuyến

/** * Flattens an object to a single level object * @param {object} obj Object to flatten * @returns An object with all keys and values flattened */ function FlattenObject(obj) { const flattened = {}; Object.keys(obj).forEach((key) => { if (typeof obj[key] === 'object' && obj[key] !== null) { Object.assign(flattened, FlattenObject(obj[key])); } else { flattened[key] = obj[key]; } }); return flattened; } const data = { "word": "pho", "meanings": { "partOfSpeech": "noun", "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken." } } var result = FlattenObject(data, ""); render(JSON.stringify(result));

/**
 * Flattens an object to a single level object
 * @param {object} obj Object to flatten 
 * @returns An object with all keys and values flattened
 */
function FlattenObject(obj) {
  const flattened = {};

  Object.keys(obj).forEach((key) => {
    if (typeof obj[key] === 'object' && obj[key] !== null) {
      Object.assign(flattened, FlattenObject(obj[key]));
    } else {
      flattened[key] = obj[key];
    }
  });

  return flattened;
}

const data = {
  "word": "pho",
  "meanings": {
    "partOfSpeech": "noun",
    "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken."
  }
}

var result = FlattenObject(data, "");
render(JSON.stringify(result));

Kết quả

Loading...

2.2. Flatten object with key

Hàm này sẽ giúp bạn làm phẳng một object có các object con lồng nhau. Nó sẽ trả về một object mới với các key là key của các object con lồng nhau, nhưng có thêm key của object cha ở đầu key của object con.

Source code 📃

FlattenObjectWithKey.js

/**
 * Flattens a javascript object with the keys as the path
 * @param {object} obj A javascript object to flatten
 * @param {string} prefix A prefix to add to keys
 * @returns An object with all keys and values flattened
 */
function FlattenObjectWithKey(obj, prefix = '') {
    return Object.keys(obj).reduce((acc, k) => {
        const pre = prefix.length ? `${prefix}.` : '';
        if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) {
            Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k));
        } else {
            acc[pre + k] = obj[k];
        }
        return acc;
    }, {});
}

Chạy thử 🧑‍💻

Trình soạn thảo trực tuyến

/** * Flattens a javascript object with the keys as the path * @param {object} obj A javascript object to flatten * @param {string} prefix A prefix to add to keys * @returns An object with all keys and values flattened */ function FlattenObjectWithKey(obj, prefix = '') { return Object.keys(obj).reduce((acc, k) => { const pre = prefix.length ? `${prefix}.` : ''; if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) { Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k)); } else { acc[pre + k] = obj[k]; } return acc; }, {}); } const data = { "word": "pho", "meanings": { "partOfSpeech": "noun", "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken." } } var result = FlattenObjectWithKey(data, ""); render(JSON.stringify(result));

/**
 * Flattens a javascript object with the keys as the path
 * @param {object} obj A javascript object to flatten
 * @param {string} prefix A prefix to add to keys
 * @returns An object with all keys and values flattened
 */
function FlattenObjectWithKey(obj, prefix = '') {
  return Object.keys(obj).reduce((acc, k) => {
    const pre = prefix.length ? `${prefix}.` : '';
    if (typeof obj[k] === 'object' && obj[k] !== null && !Array.isArray(obj[k])) {
      Object.assign(acc, FlattenObjectWithKey(obj[k], pre + k));
    } else {
      acc[pre + k] = obj[k];
    }
    return acc;
  }, {});
}

const data = {
  "word": "pho",
  "meanings": {
    "partOfSpeech": "noun",
    "definitions": "A Vietnamese soup with a beef base, typically served with rice noodles and beef or chicken."
  }
}

var result = FlattenObjectWithKey(data, "");
render(JSON.stringify(result));

Kết quả

Loading...