详解js中的confirm方法；join和split方法；splice方法；sort方法

小咪咪 2023-06-06 08:09 5阅读 0赞

今天看到项目中一些不熟悉的方法，在此总结一下使用方法

## confirm() ##

**confirm() 方法用于显示一个带有指定消息和 OK 及取消按钮的对话框。**

如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。

在用户点击确定按钮或取消按钮把对话框关闭之前，它将阻止用户对浏览器的所有输入。在调用 confirm() 时，将暂停对 JavaScript 代码的执行，在用户作出响应之前，不会执行下一条语句。

下面我们通过这两个小例子，来了解一下它的使用方法吧：

<html>
    <head>
    <meta charset="uft-8"/>
    <title>confrim 的使用方法--例子1</title>
    <script type="text/javascript">
    function clear1()
    {
     if(confirm("确定要清空数据吗？"))
     {
     document.main.text1.value="";//这段代码的作用是使得输入框的内容为空，也就是可以起到清空内容的作用了。
     }
    }
    </script>
    </head>
    <boty>
    <form name="main">
    <input type="text" name="text1"/>
    <input type="button" name="submit" value="数据清空" οnclick="return clear1()"/>
    </form>
    </body>
    </html>

示例2：

<html>
    <head>
    <meta charset="uft-8"/>
    <title>js confirm--例子2</title>
    <script>
    function quetion()
    {
     var a=confirm("郭杨和小代是好朋友吗？");
     if(a==true)
     {
     alert("恭喜你答对了！");
     a=false;
     }
     else
     {
     
     alert("你真是猪，这么简单的问题都答不对！");
      a=false;
     }
     }
    </script>
    </head >
    <body οnlοad="quetion()">
    </body>
    </html>

注意：在例子2中 由于a==true ，程序会一直被执行（死循环），要结束死循环，可以在if条件句后面添加一句 a=false，在if条件句执行完毕之后把a的值变成false跳出程序。

## join()方法 ##

**定义和用法**  
join() 方法用于把数组中的所有元素放入一个字符串。

元素是通过指定的分隔符进行分隔的。  
**语法**

arrayObject.join(separator)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>separator</td> 
   <td>可选。指定要使用的分隔符。如果省略该参数，则使用逗号作为分隔符。</td> 
  </tr> 
 </tbody> 
</table>

实例1：

输出：

George,John,Thomas

实例2：

输出：

George.John.Thomas

## split() 方法 ##

**定义和用法**  
split() 方法用于把一个字符串分割成字符串数组。  
**语法**

stringObject.split(separator,howmany)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>separator</td> 
   <td>必需。字符串或正则表达式，从该参数指定的地方分割 stringObject。</td> 
  </tr> 
  <tr> 
   <td>howmany</td> 
   <td>可选。该参数可指定返回的数组的最大长度。如果设置了该参数，返回的子串不会多于这个参数指定的数组。如果没有设置该参数，整个字符串都会被分割，不考虑它的长度。</td> 
  </tr> 
 </tbody> 
</table>

**提示和注释**  
注释：如果把空字符串 ("") 用作 separator，那么 stringObject 中的每个字符之间都会被分割。

注释：String.split() 执行的操作与 Array.join 执行的操作是相反的。  
实例：

输出：

How,are,you,doing,today?
    H,o,w, ,a,r,e, ,y,o,u, ,d,o,i,n,g, ,t,o,d,a,y,?
    How,are,you

## splice() 方法 ##

**定义和用法**  
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。

注释：该方法会改变原始数组。  
**语法**

arrayObject.splice(index,howmany,item1,.....,itemX)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>index</td> 
   <td>必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。</td> 
  </tr> 
  <tr> 
   <td>howmany</td> 
   <td>必需。要删除的项目数量。如果设置为 0，则不会删除项目。</td> 
  </tr> 
  <tr> 
   <td>item1, …, itemX</td> 
   <td>可选。向数组添加的新项目。</td> 
  </tr> 
 </tbody> 
</table>

**返回值**

<table> 
 <thead> 
  <tr> 
   <th>类型</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Array</td> 
   <td>包含被删除项目的新数组，如果有的话。</td> 
  </tr> 
 </tbody> 
</table>

**提示和注释**  
splice() 方法可删除从 index 处开始的零个或多个元素，并且用参数列表中声明的一个或多个值来替换那些被删除的元素。

**如果从 arrayObject 中删除了元素，则返回的是含有被删除的元素的数组。**

请注意，splice() 方法与 slice() 方法的作用是不同的，splice() 方法会直接对数组进行修改。

实例：  
在本例中，我们将创建一个新数组，并向其添加一个元素：

输出：

George,John,Thomas,James,Adrew,Martin
    George,John,William,Thomas,James,Adrew,Martin

实例2：  
在本例中我们将删除位于 index 2 的元素，并添加一个新元素来替代被删除的元素：

输出：

George,John,Thomas,James,Adrew,Martin
    George,John,William,James,Adrew,Martin

## vue路由跳转的实现 ##

利用以上三个方法，可以通过路由拼接的方式实现跳转

gotoNewPage() { 
          const length = this.$route.path.split('/')
          const path =
            this.$route.path
              .split('/')                 //把一个字符串分割成字符串数组
              .splice(0, length - 1)     //对数组进行删除操作
              .join('/') + 'post'         //把数组中的所有元素放入一个字符串。
          this.$router.push({ 
            path
          })
        },

## sort() 方法 ##

**定义和用法**  
sort() 方法用于对数组的元素进行排序。  
**语法**

arrayObject.sort(sortby)

<table> 
 <thead> 
  <tr> 
   <th>参数</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>sortby</td> 
   <td>可选。规定排序顺序。必须是函数。</td> 
  </tr> 
 </tbody> 
</table>

**返回值**  
对数组的引用。请注意，数组在原数组上进行排序，不生成副本。

**提示和注释**  
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。

如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

*  若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
 *  若 a 等于 b，则返回 0。
 *  若 a 大于 b，则返回一个大于 0 的值。

实例：  
在本例中，我们将创建一个数组，并按字母顺序进行排序：

输出：

George,John,Thomas,James,Adrew,Martin
    Adrew,George,James,John,Martin,Thomas

实例2：  
在本例中，我们将创建一个数组，并按字母顺序进行排序：

输出：

10,5,40,25,1000,1
    1,10,1000,25,40,5

**请注意，上面的代码没有按照数值的大小对数字进行排序，要实现这一点，就必须使用一个排序函数：**

输出：