前端最全的数组常用方法.

233 阅读4分钟

我们先来说说.数组有哪些操作方法.
(增,删,改,查).
我们今天就由这四个方面来给大家做一个前端数组常用的方法分类.方便大家记忆和快速查找这些大家想要用到的方法

1.增.

对原数产生影响的增添方法.

  • push()
  • unshift()
  • concat() push()

push()方法接受任意数量的参数,并将他们添加到数组末尾.返回数组的最新长度

let arr=[] //创建一个数组
let count =arr.push("小张","小王")//往里面添加.两项
console.log(count)//2

unshift()

unshift()在数组开头添加任意多个值,然后返回新的数组长度

let arr =[]
let count=arr.unshift("张三","李四")
alert(count)

splice

传入三个参数,分别开始位置,0(要删除的元素数量,插入的元素,返回空数组

let arr=["张三","李四","王五"]
let removed = arr.splice(1, 0, "王一", "赵六")
console.log(arr) //"张三","王一", "赵六","李四","王五"
console.log(removed) // []

不会对原数组产生影响的方法

concat()
concat()

concat()首先会创建一个当前数组的副本,然后再把它的参数添加到副本的末尾,最后返回这个心构建的数组,不会影响原始数组.

let arr=["张三","李四","王五"]
let removed = arr.concat("赵六",["王一","宋二"])
console.log(arr)
console.log(removed)//["张三","李四","王五","赵六","王一","宋二"]

影响原数组的三种方法

  • pop()
  • shift()
  • splice() pop()

pop()方法用于删除数组的最后一项,同时减少数组的length值,返回被删除的项

let arr=["张三","李四","王五"]
let item =arr.pop()
console.log(item)//"张三","李四"
console.log(arr.length)//2

shift()
shift()方法用于删除数组的第一项,同时减少数组的length值,返回被删除的项

let arr=["张三","李四","王五"]
let item =arr.shift()
console.log(item)//"李四","王五"
console.log(arr.length)//2

splice()
传入两个参数,分别是开始的位置,删除元素的数量吗,返回包含删除元素的数组.

let arr=["张三","李四","王五"]
let item =arr.splice(0,1)//删除第一项
console.log(arr)//"李四","王五"
console.log(item)//"张三" 只有一个元素的数组.

不会对原数组产生影响的方法

slice()
slice()用于创建一个包含原有数组中一个或多个元素的新数组,不会影响原数组

let arr=["张三","李四","王五"]
let item =arr.slice(1)
let item1 =arr.slice(1,3)
console.log(item)//"李四","王五"
console.log(item1)//"李四" 

即查找元素,返回元素坐标或者元素值

  • indexOf()
  • includes()
  • find()

indexOf()
返回要查找的元素在数组中的位置,如果没找到则返回-1

let arr=["张三","李四","王五"]
arr.indexOf(2)//"李四"
arr.indexOf(5)//-1

includes() 返回要查找的元素在数组中的位置,找到返回ture,没有则是false

let arr=["张三","李四","王五"]
arr.includes(2)//true
arr.includes(4)//false

find

const arr = [
    {
        name: "张三",
        age: 18
    },
    {
        name: "李四",
        age: 29
    }
];
arr.find((element, index, array) => element.age < 28)//
{name: "Matt", age: 27}

排序方法

数组有两个方法可以用来对元素重新排序.

-reverse() -sort()

reverse() 顾名思义,将数组元素方向反转.

let arr=["张三","李四","王五"]
arr.reverse()
console.log(arr)//"王五","李四","张三"

sort sort()方法接受一个比较函数,用于判断那个值应该排在前面

function compare(value1, value2) {
    if (value1 < value2) {
        return -1;
    } else if (value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}
let values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); // 0,1,5,10,15

转换方法.

常见的转换方法有:

join() join()方法接受一个参数,即字符串分隔符,返回包含所有项的字符串

let arr = ["张三","李四","王五"];
alert(arr.join(",")); // 张三,李四",王五
alert(arr.join("||")); // 张三||李四||王五

迭代方法

常用的迭代数组的方法都不改变原数组:

  • some()

  • every()

  • forEach()

  • filter()

  • map()

    some() 对数组每一项都运行传入的测试函数,如果至少有1个元素返回 true ,则这个方法返回 true

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let ever = arr.some((item, index, array) => item > 2);
console.log(ever) // true

every()

对数组每一项都运行传入的测试函数,如果所有元素都返回 true ,则这个方法返回 true

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let ever = numbers.every((item, index, array) => item > 2);
console.log(ever) // false

forEach()

对数组每一项都运行传入的函数,没有返回值

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
arr.forEach((item, index, array) => {
    // 执行某些操作
});

filter() 对数组每一项都运行传入的函数,函数返回 true 的项会组成数组之后返回

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let ever = arr.filter((item, index, array) => item > 2);
console.log(ever); // 3,4,5,4,3

map() 对数组每一项都运行传入的函数,返回由每次函数调用的结果构成的数组

let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let ever = arr.map((item, index, array) => item * 2);
console.log(ever) // 2,4,6,8,10,8,6,4,2