JavaScript Array 对象（length）方法 （contact、push,pop,join,map、reverse、slice、sort)

2023-07-25 10:25:16

一、Array对象属性

1、length 设置或返回数组中元素的数目。

　　数组的 length 属性总是比数组中定义的最后一个元素的下标大 1。对于那些具有连续元素，而且以元素 0 开始的常规数组而言，属性 length 声明了数组中的元素的个数。

例子：

<script type="text/javascript">

var arr = new Array(3)

arr[0] = "John"

arr[1] = "Andy"

arr[2] = "Wendy"

document.write("Original length: " + arr.length)

document.write("<br />")

arr.length=5

document.write("New length: " + arr.length)

</script>

输出：

Original length: 3

New length: 5

二、Array对象方法

1、contact()   连接两个或更多的数组，并返回结果。

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

返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。

例子

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

<script type="text/javascript">

var a = [1,2,3];

document.write(a.concat(4,5));

</script>

输出：

1,2,3,4,5

2、join() 把数组的所有元素放入一个字符串。

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

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

例子1

　　var fruits = ["Banana", "Orange", "Apple", "Mango"];
　　var energy = fruits.join();

　　energy输出结果：

　　Banana,Orange,Apple,Mango
例子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、push 向数组的末尾添加一个或更多元素，并返回新的长度。

例子1

　　var fruits = ["Banana", "Orange", "Apple", "Mango"];
　　fruits.push("Kiwi")

　　fruits输出结果：

　　Banana,Orange,Apple,Mango,Kiwi

例子2：

var arr1=[],arr2=[];
function arrtext(){
$.ajax({
type:"post",
async:false,
url:"{:U("Property/text")}",
data:{},
dataType:"json",
success:function(result){
if (result) {
　　for (var i = 0; i < result.length; i++) {
　　　　arr1.push(result[i].name); 
　　　　arr2.push(result[i].age); 
　　}
}

}
})
return arr1,arr2;
}

4、pop 方法将删除 arrayObject 的最后一个元素，把数组长度减 1，并且返回它删除的元素的值。如果数组已经为空，则 pop() 不改变数组，并返回 undefined 值。

例子：

<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
5、reverse 颠倒数组中元素的顺序。
该方法会改变原来的数组，而不会创建新的数组。
例子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.reverse())

</script>

输出：

George,John,Thomas

Thomas,John,George

例子2 ，echarts的visualMap颜色配置

　　inRange: {
　　　　color: ['#d94e5d','#eac736','#50a3ba'].reverse(),
　　}





6、map 通过指定函数处理数组的每个元素，并返回处理后的数组。


例子




返回一个数组，数组中元素为原始数组的平方根:


　　<p>点击按钮获取数组元素的平方根。</p>
　　<button onclick="myFunction()">点我</button>
　　<p id="demo"></p>


　　var numbers = [4, 9, 16, 25];

　　function myFunction() {
   　　 x = document.getElementById("demo")
    　　x.innerHTML = numbers.map(Math.sqrt);
　　}






　　输出结果为:


　　2,3,4,5


 


7、slice() 从某个已有的数组返回选定的元素




语法


arrayObject.slice(start,end)





参数
描述




start
必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。




end
可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。







返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。


请注意，该方法并不会修改数组，而是返回一个子数组。如果想删除数组中的一段元素，应该使用方法 Array.splice()。




实例


例子 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






 


8、sort() 对数组的元素进行排序




arrayObject.sort(sortby)







sortby
可选。规定排序顺序。必须是函数。



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


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


    

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

  • 若 a 等于 b，则返回 0。
    • 

  • 若 a 大于 b，则返回一个大于 0 的值。
    • 



实例


例子 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">

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



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


<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  
解释一下sorNumber()


sort的参数，为一个函数，那么这个函数接受2个参数，a, b


根据retrun a-b
这个函数在：
a == b 是为0
a > b 时为 1
a < b时 为-1
那么sort在排序的时候，根据冒泡排序，传递2个数进来
对于 
arr[0] = "10"
arr[1] = "5"
那么 a=10 b=5, 
显然a > b,那么sort根据这个函数返回的结构，就开始排了，
5, 10
那么第一次结束时： 5 10 40 25 1000 1
接下来：然后5 跟 40 25 1000 1排，
完了只有是： 1 10 40 25 1000 5
然后从10 开始，10 - 40 10 <->25  10 <-> 1000 10 <->5
结束后：1 5 40 25 1000 10 
再40 ： 1 5 10 25 1000 40
再 25 ：
再 1000 ： 1 5 10 25 40 1000
到此，最后一位就剩一个了，没有啥比较的了，排序完成
上一篇：JavaScript Array对象

下一篇：JavaScript Array对象 知识点总结