js中数组常用的方法

js中数组常用的方法

push()

把指定的值添加到数组尾部后，返回新的长度

arrayObject.push(newElement1, newElement2,… newElementX)
push() 方法可把它的参数顺序添加到 arrayObject 的尾部。它直接修改 arrayObject，而不是创建一个新的数组。

输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

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

</script>

输出：

aaa,bbb,ccc
4
aaa,bbb,ccc,ddd

pop()

删除并返回数组的最后一个元素

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

输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr)
document.write("<br />")
document.write(arr.pop())
document.write("<br />")
document.write(arr)

</script>

输出：

aaa,bbb,ccc
ccc
aaa,bbb

unshift()

向数组的开头添加一个或更多元素，并返回新的长度

arrayObject.unshift(newelement1,newelement2,…,newelementX)
unshift() 方法将把它的参数插入 arrayObject 的头部，并将已经存在的元素顺次地移到较高的下标处，以便留出空间。该方法的第一个参数将成为数组的新元素 0，如果还有第二个参数，它将成为新的元素 1，以此类推。不创建新的创建，而是直接修改原有的数组。

输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

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

输出：

aaa,bbb,ccc
4
ddd,aaa,bbb,ccc

shift()

把数组的第一个元素从其中删除，并返回第一个元素的值

arrayObject.shift()
返回数组原来的第一个元素的值。如果数组是空的，那么 shift() 方法将不进行任何操作，返回 undefined 值。请注意，该方法不创建新数组，而是直接修改原有的 arrayObject。

输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

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

</script>

输出：

aaa,bbb,ccc
aaa
bbb,ccc

sort()

对数组的元素进行排序

arrayObject.sort(sortby)
数组在原数组上进行排序，不生成副本。
如果调用该方法时没有使用参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：

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

输入：

<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

输入：

<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

reverse()

颠倒数组中元素的顺序

arrayObject.reverse()
该方法会改变原来的数组，而不会创建新的数组。

输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

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

</script>

输出：

aaa,bbb,ccc
ccc,bbb,aaa

filter()

创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。

array.filter(function(currentValue,index,arr), thisValue)

输入：

var ages = [32, 33, 16, 40];

function checkAdult(age) {
    return age >= 18;
}

function myFunction() {
    document.getElementById("demo").innerHTML = ages.filter(checkAdult);
}
</script>

输出：

32，33，16，40

map()

返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值

array.map(function(currentValue,index,arr), thisValue)
map() 不会对空数组进行检测。不会改变原始数组。

输入：

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

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

输出：

2,3,4,5

对接口中获取的数据处理：

let r = res.map(item => {
    return {
        title: item.name,
        sex: item.sex === 1? '男':item.sex === 0?'女':'保密',
        age: item.age,
        avatar: item.img
    }
})

数组中的每个元素乘于输入框指定的值，并返回新数组:

var numbers = [65, 44, 12, 4];

function multiplyArrayElement(num) {
    return num * document.getElementById("multiplyWith").value;
}

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

reduce()

接收一个函数作为累加器，数组中的每个值（从左到右）开始缩减，最终计算为一个值。

array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

点击按钮，计算数组元素之和：

<button onclick="myFunction()">点我</button>
 
<p>数组元素之和: <span id="demo"></span></p>
 
<script>
var numbers = [15.5, 2.3, 1.1, 4.7];
 
function getSum(total, num) {
    return total + Math.round(num);
}
function myFunction(item) {
    document.getElementById("demo").innerHTML = numbers.reduce(getSum, 0);
}
</script>

join()

把数组中的所有元素放入一个字符串

arrayObject.join(separator)
返回一个字符串。
该字符串是通过把 arrayObject 的每个元素转换为字符串，然后把这些字符串连接起来，在两个元素之间插入 separator 字符串而生成的。
输入：

<script type="text/javascript">

var arr = new Array(3)
arr[0] = "aaa"
arr[1] = "bbb"
arr[2] = "ccc"

document.write(arr.join())
document.write(arr.join("."))
</script>

输出：

aaa,bbb,ccc
aaa.bbb.ccc

concat()

连接两个或多个数组。

arrayObject.concat(arrayX,arrayX,…,arrayX)
该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
返回一个新的数组。该数组是通过把所有 arrayX 参数添加到 arrayObject 中生成的。如果要进行 concat() 操作的参数是数组，那么添加的是数组中的元素，而不是数组。
输入：

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))

输出：

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