数组的常用方法

Javscript数组的常用方法

// 一、基础操作
1.增

const arr = [1,2,3];
// js 数组增加元素
arr.push(1,2,3);
console.log(arr);//[1,2,3,1,2,3]
arr.unshift(4,5,6)
console.log(arr);//[4,5,6,1,2,3,1,2,3]
// concat方法不会改变原数组
const arr1 = arr.concat(["one",'two']);
console.log(arr,arr1);//[4,5,6,1,2,3,1,2,3],[4,5,6,1,2,3,1,2,3,"one","two"]
arr.splice(3,0,"one","two");
console.log(arr);// [4,5,6,"one","two",1,2,3,1,2,3]

2.删

const arr = [1,2,3];
// shift删除数组第一项返回被删除的项
arr.shift();
console.log(arr);// [2,3]
//pop删除数组最后一项返回被删除的项
arr.pop()
console.log(arr);// [2]
arr.push(2,3,4,5) // [2,2,3,4,5]
//splice 传入两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组
arr.splice(0,1)
console.log(arr);// [2,3,4,5]
// slice  用于创建一个包含原有数组中一个或多个元素的新数组，不会影响原始数组
const arr1 = arr.slice(0,3);
console.log(arr,arr1)//[2,3,4,5],[2,3,4]

3.改

//splice 传入三个参数，分别是开始位置，要删除元素的数量，要插入的任意多个元素，返回删除元素的数组，对原数组产生影响
const arr = [1,2,3];
arr.splice(0,2,'one','two')
console.log(arr)// ["one","two",3]

4.查

const arr = [1,2,3]
// indexOf 返回元素的下标，若元素不存在返回-1
console.log(arr.indexOf(1),arr.indexOf(0))// 0,-1
//find 返回第一个匹配的元素
console.log(arr.find((item,index,arr)=>{
    return item > 2
}))//3
//findIndex  返回第一个匹配的元素的下标
console.log(arr.findIndex((item,index,arr)=>{
    return item > 2
}))//2
// includes 返回要查找的元素在数组中的位置，找到返回true，否则false
console.log(arr.includes(1),arr.includes(0))// true,false

二、排序

const arr = [1,5,8,6,6,6,7,4,3,2];
// sort 接受一个比较函数，用于判断哪个值应该排在前面(默认从小到大排序)
arr.sort((a,b)=>{
    return a-b;
});
console.log(arr)//[1,2,3,4,5,6,6,6,7,8]
arr.sort((a,b)=>{
    return b-a;
});
console.log(arr)//[8,7,6,6,6,5,4,3,2,1]
//reserve 反序
console.log(arr.reverse())[1,2,3,4,5,6,6,6,7,8]

三、转换方法

const arr = ['one','two','three']
console.log(arr.join(' | '));//one | two | three

四、迭代方法

const arr = ['one','two','three',1,2]
// some对数组每一项都运行传入的函数，如果有一项函数返回 true ，则这个方法返回 true
console.log(arr.some((item)=>typeof item === 'number'),arr.some((item)=>item > 2));// true,false
//every对数组每一项都运行传入的函数，如果对每一项函数都返回 true ，则这个方法返回 true
console.log(arr.every(item=>typeof item === 'number'),arr.every(item=>typeof item === 'number' || 'string'))//false,true
//forEach对数组每一项都运行传入的函数，没有返回值
arr.forEach(item=>{
    console.log("this is " + item)
})// this is one this is two this is three  this is 1 this is 2
//filter对数组每一项都运行传入的函数，函数返回 true 的项会组成数组之后返回
const arr1 = arr.filter(item=>{
    return typeof item === 'string';
})
console.log(arr,arr1)// ["one","two","three",1,2],["one","two","three"]
//map 对数组每一项都运行传入的函数，返回由每次函数调用的结果构成的数组
const arr2 = arr.map(item => {
    return "this is" + item
})
console.log(arr,arr2) //  ["one","two","three",1,2],["this isone","this istwo","this isthree","this is1","this is2"]