美文网首页
前端切图仔，常用的14个数组方法

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

作者: 祈澈菇凉 | 来源:发表于2021-07-20 09:32 被阅读0次

    Array 对象方法

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

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

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

    实例

    例子 1

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

    <script type="text/javascript">

var a = [1,2,3];
document.write(a.concat(4,5));

</script>

    输出：

    1,2,3,4,5

    例子 2

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

document.write(arr.concat(arr2))

</script>

    输出：

    George,John,Thomas,James,Adrew,Martin

    例子 3

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"

var arr3 = new Array(2)
arr3[0] = "William"
arr3[1] = "Franklin"

document.write(arr.concat(arr2,arr3))

</script>

    输出：

    George,John,Thomas,James,Adrew,Martin,William,Franklin
    2：join()方法
    定义和用法

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

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

    实例

    例子 1

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join())

</script>

    输出：

    George,John,Thomas

    例子 2

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr.join("."))

</script>

    输出：

    George.John.Thomas
    3：pop()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr)

document.write("<br />")

document.write(arr.pop())

document.write("<br />")

document.write(arr)

</script>

    输出：

    George,John,Thomas
Thomas
George,John
    4：push()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.push("James") + "<br />")
document.write(arr)

</script>

    输出：

    George,John,Thomas
4
George,John,Thomas,James
    5：reverse()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.reverse())

</script>

    输出：

    George,John,Thomas
Thomas,John,George
    6：shift()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.shift() + "<br />")
document.write(arr)

</script>

    输出：

    George,John,Thomas
George
John,Thomas
    7：slice()方法
    定义和用法

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

    实例

    例子 1

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

    <script type="text/javascript">

var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.slice(1) + "<br />")
document.write(arr)

</script>

    输出：

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

    例子 2

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(arr.slice(2,4) + "<br />")
document.write(arr)

</script>

    输出：

    George,John,Thomas,James,Adrew,Martin
Thomas,James
George,John,Thomas,James,Adrew,Martin
    8：sort()方法
    定义和用法

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

    实例

    例子 1

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
document.write(`arr.sort()`)

</script>

    输出：

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

    例子 2

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(`arr.sort()`)

</script>

    输出：

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

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

    <script type="text/javascript">

function sortNumber(a,b)
{
return a - b
}

var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"

document.write(arr + "<br />")
document.write(`arr.sort(sortNumber)`)

</script>

    输出：

    10,5,40,25,1000,1
1,5,10,25,40,1000
    9：splice()方法
    定义和用法

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

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

    实例

    例子 1

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,0,"William")
document.write(arr + "<br />")

</script>

    输出：

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

    例子 2

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,1,"William")
document.write(arr)

</script>

    输出：

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

    例子 3

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

    <script type="text/javascript">

var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"

document.write(arr + "<br />")
arr.splice(2,3,"William")
document.write(arr)

</script>

    输出：

    George,John,Thomas,James,Adrew,Martin
George,John,William,Martin
    10：toSource()方法
    定义和用法

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

    实例
    <script type="text/javascript">

    var arr = new Array()   
    arr[0] = "George"  
    arr[1] = "John"  
    arr[2] = "Thomas"   
    document.write(arr.toSource())  

</script>

    输出：

    ["George", "John", "Thomas"]
    11：toString()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var number = new Number(1337);
document.write (number.toString())

</script>

    输出：

    1337
    12：toLocaleString()方法
    定义和用法

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

    实例

    例子 1

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

    <script type="text/javascript">

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

</script>

    输出：

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

    例子 2

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

    <script type="text/javascript">

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

</script>

    输出：

    var born = new Date("July 21, 1983 01:15:00")
document.write(born.toLocaleString())
    13：unshift()方法
    定义和用法

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

    实例

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

    <script type="text/javascript">

var arr = new Array()
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"

document.write(arr + "<br />")
document.write(arr.unshift("William") + "<br />")
document.write(arr)

</script>

    输出：

    George,John,Thomas
4
William,George,John,Thomas
    14：valueOf()方法
    定义和用法

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

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

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

    例子
    <script type="text/javascript">

var fruits = ["Banana", "Orange", "Apple", "Mango"];
var v=fruits.valueOf(); 

</script>

    输出结果

    Banana,Orange,Apple,Mango

    相关文章

      网友评论

          本文标题：前端切图仔，常用的14个数组方法

          本文链接：https://www.haomeiwen.com/subject/fdcmpltx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|前端切图仔，常用的14个数组方法|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！