本文来分享 10 个开发技巧，可以使用这些技巧来高效地操作和使用 JavaScript 对象。
1、创建一个绝对空的对象
我们可以通过 {} 来创建空对象。 然而，通过方法中创建的对象，proto、hasOwnProperty等对象方法仍然是存在的，这是因为使用 {} 将创建一个继承自 Object 类的对象。
如果需要创建一个绝对空的对象，最好使用 Object.create(null)，它将创建一个不从任何对象继承且没有属性的对象。
let vehical = Object.create(null);
// vehicle.__proto__ === "undefined" ✅
复制代码
2、使用扩展运算符组合两个对象
在许多情况下，需要组合来自不同来源的两个或多个数据集。
最常用的方法是使用 Object.assign()。该方法需要多个参数。 第一个是分配的对象，其余参数是需要组合的对象。
const name = { id: '1234', name: 'Charuka'};const university = { id: '1234', university: 'Harvard'};const PersonalDetails = Object.assign({}, name, university);
console.log(PersonalDetails); // { id: '1234', name: 'Charuka', university: 'Harvard' }
复制代码
使用扩展运算符进行组合更方便，只需展开任意数量的对象，并将它们组合成一个对象即可。
const PersonalDetails = { ...name, ...university };
console.log(PersonalDetails); // { id: '1234', name: 'Charuka', university: 'Harvard' }
复制代码
需要注意，如果存在重复的键，那后面的会将覆盖前面对象的键。
3、从对象获取键和值的列表
在开发过程中，有时需要从对象中仅获取键或仅获取值。可以通过以下两个内置函数来实现：
Object.keys()：用于获取键列表。
Object.values()：用于获取值列表。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};//获取键console.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]//获取值console.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]
复制代码
4、检查属性
使用 for-in 循环时，检查对象的属性有助于避免迭代对象原型中的属性。可以使用 Object.hasOwnProperty()进行检查，而不是使用 if-else。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};for (var item in vehicle) { if (vehicle.hasOwnProperty(item)) { console.log(item); }; };// brand// year// type
复制代码
5、克隆对象
假设有一个对象并且需要复制它以更改其值，但原始对象应该保持不变。可以通过以下方法来实现。
第一种方法是使用 Object.assign()，它将所有可枚举属性的值从一个对象复制到另一个对象。
const initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};const secondaryVehicle = Object.assign({}, initialVehicle);console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};
复制代码
第二种方法是使用 JSON.parse() 复制对象。
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};var secondaryVehicle = JSON.parse(JSON.stringify(initialVehicle));console.log(secondaryVehicle); // { brand: 'BWM', year: 2022, type: 'suv'};
复制代码
6、从对象中选择特定数据
针对对象中的特定键（key），可以使用不同的方法进行选择。选择方法的选择取决于希望对这些值进行的操作。下面的示例展示了一种有条理的方式从对象中选择数据，并可以选择所需的键，并将它们提取到一个新的对象中。
const selectObj = (obj, items) => { return items.reduce((result, item) => { result[item] = obj[item]; return result; }, {});};const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};const selected = selectObj(vehicle, ['brand', 'type']);console.log(selected); // { brand: 'BWM', type: 'suv' }
复制代码
7、从对象中删除键
有时我们需要从对象中删除特定的键及其值。最合适的方法是编写一个可重用的删除方法，该方法将一个对象和要删除的键列表作为输入。 然后循环遍历要删除的每个键并将其从对象中删除。
const remove = (object, removeList = []) => { const result = { ...object }; removeList.forEach((item) => { delete result[item]; }); return result;}
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}
const itemRemoved = remove(vehicle, ['year']);console.log(itemRemoved); // Result { brand: 'BWM', type: 'suv' }
复制代码
8、将对象数据拉入数组
在某些情况下，我们需要将对象数据拉入数组中，例如下拉菜单。可以使用 Object.entries() 函数，该函数将一个对象作为其第一个参数并返回一个数组。
返回的结果是一个二维数组。内部数组将有两个值：第一个是键，第二个是值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}console.log(Object.entries(vehicle)); // [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]
复制代码
9、循环访问 JavaScript 对象
JavaScript 中有多种方法可用于循环访问对象。
第一种方法是使用 Object.entries()，该函数可以避免查找原始对象中的每个值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}Object.entries(vehicle).forEach( ([key, value]) => console.log(key, value));// brand BWM// year 2022// type suv
复制代码
作为一种更好、更清晰的方法，可以使用 Object.entries() 进行对象解构。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}for (const [key, value] of Object.entries(vehicle)) { console.log(key, value);}// brand BWM// year 2022// type suv
复制代码
10、有条件地向对象添加属性
通常，开发人员使用 if-else 来有条件地向对象添加新元素。 然而，最简单的方法是使用对象解构和扩展运算符。
const type = { type: 'suv' };const vehicle = { brand: 'BMW', year: 2022, ...(!type ? {} : type)}console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }
复制代码
同样，使用不同的条件，可以向对象添加任意数量的元素。
编程语言的发展：（技术前沿）
开发语言作为软件搭建的底层，长久以来一直使用英文编程，Java、C 等语言对于专业程序员来说并不难，然而许多非 IT 专业的人，希望搭建出适合自己使用的软件，却被晦涩难懂的英文编程阻拦在外。
所幸的是，自 2000 年以来，低代码领域虽然在夹缝中艰难生存，但是经历 20 年风雨，如今却已柳木成荫，相关领域企业超过百家，近年如火如荼的“JNPF 平台”就是低代码界的一匹黑马。
JNPF 平台由具备 10 多年系统开发经验和企业项目交付经验的技术团队倾力打造而成的企业级低代码平台。支持多国语言切换搭建界面，业务流程只需要“拖拉拽”方式、少量或完全不需要编写代码即可搭建，操作起来就像搭积木一样简单，会玩电脑就可以开发软件。
核心功能：表单引擎、可视化引擎、BI 引擎、流程引擎、权限引擎、门户引擎、大屏引擎、接口中心、物联平台
如果那你未曾尝试过这个领域，你或许可以试试看！官网：https://www.jnpfsoft.com/?infoq
评论