快捷導(dǎo)航

JavaScript 中“...” 的多種用途及代碼實(shí)例

更新時(shí)間：2024年09月13日 10:34:53 作者：焚琴煮鶴的熊熊野火

擴(kuò)展運(yùn)算符（Spread Operator）和剩余參數(shù)（Rest Parameters）是JavaScript中的兩個(gè)非常有用的特性,實(shí)際應(yīng)用中,這些功能可以用于合并數(shù)組、復(fù)制對(duì)象屬性等操作,極大地提高了JavaScript編程的便利性和功能性,感興趣的朋友跟隨小編一起看看吧

一、擴(kuò)展運(yùn)算符（Spread Operator）

用于數(shù)組：可以將一個(gè)數(shù)組展開為另一個(gè)數(shù)組的元素。例如：

     const arr1 = [1, 2, 3];
     const arr2 = [4, 5, 6];
     const combinedArray = [...arr1,...arr2];
     console.log(combinedArray); // [1, 2, 3, 4, 5, 6]

可以在函數(shù)調(diào)用中展開數(shù)組參數(shù)，使得函數(shù)可以接受任意數(shù)量的參數(shù)。例如：

     function sum(a, b, c) {
       return a + b + c;
     }
     const numbers = [1, 2, 3];
     console.log(sum(...numbers)); // 6

用于對(duì)象：可以復(fù)制對(duì)象的屬性到另一個(gè)對(duì)象。例如：

     const obj1 = { a: 1, b: 2 };
     const obj2 = { c: 3,...obj1 };
     console.log(obj2); // { c: 3, a: 1, b: 2 }

二、剩余參數(shù)（Rest Parameters）

在函數(shù)定義中，“...” 可以用來收集多個(gè)參數(shù)到一個(gè)數(shù)組中。例如：

function addNumbers(...numbers) {
  return numbers.reduce((sum, num) => sum + num, 0);
}
console.log(addNumbers(1, 2, 3, 4, 5)); // 15

在這個(gè)函數(shù)中，“numbers” 是一個(gè)包含所有傳入?yún)?shù)的數(shù)組?？梢允褂脭?shù)組的方法如 “reduce” 來處理這些參數(shù)。

三、實(shí)際代碼實(shí)例

this.data.orderList
      .filter(item => item.quantity > 0)
      .map(item => ({
        ...item,
        ticket_des: '' // 直接將ticket_des設(shè)置為空字符串  
      }));

在這段 JavaScript 代碼中，...item是擴(kuò)展運(yùn)算符的用法。

這里是在對(duì)數(shù)組進(jìn)行map操作時(shí)，將原數(shù)組中的每個(gè)元素（這里是對(duì)象item）進(jìn)行擴(kuò)展，并添加一個(gè)新的屬性ticket_des且設(shè)置為空字符串，從而創(chuàng)建一個(gè)新的對(duì)象。

這種用法可以避免手動(dòng)逐個(gè)復(fù)制對(duì)象的已有屬性，使得代碼更加簡潔和易于維護(hù)。例如，如果原對(duì)象item有屬性a、b、c，使用...item后，新對(duì)象會(huì)自動(dòng)包含這些屬性，然后再加上新設(shè)置的ticket_des屬性。

到此這篇關(guān)于JavaScript 中“...” 的多種用途的文章就介紹到這了,更多相關(guān)js “...” 的多種用途內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: