JavaScript 剩余參數的用法

余參數允許我們將不定數量的參數表示為一個數組，方便函數處理可變數量的參數。

### 語法解釋

```javascript

function foo(a, b, ...rest) {

console.log('a=' + a);

console.log('b=' + b);

console.log(rest);

}

```

- **參數 `a` 和 `b`**: 這兩個參數是函數 `foo` 的前兩個明確參數。調用 `foo` 時，傳遞的前兩個參數將分別賦值給 `a` 和 `b`。

- **`...rest`**: 這是剩余參數的語法。它將函數調用中除去 `a` 和 `b` 之外的所有參數收集到一個名為 `rest` 的數組中。注意，`...` 是一個特殊的語法標識符，用于表示“把剩余參數收集起來”。

### 使用示例

```javascript

foo(1, 2, 3, 4, 5);

```

- **輸出**:

```

a=1

b=2

[3, 4, 5]

```

在這個例子中，`1` 和 `2` 被賦值給 `a` 和 `b`，而 `3`, `4`, `5` 被收集到數組 `rest`。

### 相關主題

1. **可變參數**

- **聯系**: 剩余參數提供了一種優雅方式來處理函數的可變參數，替代傳統的 `arguments` 對象。

2. **擴展運算符（Spread Operator）**

- **聯系**: 與剩余參數語法相似，擴展運算符用于將數組展開為單個元素，可以在調用函數或構建數組時使用。

3. **數組方法**

- **聯系**: 剩余參數是一個數組，因此可以使用數組的方法（如 `map`、`filter`、`reduce` 等）進行操作。

4. **函數參數**

- **聯系**: 在 JavaScript 中，函數參數的靈活性允許處理任意數量和類型的參數，剩余參數是現代處理方式之一。

5. **`arguments` 對象**

- **聯系**: 傳統上用于訪問函數中的所有參數，但不是數組，不能直接使用數組方法。剩余參數則解決了這一限制。

剩余參數在處理可變參數時提供了更現代和簡潔的方式，尤其是在需要對參數進行數組操作時。

我的文章可能還有不足之處，如有不同意見，請留言討論。

過js獲得當前頁面路由參數，是一個常用的方法，即使是靜態的html頁面，也可以借此獲得傳來的參數，達到動態頁面一般的效果。

window.location

我們需要用到的就是window.location的幾個屬性，下面從這個簡單的測試代碼中可以看到詳細的用法：

建立一個htm文件，先設置一個全局樣式，為的是清晰地顯示文字

<style>
body{
 background-color: #111;
 color:#0c0;
 font-family: 'Courier New';
 font-size: 36px;
}
</style>

下面是js代碼部分

<script>
a="<pre>";
//獲取完整的 URL。
a+="\n href="
+ window.location.href;
//獲取 URL 的協議類型。
a+="\nprotocol="
+ window.location.protocol;
//獲取 網址:端口號。
a+="\n host="
+ window.location.host;
//獲取/開頭的帶路徑的文件名。
a+="\npathname="
+ window.location.pathname;
//獲取文件名問號后面的部分（含問號）
a+="\n search="
+ window.location.search;
//獲取 URL 最后#號后的部分（含#號）
a+="\n hash="
+ window.location.hash;
//獲取 URL 的端口號。
a+="\n port="
+ window.location.port;
a+="\n</pre>";
//把上面的結果顯示出來
document.write(a);
</script>

保存代碼到一個頁面比如1.htm，我們需要在本地啟動一個模擬的web服務器，比如使用vscode的GoLive插件，在本例中，它啟用的默認web地址是 http://127.0.0.1:5500 ，在其對應的根目錄下建立js目錄，1.htm放在其中，然后我訪問類似這樣的地址即可看到頁面：

http://127.0.0.1:5500/js/1.htm

這是一個普通的靜態頁面地址，我們可以帶上一些參數，形成這樣的地址：

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

這是個比較完整的url，他帶有了協議，端口，路徑，參數，還有錨點，已經可以滿足所有動態頁面的應用，我們得到這個結果：

我們可以看到，所有的參數都被解析出來了！

注：當然你也可以直接打開瀏覽器訪問頁面1.htm，而無需啟動模擬的web服務器。顯示的協議是file://開頭的。但是路徑編碼后會比較長不方便看，僅此而已。

總結一下：

window.location.href

獲取完整的 URL：

http://127.0.0.1:5500/js/1.htm?id=7&do=ok#first

window.location.protocol

獲取 URL 的協議類型：

http:

window.location.host

獲取網址和端口號：

127.0.0.1:5500

window.location.pathname

獲取/開頭的帶路徑的文件名：

/js/1.htm

window.location.search

獲取文件名問號后面的部分（含問號）

?id=7&do=ok

window.location.hash

獲取 URL 最后#號后的部分（含#號）

#first

window.location.port

獲取 URL 的端口號。

以上就是js所能獲得的url參數了。方法簡單而用法無窮：

我們可以通過獲取這些屬性，來判斷頁面狀態，做出相應的動作或者交互響應。

我們也可以通過寫入新的數據而使這些屬性發生改變，此時頁面就會跳轉到新的url頁面去了！

、前端實現pdf文件在線預覽功能

方式一、pdf文件理論上可以在瀏覽器直接打開預覽但是需要打開新頁面。在僅僅是預覽pdf文件且UI要求不高的情況下可以直接通過a標簽href屬性實現預覽

<a href="文檔地址"></a>

方式二、通過jquery插件jquery.media.js實現這個插件可以實現pdf預覽功能（包括其他各種媒體文件）但是對word等類型的文件無能為力。實現方式： js代碼：

<script type="text/javascript" src="jquery-1.7.1.min.js"></script> 
<script type="text/javascript" src="jquery.media.js"></script>
復制代碼

html結構：

 <body>
 <div id="handout_wrap_inner"></div>
 </body>
復制代碼

調用方式：

<script type="text/javascript"> 
 $('#handout_wrap_inner').media({
		width: '100%',
		height: '100%',
		autoplay: true,
 src:'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf',
 }); 
</script>
復制代碼

方式三、直接通過頁面內嵌iframe

$("<iframe src='"+ this.previewUrl +"' width='100%' height='362px' frameborder='1'>").appendTo($(".video-handouts-preview"));
復制代碼

此外還可以在iframe標簽之間提供一個提示類似這樣

<iframe :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</iframe>
復制代碼

方式四、通過標簽嵌入內容

<embed :src="previewUrl" type="application/pdf" width="100%" height="100%">

此標簽h5特性中包含四個屬性：高、寬、類型、預覽文件src！與< iframe > < / iframe > 不同，這個標簽是自閉合的的，也就是說如果瀏覽器不支持PDF的嵌入，那么這個標簽的內容什么都看不到！

方式五、標簽和iframe使用差別較小

<object :src="previewUrl" width="100%" height="100%">
This browser does not support PDFs. Please download the PDF to view it: <a :href="previewUrl">Download PDF</a>
</object>
復制代碼

除方式二以外其他都是直接通過標簽將內容引入頁面實現預覽

方式六、PDFObject

PDFObject實際上也是通過標簽實現的直接上代碼

<!DOCTYPE html>
<html>
<head>
 <title>Show PDF</title>
 <meta charset="utf-8" />
 <script type="text/javascript" src='pdfobject.min.js'></script>
 <style type="text/css">
 html,body,#pdf_viewer{
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 }
 </style>
</head>
<body>
 <div id="pdf_viewer"></div>
</body>
<script type="text/javascript">
 if(PDFObject.supportsPDFs){
 // PDF嵌入到網頁
 PDFObject.embed("index.pdf", "#pdf_viewer" );
 } else {
 location.href="/canvas";
 }
</script>
</html>

還可以通過以下代碼進行判斷是否支持PDFObject預覽

if(PDFObject.supportsPDFs){
 console.log("Yay, this browser supports inline PDFs.");
} else {
 console.log("Boo, inline PDFs are not supported by this browser");
}
復制代碼

方式七、PDF.js

PDF.js可以實現在html下直接瀏覽pdf文檔，是一款開源的pdf文檔讀取解析插件，非常強大，能將PDF文件渲染成Canvas。PDF.js主要包含兩個庫文件，一個pdf.js和一個pdf.worker.js，一個負責API解析，一個負責核心解析。

2、word、xls、ppt文件在線預覽功能

word、ppt、xls文件實現在線預覽的方式比較簡單可以直接通過調用微軟的在線預覽功能實現 (預覽前提：資源必須是公共可訪問的)

<iframe src='https://view.officeapps.live.com/op/view.aspx?src=http://storage.xuetangx.com/public_assets/xuetangx/PDF/1.xls' width='100%' height='100%' frameborder='1'>
			</iframe>
復制代碼

src就是要實現預覽的文件地址具體文檔看這微軟接口文檔

補充：google的文檔在線預覽實現同微軟（資源必須是公共可訪問的）

<iframe :src="'https://docs.google.com/viewer?url="fileurl"></iframe>
復制代碼

3、word文件

XDOC可以實現預覽以DataURI表示的DOC文檔，此外XDOC還可以實現文本、帶參數文本、html文本、json文本、公文等在線預覽，具體實現方法請看官方文檔

下面這種方式可以實現快速預覽word但是對文件使用的編輯器可能會有一些限制

<a  target="_blank" rel="nofollow">XDOC</a>
復制代碼

4、excel文件

目前excel文件已經有了類似pdf.js那樣的解析sheet.js

總結：

1、免費純前端方式實現在線預覽word、excel、ppt最優選擇微軟在線預覽（不可編輯）

2、利用后端將文件轉為圖片，前端以圖片形式預覽（可行方案）

3、購買在線預覽服務例如百度DOC文檔服務、永中、I DOC VIEW等

著名：文章內容是從網上搜集資料所得；在次發表只為自己以及頭條程序員兄弟日后使用圖個方便。

覺得有用記得收藏轉發！

在線咨詢

上一篇：修改Flash數據你能做到嗎？
下一篇：話說前端53-組件基礎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript 剩余參數的用法

、前端實現pdf文件在線預覽功能

2、word、xls、ppt文件在線預覽功能

您的項目需求