Lọc thuộc tính đối tượng theo khóa trong ES6

Hãy nói rằng tôi có một đối tượng:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

Tôi muốn tạo một đối tượng khác bằng cách lọc đối tượng ở trên để tôi có một cái gì đó như thế.

 {
    item1: { key: 'sdfd', value:'sdfd' },
    item3: { key: 'sdfd', value:'sdfd' }
 }

Tôi đang tìm kiếm một cách rõ ràng để thực hiện điều này bằng Es6, vì vậy các toán tử trải đều có sẵn cho tôi.

Nếu bạn có một danh sách các giá trị được phép, bạn có thể dễ dàng giữ chúng trong một đối tượng bằng cách sử dụng:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    obj[key] = raw[key];
    return obj;
  }, {});

console.log(filtered);

Điều này sử dụng:

1. Object.keysđể liệt kê tất cả các thuộc tính trong raw(dữ liệu gốc), sau đó
2. Array.prototype.filter để chọn các khóa có trong danh sách được phép, sử dụng
   1. Array.prototype.includes để chắc chắn rằng họ có mặt
3. Array.prototype.reduce để xây dựng một đối tượng mới chỉ với các thuộc tính được phép.

Điều này sẽ tạo một bản sao nông với các thuộc tính được phép (nhưng sẽ không sao chép chính các thuộc tính đó).

Bạn cũng có thể sử dụng toán tử trải rộng đối tượng để tạo ra một loạt các đối tượng mà không làm biến đổi chúng (nhờ rjerue đã đề cập đến điều này ):

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.keys(raw)
  .filter(key => allowed.includes(key))
  .reduce((obj, key) => {
    return {
      ...obj,
      [key]: raw[key]
    };
  }, {});

console.log(filtered);

Đối với mục đích đố, nếu bạn muốn xóa các trường không mong muốn khỏi dữ liệu gốc (điều mà tôi không khuyên bạn nên làm, vì nó liên quan đến một số đột biến xấu), bạn có thể đảo ngược includeskiểm tra như vậy:

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

Object.keys(raw)
  .filter(key => !allowed.includes(key))
  .forEach(key => delete raw[key]);

console.log(raw);

Tôi bao gồm ví dụ này để hiển thị một giải pháp dựa trên đột biến, nhưng tôi không đề xuất sử dụng nó.

Nếu bạn ổn với việc sử dụng cú pháp ES6, tôi thấy rằng cách sạch nhất để làm điều này, như đã lưu ý ở đây và đây là:

const data = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const { item2, ...newData } = data;

Bây giờ, newDatachứa:

{
  item1: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

Hoặc, nếu bạn có khóa được lưu dưới dạng chuỗi:

const key = 'item2';
const { [key]: _, ...newData } = data;

Trong trường hợp sau, [key]được chuyển đổi thành item2nhưng vì bạn đang sử dụng một constbài tập, bạn cần chỉ định một tên cho bài tập. _đại diện cho một giá trị ném đi.

Tổng quát hơn:

const { item2, ...newData } = data; // Assign item2 to item2
const { item2: someVarName, ...newData } = data; // Assign item2 to someVarName
const { item2: _, ...newData } = data; // Assign item2 to _
const { ['item2']: _, ...newData } = data; // Convert string to key first, ...

Điều này không chỉ làm giảm hoạt động của bạn xuống một lớp mà còn không yêu cầu bạn phải biết các phím khác là gì (những phím mà bạn muốn giữ lại).

Cách sạch nhất bạn có thể tìm thấy là với Lodash # pick

const _ = require('lodash');

const allowed = ['item1', 'item3'];

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

const filteredObj = _.pick(obj, allowed)

Không có gì chưa được nói trước đây, nhưng để kết hợp một số câu trả lời cho câu trả lời ES6 chung:

const raw = {
  item1: { key: 'sdfd', value: 'sdfd' },
  item2: { key: 'sdfd', value: 'sdfd' },
  item3: { key: 'sdfd', value: 'sdfd' }
};

const filteredKeys = ['item1', 'item3'];

const filtered = filteredKeys
  .reduce((obj, key) => ({ ...obj, [key]: raw[key] }), {});

console.log(filtered);

Chỉ là một giải pháp khác trong một dòng của Modern JS không có thư viện bên ngoài .

Tôi đã chơi với tính năng " Hủy cấu trúc ":

const raw = {
    item1: { key: 'sdfd', value: 'sdfd' },
    item2: { key: 'sdfd', value: 'sdfd' },
    item3: { key: 'sdfd', value: 'sdfd' }
  };
var myNewRaw = (({ item1, item3}) => ({ item1, item3 }))(raw);
console.log(myNewRaw);

Bây giờ bạn có thể làm cho nó ngắn hơn và đơn giản hơn bằng cách sử dụng phương thức Object.fromEntries (kiểm tra hỗ trợ trình duyệt):

const raw = { item1: { prop:'1' }, item2: { prop:'2' }, item3: { prop:'3' } };

const allowed = ['item1', 'item3'];

const filtered = Object.fromEntries(
   Object.entries(raw).filter(
      ([key, val])=>allowed.includes(key)
   )
);

đọc thêm về: Object.fromEntries

Bạn có thể thêm chung chung ofilter(được triển khai với chung oreduce) để bạn có thể dễ dàng lọc các đối tượng giống như cách bạn có thể mảng -

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, {[k]: v})
          : acc
    , {}
    , o
    )

Chúng ta có thể thấy nó hoạt động ở đây -

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Xác minh kết quả trong trình duyệt của riêng bạn bên dưới -

const oreduce = (f, acc, o) =>
  Object
    .entries (o)
    .reduce
      ( (acc, [ k, v ]) => f (acc, v, k, o)
      , acc
      )

const ofilter = (f, o) =>
  oreduce
    ( (acc, v, k, o)=>
        f (v, k, o)
          ? Object.assign (acc, { [k]: v })
          : acc
    , {}
    , o
    )

const data =
  { item1: { key: 'a', value: 1 }
  , item2: { key: 'b', value: 2 }
  , item3: { key: 'c', value: 3 }
  }

console.log
  ( ofilter
      ( (v, k) => k !== 'item2'
      , data
      )
      // [ { item1: { key: 'a', value: 1 } }
      // , { item3: { key: 'c', value: 3 } }
      // ]

  , ofilter
      ( x => x.value === 3
      , data
      )
      // [ { item3: { key: 'c', value: 3 } } ]
  )

Hai chức năng này có thể được thực hiện theo nhiều cách. Tôi đã chọn đính kèm vào Array.prototype.reducebên trong oreducenhưng bạn có thể dễ dàng viết tất cả từ đầu

Đây là cách tôi đã làm nó, gần đây:

const dummyObj = Object.assign({}, obj);
delete dummyObj[key];
const target = Object.assign({}, {...dummyObj});

ok, cái này thì sao

    const raw = {
      item1: { key: 'sdfd', value: 'sdfd' },
      item2: { key: 'sdfd', value: 'sdfd' },
      item3: { key: 'sdfd', value: 'sdfd' }
    };

    const filteredKeys = ['item1', 'item3'];

    const filtered = Object.assign({}, ...filteredKeys.map(key=> ({[key]:raw[key]})));

Các câu trả lời ở đây chắc chắn phù hợp nhưng chúng hơi chậm vì chúng yêu cầu lặp qua danh sách trắng cho mọi thuộc tính trong đối tượng. Giải pháp dưới đây nhanh hơn nhiều cho các bộ dữ liệu lớn vì nó chỉ lặp qua danh sách trắng một lần:

const data = {
  allowed1: 'blah',
  allowed2: 'blah blah',
  notAllowed: 'woah',
  superSensitiveInfo: 'whooooah',
  allowed3: 'bleh'
};

const whitelist = ['allowed1', 'allowed2', 'allowed3'];

function sanitize(data, whitelist) {
    return whitelist.reduce(
      (result, key) =>
        data[key] !== undefined
          ? Object.assign(result, { [key]: data[key] })
          : result,
      {}
    );
  }

  sanitize(data, whitelist)

Cõng trên câu trả lời của ssube .

Đây là một phiên bản có thể tái sử dụng.

Object.filterByKey = function (obj, predicate) {
  return Object.keys(obj)
    .filter(key => predicate(key))
    .reduce((out, key) => {
      out[key] = obj[key];
      return out;
    }, {});
}

Để gọi nó sử dụng

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

var filtered = Object.filterByKey(raw, key => 
  return allowed.includes(key));
});

console.log(filtered);

Điều hay của các hàm mũi tên ES6 là bạn không phải truyền vào alloweddưới dạng tham số.

Bạn có thể làm một cái gì đó như thế này:

const base = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const filtered = (
    source => { 
        with(source){ 
            return {item1, item3} 
        } 
    }
)(base);

// one line
const filtered = (source => { with(source){ return {item1, item3} } })(base);

Điều này hoạt động nhưng không rõ ràng lắm, cộng với withtuyên bố không được khuyến nghị ( https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/with ).

Một giải pháp đơn giản hơn mà không cần sử dụng filtercó thể đạt được Object.entries()thay vìObject.keys()

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = Object.entries(raw).reduce((acc,elm)=>{
  const [k,v] = elm
  if (allowed.includes(k)) {
    acc[k] = v 
  }
  return acc
},{})

Có nhiều cách để thực hiện điều này. Các câu trả lời được chấp nhận sử dụng một cách tiếp cận Phím-Filter-Giảm thiểu, mà không phải là performant nhất.

Thay vào đó, sử dụng một for...invòng lặp để lặp qua các khóa của một đối tượng hoặc lặp qua các khóa được phép và sau đó soạn thảo một đối tượng mới sẽ có hiệu suất cao hơn ~ 50% ^a .

const obj = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const keys = ['item1', 'item3'];

function keysReduce (obj, keys) {
  return keys.reduce((acc, key) => {
    if(obj[key] !== undefined) {
      acc[key] = obj[key];
    }
    return acc;
  }, {});
};

function forInCompose (obj, keys) {
  const returnObj = {};
  for (const key in obj) {
    if(keys.includes(key)) {
      returnObj[key] = obj[key]
    }
  };
  return returnObj;
};

keysReduce(obj, keys);   // Faster if the list of allowed keys are short
forInCompose(obj, keys); // Faster if the number of object properties are low

^{a. Xem jsPerf để biết điểm chuẩn của trường hợp sử dụng đơn giản. Kết quả sẽ khác nhau dựa trên trình duyệt.}

Bạn có thể xóa một khóa đặc biệt trên đối tượng của bạn

items={
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
}

// Example 1
var key = "item2";
delete items[key]; 

// Example 2
delete items["item2"];

// Example 3
delete items.item2;

const filteredObject = Object.fromEntries(Object.entries(originalObject).filter(([key, value]) => key !== uuid))

Cách đơn giản! Để làm điều này.

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};
const{item1,item3}=myData
const result =({item1,item3})

Một giải pháp khác sử dụng Array.reducephương pháp "mới" :

const raw = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

const allowed = ['item1', 'item3'];

const filtered = allowed.reduce((obj, key) => { 
  obj[key] = raw[key]; 
  return obj 
}, {})

console.log(filtered);

Trình diễn trong Fiddle này ...

Nhưng tôi thích giải pháp trong câu trả lời này ở đây là sử dụng và :Object.fromEntries Array.filterArray.includes

const object = Object.fromEntries( Object.entries(raw).filter(([key, value]) => allowed.includes(key)) );

Trình diễn trong Fiddle này ...

OK, làm thế nào về điều này:

const myData = {
  item1: { key: 'sdfd', value:'sdfd' },
  item2: { key: 'sdfd', value:'sdfd' },
  item3: { key: 'sdfd', value:'sdfd' }
};

function filteredObject(obj, filter) {
  if(!Array.isArray(filter)) {
   filter = [filter.toString()];
  }
  const newObj = {};
  for(i in obj) {
    if(!filter.includes(i)) {
      newObj[i] = obj[i];
    }
  }
  return newObj;
}

và gọi nó như thế này:

filteredObject(myData, ['item2']); //{item1: { key: 'sdfd', value:'sdfd' }, item3: { key: 'sdfd', value:'sdfd' }}

Hàm này sẽ lọc một đối tượng dựa trên danh sách các khóa, nó hiệu quả hơn câu trả lời trước vì nó không phải sử dụng Array.filter trước khi gọi giảm. vì vậy O (n) của nó trái ngược với O (n + được lọc)

function filterObjectByKeys (object, keys) {
  return Object.keys(object).reduce((accum, key) => {
    if (keys.includes(key)) {
      return { ...accum, [key]: object[key] }
    } else {
      return accum
    }
  }, {})
}

Trong vòng lặp, không trả về gì khi gặp các thuộc tính / khóa nhất định và tiếp tục với phần còn lại:

const loop = product =>
Object.keys(product).map(key => {
    if (key === "_id" || key === "__v") {
        return; 
    }
    return (
        <ul className="list-group">
            <li>
                {product[key]}
                <span>
                    {key}
                </span>
            </li>
        </ul>
    );
});

Tôi ngạc nhiên khi không ai đề xuất điều này. Nó rất sạch sẽ và rất rõ ràng về những phím bạn muốn giữ.

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filterObject = ({a,b,c}) => ({a,b,c})
const filteredObject = filterObject(unfilteredObject)

Hoặc nếu bạn muốn một lớp lót bẩn:

const unfilteredObj = {a: ..., b:..., c:..., x:..., y:...}

const filteredObject = (({a,b,c})=>({a,b,c}))(unfilteredObject);

Một cách tiếp cận khác là sử dụng Array.prototype.forEach()như

const raw = {
  item1: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item2: {
    key: 'sdfd',
    value: 'sdfd'
  },
  item3: {
    key: 'sdfd',
    value: 'sdfd'
  }
};

const allowed = ['item1', 'item3', 'lll'];

var finalObj = {};
allowed.forEach(allowedVal => {
  if (raw[allowedVal])
    finalObj[allowedVal] = raw[allowedVal]
})
console.log(finalObj)

Nó chỉ bao gồm các giá trị của các khóa có sẵn trong dữ liệu thô và do đó ngăn thêm bất kỳ dữ liệu rác nào.

Đó sẽ là giải pháp của tôi:

const filterObject = (obj, condition) => {
    const filteredObj = {};
    Object.keys(obj).map(key => {
      if (condition(key)) {
        dataFiltered[key] = obj[key];
      }
    });
  return filteredObj;
}