解释一下扩展语法的好处以及它与 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>
输出:
扩展数组和对象
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>
输出:
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>
输出:
4.它允许我们对数组进行数学函数操作。因为我们不能直接在数组上使用数学函数。扩展运算符将可迭代对象数组扩展为参数列表,使我们能够操作数学函数并获得所需的结果。
例子:
<script>
// 在数学函数中使用展开运算符操作数组
var arr1 = [99, 50, 130, 1, 98, 23, 66];
console.log("Maxinum element of arr1 is:")
console.log(Math.max(...arr1));
</script>
5.它允许我们在嵌套对象中进行更改,而无需反映在原始对象中
例子 :
嵌套对象中指向对象的结构
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);
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>
输出:
使用剩余语法获取传递数据的总和
示例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>
输出:
使用剩余语法获取传递数据的乘积