JS数组（Array）应用大全！！！

最新推荐文章于 2024-10-02 15:17:07 发布

T_爱笑的眼

最新推荐文章于 2024-10-02 15:17:07 发布

阅读量1.2w

点赞数 9

分类专栏： JavaScript 文章标签：数组 array 对象

本文链接：https://blog.csdn.net/T_SmileEyes/article/details/81104270

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

【书山有路勤为径，学海无涯苦作舟】

一、生成数组

1、使用Array构造函数： var arr = new Array(10); //创建一个包含10项的数组

2、使用数组字面量表示法： var arr1 = [10];
// console.log(arr) //[]
// console.log(arr1) //[10]

二、数组方法

var arr2 = ['nice', 'hello', 'good', 'hi'];
var arr3 = [100, 21, 3, 14, 85, 36];
var arr4 = ['a', 'b', 'c', 'd', 'e', 'f'];

1、join()

join(separator): 将数组的元素组起一个字符串，以separator为分隔符，省略的话则用默认用'逗号'为分隔符，该方法只接收一个参数：即分隔符。

  var arr5 = arr2.join("-");
//var arr6 = arr3.join("-");
//console.log(arr2) //['nice', 'hello', 'good', 'hi'];
//console.log(arr3)    //[1, 2, 3, 4, 5, 6]
//console.log(arr5)   //nice-hello-good-hi
//console.log(arr6)    //1-2-3-4-5-6
//此方法不改变原数组，只是将数组转变为字符串输出。

//通过join()方法可以实现重复字符串，只需传入字符串以及重复的次数，就能返回重复后的字符串，函数如下：
               function repeatString(str,n) {
                   return new Array(n+1).join(str);
               }
// console.log(repeatString("abc",3)); // abcabcabc
//console.log(repeatString("Hi",5)); //HiHiHiHiHi

2、push()和pop()
//push(): 可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后数组的长度,原数组发生改变。
//pop()：数组末尾移除最后一项，减少数组的 length值，然后返回移除的项，原数组发生改变。
//var len1 = arr2.push("haha")
//var len2 = arr2.push(...arr4)
//console.log(len1) //5
//console.log(len2) //11
// console.log(arr2)   //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e", "f"]
//返回尾部添加后的新数组长度，原数组发生改变

// var str1 = arr2.pop()
// console.log(str1) //f
// console.log(arr2)   //['nice', 'hello', 'good', 'hi', "haha", "a", "b", "c", "d", "e"]
// console.log(arr2.length)   //10
// 返回尾部被删除的元素，原数组发生改变


3、unshift() 和 shift()
//unshift:将参数添加到原数组开头，并返回数组的长度。
//shift()：删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined 。
//这组方法和上面的push()和pop()方法正好对应，一个是操作数组的开头，一个是操作数组的结尾。
// var len3 = arr2.unshift(10)
// var len4 = arr2.unshift(...['a','b','c'])
// console.log(len3) //5
// console.log(len4) //8
// console.log(arr2)   //["a", "b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部添加后的新数组长度，原数组发生改变

//var str2 = arr2.shift()
//console.log(str2)   //a
//console.log(arr2)   //["b", "c", 10, 'nice', 'hello', 'good', 'hi']
//返回头部被删除的元素，原数组发生改变

4、sort()：按升序排列数组项----即最小的值位于最前面，最大的值排在最后面(比较的是ASCII码表的值)。
//在排序时，sort()方法会调用每个数组项的 toString()转型方法，然后比较得到的字符串，以确定如何排序。即使数组中的每一项都是数值， sort()方法比较的也是字符串，因此会出现以下的这种情况：
// var arr7 = arr2.sort()
// var arr8 = arr3.sort()
// console.log(arr2)       //["good", "hello", "hi", "nice"]
// console.log(arr3)       //[100, 14, 21, 3, 36, 85]
// console.log(arr7)       //["good", "hello", "hi", "nice"]
// console.log(arr8)       //[100, 14, 21, 3, 36, 85]
//返回被sort后的新的数组，原数组也随之改变

//为了解决上述问题，sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。比较函数接收两个参数，如果第一个参数应该位于第二个之前则返回一个负数，如果两个参数相等则返回 0，如果第一个参数应该位于第二个之后则返回一个正数。以下就是一个简单的比较函数：
               function compare(a,b){
                   if(a>b){return 1}
                   else if(a<b){return -1}
                   else {return 0}
               }
               function sort(a,b){
                   return a-b;
               }
// var arr9 = arr2.sort(sort)
// var arr10 = arr3.sort(sort)
// console.log(arr2)       //["good", "hello", "hi", "nice"]
// console.log(arr3)       //[3, 14, 21, 36, 85, 100]
// console.log(arr9)       //["good", "hello", "hi", "nice"]
// console.log(arr10)       //[3, 14, 21, 36, 85, 100]
//返回被sort后的新的数组，原数组也随之改变


5、reverse()
//reverse()：反转数组项的顺序。
// var arr11 = arr2.reverse()
// console.log(arr2)       //["hi", "good", "hello", "nice"]
// console.log(arr11)       //["hi", "good", "hello", "nice"]
//返回reverse之后的新数组，原数组随之改变

//反转字符串的方法
               function reverseString(str){
                   return str.split(" ").reverse().join(" ");
               }
// console.log(reverseString("hello World !")) //! World hello

6、concat()
//concat() ：将参数添加到原数组中。这个方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat()方法传递参数的情况下，它只是复制当前数组并返回副本。
// var arr12 = arr2.concat("bye",arr3)
// console.log(arr2)       //["nice", "hello", "good", "hi"]
// console.log(arr3)       //[100, 21, 3, 14, 85, 36]
// console.log(arr12)       //["nice", "hello", "good", "hi", "bye", 100, 21, 3, 14, 85, 36]
//从上面测试结果可以发现：传入的不是数组，则直接把参数添加到数组后面，如果传入的是数组，则将数组中的各个项添加到数组中。
//不改变原数组
//但是如果传入的是一个二维数组呢？
// var arr13 = arr2.concat("tom",["hh",["ad","hp"]])
// console.log(arr2)       //["nice", "hello", "good", "hi"]
//console.log(arr13)       //["nice", "hello", "good", "hi", "tom", "hh", Array[2]]
// console.log(arr13[6])   //["ad", "hp"]
//不会展开二维数组的每一项


7、slice()
//slice()：返回从原数组中指定开始下标到结束下标之间的项组成的新数组。slice()方法可以接受一或两个参数，即要返回项的起始和结束位置。在只有一个参数的情况下， slice()方法返回从该参数指定位置开始到当前数组末尾的所有项。如果有两个参数，该方法返回起始和结束位置之间的项——但不包括结束位置的项。
//var arr14 = arr3.slice(1)
//var arr15 = arr3.slice(1,5)
// var arr16 = arr3.slice(2,-3)
// var arr17 = arr3.slice(-6,-3)
// console.log(arr3)   //[100, 21, 3, 14, 85, 36]
// console.log(arr14)   //[21, 3, 14, 85, 36]
// console.log(arr15)   //[21, 3, 14, 85]
//console.log(arr16)   //[3]
//console.log(arr17)   //[100, 21, 3]
//返回从原数组中指定开始下标到结束下标（被截取）之间的项组成的新数组。原数组不会发生改变。当参数出现负数时，将负数加上原数组长度的值（6）来替换该位置的数即可。


8、splice()
//splice()：很强大的数组方法，它有很多种用法，可以实现删除、插入和替换。
//注意：该方法会改变原始数组。
//arrayObject.splice(index,howmany,item1,.....,itemX)
/* 参数1：必需。整数，规定添加/删除项目的位置，使用负数可从数组结尾处规定位置。 index，数组的索引值
* 参数2：必需。要删除的项目数量。如果设置为 0，则不会删除项目。
* 参数3：可选。向数组添加的新项目。
* */
// var arr18= arr2.splice(1,3)       //在['nice', 'hello', 'good', 'hi']数组index1后做删除['hello', 'good', 'hi']操作。（相当于删除）
//console.log(arr2)   //["nice"]
//console.log(arr18)   //["hello", "good", "hi"]
// var arr19= arr2.splice(1,0,"ph","hty")           //在["nice"]数组index1后做添加["ph","hty"]操作。（相当于添加）
//console.log(arr2)   //["nice", "ph", "hty"]
//console.log(arr19)   //[]
// var arr20 = arr2.splice(1,2,"ph","hty","fd")   //在["nice", "ph", "hty"]数组index1后做删除["ph","hty"]，然后再添加 ["ph", "hty", "fd"]操作。（相当于替换）
//console.log(arr2)   //["nice", "ph", "hty", "fd"]
//console.log(arr20)   //["ph", "hty"]
//返回被删除的数组，如果没有删除项，则返回空数组[],原数组发生相应的改变。

9、indexOf()和 lastIndexOf()
//indexOf()：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的开头（位置 0）开始向后查找。
//lastIndexOf：接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。其中，从数组的末尾开始向前查找。
//这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。在比较第一个参数与数组中的每一项时，会使用全等操作符。
//   index： 0 1 2 3 4 5 6 7 8 9 10
//var arr21 = [1,3,5,5,7,7,5,5,5,3,1];
// console.log(arr21.indexOf(5));       //2
// console.log(arr21.lastIndexOf(5));       //8
// console.log(arr21.indexOf(5,4));       //6
//注释：从index4的位置（即数组第一个7）开始往数组后查询5所在本数组的index首次出现的位置，即index6所在的位置5
//console.log(arr21.lastIndexOf(5,5));       //3
//注释：从index5的位置（即数组第二个7）开始往数组前查询5所在本数组的index首次出现的位置，即index3所在的位置5
// console.log(arr21.indexOf("5"));       //-1
//返回被查找项的位置索引，如果找不到就返回-1。
//注意：索引是从正数第一个（index0）开始，不存在逆向

补充：

10、forEach()
//forEach()：对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。参数都是function类型，默认有传参
//arr.forEach(function(item,index,items){})
/*参数1：遍历的数组内容item
* 参数2：对应的数组索引 index
* 参数3：数组本身items
*/
      /*var arr22= [1, 2, 3, 4, 5];
arr22.forEach(function(x,index,a){
console.log(x + '|' + index + '|' + (a === arr22));
});*/
//1|0|true
//2|1|true
//3|2|true
//4|3|true
//5|4|true


11、map()：指“映射”，对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组。
//map() 把每个元素通过函数传递到当前匹配集合中，生成包含返回值的新的 jQuery 对象。
//.map(callback(index,domElement))
//由于返回值是 jQuery 封装的数组，使用 get() 来处理返回的对象以得到基础的数组。
               /*var arr23 = [1, 2, 3, 4, 5];
               var arr24 = arr23.map(function(item){
                   console.log(item)
                   return item*item
               })*/
//console.log(arr23)   //[1, 2, 3, 4, 5]
//console.log(arr24) //[1, 4, 9, 16, 25]

12、filter()
//filter(fn(item,index){})：“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
               /*var arr25 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
               var arr26 = arr25.filter(function(x,index) {
                   return index % 3 === 0 || x >= 8;
               });*/
//console.log(arr26);       //[1, 4, 7, 8, 9, 10]

13、every()
//every()：判断数组中每一项都是否满足条件，只有所有项都满足条件，才会返回true。
               /*var arr27 = [1, 2, 3, 4, 5];
               var arr28 = arr27.every(function(x){
                   return x < 10;
               });*/
//console.log(arr28) //true


14、some()
//some()：判断数组中是否存在满足条件的项，只要有一项满足条件，就会返回true。
               /*var arr29 = [1, 2, 3, 4, 5];
               var arr30 = arr29.some(function(x){
                   return x < 2;
               });*/
// console.log(arr30) //true

15、reduce()和 reduceRight()
//这两个方法都会实现迭代数组的所有项，然后构建一个最终返回的值。reduce()方法从数组的第一项开始，逐个遍历到最后。而 reduceRight()则从数组的最后一项开始，向前遍历到第一项。
//这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。
//传给 reduce()和 reduceRight()的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
               /*var arr31 = [1,2,3,4,5];
               var arr32 = arr31.reduce(function(pre,cur,index,items){
                   console.log(pre)
                   console.log(cur)
                   console.log(items)
                   console.log(index)
                   return pre * cur;
               },10)*/
//console.log(arr32);

......完

【根据自己的理解手敲，如有错误，请留言指正，待大神指点】...