当前位置：极客教程 > JavaScript > JavaScript 精品文章 > JavaScript 如何将多个对象键的名称替换为提供的值

JavaScript 如何将多个对象键的名称替换为提供的值

JavaScript 如何将多个对象键的名称替换为提供的值

以下方法介绍了如何使用JavaScript将多个对象键的名称替换为用户提供的值。

问题描述： 给定一个包含不同键值对的对象，其中键表示属性，而值本身称为属性值，您需要使用JavaScript将一个或多个键的原始名称更改为用户提供的名称。

举一个例子，以上面示例的对象为例。该对象包含了Name：“Hello”等键值对。我们假设我们要将Name键更改为FirstName键名，使用以下方法：

在直接讨论解决上述问题的方法之前，让我们首先声明我们将用于解决查询的对象。

示例： 通过以下语法，我们首先创建一个对象：

Javascript

<script> 
  let object = { 
    name: "Hello", 
    age: 20, 
    gender: "Male", 
  }; 
  
  console.log(object); 
</script>
HTML

输出：

{ name: 'Hello', age: 20, gender: 'Male' }
JSON

现在让我们来看一下解决上述问题的方法。

方法1

  • 这是一种本地方法，也相当简单。
  • 在这种方法中，我们将直接选择对象键，并将选定键的名称更改为用户提供的名称。
  • 在提供键名后，我们将删除先前声明的键并替换为新键。
  • 我们将把逻辑部分写在一个方法（或函数）中，并进一步调用该方法来执行我们的结果。

示例 1：

Javascript

<script> 
  let object = { 
    name: "Hello", 
    age: 20, 
    gender: "Male", 
  }; 
  
  let renmeObjectKey = (object) => { 
    object.FirstName = object.name; 
    delete object.name; 
  }; 
  renmeObjectKey(object); 
  console.log(object); 
</script>
HTML

输出:

{ age: 20, gender: 'Male', FirstName: 'Hello' }
JavaScript

现在假设您想要针对名称由您提供的对象中的年龄键进行目标定位。

示例2：

Javascript

<script> 
  let object = { 
    name: "Hello", 
    age: 20, 
    gender: "Male", 
  }; 
  
  let renmeObjectKey = (object) => { 
    object.FirstName = object.name; 
    object.currentAge = object.age; 
    delete object.name; 
    delete object.age; 
  }; 
  renmeObjectKey(object); 
  console.log(object); 
</script>
HTML

现在除了姓名键，年龄键也被用户提供的新姓名取代。

输出:

{ gender: 'Male', FirstName: 'Hello', currentAge: 20 }
JavaScript

注意： 这里唯一可以注意到的是对象的位置变了，但其值仍然保持不变。

方法2

  • 在这个方法中，我们将声明一个完全负责执行结果的方法。
  • 在这个方法的参数中，我们将传入两个参数，第一个是keysMap对象，我们将从用户那里接受它，它实际上包含了要用新的键名替换的旧键名，第二个是我们要引用的对象。
  • 现在在这个方法内部，我们将使用Object.keys()来接受我们的对象，并针对所有对象键进行操作，然后我们将对其使用reduce()，它将接受两个参数：第一个是作为结果变量的累加器值，第二个是我们当前正在定位的键。
  • 然后我们将编写逻辑部分，为此，我们首先要考虑到spread操作符，它将我们的对象展开为一个数组，然后我们将渲染出对象的键，并用我们自己传入的键名进行替换。
  • 然后我们将把我们的方法传递给一个新变量，这个变量将被声明为我们的结果变量，然后将console.log()我们的结果。

示例：

<script> 
  let object = { 
    name: "Hello", 
    age: 20, 
    gender: "Male", 
  }; 
  
  let renameKeys = (keysMap, object) => 
    Object.keys(object).reduce( 
      (acc, key) => ({ 
        ...acc, 
        ...{ [keysMap[key] || key]: object[key] }, 
      }), 
      {} 
    ); 
  
  let result = renameKeys({ name: "FirstName" }, object); 
  console.log(result); 
</script>
HTML

输出：

{ FirstName: 'Hello', age: 20, gender: 'Male' }
JavaScript

注意： 这种方法会保留键和值的位置。

Python教程

Python 教程

Python 教程
Tkinter 教程

Tkinter 教程
Pandas 教程

Pandas 教程
NumPy 教程

NumPy 教程
Flask 教程

Flask 教程
Django 教程

Django 教程
PySpark 教程

PySpark 教程
wxPython 教程

wxPython 教程
SymPy 教程

SymPy 教程
Seaborn 教程

Seaborn 教程
SciPy 教程

SciPy 教程
RxPY 教程

RxPY 教程
Pycharm 教程

Pycharm 教程
Pygame 教程

Pygame 教程
PyGTK 教程

PyGTK 教程
PyQt 教程

PyQt 教程
PyQt5 教程

PyQt5 教程
PyTorch 教程

PyTorch 教程
Matplotlib 教程

Matplotlib 教程
Web2py 教程

Web2py 教程
BeautifulSoup 教程

BeautifulSoup 教程

Java教程

Java 教程

Java 教程

Web教程

HTML 教程

HTML 教程
CSS 教程

CSS 教程
CSS3 教程

CSS3 教程
jQuery 教程

jQuery 教程
Ajax 教程

Ajax 教程
AngularJS 教程

AngularJS 教程
TypeScript 教程

TypeScript 教程
WordPress 教程

WordPress 教程
Laravel 教程

Laravel 教程
Next.js 教程

Next.js 教程
PhantomJS 教程

PhantomJS 教程
Three.js 教程

Three.js 教程
Underscore.JS 教程

Underscore.JS 教程
WebGL 教程

WebGL 教程
WebRTC 教程

WebRTC 教程
VueJS 教程

VueJS 教程

数据库教程

SQL 教程

SQL 教程
MySQL 教程

MySQL 教程
MongoDB 教程

MongoDB 教程
PostgreSQL 教程

PostgreSQL 教程
SQLite 教程

SQLite 教程
Redis 教程

Redis 教程
MariaDB 教程

MariaDB 教程

图形图像教程

Vulkan 教程

Vulkan 教程
OpenCV 教程

OpenCV 教程

大数据教程

R语言 教程

R语言 教程

开发工具教程

Git 教程

Git 教程
VSCode 教程

VSCode 教程
Docker 教程

Docker 教程
Gerrit 教程

Gerrit 教程
Excel 教程

Excel 教程

计算机教程

Go语言 教程

Go语言 教程
C++ 教程

C++ 教程

JavaScript 精品教程

登录

找回密码？

注册