前端切图仔，常用的14个数组方法

红太狼 2022-08-30 11:42 197阅读 0赞

## Array 对象方法 ##

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或更多的数组，并返回结果。</td> 
  </tr> 
  <tr> 
   <td>join()</td> 
   <td>把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。</td> 
  </tr> 
  <tr> 
   <td>pop()</td> 
   <td>删除并返回数组的最后一个元素</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>向数组的末尾添加一个或更多元素，并返回新的长度。</td> 
  </tr> 
  <tr> 
   <td>reverse()</td> 
   <td>颠倒数组中元素的顺序。</td> 
  </tr> 
  <tr> 
   <td>shift()</td> 
   <td>删除并返回数组的第一个元素</td> 
  </tr> 
  <tr> 
   <td>slice()</td> 
   <td>从某个已有的数组返回选定的元素</td> 
  </tr> 
  <tr> 
   <td>sort()</td> 
   <td>对数组的元素进行排序</td> 
  </tr> 
  <tr> 
   <td>splice()</td> 
   <td>删除元素，并向数组添加新元素。</td> 
  </tr> 
  <tr> 
   <td>toSource()</td> 
   <td>返回该对象的源代码。</td> 
  </tr> 
  <tr> 
   <td>toString()</td> 
   <td>把数组转换为字符串，并返回结果。</td> 
  </tr> 
  <tr> 
   <td>toLocaleString()</td> 
   <td>把数组转换为本地数组，并返回结果。</td> 
  </tr> 
  <tr> 
   <td>unshift()</td> 
   <td>向数组的开头添加一个或更多元素，并返回新的长度。</td> 
  </tr> 
  <tr> 
   <td>valueOf()</td> 
   <td>返回数组对象的原始值</td> 
  </tr> 
 </tbody> 
</table>

##### 1：concat()方法 #####

###### 定义和用法 ######

concat() 方法用于连接两个或多个数组。

该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。

###### 实例 ######

例子 1

在本例中，我们将把 concat() 中的参数连接到数组 a 中：

输出：

1,2,3,4,5

例子 2

在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来：

输出：

George,John,Thomas,James,Adrew,Martin

例子 3

在本例中，我们创建了三个数组，然后使用 concat() 把它们连接起来：

输出：

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

##### 2：join()方法 #####

###### 定义和用法 ######

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

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

###### 实例 ######

例子 1

在本例中，我们将创建一个数组，然后把它的所有元素放入一个字符串：

输出：

George,John,Thomas

例子 2

在本例中，我们将使用分隔符来分隔数组中的元素：

输出：

George.John.Thomas

##### 3：pop()方法 #####

###### 定义和用法 ######

pop() 方法用于删除并返回数组的最后一个元素。

###### 实例 ######

在本例中，我们将创建一个数组，然后删除数组的最后一个元素。请注意，这也会改变数组的程度：

输出：

George,John,Thomas
    Thomas
    George,John

##### 4：push()方法 #####

###### 定义和用法 ######

push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。

###### 实例 ######

在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度：

输出：

George,John,Thomas
    4
    George,John,Thomas,James

##### 5：reverse()方法 #####

###### 定义和用法 ######

reverse() 方法用于颠倒数组中元素的顺序。

###### 实例 ######

在本例中，我们将创建一个数组，然后颠倒其元素的顺序：

输出：

George,John,Thomas
    Thomas,John,George

##### 6：shift()方法 #####

###### 定义和用法 ######

shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。

###### 实例 ######

在本例中，我们将创建一个数组，并删除数组的第一个元素。请注意，这也将改变数组的长度：

输出：

George,John,Thomas
    George
    John,Thomas

##### 7：slice()方法 #####

###### 定义和用法 ######

slice() 方法可从已有的数组中返回选定的元素。

###### 实例 ######

例子 1

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

George,John,Thomas
    John,Thomas
    George,John,Thomas

例子 2

在本例中，我们将创建一个新数组，然后显示从其中选取的元素：

输出：

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

##### 8：sort()方法 #####

###### 定义和用法 ######

sort() 方法用于对数组的元素进行排序。

###### 实例 ######

例子 1

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

输出：

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

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

输出：

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

##### 9：splice()方法 #####

###### 定义和用法 ######

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

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

###### 实例 ######

例子 1

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

输出：

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

例子 3

在本例中我们将删除从 index 2 ("Thomas") 开始的三个元素，并添加一个新元素 ("William") 来替代被删除的元素：

输出：

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

##### 10：toSource()方法 #####

###### 定义和用法 ######

toSource() 方法可把数组转换为JavaScript源代码。

###### 实例 ######

输出：

["George", "John", "Thomas"]

##### 11：toString()方法 #####

###### 定义和用法 ######

toString() 方法可把一个 Number 对象转换为一个字符串，并返回结果。

###### 实例 ######

在本例中，我们将把一个数字转换为字符串：

输出：

1337

##### 12：toLocaleString()方法 #####

###### 定义和用法 ######

toLocaleString() 方法可根据本地时间把 Date 对象转换为字符串，并返回结果。

###### 实例 ######

例子 1

在本例中，我们将根据本地时间把今天的日期转换为字符串：

输出：

var d = new Date()
        document.write (d.toLocaleString())

例子 2

在本例中，我们将根据本地时间把具体的日期转换为字符串：

输出：

var born = new Date("July 21, 1983 01:15:00")
    document.write(born.toLocaleString())

##### 13：unshift()方法 #####

###### 定义和用法 ######

unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。

###### 实例 ######

在本例中，我们将创建一个数组，并把一个元素添加到数组的开头，并返回数组的新长度：

输出：

George,John,Thomas
    4
    William,George,John,Thomas

##### 14：valueOf()方法 #####

###### 定义和用法 ######

valueOf() 方法返回 Array 对象的原始值。

该原始值由 Array 对象派生的所有对象继承。

valueOf() 方法通常由 JavaScript 在后台自动调用，并不显式地出现在代码中。

###### 例子 ######

输出结果

Banana,Orange,Apple,Mango

前端切图仔，常用的14个数组方法

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关切图仔面试宝典

相关数组常用的几个方法

相关前端js常用的数组方法

相关常用的14个数组方法

相关前端常用的21个字符串方法

相关前端切图仔，常用的21个字符串方法

相关前端切图仔，常用的14个数组方法

相关前端切图仔，常用的21个字符串方法（上）

相关前端切图仔，常用的21个字符串方法（下）

相关一个切图仔的HTML笔记