如何在 Javascript 中从对象中选择属性
How to select properties from an object in Javascript
我有以下对象说,
{"id":"kl45wkfj1k4j34", "firstname":"Arun", "lastname":"K"}
我有要过滤的键,"名字,姓氏"使用逗号分隔符在字符串中分配。
如何筛选该对象以获取输出,如下所示:
{"firstname":"Arun", "lastname":"K"}
Underscore的pick
方法就是你要找的。
var obj = { "id": 'kl45wkfj1k4j34', "firstname": "Arun", "lastname": "K" };
var filter = 'firstname, lastname',
var result = _.pick(obj, filter.split(', '));
有很多方法可以做到这一点。到目前为止的答案假设您要修改现有对象,但问题未指定;"过滤器"这个词暗示可能不是。因此,如果要创建一个新的过滤对象,而不是改变现有对象,则可以使用reduce函数。你说你的键列表是一个字符串,但为了保持示例干净,让我们假设你只是做str.split(',')
或类似操作,所以在将其传递给这些函数之前它已经是一个数组。
ES5
function createObjectFilter(keys) {
return function(obj) {
return keys.reduce(function(acc, key) {
acc[key] = obj[key];
return acc;
}, {});
};
}
var myFilter = createObjectFilter([ 'a', 'b' ]);
var filteredObject = myFilter(object);
ES6
const createObjectFilter = keys => obj => keys.reduce((acc, key) => {
acc[key] = obj[key];
return acc;
}, {});
const myFilter = createObjectFilter([ 'a', 'b' ]);
const filteredObject = myFilter(object);
现在,createObjectFilter 函数根据给定的键列表返回实际的筛选器函数。您可以改为"多合一",但这种方法的优点是可以在更多情况下重用您的过滤器。例如:
const filteredObjects = unfilteredObjects.map(myFilter);
Object.fromEntries
使用键/值对数组在BA中派上用场。
为此,您首先拆分字符串并映射对。
const
object = { id: 'kl45wkfj1k4j34', firstname: "Arun", lastname: "K" },
filter = 'firstname, lastname',
keys = filter.split(', ');
result = Object.fromEntries(keys.map(k => [k, object[k]]));
console.log(result);
var toBeFilteredObject = {...}; // {"id":"kl45wkfj1k4j34", "firstname":"Arun", "lastname":"K"}
var filteredObject = {};
'comma, seperated, string'.split(',').forEach(function(key) {
key = key.trim();
filteredObject[key] = toBeFilteredObject[key];
});
使用 _.reduce
var data = {"id":"kl45wkfj1k4j34", "firstname":"Arun", "lastname":"K"}
var filters = 'firstname, lastname'.split(', ');
_.reduce(data,function(result,value,key){
if(filters.indexOf(key)!=-1){
result[key] =value
}
return result;
},{})
如果你有这个对象:
var obj = {"id":"kl45wkfj1k4j34", "firstname":"Arun", "lastname":"K"};
然后你可以这样做:
delete obj.id;
console.log(obj);
现在根据评论:
var newlist = listarray.map(function (obj){
delete obj.id;
return obj;
});
这将创建一个没有id
的新列表数组。
或使用特定键:
var newlist = listarray.map(function (obj){
var o = {};
o.firstname = obj.firstname;
o.lastname = obj.lastname;
return o;
});
如果您有数组,则更通用的解决方案
var obj = [{ "id": 'kl45wkfj1k4j34', "firstname": "Arun", "lastname": "K" }, { "id": '34234', "firstname": "kajshd", "lastname": "ajsdh" }, { "id": '263742', "firstname": "asdjasd", "lastname": "asdjahs" }],
filter = 'firstname, lastname'.split(', '),
result = {};
var output = [];
obj.forEach(function(i, j) {
filter.forEach(function (k) {
// console.log(obj[j]);
result[k] = obj[j][k];
});
output.push(result);
result = {};
});
我已经将解决方案从@Nina调整为TypeScript,并对其进行了改进。
/**
* Constructs a new object by picking certain properties of the given object.
* Example: `const publicUser = pick(user, ['id', 'name'])`.
* Adapted from https://stackoverflow.com/a/35667463/4034572.
*/
export function pick<T extends object, K extends keyof T>(
object: T,
keys: K[]
): Pick<T, K> {
const entries = keys.filter((k) => k in object).map((k) => [k, object[k]])
return Object.fromEntries(entries)
}
使用示例:
type User = {
readonly id: number
name: string
email: string
password: string
}
type PublicUser = Pick<User, 'id' | 'name'>
const user: User = {
id: 2,
name: 'Albert',
email: 'a@a.co',
password: 'pwd',
}
const publicUser: PublicUser = pick(user, ['id', 'name'])
// publicUser is { id: 2, name: 'Albert' }
好消息是 TypeScript 不允许您使用无效键。例如,执行pick(user, ['xyz'])
会引发错误 TS2322:类型"xyz"不可分配给类型"keyof User"。
而且您也会获得自动完成功能:)
起色
我添加了filter((k) => k in object)
,因为如果不这样做pick(user, ['xyz'])
会给出{ xyz: undefined }
,添加一个类型User
上不存在的属性。
但是,对于filter
,它正确地给出了{}
,这是有意义的,因为属性xyz
在User
上不存在。
如果你有对象数组,那么使用这个
data = [{
"id": "kl45wkfj1k4j34",
"firstname": "Arun1",
"lastname": "K1"
}, {
"id": "kl45wkfj1k4j14",
"firstname": "Arun2",
"lastname": "K2"
}, {
"id": "2",
"firstname": "Arun3",
"lastname": "K3"
}];
data = data.map(function(o) {
delete o.id;
return o
})
document.write('<pre>' + JSON.stringify(data, 0, 4) + '</pre>');
- JQuery对动态创建的对象进行选择
- javascript对象操作:根据指定条件选择属性
- Javascript对象类在单击时打开窗口进行颜色选择,并在更改时替换对象背景颜色
- 仅使用文件对象选择单个文件
- Angular:使用选择列表选择过滤代码中的对象
- Javascript:从数组中的对象中选择属性
- 仅选择父对象
- Javascript / AngularJS对象选择基于表达式作为键
- Jquery上一个对象选择器
- JavaScript:使用用于Protractor测试的页面对象选择下拉列表项
- 在javascript对象选择器中使用变量
- 在 3D 场景中处理.js对象选择
- 使用角度设置多个对象(选择)
- 如何使用 JavaScript 变量值作为对象选择器
- 分层画布上的织物对象选择
- 使用对象选择根时,如何选择子元素
- 如何将字符串解析为javascript对象选择器
- 如何将选项对象选择为默认值
- 对象选择和调整大小的常用方法
- 阻止HTML画布对象选择