js数组常用方法总结以及注意事项

数组

常用方法

push(元素)

//向数组末尾添加元素，改变原数组，返回值为数组改变后的长度
let arr = [1,2,3,4,5];
arr.push(6);//返回值为6，arr:[1,2,3,4,5,6]

pop()

//删除数组最后一个元素，改变原数组，返回值为删除的元素
let arr = [1,2,3,4,5];
arr.pop();//返回值为5，arr:[1,2,3,4]

unshift(元素)

//向数组起始位置添加数据，原数组改变,返回值为改变后的数组长度
let arr = [1,2,3,4,5];
arr.unshift(0);//返回值为6，arr:[0,1,2,3,4,5]

shift()

//删除数组的第一个元素，原数组改变，返回值为删除的元素
let arr = [1,2,3,4,5];
arr.shift();//返回值为1,arr:[2,3,4,5]

总结

1. 他们都会改变原数组
2. push,unshift都是添加元素，一个尾插，一个头插，返回数组长度
3. pop,shift都是删除元素，一个删尾，一个删头，返回被删除元素

splice(pos，num，content)

//数组从0开始，splice是从起始位置pos开始，删除num个元素,替换成content，改变原数组，返回值是删除的元素
let arr = [1,2,3,4,5];
arr.splice(1,2,999,888);//返回值[2,3],arr:[1,999,888,4,5]
arr.splice(1,2);//返回值[999,888],arr:[1,4,5]
arr.splice(0,2,"aaa");//返回值[1,4],arr:['aaa',5]

forEach(node, index, arr)

//遍历数组，node为对应index的元素，arr为原数组，返回值为undefined
let arr = [1,2,3,4,5];
arr.forEach((node,index,arr)=>{
    console.log(node);//会输出5行，分别是1，2，3，4，5
})
//如果用不到index和arr可以不写，但要注意的是：顺序是对应的，如果只写一个index是对应的node而不是index，如：
arr.forEach(index=>{
    console.log(index);//会输出5行，分别是1，2，3，4，5
})

map(node, index, arr)

//参数和forEach一样,不会改变原数组，对每个结点进行某种操作并插入到新数组中，返回值是一个新数组
let arr = [1,2,3,4,5];
arr.map(node=>{
    return node ** 2;
})//返回值[1, 4, 9, 16, 25],arr:[1,2,3,4,5]
//上面也可以简写成
arr.map(node=>node ** 2);

filter(node, index, arr)

//参数同上，不会改变原数组，寻找符合return为true的条件的元素，并添加到新数组中，返回值是一个新数组，
let arr = [1,2,3,4,5];
arr.filter(node=>node > 3);//返回值[4,5],arr:[1,2,3,4,5]

sort(a, b)

//对数组内容进行排序，改变原数组，返回值为改变后的数组
let arr = [1,7,29,13,4,15];
arr.sort((a,b)=>{
    return a - b;//升序排列；b-a降序排列
})
//直接return 一个负数会逆置数组，并改变原数组

join(a)

//将数组的元素通过a连接起来，不改变原数组，返回拼接后的字符串
let arr = [1,2,3,4,5];
arr.join("__");//返回'1__2__3__4__5'，arr不变

concat(arr1,arr2…)

//拼接字符串，不改变原数组
let arr1 = [1,2,3,4,5];
let arr2 = [6,7,8];
let arr3 = [9,10];
arr1.concat(arr2,arr3);//返回值[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]，arr1,arr2,arr3都不变

isArray(arr)

//判断arr是否是数组
let arr = [1,2,3];
let o = document.getElementsByClassName("backgroundImage");
let b  = document.querySelectorAll(".backgroundImage");
Array.isArray(arr);//返回值true
Array.isArray(o);//返回值false
Array.isArray(b);//返回值false

注意事项

​ 除了数组（Array）能使用forEach外，querySelectorAll获取的节点列表（NodeList）也可以使用forEach，但是getElementsByClassName等获取的节点列表（HTMLCollection）就不能使用forEach，可见下图

NodeList：

HTMLCollection: