了解JavaScript 数组对象及其方法

Posted 2020-06-17

　　数组在我目前学习过的编程语言中都可以见到, 形形色色的方法也数不胜数, 不过功能都一样, 最多也就是方法名稍稍有所不同, 老外也没个准啊, 如果英语比较好的同学对于学习方法(method)来说是很快的, 因为基本都可以翻译出来, 不过也要勤加锻炼, 总体来说, 英语水平不怎么影响编程技术, 看看API的话, 认识点简单的词汇, 就差不多了.

　　数组对象

　　文中一再的把数组和对象一起说, 是因为数组具有对象的一切特性, 更准确的说数组属于一类对象, 一类继承自Array.prototype的对象, 所以在原型链上具有大量的方法以供数组对象使用, 数组和对象略有不同, 比如对象的属性是无序的, 而数组的元素(其实也是属性)是有序的, 而且数组元素只可以通过索引的方式访问. JS中的数组是弱类型的, 所以在数组中可以存放任意类型的元素, 这个在之前都有简单的介绍, 这里就不过多解释了, 二维数组也不再赘述了, 这里主要说数组的方法与特性

---

　　var array = [1, 2, "wang", {x : 1}, [1, 2], function(){document.write("hello")}];

　　array[0];　　//1

　　array["2"];　　//wang

　　array[3].x;　　//1

　　array["5"]();　　//hello

---

　　不要以为我索引是不是写错了, 之前也说过, 索引其实就是对象的key值, 所以是可以这样使用的, 由你选择, 写出来也是为了让大家有多理解和体会.

　　数组的方法

　　数组作为一种有序的数据的结合, 因其特性需要大量的方法对数组进行编辑, 毕竟数组的增删性能太差了, 不可能每次都由我们自己来写逻辑方法, 所以我们只需要使用原型链上提供的大量已经封装好的方法即可.

　　通用兼容的方法主要有join(数组转字符串), reverse(逆序), sort(排序), concat(数组的拼接), splice(数组的截取), splice(数组的截去和拼接), 这些是主要的不太需要考虑兼容性的方法, ES5之后的方法虽然应该也全部兼容了, 所以还是提一下, forEach(遍历), map(元素编辑), filter(元素过滤), every/some(数组条件判断), reduce(两两元素操作), indexOf(索引查找), isArray.

　　下面全部用代码举例解释下每个方法

　　join方法

---

　　var array = [1, 2, 3];

　　array.join();　　//"1, 2, 3"

　　array.join("_");　　//"1_2_3"

---

　　这个方法主要是将数组中的元素使用参数连接成字符串, 使用率还是很广的.

　　reverse方法

　　明确一下, 这个并不是排序, 而是把数组中的元素按照逆序排列, 这个方法修改的是原数组对象, 而不是copy出来一个对象作为返回值.

---

　　var array = [1, 3, 2];

　　array.reverse();　　//[2, 3, 1];

　　array;　　//[2, 3, 1], 原数组被修改了

---

　　sort方法

　　这个是一个排序方法, 默认的时候会将元素toString, 然后比较字符串, 一般采取通过一个闭包作为参数来修改排序的顺序, 所以排序在不适用函参时是不可靠的. 这个方法也会修改原素组.

---

　　var array = [13, 24, 51, 3];

　　array.sort();　　//[13, 24, 3, 51]

　　/*

　　 *每个元素转化成字符串后只会比较字符串里面的第一个元素, 所以就会出现这种情况, 3被排到了第三个

　　 */

　　array.sort(function(a, b){return a - b;});　　//[3, 13, 25, 51]

　　/*

　　 *通过闭包比较数组中的每个元素, 然后修改排序

　　 */

　　array;　　//[3, 13, 25, 51], 原数组被修改了.

---

　　concat方法

　　数组拼接方法, 能够在数组的尾部拼接想要的参数, 可以是任何类型, 如果拼接的是数组, 会进行一次拉齐操作, 如果是一个二维数组, 那么只会拉齐一次数组, 也就是数组中的元素会保存原来的特性, 原本是一维数组元素, 还会是一位数组元素, 原本是二维, 也还是二维, 这个方法会返回一个数组, 而并不修改原数组.

---

　　var array = [1, 2, 3];

　　array.concat(4, 5);　　//[1, 2, 3, 4, 5]

　　array;　　//[1, 2, 3], 原数组并没有被修改

　　array.concat([10, 11], 13);　　//[1, 2, 3, 10, 11, 13], 参数中的数组被拉齐, 保持元素维数.

　　array.concat([1, [2, 3]]);　　//[1, 2, 3, 1, [2, 3]], 参数中的数组被拉齐, 保持元素维数. 2和3原本就是二维数组的元素, 现在还是2维数组元素.

---

　　slice方法

　　slice方法主要完成的是数组元素的截取, 留下自己想要得到的元素的数组, slice()里面的参数决定了, 截取的具体坐标, 这个方法也并不会修改原数组, 而是以copy一个新数组作为返回值, 代码示例.

---

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

　　array.slice(1, 3);　　//[2, 3], 以索引为1的元素为开始, 索引为3的元素结束, 左闭右开

　　array.slice(1);　　//[2, 3, 4, 5], 以索引为1的元素开始, 截取到最后

　　array.slice(1, -1);　　//[2, 3, 4], 负数的坐标代表从右侧开始, 但是是没有0坐标的, 所以-1也就是array[4], 所以也可以理解为截取到数组长度减1.

　　array.slice(-4, -3);　　//[2], 遵从上面的理解, 数组长度减4到减3也就是, array.slice(1, 2), 所以结果是[2].

---

　　splice方法

　　slice方法是对数组的截取, 而splice是截去自己不想要的部分, 留下所求的, 也是对原数组直接进行操作, 而splice也可以在截去不想要的部分后拼接上自己想要的元素, 代码示例.

---

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

　　var secondArray = array.splice(2);　　//return [3, 4, 5], 截去的元素将会以一个数组作为返回值.

　　array;　　//[1, 2]

　　secondArray;　　//[3, 4, 5]

---

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

　　var secondArray = array.splice(2, 2);　　//return [3, 4]

　　array;　　//[1, 2, 5]

　　secondArray;　　//[3, 4];

---

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

　　var secondArray = array.splice(1, 1, ‘a‘, ‘b‘);　　//return[2], 同时在原数组上拼接上‘a‘, ‘b‘, 两个元素

　　array;　　//[1, ‘a‘, ‘b‘, 3, 4, 5]

　　secondArray;　　//[2]

---

　　下面的方法都是ES5中才具有的.

　　forEach方法

　　forEach方法和for in很像, 属于遍历的方法, 它的作用主要是遍历数组中的每一个元素, forEach()和sort很像, 是需要一个闭包来作为函数的参数, 而闭包函数内部是有三个参数的, 下面代码距离逐一介绍.

---

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

　　array.forEach(function(element, index, array){

　　　　　　document.write("array[" + index + "]" + " : " + element + "<br />");

　　});

　　输出结果为:

　　array[0] : 1
　　array[1] : 2
　　array[2] : 3
　　array[3] : 4
　　array[4] : 5

---

　　function()中的参数名可以任意, 这是闭包的特性, 这里不详细解释, 简单说下参数都是干嘛的, 第一个参数是遍历的元素, 也就是数组中每个元素的值, 第二个参数就是数组的索引, 第三个参数就是数组本身.

　　map方法

　　这个方法是对数组中的元素进行逐一的处理, 返回一个新的数组, 原数组不改变.

---

　　var array = [1, 2, 3];

　　var secondArray = array.map(function(x){

　　　　return x + 10;

　　});

　　array;　　//[1, 2, 3]

　　secondArray;　　//[11, 12, 13];

---

　　filter方法

　　filter是个过滤器方法, 它能够将你想要过滤筛选的元素挑选出来, 返回一个新的数组.

---

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

　　var secondArray = array.filter(function(x, index){

　　　　return index <= 3 || x >= 8;　　

　　});

　　array;　　//[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

　　secondArray;　　//[1, 2, 3, 4, 8, 9, 10]

---

　　这个方法中的函参中的参数x是元素的值, index是索引, 闭包参数的含义是只返回索引小于等于3或者值大于等于8的元素. 完成了数组过滤器的效果.

　　every/some方法

　　这两个方法主要的作用是遍历判断数组中的元素是否符合条件, every要求的是每一个元素都要符合要求, some要求的是只要有一个符合条件就可以, 这两个方法给我一种逻辑或, 逻辑与的感觉. 而且这个也具有逻辑与和逻辑或的短路效应, 所以一旦确定结果, 遍历也会终止.

---

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

　　array.every(function(x){

　　　　return x < 10;　　//判断是不是每个元素都小于10

　　});　　//true

 

　　array.every(function(x){

　　　　return x < 3;　　//判断是不是每个元素都小于3

　　});　　//false

 

　　array.some(function(x){

　　　　return x == 1;　　//判断是不是有元素等于1

　　});　　//true

 

　　array.some(function(x){

　　　　return x > 100;　　//判断是不是有元素大于100

　　});　　//false

---

　　reduce/reduceRight方法

　　reduce方法主要是负责两两元素的操作的, 比如做累加, 比如做比较, 都可以通过reduce.

---

　　var array = [1, 2, 3];

　　var result = array.reduce(function(x, y){

　　　　return (x + y);

　　});　　//6

　　array;　　//[1, 2, 3], 原数组未修改

　　var array = [3, 9 , 6];

---

　　这里的流程是首先1和2进入, 然后得到的结果作为下一次的x参数, 然后再一次是3和3进入, 最后得到了6

---

　　var max = array.reduce(function(x, y){

　　　　document.write(x + ‘ | ‘ + y);

　　　　return (x > y ? x : y);

　　});

　　// 3 | 9

　　// 9 | 6

　　max;　　//9

---

　　输出结果很明确了, 就不再赘述了.

　　reduceRignt的特性和reduce是一样的, 只是并不是从左往右, 而是从右往左, 感兴趣的同学自己写一下就知道了.

　　indexOf方法

　　indexOf方法是获取元素在数组中第一次出现的索引位置, 如果数组中没有会返回-1, 方法中第一个参数是要查找的元素, 第二个参数是可选的, 是指从哪个索引位置开始查找, 最后返回的会是元素在数组中的索引.

---

　　var array = [1, 2, 3, 2, 1];

　　array.indexOf(2);　　//1, 说明array[1] = 2

　　array.indexOf(99);　　//-1, 说明数组中并没有99这个元素

　　array.indexOf(1, 1);　　//4, 从索引为1开始查找1这个元素, 那么只有第四个是

　　array.indexOf(1, -3);　　//4, 数组长度为5, 也就是说从array[2]开始查找元素索引, 所以还是4

　　array.indexOf(2, -1);　　//-1, 数组长度为5, 也就是从array[4]开始查找元素索引, 所以没有, 所以-1

---

　　还有一个方法是lastIndexOf(), 这个和indexOf是一样的, 只是是从后往前查找索引, 和reduceRight一样, 感兴趣的同学自己试一试.

　　isArray类方法

　　准确来说并不是类方法, 因为JS中并没有类, 但是为了让大家好理解我才这么说, 上面的方法都是在Array.prototype上的, 所以用对象直接就可以调用, 而这个方法是Array构造器上的方法, 所以需要使用Array来进行调用, 它起的作用主要是判断一个对象是否是数组对象, 如果是数组对象则返回true.

---

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

　　Array.isArray(array);　　//true

---

　　数组的常用的方法差不多就是这么多, 希望对大家的学习能有帮助.