将对象键转换为小写

JavaScriptJavaScriptBeginner
立即练习

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

💡 本教程由 AI 辅助翻译自英文原版。如需查看原文,您可以 切换至英文原版

简介

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

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

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

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


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/array_methods("Array Methods") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") subgraph Lab Skills javascript/data_types -.-> lab-28476{{"将对象键转换为小写"}} javascript/array_methods -.-> lab-28476{{"将对象键转换为小写"}} javascript/obj_manip -.-> lab-28476{{"将对象键转换为小写"}} end

理解 JavaScript 中的对象

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

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

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

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

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

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

const user = {
  Name: "John",
  AGE: 30,
  Email: "[email protected]"
};

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

user;

你应该会看到如下输出:

{ Name: 'John', AGE: 30, Email: '[email protected]' }

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

访问对象的键

在转换对象的键之前,你需要了解如何访问它们。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: '[email protected]' }

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

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

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: "[email protected]",
      PHONE: "123-456-7890"
    }
  }
};

lowerizeKeys(nestedObject);

输出将是:

{ user: { Name: 'John', Contact: { EMAIL: '[email protected]', 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: '[email protected]', 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: "[email protected]"
};

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: "[email protected]",
      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: '[email protected]' }

Object with lowercase keys:
{ name: 'John', age: 30, email: '[email protected]' }

Nested object:
{
  User: {
    Name: 'John',
    Contact: { EMAIL: '[email protected]', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (shallow):
{
  user: {
    Name: 'John',
    Contact: { EMAIL: '[email protected]', PHONE: '123-456-7890' }
  }
}

Nested object with lowercase keys (deep):
{
  user: {
    name: 'John',
    contact: { email: '[email protected]', phone: '123-456-7890' }
  }
}

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

总结

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

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

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

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

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

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