前端基本的看家本领---Js数组常用的方法

这是我参与2022首次更文挑战的第天，活动详情查看：2022首次更文挑战

我将数组的操作方法分为影响数组和不影响原来数组的分类总结如下

影响原数组

push()

1.接收任意数量的参数，并将他们添加到数组的末尾，并返回最新长度

2.用法：

const arr = [0, 1, 2, 3];
const newarr = arr.push(4, 5, 6);
console.log(arr);//[0,,1,2,3,4,5,6]
console.log(newarr);//7

unshift()

1.在数组的开头添加任意多个值，然后返回新的数组长度

2.用法：

const arr = [0, 1, 2, 3];
const newarr = arr.unshift(4, 5, 6);
console.log(arr); //[4,5,6,0,1,2,3]
console.log(newarr);//7

splice()

1.传入三个参数，分别是起始位置，要删除的元素数量，插入的元素

2.返回的是被删除的元素

3.用法：

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.splice(2, 3, 'red', 'yellow', 'blue');
console.log(arr);[ 0, 1, 'red', 'yellow', 'blue', 5, 6, 7, 8, 9 ]
console.log(newarr);//[ 2, 3, 4 ]

pop()

1.删除数组的最后一项

2.减少数组的长度并影响原数组

3.返回删除的那个元素

4.用法：

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.pop();
console.log(arr);//[0, 1, 2, 3, 4, 5, 6, 7, 8]
console.log(newarr);//9

shift()

1.删除数组的第一项

2.减少数组的长度并影响原数组

3.返回被删除的那个元素

4.用法：

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.shift();
console.log(arr);//[1, 2, 3, 4, 5,6, 7, 8, 9]
console.log(newarr);//0

reverse()

1.将数组的元素方向调转排列

2.用法：

const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7]
const newarr = arr.reverse()
console.log(arr);
console.log(newarr);

sort()

1.传入一个比较函数判断数组是从大到小或者从小到大排列

用法：

const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]
function fn(num1, num2) {
    if (num1 > num2) {
        return -1
    } else if (num1 < num2) {
        return 1
    } else {
        return 0
    }
}
const newarr = arr.sort(fn)
console.log(arr);//[22, 11, 9, 8, 7,6,  5, 4, 3, 2,6,  5, 4, 3, 2,]
console.log(newarr);//[22, 11, 9, 8, 7,6,  5, 4, 3, 2,6,  5, 4, 3, 2,]

不影响原数组

concat()

1.创建一个当前数组的副本，把参数添加到副本的末尾
2.返回新数组
3.用法：

const arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.concat('red', 'yellow', 'blue');
console.log(arr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(newarr);//[0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'red', 'yellow', 'blue']

slice()

1.创建一个包含原有数组中一个或多个元素的新数组
2.slice(起始位置,最后位置)，在一个新数组返回数组的起始位置到最后位置的数字
用法：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const newarr = arr.slice(2);
const newarr2 = arr.slice(2, 4);

console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(newarr);//[3, 4, 5, 6, 7, 8, 9]]
console.log(newarr2);//[3, 4]

indexOf()

1.返回要查找的元素在数组中的位置，如果数组中有相同的即返回查找到的第一个
2.找到返回元素在数组中的下标，没找到返回-1
用法：

const arr = [0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const num = arr.indexOf(99)
const num2 = arr.indexOf(0)
console.log(arr);//[0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num);//-1
console.log(num2);//0

includes()

1.返回要查找的元素在数组中的位置
2.找到返回true，没找到false
3.用法：

const arr = [0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
const num = arr.includes(99)
const num2 = arr.includes(0)
console.log(arr);//[0, 25, 33, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9];
console.log(num);//false
console.log(num2);//true

find()

1.返回符合条件的第一个元素,不符合返回undefined
2.对于空数组，函数是不会执行的
3.用法：

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]

function fn(num) {
    return num > 33
}
function fn1(num) {
    return num > 2
}
const someone = arr.find(fn)
const someone1 = arr.find(fn1)
console.log(arr);//[1, 2, 3, 4, 5, 6, 7, 8, 9]
console.log(someone);//undefined
console.log(someone1);//3

join()

1.接收一个字符串分隔符，返回以该字符分隔的字符串
2.用法：

const arr = [3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]

const newarr = arr.join('//')

console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7, 11, 22]
console.log(newarr);//3//6//9//2//5//8//1//4//7//11//22

some()

1.对数组每一项都运行传入的函数,如果有一项达到标准返回true，则这个方法为true
2.item是元素，index是元素的下标，array当前元素属于的数组对象
3.用法：

let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];

let newarr = arr.some((item, index, array) => item > 5);

console.log(arr) // [3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr) // true

every()

1.对数组每一项都运行传入的函数,如果有一项达到标准返回false，则这个方法为false
2.item是元素，index是元素的下标，array当前元素属于的数组对象
3.用法：

let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];
let newarr = arr.some((item, index, array) => item > 5);
console.log(arr) // [3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr) // false

forEach()

1.遍历数组，for循环的加强版
2.item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
3.用法：

 let arr = [9, 6, 3];

        arr.forEach(function(item, index, newarr) {
            console.log(item);
            console.log(index);
            console.log(newarr);
        });

        console.log(arr);

filter()

1.对数组每一项都运行传入的函数，符合条件的组成新数组后返回
2.item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
3.用法：

let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];
const newarr = arr.filter((item, index, array) => item > 3)
console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr);//[ 6, 9, 5, 8, 4, 7 ]

map()

1.对数组每一项都运行传入的函数，符合条件的组成新数组后返回
2.item是数组的每一项，index是数组的每一项下标，array是当前元素属于的数组对象
3.返回每次调用函数的结果组成的新数组
4.用法：

let arr = [3, 6, 9, 2, 5, 8, 1, 4, 7];

const newarr = arr.map((item, index, array) => item > 3)

console.log(arr);//[3, 6, 9, 2, 5, 8, 1, 4, 7]
console.log(newarr);//大于3为true，小于为false