JavaScript - 对象解构

对象解构

对象解构赋值是 JavaScript 表达式，允许您将对象属性解包并分配给各个变量。各个变量的名称可以与对象属性相同，也可以不同。

当你有一个具有许多属性且只需要其中几个属性的对象时，对象解构是一个非常有用的功能。

语法

JavaScript 中对象销毁赋值的语法如下 -

const { prop1, popr2 } = obj;
	 	 	 	 OR
const { prop1: p1, prop12: p2 } = obj; // Renaming variables
	 	 	 	 OR
const { prop1 = default_vaule } = obj; // With Default values
	 	 	 	 OR
const { prop1, ...prop2 } = obj; // With rest parameter

在上面的语法中，'obj' 是一个对象。prop1 和 prop2 是对象属性。它涵盖了对象解构的不同用例。

示例：基本对象解构

在下面的示例中，watch 对象包含 brand 和 price 属性。

我们使用对象解构将对象属性的值存储到各个变量中。您可以在输出中看到品牌的 value 和 price 变量，这与 object 属性值相同。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const watch = {
	 	 	 	 	brand: "Titan",
	 	 	 	 	price: 6000,
	 	 	 }
	 	 	 const {brand, price} = watch;
	 	 	 document.getElementById("output").innerHTML +=	
	 	 	 "The brand of the watch is " + brand + " and the price is " + price;
	 	</script>
</body>
</html>

输出

The brand of the watch is Titan and the price is 6000

示例：属性较少的解构

下面的代码演示了您可以仅解压缩所需的对象属性，并保持其他属性不变。在这里，Object 总共包含 4 个属性。但我们只解压缩了 brand 和 price 属性。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 const watch = {
	 	 	 	 	brand: "Titan",
	 	 	 	 	price: 6000,
	 	 	 	 	color: "Pink",
	 	 	 	 	dial: "Round",
	 	 	 }
	 	 	 const { brand, price } = watch;
	 	 	 document.getElementById("output").innerHTML =	
	 	 	 "The brand of the watch is " + brand + " and the price is " + price;
	 	</script>
</body>
</html>

输出

The brand of the watch is Titan and the price is 6000

对象解构和重命名变量

在 JavaScript 对象解构中，不必将对象属性值存储在与对象属性同名的变量中。

您可以编写新的变量名称，后跟冒号，后跟对象属性名称。这样，您可以在解构对象时重命名对象属性。

例

在下面的示例中，我们将 brand 属性的值存储在 'bd' 变量中，将 color 属性存储在 'cr' 变量中，将 dial 属性存储在 'dl' 变量中。

新变量的值与对象属性相同。

<html>
<body>
	 	<p id = "output1">brand: </p>
	 	<p id = "output2">color: 	</p>
	 	<p id = "output3">dial: </p>
	 	<script>
	 	 	 const watch = {
	 	 	 	 	brand: "Titan",
	 	 	 	 	color: "Pink",
	 	 	 	 	dial: "Round",
	 	 	 }
	 	 	 const { brand: bd, color: cr, dial: dl } = watch;
	 	 	 	
	 	 	 document.getElementById("output1").innerHTML += bd;
	 	 	 document.getElementById("output2").innerHTML += cr;
	 	 	 document.getElementById("output3").innerHTML += dl;
	 	</script>
</body>
</html>

输出

brand: Titan

color: Pink

dial: Round

对象解构和默认值

在许多情况下，对象属性可能包含未定义的值，或者对象中不存在特定属性。如果属性未定义，则 JavaScript 解构赋值允许您使用默认值初始化变量。

例

在下面的代码中，animal 对象包含 name 和 age 属性。

我们解构对象并尝试从对象中获取 name 和 color 属性值。在这里，object 中不存在 color 属性，但我们已使用默认值对其进行初始化。

输出显示 'yellow' 作为 color 变量的值，这是默认值。

<html>
<body>
	 	<p id = "output1">Animal Name: </p>
	 	<p id = "output2">Animal Color: </p>
	 	<script>
	 	 	 const animal = {
	 	 	 	 	name: "Lion",
	 	 	 	 	age: 10,
	 	 	 }
	 	 	 const { name = "Tiger", color = "Yellow" } = animal;
	 	 	 document.getElementById("output1").innerHTML += name;
	 	 	 document.getElementById("output2").innerHTML += color;
	 	</script>
</body>
</html>

输出

Animal Name: Lion

Animal Color: Yellow

例

在下面的代码中，我们重命名了变量并为变量分配了默认值。我们使用冒号来更改变量名称，并使用赋值运算符来分配默认值。

<html>
<body>
	 	<p id = "output1">Animal Name: </p>
	 	<p id = "output2">Animal Color: </p>
	 	<script>
	 	 	 const animal = {
	 	 	 	 	name: "Lion",
	 	 	 	 	age: 10,
	 	 	 }
	 	 	 const { name: animalName = "Tiger", color: animalColor = "Yellow" } = animal;
	 	 	 document.getElementById("output1").innerHTML += animalName;
	 	 	 document.getElementById("output2").innerHTML += animalColor;
	 	</script>
</body>
</html>

输出

Animal Name: Lion

Animal Color: Yellow

Object Destructuring 和 Rest 运算符

JavaScript Rest 参数的语法是三个点（...）。它允许您将其余对象属性收集到对象格式的单个变量中。让我们通过下面的示例来理解它。

例

在下面的代码中，nums 对象包含 4 个属性。解构时，num1 属性的对象值存储在 num1 变量中。其他剩余属性使用 rest 运算符存储在 'numbers' 变量中。

在输出中，你可以看到 'numbers' 包含包含 nums 对象的其余属性的对象。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 let output = document.getElementById("output");
	 	 	 const nums = {
	 	 	 	 	num1: 10,
	 	 	 	 	num2: 20,
	 	 	 	 	num3: 30,
	 	 	 	 	num4: 40,
	 	 	 }
	 	 	 const {num1, ...numbers} = nums;
	 	 	 output.innerHTML += "num1: " + num1 + "<br>";
	 	 	 output.innerHTML += "numbers: " + JSON.stringify(numbers);
	 	</script>
</body>
</html>

输出

num1: 10
numbers: {"num2":20,"num3":30,"num4":40}

对象解构和函数参数

您可以将 JavaScript 对象作为函数参数传递。之后，您可以在函数定义的参数中解构对象。

例

在下面的代码中，nums 对象包含多个属性，我们将其作为 sum（）函数的参数传递。

在 function 参数中，我们解构对象并在函数体内使用该变量。函数体返回对象属性的总和。

<html>
<body>
	 	<p id = "output"> </p>
	 	<script>
	 	 	 function sum({ num1, num2, num3, num4 }) {
	 	 	 	 	return num1 + num2 + num3 + num4;
	 	 	 }
	 	 	 const nums = {
	 	 	 	 	num1: 5,
	 	 	 	 	num2: 7,
	 	 	 	 	num3: 10,
	 	 	 	 	num4: 12,
	 	 	 }
	 	 	 const res = sum(nums);
	 	 	 document.getElementById("output").innerHTML += "The sum of numbers is: " + res;

	 	</script>
</body>
</html>

输出

The sum of numbers is: 34

<< JavaScript - 解构赋值 JavaScript - 数组解构 >>