前端开发的看家本领——对JS数组的操作

我将数组的操作方法分为影响原数组和不影响原数组的分类

总结如下

影响原数组

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