0
点赞
收藏
分享

微信扫一扫

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?

扩展运算符:

句法:

var my_var = [...array];

使用 Spread 语法的好处:

它允许我们将数组或对象的所有元素包含在某种列表中。它可以扩展对象或数组并将所有值存储在相同数据类型的新变量中。

例子:

<script>
// 使用扩展语法来展开一个对象
	var obj1 = {
		organisation: "GFG",
		fullForm: "demo for demo"
	};
	var obj2 = {
		description: "A learning platform for demo."
	};
	var obj3 = {...obj2, ...obj1
	};
	console.log(obj3);
// 使用扩展语法来展开一个数组
	var fruits = ["Mango", "Banana", "Apple"];
	var moreFruits = [...arr1, "Orange", 
				"Pineapple", "Watermelon"];
	console.log(moreFruits);
</script>

输出:

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_jsvascript

扩展数组和对象

2.它允许我们将已经存在的数组的所有元素复制到新数组中并执行push、pop操作,甚至不会干扰之前的数组。

<script>
// 将一个数组复制到另一个数组中
// 并进行弹出操作
// 在不干扰第一个数组的数据的情况下
  var arr1 = ['a', 'b', 'c', 'd', 'e'];
	var arr2 = [...arr1];
	console.log("arr1 before applying pop operation:");
	console.log(arr1);
	arr2.pop();
	console.log("arr1 & arr2 after applying"+
				" pop operation on arr2:");
	console.log(arr2);
	console.log(arr1);
</script>

输出:

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_运算符_02


3. 无需使用concat()

例子:

<script>
// 使用扩展语法将两个数组连接起来,而不使用concat函数
  var breakfast = ["Bread", "Sandwich", "Fruits"];
	var moreBreakfast = ["Salad", "Tea & Coffee"];
	console.log("Breakfast before concatenation:");
	console.log(breakfast);
	
	breakfast = [...breakfast, ...moreBreakfast];
	console.log("Breakfast after concatenation:");
	console.log(breakfast);
</script>

输出:

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_运算符_03

4.它允许我们对数组进行数学函数操作。因为我们不能直接在数组上使用数学函数。扩展运算符将可迭代对象数组扩展为参数列表,使我们能够操作数学函数并获得所需的结果。

例子:

<script>
// 在数学函数中使用展开运算符操作数组
  var arr1 = [99, 50, 130, 1, 98, 23, 66];
	console.log("Maxinum element of arr1 is:")
	console.log(Math.max(...arr1));
</script>

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_运算符_04

5.它允许我们在嵌套对象中进行更改,而无需反映在原始对象中

例子 : 

嵌套对象中指向对象的结构

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_jsvascript_05

 



let obj = {
name:'demo for demo',
add:{
	country:"INDIA",
	state:{
		code:"DL",
		pincode:"129089"
	}
}
}

let obj2 = {...obj} ///SHALLOW COPY
obj2.name = "GFG",
console.log(obj2);

obj2 = {...obj2,add:{...obj.add}}
obj2.add.country = "BHARAT"
console.log(obj2)

obj2 = {...obj2,add:{...obj2.add,state:{...obj.add.state}}} //DEEP COPY
obj2.add.state.pincode = 823687

console.log("original object")
console.log(obj);
console.log("doing all changes final object")
console.log(obj2);

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_数组_06

Rest 运算符:

语法:

函数名称(...数据)
{
    // 函数语句
}

示例 1:

<script>
	var sum = 0;
	
	function Addition(...data) {
		for(var i = 0; i < data.length; i++) {
			sum += data[i];
		}
		console.log("Sum of your passed data is:")
		console.log(sum);
	}
	Addition(95, 98, 2, 51, 6);
</script>

输出:

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_数组_07

使用剩余语法获取传递数据的总和



示例2:

<script>
	var pro = 1;
	
	function Multiplication(...param) {
		for(var item = 0; item < param.length; item++) {
			pro *= param[item];
		}
		if(pro < 100) {
			console.log("Product is less than 100:");
			console.log("Product: ", pro);
			pro = 1;
			console.log("Your new product is: ");
			Multiplication(1, 2, 3, 4, 5);
			console.log("Product: ", pro);
		}
	}
	Multiplication(1, 2, 3, 4);
</script>


输出:

解释一下扩展语法的好处以及它与 ES6 中的剩余语法有何不同?_数学函数_08

使用剩余语法获取传递数据的乘积

举报

相关推荐

0 条评论