JavaScript傳參的6種方式總結(jié)
前言
JavaScript是一門(mén)非常靈活的語(yǔ)言,其參數(shù)傳遞方式也同樣靈活。在本篇文章中,會(huì)詳細(xì)介紹JavaScript中的參數(shù)傳遞方式,并提供相關(guān)的示例和解釋。
1. 傳遞基本類(lèi)型參數(shù)
在JavaScript中,基本類(lèi)型參數(shù)(比如字符串、數(shù)字、布爾值等)是通過(guò)值傳遞的。這意味著,當(dāng)我們將一個(gè)基本類(lèi)型的值傳遞給一個(gè)函數(shù)時(shí),函數(shù)會(huì)獲得這個(gè)值的一個(gè)副本,而不是這個(gè)值本身。
下面是一個(gè)示例:
function updateName(name) { name = "John"; } let myName = "Jane"; updateName(myName); console.log(myName); // 輸出 "Jane"
在這個(gè)示例中,我們定義了一個(gè)函數(shù)updateName,它接受一個(gè)參數(shù)name。當(dāng)我們將myName作為參數(shù)傳遞給這個(gè)函數(shù)時(shí),函數(shù)會(huì)創(chuàng)建一個(gè)名字為name的變量的副本,并將其設(shè)置為"John"。然而,這并不會(huì)影響到myName變量的值,因?yàn)樗匀皇?quot;Jane"。這種意義上來(lái)說(shuō),這種現(xiàn)象也叫做淺拷貝。
2. 傳遞對(duì)象類(lèi)型參數(shù)
當(dāng)我們傳遞一個(gè)對(duì)象作為參數(shù)時(shí),JavaScript會(huì)將這個(gè)對(duì)象的引用傳遞給函數(shù)。這意味著,當(dāng)我們?cè)诤瘮?shù)中修改這個(gè)對(duì)象時(shí),會(huì)影響到原始對(duì)象的值。
下面是一個(gè)示例:
function updatePerson(person) { person.name = "John"; } let myPerson = { name: "Jane" }; updatePerson(myPerson); console.log(myPerson.name); // 輸出 "John"
在這個(gè)示例中,我們定義了一個(gè)函數(shù)updatePerson,它接受一個(gè)參數(shù)person。當(dāng)我們將myPerson作為參數(shù)傳遞給這個(gè)函數(shù)時(shí),函數(shù)會(huì)獲得myPerson對(duì)象的引用。因此,當(dāng)我們?cè)诤瘮?shù)中修改person對(duì)象的name屬性時(shí),會(huì)影響到myPerson對(duì)象的值。
需要注意的是,如果我們?cè)诤瘮?shù)中重新分配了person參數(shù),那么它將不再指向原始對(duì)象。例如:
function updatePerson(person) { person = { name: "John" }; } let myPerson = { name: "Jane" }; updatePerson(myPerson); console.log(myPerson.name); // 輸出 "Jane"
在這個(gè)示例中,我們?cè)诤瘮?shù)中重新分配了person參數(shù),將其指向了一個(gè)新的對(duì)象。這并不會(huì)影響到myPerson對(duì)象的值,因?yàn)閜erson參數(shù)現(xiàn)在指向了一個(gè)新的對(duì)象。
3. 使用解構(gòu)賦值傳遞參數(shù)
在ES6中,我們可以使用解構(gòu)賦值來(lái)傳遞參數(shù)。這使得我們可以輕松地從對(duì)象或數(shù)組中提取特定的值,并將其作為參數(shù)傳遞給函數(shù)。
下面是一個(gè)示例:
function printPerson({ name, age }) { console.log(`${name} is ${age} years old.`); } let myPerson = { name: "Jane", age: 25 }; printPerson(myPerson);
在這個(gè)示例中,我們定義了一個(gè)函數(shù)printPerson,它接受一個(gè)對(duì)象參數(shù),并使用解構(gòu)賦值來(lái)提取name和age屬性。當(dāng)我們將myPerson作為參數(shù)傳遞給這個(gè)函數(shù)時(shí),函數(shù)會(huì)從myPerson對(duì)象中提取name和age屬性,并將它們作為參數(shù)傳遞給函數(shù)。
需要注意的是,如果我們傳遞的對(duì)象缺少name或age屬性,那么函數(shù)將無(wú)法正常工作。因此,我們應(yīng)該確保傳遞的對(duì)象具有正確的屬性。
4. 使用展開(kāi)運(yùn)算符傳遞參數(shù)
在ES6中,我們可以使用展開(kāi)運(yùn)算符(…)來(lái)傳遞參數(shù)。這使得我們可以輕松地將一個(gè)數(shù)組或?qū)ο笾械乃兄底鳛閰?shù)傳遞給函數(shù)。
下面是一個(gè)示例:
function printNames(name1, name2, name3) { console.log(`${name1}, ${name2}, and ${name3} are friends.`); } let names = ["John", "Jane", "Jim"]; printNames(...names);
在這個(gè)示例中,我們定義了一個(gè)函數(shù)printNames,它接受三個(gè)參數(shù)。當(dāng)我們使用展開(kāi)運(yùn)算符將names數(shù)組作為參數(shù)傳遞給這個(gè)函數(shù)時(shí),函數(shù)會(huì)將數(shù)組中的三個(gè)值分別賦值給name1、name2和name3參數(shù)。
需要注意的是,如果我們傳遞的數(shù)組中的元素?cái)?shù)量不足三個(gè),那么函數(shù)將無(wú)法正常工作。因此,我們應(yīng)該確保傳遞的數(shù)組具有足夠的元素。
5. 使用可選參數(shù)
在JavaScript中,我們可以使用可選參數(shù)來(lái)定義一個(gè)函數(shù),這些參數(shù)可以被省略。當(dāng)我們省略一個(gè)可選參數(shù)時(shí),它的值將為undefined。
下面是一個(gè)示例:
function sayHello(name, greeting = "Hello") { console.log(`${greeting}, ${name}!`); } sayHello("John"); // 輸出 "Hello, John!" sayHello("Jane", "Hi"); // 輸出 "Hi, Jane!"
在這個(gè)示例中,我們定義了一個(gè)函數(shù)sayHello,它接受兩個(gè)參數(shù):name和可選參數(shù)greeting。當(dāng)我們省略greeting參數(shù)時(shí),它的默認(rèn)值為"Hello"。當(dāng)我們調(diào)用sayHello函數(shù)時(shí),可以省略greeting參數(shù),它的值將為默認(rèn)值。
需要注意的是,可選參數(shù)必須放在函數(shù)參數(shù)列表的最后面。
6. 使用剩余參數(shù)
在JavaScript中,我們可以使用剩余參數(shù)來(lái)定義一個(gè)函數(shù),它可以接受任意數(shù)量的參數(shù)。當(dāng)我們調(diào)用這個(gè)函數(shù)時(shí),剩余參數(shù)將被收集到一個(gè)數(shù)組中。…是es6寫(xiě)法
下面是一個(gè)示例:
function sum(...numbers) { let total = 0; for (let number of numbers) { total += number; } return total; } console.log(sum(1, 2, 3)); // 輸出 6 console.log(sum(4, 5, 6, 7)); // 輸出 22
在這個(gè)示例中,我們定義了一個(gè)函數(shù)sum,它使用剩余參數(shù)來(lái)接受任意數(shù)量的參數(shù)。當(dāng)我們調(diào)用sum函數(shù)時(shí),它將把所有參數(shù)收集到一個(gè)數(shù)組中,并計(jì)算它們的總和。
需要注意的是,剩余參數(shù)必須放在函數(shù)參數(shù)列表的最后面。
總結(jié)
在JavaScript中,參數(shù)傳遞是非常靈活的。我們可以傳遞基本類(lèi)型參數(shù)、對(duì)象類(lèi)型參數(shù)、使用解構(gòu)賦值傳遞參數(shù)、使用展開(kāi)運(yùn)算符傳遞參數(shù)、使用可選參數(shù)和使用剩余參數(shù)。我們應(yīng)該根據(jù)具體的情況來(lái)選擇適當(dāng)?shù)姆绞絹?lái)傳遞參數(shù)。
另外,需要注意的是,當(dāng)我們傳遞對(duì)象類(lèi)型參數(shù)時(shí),函數(shù)可以修改這個(gè)對(duì)象的值,這可能會(huì)對(duì)其他地方的代碼造成影響。因此,在編寫(xiě)函數(shù)時(shí),我們應(yīng)該注意不要不小心修改傳遞進(jìn)來(lái)的對(duì)象。如果需要修改對(duì)象的值,應(yīng)該先創(chuàng)建它的副本,然后再進(jìn)行修改。
到此這篇關(guān)于JavaScript傳參的6種方式的文章就介紹到這了,更多相關(guān)JS傳參方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JavaScript實(shí)現(xiàn)刷新不重記的倒計(jì)時(shí)
網(wǎng)上關(guān)于JavaScript實(shí)現(xiàn)倒計(jì)時(shí)的文章有很多,但是一般都是刷新后會(huì)重新開(kāi)始計(jì)時(shí),可是我們有的時(shí)候會(huì)需要刷新卻不重新計(jì)算的倒計(jì)時(shí),這該怎么做呢?下面我們一起來(lái)看看這種倒計(jì)時(shí)怎么實(shí)現(xiàn)吧。2016-08-08js關(guān)閉瀏覽器時(shí)退出賬號(hào)的處理
某些網(wǎng)站,尤其是涉及錢(qián)的網(wǎng)站,現(xiàn)在基本都有一個(gè)機(jī)制是兩小時(shí)后登陸自動(dòng)失效,要重新登陸確認(rèn)身份,那么js關(guān)閉瀏覽器時(shí)退出賬號(hào)如何實(shí)現(xiàn),感興趣的可以了解一下2021-12-12js實(shí)現(xiàn)延時(shí)加載Flash的方法
這篇文章主要介紹了js實(shí)現(xiàn)延時(shí)加載Flash的方法,較為詳細(xì)的分析了通過(guò)元素替換實(shí)現(xiàn)JavaScript延時(shí)加載flash的相關(guān)原理與實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-11-11js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)5秒倒計(jì)時(shí)重新發(fā)送短信功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-02-02ie8 不支持new Date(2012-11-10)問(wèn)題的解決方法
使用JS的時(shí)候也碰到了如下問(wèn)題,后來(lái)經(jīng)過(guò)修改,在IE8環(huán)境里,下面的代碼是可用的,下面與大家分享下ie8 不支持new Date的解決方法,有類(lèi)似問(wèn)題的朋友可以參考下2013-07-07快速解決js開(kāi)發(fā)下拉框中blur與click沖突
這篇文章主要幫助大家快速解決js開(kāi)發(fā)下拉框中blur與click沖突,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-10-10javascript Deferred和遞歸次數(shù)限制實(shí)例
你知道Deferred和遞歸次數(shù)限制嗎?如果還不知道,可以看看下面的實(shí)例,很好,適合新手朋友們2014-10-10