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 href="http://www.xdocin.com/xdoc?_func=to&_format=html&_cache=1&_xdoc=http://www.xdocin.com/demo/demo.docx" 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文件在线预览功能

您的项目需求