如何在JavaScript中重命名对象键?

JavaScript不提供内置函数来重命名对象键,那么如何重命名对象键?下面本篇文章就来给大家介绍一下在JavaScript中重命名对象键的方法,希望对大家有所帮助。

在JavaScript中,对象用于存储各种数据的集合,是属性的集合;属性是一个“key:value”对。其中key(键)称为“属性名”,用于标识值。下面介绍重命名对象键的方法。

方法一:通过简单的变量赋值来重命名对象

在分配了一个或多个变量之后,我们将删除旧的键值对并打印新的键值对。

语法:

obj['New key'] = obj['old key'];

注意:通过简单的变量赋值来重命名对象可以应用于多个键值对。

例:

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>javascript:对象重命名键</title>
	</head>

	<body>
		<p>点击重命名对象键</p>
		<button type="button" onclick="rename()"> 
                   重命名
        </button>

		<script>
			var capitals = [{ // 创建对象“capital”
				"Burma": "Naypyitaw" // key "Burma" 和 value "Naypitaw" 
			}];
			console.log(capitals);

			function rename() { // 单击按钮时要重命名的函数
				capitals = capitals.map(function(obj) {
					obj['Myanmar'] = obj['Burma']; // 分配新键
					delete obj['Burma']; // 删除旧键
					return obj;
				});
				console.log(capitals);
			}
		</script>
	</body>

</html>

效果图:

1.gif

方法二:使用defineProperty()来重命名对象

通过利用defineProperty()来操作对象的属性来重命名给定的对象键。

defineProperty():

此静态方法用于定义对象的新属性或修改现有属性,并返回该对象。它接受3个参数。它们分别是:要修改的对象,键的名称和描述属性。

语法:

Object.defineProperty(obj, key, description)

例:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>javascript:对象重命名键</title>
	</head>
	<body>
		<p>点击重命名对象键</p>
		<button type="button" onclick="rename()"> 重命名</button>

		<script>
			var capitals = [{ // 创建对象'capital'
				"Persia": "Tehran" // key "Persia" 和 value "Tehran" 
			}];
			console.log(capitals);
			// 用于重命名旧键的函数
			function renameKey(obj, old_key, new_key) {
				// 检查如果 old key = new key   
				if(old_key !== new_key) {
					//修改对象的旧键提取描述
					Object.defineProperty(obj, new_key, 
					   Object.getOwnPropertyDescriptor(obj, old_key));
					delete obj[old_key]; // 删除旧键
				}
			}

			function rename() {
				capitals.forEach(obj => renameKey(obj, 'Persia', 'Iran'));
				console.log(capitals);
			}
		</script>
	</body>

</html>

效果图:

2.gif

以上就是如何在JavaScript中重命名对象键?的详细内容,更多请关注html中文网其它相关文章!

赞(0) 打赏
未经允许不得转载:html中文网首页 » JavaScript 答疑

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏