Xóa các thuộc tính trống khỏi một đối tượng trong Javascript

Làm thế nào để tôi loại bỏ tất cả các thuộc tính có giá trị undefined hoặc null trong một đối tượng JavaScript?

(Câu hỏi tương tự câu này về Mảng)

Câu trả lời #1

Ví dụ ES10/ES2019

Một dòng đơn giản (trả về một đối tượng mới).

let o = Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));

Giống như trên nhưng được viết dưới dạng một hàm.

function removeEmpty(obj) {
  return Object.fromEntries(Object.entries(obj).filter(([_, v]) => v != null));
}

Hàm này sử dụng đệ quy để loại bỏ các mục khỏi các đối tượng lồng nhau.

function removeEmpty(obj) {
  return Object.fromEntries(
    Object.entries(obj)
      .filter(([_, v]) => v != null)
      .map(([k, v]) => [k, v === Object(v) ? removeEmpty(v) : v])
  );
}

Ví dụ ES6/ES2015

Một dòng đơn giản. Cảnh báo: Điều này làm thay đổi đối tượng đã cho thay vì trả về một đối tượng mới.

Object.keys(obj).forEach((k) => obj[k] == null && delete obj[k]);

Một khai báo đơn (không làm thay đổi đối tượng đã cho).

let o = Object.keys(obj)
  .filter((k) => obj[k] != null)
  .reduce((a, k) => ({ ...a, [k]: obj[k] }), {});

Giống như trên nhưng được viết dưới dạng một hàm.

function removeEmpty(obj) {
  return Object.entries(obj)
    .filter(([_, v]) => v != null)
    .reduce((acc, [k, v]) => ({ ...acc, [k]: v }), {});
}

Hàm này sử dụng đệ quy để loại bỏ các mục khỏi các đối tượng lồng nhau.

function removeEmpty(obj) {
  return Object.entries(obj)
    .filter(([_, v]) => v != null)
    .reduce(
      (acc, [k, v]) => ({ ...acc, [k]: v === Object(v) ? removeEmpty(v) : v }),
      {}
    );
}

Giống như hàm ở trên, nhưng được viết theo kiểu mệnh lệnh (không phải hàm).

function removeEmpty(obj) {
  const newObj = {};
  Object.entries(obj).forEach(([k, v]) => {
    if (v === Object(v)) {
      newObj[k] = removeEmpty(v);
    } else if (v != null) {
      newObj[k] = obj[k];
    }
  });
  return newObj;
}

Ví dụ ES5/ES2009

Ngày xưa mọi thứ dài dòng hơn nhiều.

Đây là một phiên bản không đệ quy được viết theo kiểu lập trình hàm.

function removeEmpty(obj) {
  return Object.keys(obj)
    .filter(function (k) {
      return obj[k] != null;
    })
    .reduce(function (acc, k) {
      acc[k] = obj[k];
      return acc;
    }, {});
}

Đây là phiên bản không đệ quy được viết theo phong cách mệnh lệnh.

function removeEmpty(obj) {
  const newObj = {};
  Object.keys(obj).forEach(function (k) {
    if (obj[k] && typeof obj[k] === "object") {
      newObj[k] = removeEmpty(obj[k]);
    } else if (obj[k] != null) {
      newObj[k] = obj[k];
    }
  });
  return newObj;
}

Và một phiên bản đệ quy được viết theo phong cách hàm.

function removeEmpty(obj) {
  return Object.keys(obj)
    .filter(function (k) {
      return obj[k] != null;
    })
    .reduce(function (acc, k) {
      acc[k] = typeof obj[k] === "object" ? removeEmpty(obj[k]) : obj[k];
      return acc;
    }, {});
}

Câu trả lời #2

Bạn có thể lặp qua đối tượng:

var test = {
  test1: null,
  test2: 'somestring',
  test3: 3,
}

function clean(obj) {
  for (var propName in obj) {
    if (obj[propName] === null || obj[propName] === undefined) {
      delete obj[propName];
    }
  }
  return obj
}

console.log(test);
console.log(clean(test));

Nếu bạn lo lắng về việc loại bỏ thuộc tính này không chạy lên chuỗi proptype của đối tượng, bạn cũng có thể:

function clean(obj) {
  var propNames = Object.getOwnPropertyNames(obj);
  for (var i = 0; i < propNames.length; i++) {
    var propName = propNames[i];
    if (obj[propName] === null || obj[propName] === undefined) {
      delete obj[propName];
    }
  }
}

Một vài ghi chú về null và undefined:

test.test1 === null; // true
test.test1 == null; // true

test.notaprop === null; // false
test.notaprop == null; // true

test.notaprop === undefined; // true
test.notaprop == undefined; // true

Câu trả lời số 3

Câu một dòng ngắn nhất cho ES6+

Lọc tất cả các giá trị giả ( "", 0, false, null, undefined )

Object.entries(obj).reduce((a,[k,v]) => (v ? (a[k]=v, a) : a), {})

Lọc các giá trị null và undefined:

Object.entries(obj).reduce((a,[k,v]) => (v == null ? a : (a[k]=v, a)), {})

Chỉ lọc null

Object.entries(obj).reduce((a,[k,v]) => (v === null ? a : (a[k]=v, a)), {})

Chỉ lọc undefined

Object.entries(obj).reduce((a,[k,v]) => (v === undefined ? a : (a[k]=v, a)), {})

Giải pháp đệ quy: Lọc null và undefined

Đối với các đối tượng:

const cleanEmpty = obj => Object.entries(obj)
        .map(([k,v])=>[k,v && typeof v === "object" ? cleanEmpty(v) : v])
        .reduce((a,[k,v]) => (v == null ? a : (a[k]=v, a)), {});

Đối với Đối tượng và Mảng:

const cleanEmpty = obj => {
  if (Array.isArray(obj)) { 
    return obj
        .map(v => (v && typeof v === 'object') ? cleanEmpty(v) : v)
        .filter(v => !(v == null)); 
  } else { 
    return Object.entries(obj)
        .map(([k, v]) => [k, v && typeof v === 'object' ? cleanEmpty(v) : v])
        .reduce((a, [k, v]) => (v == null ? a : (a[k]=v, a)), {});
  } 
}

Câu trả lời #4

Nếu bạn đang sử dụng lodash hoặc underscore.js, đây là một giải pháp đơn giản:

var obj = {name: 'John', age: null};

var compacted = _.pickBy(obj);

Điều này chỉ hoạt động với lodash 4, trước lodash 4 hoặc underscore.js, sử dụng _.pick(obj, _.identity);

Câu trả lời số 5

Nếu ai đó cần một phiên bản đệ quy của câu trả lời của Owen (và Eric), đây là nó:

/**
 * Delete all null (or undefined) properties from an object.
 * Set 'recurse' to true if you also want to delete properties in nested objects.
 */
function delete_null_properties(test, recurse) {
    for (var i in test) {
        if (test[i] === null) {
            delete test[i];
        } else if (recurse && typeof test[i] === 'object') {
            delete_null_properties(test[i], recurse);
        }
    }
}

Câu trả lời số 6

JSON.stringify loại bỏ các khóa không xác định.

removeUndefined = function(json){
  return JSON.parse(JSON.stringify(json))
}

Câu trả lời số 7

Bạn có thể sử dụng kết hợp JSON.stringify, tham số replacer của nó và JSON.parse để biến nó trở lại thành một đối tượng. Sử dụng phương pháp này cũng có nghĩa là việc thay thế sẽ được thực hiện cho tất cả các khóa lồng nhau trong các đối tượng lồng nhau.

Đối tượng mẫu

var exampleObject = {
  string: 'value',
  emptyString: '',
  integer: 0,
  nullValue: null,
  array: [1, 2, 3],
  object: {
    string: 'value',
    emptyString: '',
    integer: 0,
    nullValue: null,
    array: [1, 2, 3]
  },
  arrayOfObjects: [
    {
      string: 'value',
      emptyString: '',
      integer: 0,
      nullValue: null,
      array: [1, 2, 3]
    },
    {
      string: 'value',
      emptyString: '',
      integer: 0,
      nullValue: null,
      array: [1, 2, 3]
    }
  ]
};

Hàm Thay Thế

function replaceUndefinedOrNull(key, value) {
  if (value === null || value === undefined) {
    return undefined;
  }

  return value;
}

Làm sạch đồ vật

exampleObject = JSON.stringify(exampleObject, replaceUndefinedOrNull);
exampleObject = JSON.parse(exampleObject);

Ví dụ CodePen

Câu trả lời số 8

Giải pháp Lodash đơn giản nhất có thể để trả về một đối tượng với các giá trị null và undefined được lọc ra.

_.omitBy(obj, _.isNil)

Câu trả lời số 9

Bạn có thể thực hiện việc loại bỏ đệ quy trong một dòng bằng cách sử dụng đối số replacer của json.stringify

const removeEmptyValues = obj => (
  JSON.parse(JSON.stringify(obj, (k,v) => v ?? undefined))
)

Cách sử dụng :

removeEmptyValues({a:{x:1,y:null,z:undefined}}) // Returns {a:{x:1}}

Như đã đề cập trong bình luận của Emmanuel, kỹ thuật này chỉ hoạt động nếu cấu trúc dữ liệu của bạn chỉ chứa các kiểu dữ liệu có thể đưa vào định dạng JSON (chuỗi, số, danh sách, v.v.).

(Câu trả lời này đã được cập nhật để sử dụng toán tử Nullish Coalescing mới. Tùy thuộc vào nhu cầu hỗ trợ trình duyệt, bạn có thể muốn sử dụng hàm này thay vào đó: (k,v) => v!=null ? v : undefined)

Câu trả lời số 10

Bạn có lẽ đang tìm kiếm từ khóa delete.

var obj = { };
obj.theProperty = 1;
delete obj.theProperty;