本篇主要介绍了web前端Javascript基础入门--js数组方法大全，通过具体的内容展现，希望对大家web前端JavaScript的学习有一定的帮助。

数组的基本概念:

1.什么是数组

数组是存储一个或多个数据的容器，它是一组内存空间，通常用来批量处理数据，这组内存空间名字叫做数组。

2.数组的特点

数组是个不挑食的家伙，对齐自身储存的数据并没有什么要求，无论是数量还是类型，通过数组下标从来管理数组元素。

3..length

数组名.length表示数组的长度，也是数组当前存储元素的个数，因为下标从0开始，所以数组长度-1表示数组最后一个元素的下标。

JavaScript中创建数组有两种方法

（一）使用 Array 构造函数：

var arr1 = new Array(); //创建一个空数组

var arr2 = new Array(20); // 创建一个包含20项的数组

var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组

（二）使用数组字面量表示法：

var arr4 = []; //创建一个空数组

var arr5 = [20]; // 创建一个包含1项的数组

var arr6 = [“lily”,“lucy”,“Tom”]; // 创建一个包含3个字符串的数组

数组的存取操作

查找元素

indexOf()函数是最常用的存取函数之一，用来查找传进来的参数在目标数组中是否存在。包含则返回索引，不包含则返回-1。

lastIndexOf()函数返回相同元素中最后一个元素的索引。

数组的字符串表示

join()和toString()都可以将数组转换为字符串

由已有数组创建新数组

concat()方法可以合并多个数组创建一个新数组

splice()方法截取一个数组的子集创建一个新数组，splice()方法还有别的用途比如为一个数组增加或删除元素。

可变函数

为数组添加元素

push()可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度。

unshift()将参数添加到原数组开头，并返回数组的长度 。

var arr = ["Lily","lucy","Tom"];

var count = arr.push("Jack","Sean");

console.log(count); // 5

console.log(arr); // ["Lily", "lucy", "Tom", "Jack", "Sean"]

var count = arr.push("Jack","Sean");

console.log(arr); //["Jack", "Sean", "Lily", "lucy", "Tom"]

从数组中删除元素

pop()方法可以删除数组末尾的元素

shift()方法可以删除数组的第一个元素

var arr = ["Lily", "lucy", "Tom", "Jack", "Sean"];

var item = arr.pop();

console.log(item); // Sean

console.log(arr); // ["Lily", "lucy", "Tom", "Jack"]

var item = arr.shift();

console.log(item); // Lily

console.log(arr); // [ "lucy", "Tom", "Jack", "Sean"]

从数组中间添加和删除元素

splice()可以方法为数组添加/替换/删除元素

splice(起始索引,[[需要删除额元素个数(天假元素时该参数设为0)],要添加的数组元素])

为数组排序

reverse()方法可以将数组中的元素进行翻转

var arr = [1,3,5,7];

var arrCopy = arr.concat(9,[11,13]);

console.log(arrCopy); //[1, 3, 5, 7, 9, 11, 13]

console.log(arr); // [1, 3, 5, 7](原数组未被修改)

sort()方法可以对数组进行排序，但是依据的字符串排序，如果要排列的元素是数字，sort()方法的排序结果就不能让人满意了。

但是可以在sort方法中传递一个对比函数!

var arr1 = ["a", "d", "c", "b"];

console.log(arr1.sort()); // ["a", "b", "c", "d"]

arr2 = [13, 24, 51, 3];

console.log(arr2.sort()); // [13, 24, 3, 51]

console.log(arr2); // [13, 24, 3, 51](元数组被改变)

//解决办法

function compare(num1, num2) {

        return num1 - num2;

    }

    arr.sort(compare);

    console.log(num) //[3,13,24,51]

迭代器方法

迭代器方法可以对数组中的每个元素对应执行一个函数

不生成新数组的迭代器方法

forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参，参数分别为：遍历的数组内容；第对应的数组索引，数组本身。

var arr = [1, 2, 3];

arr.forEach(function(x, index, a){

console.log(x + '|' + index + '|' + (a === arr));

});

// 输出为：

// 1|0|true

// 2|1|true

// 3|2|true

every(),该方法接收一个返回值为布尔类型的函数，对数组中的每个元素使用该函数。如果对于所有的元素，该函数均返回true，则该方法返回true。

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.every(function(x) {

return x < 10;

}); 

console.log(arr2); //true

var arr3 = arr.every(function(x) {

return x < 3;

}); 

console.log(arr3); // false

some()方法同every方法，只要有一个元素使得该函数返回true该函数就返回true。

reduce()方法接收一个函数，返回一个值。该方法会从一个累加值开始，不断对累加值和累加值和数组中的后续元素调用该函数，直到数组中的最后一个元素，最后返回得到的累加值。

    var nums = [1, 200, 31, 100]

    var sum = nums.reduce((total, num)=>total+num)

    console.log(sum)//332

生成新数组的迭代器方法

map()和filter()两个迭代器方法可以产生新数组。

var arr = [1, 2, 3, 4, 5];

var arr2 = arr.map(function(item){

return item*item;

});

console.log(arr2); //[1, 4, 9, 16, 25]

map()和forEach()有点像，对数组中的每个元素使用某个函数。两者区别是map函数返回一个新的数组，该数组的元素是对原有元素应用某个函数得到的结果。

filter()：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。

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

var arr2 = arr.filter(function(x, index) {

return index % 3 === 0 || x >= 8;

}); 

console.log(arr2); //[1, 4, 7, 8, 9, 10]

我是小职，记得找我

✅ 解锁高薪工作

✅ 免费获取基础课程·答疑解惑·职业测评