JavaScript之数组的详细介绍
目录
I. 初识数组：新建一个数组
II. 认识数组：数组的基本方法
push()方法
unshift()方法
pop()方法
shift()方法
sort()方法
reverse()方法
slice()方法
III. 掌握数组：数组的进阶方法
splice()方法
forEach()方法
filter()方法
map()方法
高质量前端博主，点个关注不迷路！
I. 初识数组：新建一个数组
每一门编程语言，都有数组或类似数组的结构，同样的JavaScript(虽然是脚本语言)也不例外，学习JavaScript的数组，我们从新建第一个数组开始：
var arr = [];这句话是定义数组的一种方法，之后，我们可以给这个数组赋值：
var arr = []
arr[0] = 0;
arr[1] = 1;
console.log(arr[0]);
console.log(arr[1])赋值的方法也很简单，直接给数组对应的索引值的位置赋值即可与其他编程语言不同的是：
JavaScript中的数组，长度是动态可变的，如果学过其他编程语言的朋友可能对这一点不是很习惯。
但事实上反而使得问题变得简单了，因此不需要再定义数组的时候就指定它的大小。
除了上面的这种创建数组的方法外，还有以下几种方法：
// 1. 最简单的创建方法
var arr = [];
// 2. 新建数组对象的方式创建数组
var arr2 = new Array();
// 3. 新建数组对象的方式创建数组，并指定长度，但由于长度可变，因此实际作用不大
var arr3 = new Array(5);
// 4. 创建数组，并给数组前三位初始值为1 2 3
var arr4 = [1,2,3];其中，第三种，就像注释说的那样，意义不大，因为数组长度可变；第四种在创建数组的同时，就完成了赋值，但由于长度可变，在后面依旧可以继续插入值。
访问数组元素时，与其他编程语言一样，只需要用对应的索引值即可，索引值也是从0开始，为了方便小白阅读，我给出访问数组元素的语法格式：
var arr = [1,2,3];
var num = arr[0];
var num2 = arr[1];
var num3 = arr[2];这样三个num变量就获取了数组arr的前三个元素，完成了访问。
II. 认识数组：数组的基本方法
学会了新建数组和访问数组元素，我们开始了解一些数组的基本方法：
push()方法
push(参数1，参数2，参数3...，参数n) 方法可把参数指定的元素依次添加到数组的末尾，并返回添加元素后的数组长度，其中push()可以传入多个元素，实现多元素同时插入。
我们用代码演示一下它的工作：
var arr = [1, 2, 3];
var length = arr.push(4);
console.log("新插入的元素为：" + arr[3]);
console.log("数组的长度: " + length);
unshift()方法
unshift(参数1，参数2，参数3...，参数n) 方法可把参数指定的元素依次添加到数组的前面，并返回添加元素后的数组长度。其中unshift()可以传入多个元素，实现多元素同时插入。
我们用代码演示一下它的工作：
var arr = [1, 2, 3];
var length = arr.unshift(4);
console.log("新插入的元素为：" + arr[0]);
console.log("数组的长度: " + length);
pop()方法
pop() 方法可 弹出 / 删除 数组最后一个元素，并返回弹出的元素。
我们用代码演示一下它的工作：
var arr = [1, 2, 3];
var element = arr.pop();
var length = arr.length;
console.log("弹出/删除的元素为：" + element);
console.log("数组的长度: " + length);
shift()方法
shift() 方法可删除数组第一个元素，并返回删除的元素。
我们用代码演示一下它的工作：
var arr = [1, 2, 3];
var element = arr.shift();
var length = arr.length;
console.log("删除的第一个元素为：" + element);
console.log("数组的长度: " + length);
sort()方法
sort(compare_function) 方法用于按某种规则排序数组：当方法的参数为空时，按字典序（即元素的 Unicode 编码从小到大排序顺序）排序数组元素；当参数为一个匿名函数时，将按匿名函数指定的规则排序数组元素。
我们用默认不传入参数的形式的代码给大家演示它的排序效果：
var arr = [3, 1, 2, 4, 5];
console.log("排序前：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.sort();
console.log("排序后：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
reverse()方法
reverse() 方法可返回当前数组倒序排序形式。
我们用代码演示一下它的工作：
var arr = [1, 2, 3, 4, 5];
console.log("倒序前：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
arr.reverse();
console.log("倒序后：")
console.log(arr[0] + " " + arr[1] + " " + arr[2] + " " + arr[3] + " " + arr[4]);
slice()方法
slice() 方法返回包含从数组对象中的 第1个索引值 到 第二个索引值 - 1 之间的元素组成的新子数组。
我们用代码演示一下它的工作：
var arr = [1, 2, 3, 4, 5];
var arr2 = arr.slice(1, 4);
console.log("子数组的长度：" + arr2.length);
console.log("子数组的元素：" + arr2[0] + " " + arr2[1] + " " + arr2[2]);
III. 掌握数组：数组的进阶方法
接下来，我们来看看数组有哪些比较高端的进阶方法：
splice()方法
splice方法就比较复杂了，它有三个形态，我们来看看：
splice(参数1：index(索引值)，参数2：length(长度)，参数3：element(元素))
上面是splice函数的全部三个参数，根据三个参数的不同，splice可以有三种形态和功能：
(1) 删除形态：
此时注意了，第三个参数不用管了，因为都是删除了，当然不需要第三个element参数，于是：
arr.splice(index ， length)
表示从索引index开始，把index 到 index + length - 1 的数组元素全部删除；
(2) 替换形态：
此时注意了，第三个参数是新元素，要替换旧的元素的新元素，于是：
arr.splice(index ， length，element)
表示从索引index开始，把index 到 index + length - 1 的数组元素全部替换成element(注意，并不是说这些位置每个位置都换成element，而是这些位置先合并成一个位置，然后换成element)
在替换形态下，第二个参数length不能取值0，必须大于0，否则就会出错！
(3) 添加形态：
此时注意了，第二个参数length必须取值为0：
arr.splice(index ，0，element)
表示把element放在数组索引index的位置上，同时原来的元素以此后移一位(注意是后移/插入，并不是直接把该位置的元素给替换了)
我们一一用代码演示一下：
var arr = [1, 2, 3, 4, 5];
arr.splice(0, 2);
console.log("执行删除后数组的长度：" + arr.length);
console.log("执行删除后数组的元素：" + arr[0] + " " + arr[1] + " " + arr[2]);
arr.splice(0, 2, 1);
console.log("执行替换后数组的长度：" + arr.length);
console.log("执行替换后数组的元素：" + arr[0] + " " + arr[1]);
arr.splice(0, 0, 5);
console.log("执行插入后数组的长度：" + arr.length);
console.log("执行插入后数组的元素：" + arr[0] + " " + arr[1]);
forEach()方法
forEach(callback) 方法用于对数组的每个元素执行一次回调函数，传参是回调函数。
例如我们想要循环遍历一个数组，我们可以把回调函数写成这样：
var arr = [1, 2, 3, 4, 5];
arr.forEach(function (e) {
console.log(e)
})其中，匿名函数的参数e，就是每一个数组的元素，我们可以在里面对这些元素进行批处理，我这里的处理就是控制台打印，于是可以看到：
filter()方法
filter(function) 方法用于创建一个新的数组，其中的元素是指定数组中所有符合指定函数要求的元素，传参是我们规定返回的要求对应的函数。
注意，filter()方法返回的是一个数组，它满足我们指定的要求，这个要求通过传参函数进行解释：
var arr = [1, 2, 3, 4, 5];
var new_arr = arr.filter(function (e) {
if (e > 3) {
return true;
}
else {
return false;
}
})
new_arr.forEach(function (e) {
console.log(e)
})观察一下传参的函数，这个函数判断元素是否大于3，大于3，返回true，于是相当于告知filter()方法，这个元素符合要求，于是大于3的值被赋给了新数组，运行效果为：
map()方法
最后，我们聊聊map()方法：
map() 方法用于创建一个新的数组，其中的每个元素是指定数组的对应元素调用指定函数处理后的值。
例如，我们想让数组的每个元素都扩大二倍，利用map()方法可以这么写：
var arr = [1, 2, 3, 4, 5];
var new_arr = arr.map(function (e) {
return e * 2;
})
new_arr.forEach(function (e) {
console.log(e)
})
到这里，数组的基础方法和进阶方法都告诉大家了(如果有没有包括的，大家再自行学习即可)，但是光看完文章还不够，更多的是大家多多练习这些方法，如果上面的函数都能熟练地使用，那么你的JavaScript数组水平已经很不错了！
以上是本期的全部内容，喜欢的小伙伴们可以三连支持一下！！
另外本期博客参与了【新星计划】，还请大家支持一下！