LabEx
登录免费加入

将对象键转换为小写

Beginner

This tutorial is from open-source community. Access the source code

简介

在这个实验中，你将学习如何使用 JavaScript 将对象的所有键转换为小写。当处理来自不同数据源的数据时，对象键的大小写可能不一致，这项技术就显得尤为有用。

你将使用几个 JavaScript 方法来完成这个任务：

  • Object.keys()：用于从对象中获取所有键
  • Array.prototype.reduce()：用于将数据转换为新对象
  • String.prototype.toLowerCase()：用于将字符串转换为小写

在这个实验结束时，你将能够创建一个可复用的函数，该函数可以在保留对象值的同时，将对象的所有键转换为小写。

理解 JavaScript 中的对象

在开始将对象的键转换为小写之前，让我们先了解一下什么是 JavaScript 对象，以及如何使用它们。

在 JavaScript 中，对象是键值对的集合。键是字符串（或 Symbol），值可以是任何数据类型，包括其他对象。

让我们从打开 Node.js 交互式 shell 开始：

  1. 在你的 WebIDE 中打开终端
  2. 输入 node 并按回车键

现在你应该会看到 Node.js 提示符 (>)，它允许你直接输入 JavaScript 代码。

让我们创建一个带有大小写混合键的简单对象：

const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

将这段代码输入到 Node.js 提示符中并按回车键。要查看该对象，只需输入 user 并按回车键：

user;

你应该会看到如下输出：

{ Name: 'John', AGE: 30, Email: 'john@example.com' }

如你所见，这个对象的键具有不同的大小写样式。在下一步中，我们将学习如何访问这些键并将它们转换为小写。

访问对象的键

在转换对象的键之前，你需要了解如何访问它们。JavaScript 提供了 Object.keys() 方法，该方法会返回一个包含对象所有键的数组。

在你的 Node.js 交互式 shell 中，尝试执行以下代码：

Object.keys(user);

你应该会看到如下输出：

[ 'Name', 'AGE', 'Email' ]

现在，让我们尝试使用 toLowerCase() 方法将每个键转换为小写。你可以使用 map() 方法来转换每个键：

Object.keys(user).map((key) => key.toLowerCase());

输出应该是：

[ 'name', 'age', 'email' ]

很棒！现在你已经有了一个所有键都转换为小写的数组。不过，你仍然需要创建一个新对象，该对象使用这些小写键并保留原始值。为此，你将在下一步中使用 reduce() 方法。

在继续之前，让我们先了解一下 reduce() 方法。这个方法会对数组的每个元素执行一个归约函数，最终得到一个单一的输出值。

以下是一个 reduce() 的简单示例：

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((accumulator, currentValue) => {
  return accumulator + currentValue;
}, 0);

sum;

输出将是 10，这是数组中所有数字的总和。reduce() 方法中的 0 是累加器的初始值。

创建转换为小写键的函数

既然你已经了解了如何访问对象的键并使用 reduce() 方法，那么让我们创建一个将对象的所有键转换为小写的函数。

在你的 Node.js 交互式 shell 中，定义以下函数：

const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

下面来详细分析这个函数的工作原理：

  1. Object.keys(obj) 获取输入对象的所有键
  2. .reduce() 将这些键转换为一个新对象
  3. 对于每个键，我们在累加器对象 (acc) 中创建一个新条目，其中：
    • 使用 key.toLowerCase() 将键转换为小写
    • 从输入对象中获取原始值 (obj[key])
  4. 我们以一个空对象 {} 作为累加器的初始值
  5. 最后，返回累加器，它就是一个键为小写的新对象

现在，让我们使用之前创建的 user 对象来测试这个函数：

const lowercaseUser = lowerizeKeys(user);
lowercaseUser;

你应该会看到如下输出：

{ name: 'John', age: 30, email: 'john@example.com' }

完美！所有的键现在都是小写了。

让我们再试一个例子，确保函数能正常工作：

const product = {
  ProductID: 101,
  ProductName: "Laptop",
  PRICE: 999.99
};

lowerizeKeys(product);

输出应该是：

{ productid: 101, productname: 'Laptop', price: 999.99 }

对于具有不同键大小写样式的不同对象，这个函数都能正常工作。

处理边界情况

我们的函数对于简单对象表现良好，但对于更复杂的情况呢？让我们来探索一些边界情况，看看我们的函数如何处理它们。

空对象

首先，让我们用一个空对象进行测试：

lowerizeKeys({});

输出应该是一个空对象：

{}

包含嵌套对象的对象

如果对象包含嵌套对象会怎样呢？让我们试试看：

const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

lowerizeKeys(nestedObject);

输出将是：

{ user: { Name: 'John', Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' } } }

注意，只有顶级键 User 被转换为小写。嵌套对象内的键保持不变。

为了处理嵌套对象，我们需要修改函数以递归地处理所有对象。让我们创建一个增强版本：

const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

这个增强版函数：

  1. 检查每个值是否也是一个对象（且不是数组或 null）
  2. 如果是，则对该嵌套对象递归调用自身
  3. 否则，使用原始值

让我们用嵌套对象来测试它：

const deepLowerizedObject = deepLowerizeKeys(nestedObject);
deepLowerizedObject;

现在你应该看到所有键都被转换为小写，即使是嵌套对象中的键：

{ user: { name: 'John', contact: { email: 'john@example.com', phone: '123-456-7890' } } }

干得好！你已经创建了一个可以处理嵌套对象的高级函数。

创建可复用的模块

既然我们已经有了可用的函数，接下来让我们创建一个可复用的 JavaScript 模块文件，以便将其导入到其他项目中。

首先，通过连续按两次 Ctrl+C 或者输入 .exit 并按回车键来退出 Node.js 交互式 shell。

现在，在项目目录中创建一个名为 object-utils.js 的新文件：

  1. 在 WebIDE 中，导航到左侧的文件资源管理器面板
  2. 在项目目录中右键单击，然后选择“新建文件”
  3. 将文件命名为 object-utils.js
  4. 在文件中添加以下代码：
/**
 * Converts all keys of an object to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase
 */
const lowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    acc[key.toLowerCase()] = obj[key];
    return acc;
  }, {});
};

/**
 * Recursively converts all keys of an object and its nested objects to lowercase
 * @param {Object} obj - The input object
 * @returns {Object} A new object with all keys in lowercase (including nested objects)
 */
const deepLowerizeKeys = (obj) => {
  return Object.keys(obj).reduce((acc, key) => {
    const value = obj[key];
    // Check if the value is an object and not null
    const newValue =
      value && typeof value === "object" && !Array.isArray(value)
        ? deepLowerizeKeys(value)
        : value;

    acc[key.toLowerCase()] = newValue;
    return acc;
  }, {});
};

// Export the functions
module.exports = {
  lowerizeKeys,
  deepLowerizeKeys
};

现在，让我们创建一个测试文件来验证模块是否能正常工作。创建一个名为 test.js 的新文件：

  1. 在 WebIDE 中，导航到左侧的文件资源管理器面板
  2. 在项目目录中右键单击，然后选择“新建文件”
  3. 将文件命名为 test.js
  4. 在文件中添加以下代码：
// Import the functions from our module
const { lowerizeKeys, deepLowerizeKeys } = require("./object-utils");

// Test with a simple object
const user = {
  Name: "John",
  AGE: 30,
  Email: "john@example.com"
};

console.log("Original object:");
console.log(user);

console.log("\nObject with lowercase keys:");
console.log(lowerizeKeys(user));

// Test with a nested object
const nestedObject = {
  User: {
    Name: "John",
    Contact: {
      EMAIL: "john@example.com",
      PHONE: "123-456-7890"
    }
  }
};

console.log("\nNested object:");
console.log(nestedObject);

console.log("\nNested object with lowercase keys (shallow):");
console.log(lowerizeKeys(nestedObject));

console.log("\nNested object with lowercase keys (deep):");
console.log(deepLowerizeKeys(nestedObject));

现在，让我们运行测试文件：

node test.js

你应该会看到类似于以下的输出：

Original object:
{ Name: 'John', AGE: 30, Email: 'john@example.com' }

Object with lowercase keys:
{ name: 'John', age: 30, email: 'john@example.com' }

Nested object:
{
  User: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (shallow):
{
  user: {
    Name: 'John',
    Contact: { EMAIL: 'john@example.com', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (deep):
{
  user: {
    name: 'John',
    contact: { email: 'john@example.com', phone: '123-456-7890' }
  }
}

恭喜！你已经成功创建了一个可复用的 JavaScript 模块，其中包含将对象键转换为小写的函数。现在，这个模块可以导入到你的任何 JavaScript 项目中。

总结

在这个实验中，你学习了如何在 JavaScript 中将对象的键转换为小写。你已经：

  1. 探索了 JavaScript 对象以及如何访问它们的键
  2. 使用 Object.keys() 方法从对象中获取所有键
  3. 利用 reduce() 方法来转换对象
  4. 创建了一个将对象的所有键转换为小写的函数
  5. 增强了该函数以递归处理嵌套对象
  6. 创建了一个包含这两个函数的可复用 JavaScript 模块

当处理来自不同数据源的数据时，这些技术非常有用，因为不同数据源中对象键的大小写可能不一致。你创建的函数可以帮助规范化数据，使其更易于处理。

你可以通过添加更多函数来进一步扩展这些实用工具，例如：

  • 将对象的键转换为大写
  • 将键转换为驼峰命名法（camelCase）或蛇形命名法（snake_case）
  • 根据键或值的条件过滤对象
  • 深度比较对象是否相等

继续练习对象及其操作，以提高你在 JavaScript 编程方面的熟练度。