对象是JavaScript程序的基本结构，用于构建类和复杂数据，是面向对象编程的组成部分。
我作为一名全栈软件开发人员，在过去的五年多时间里，每天都在使用JavaScript。对象在JavaScript中可以说发挥的作用至关重要。
本文将分享10个技巧，可帮助JavaScript开发人员更有效地操作和处理JavaScript对象。
创建空对象似乎只能通过{}。但是，你注意到了吗，当我们通过这种方法创建对象时，proto和hasOwnProperty等对象方法也会存在？这是因为{}将创建一个继承自Object类的对象。
如果需要创建一个绝对空的对象，最好使用Object.create(null)，它将创建一个不继承且没有属性的对象。
let vehical = Object.create(null);// vehicle.__proto__ === "undefined"// There are no object properties, keys, or methods until we add许多时候，我们需要组合来自不同源的两个或多个数据集。在JavaScript中有多种方法可以做到这一点。
最常用的方法是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' }但是，在不使事情复杂化的情况下，也可以使用spread运算符进行组合。不管多少数量的对象都可以组合成单个对象。
const PersonalDetails = { ...name, ...university };console.log(PersonalDetails); // { id: '1234', name: 'Charuka', university: 'Harvard' }需要注意的是，这两种组合方法都会导致重复的键覆盖前面对象的键。
在开发过程中，有时我们只需要从对象中获取键或值。有两个非常简单的内置函数：
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'};//get keysconsole.log(Object.keys(vehicle)); // [ 'brand', 'year', 'type' ]//get valuesconsole.log(Object.values(vehicle)); // [ 'BWM', 2022, 'suv' ]使用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使用delete方法时，应用程序将用undefined替换项，而不是将其从数组中删除。因此，最好使用splice()来删除数组中的项。
让我们看看使用delete时会发生什么。
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4']; arrayItems.length; // returns 6 delete arrayItems[2]; // returns true arrayItems.length; // returns 6console.log(arrayItems); // [ 'a', 2, undefined, '3', 'c', '4' ]而使用splice()时，又会发生什么。
var arrayItems = ['a' , 2 , 'b', '3', 'c', '4']; arrayItems.length; // returns 6 arrayItems.splice(2,1); // returns true arrayItems.length; // returns 5console.log(arrayItems); // [ 'a', 2, '3', 'c', '4' ]delete方法应该用于删除对象属性。
假设有一个对象，你需要复制并更改复制对象的值，但原始对象保持不变。有两种方法可以做到这一点。
第一种方法是使用Object.assign()，将所有可枚举属性的值从一个对象复制到另一个对象。
var initialVehicle = { brand: 'BWM', year: 2022, type: 'suv'};var 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'};有若干方法可用于从对象中选择键。选择哪种方法取决于我们要对值执行的操作。下面的示例演示的是从对象中选择数据的方法。
你也可以选择所需的键并将它们拉取到新对象中。
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' }有时我们需要从对象中删除特定的键和值。
比如说在构建API并希望删除敏感数据的场景中，这可能是必需的。
最合适的方法是编写可重用的remove方法，将对象和要删除的键列表作为入参。然后遍历要删除的每个键，并将其从对象中删除。
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' }在某些情况下，你需要将对象数据拉取到数组中，例如下拉菜单。那么可以使用Object.entries()函数，该函数将对象作为其第一个参数并返回数组。
返回的对象是数组的数组。内部数组有两个值：第一个是键，第二个是值。
const vehicle = { brand: 'BWM', year: 2022, type: 'suv'}console.log(Object.entries(vehicle)); // [ [ 'brand', 'BWM' ], [ 'year', 2022 ], [ 'type', 'suv' ] ]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通常，开发人员使用if-else条件向对象添加新元素。最简单的方法是使用对象解构和spread运算符。
const type = { type: 'suv' };const vehicle = { brand: 'BMW', year: 2022, ...(!type ? {} : type)}console.log(vehicle); //{ brand: 'BMW', year: 2022, type: 'suv' }同理，你可以向对象添加任意数量的元素。
与任何其他编程语言一样，JavaScript有很多处理对象的技巧，可以使编写程序变得更简单、更漂亮。本文讨论了我在处理对象时最常用的10个技巧。
本文链接：http://www.28at.com/showinfo-26-13612-0.html处理 JavaScript 对象的十个技巧
声明：本网页内容旨在传播知识，若有侵权等问题请及时与本网联系，我们将在第一时间删除处理。邮件：2376512515@qq.com
Copyright © 2016-2023 天津谷骐科技有限公司 版权所有 sitemap.xml
违法及侵权请联系：2376512515@qq.com 津ICP备18001702号
津公网安备 12010102000574号
