JavaScript——数组数组方法汇总
Posted cc25802580
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript——数组数组方法汇总相关的知识，希望对你有一定的参考价值。
前面两篇大致介绍了一下数组的基本特性，这里说一下数组的常用方法：
- Array.join()
将数组中所有的元素都转化为字符串并拼接在一起，返回最后生成的字符串。 不改变原数组
可通过指定的分隔符来分隔各个元素，如果不指定分隔符，则默认使用逗号。
1 var arr = [1,2,3];//创建一个包含三个元素的数组 2 arr.join(); //"1,2,3" 3 arr.join(" "); //"1 2 3" 4 arr.join(""); //"123" 5 6 7 var arr2 = new Array(10) //创建一个长度为10的空数组 8 arr2.join("-"); //"---------" 9个‘-‘符号组成的字符串
- Array.reverse()
将数组中的元素颠倒顺序，返回逆序的数组。 改变原数组
它采取了替换，也就是说，它并不是通过重新排列的元素再去创建新的数组，而是在原来的数组中重新排列了元素，改变了原数组。
1 //这里使用reverse()和join()两个方法来举个例子 2 3 var arr = [1,2,3]; //创建一个新数组 4 arr.reverse().join() //输出字符串"3,2,1"，并且现在的arr为[3,2,1]
- Array.sort()
将数组中的元素进行排序并返回排序后的数组。 改变原数组
当不带参数调用sort()时，数组元素都以字母表顺序排序，如果数组里含有undefined元素，则会被排到数组的尾部。
1 var arr = ["banana",undefined,"peach","apple"]; 2 arr.sort(); //此时数组arr为["apple","banana","peach",undefined]
如果想以其他方式而不是字母表的顺序来进行排序，则必须给sort()方法传递一个比较函数，该函数决定了它的两个参数在排好序的数组中的先后顺序，拿数字来举例的话，这个比较函数就决定了数字是从大到小排还是从小到大排。
1 var arr = [33,4,1111,222]; 2 arr.sort(); //sort()没有参数，所以按字母表顺序排，此时arr为[111,222,33,4] 3 arr.sort(function(a,b){ //排序后数值顺序为[4,33,222,1111]，这是升序 4 return a-b; 5 //a<b返回负数；a应该放在在b之前 6 //a=b返回0；两个数相等，谁先谁后无所谓 7 //a>b返回正数；那a就应该放在b的后面 8 }) 9 //如果要排降序，则return b-a就行，排序后arr为[1111,222,33,4]
- Array.concat()
连接两个或多个数组，并返回连接后的新数组。 不改变原数组
新数组的元素包括调用concat()的原始数组的元素和需要连接的数组里的元素，也就是说是这些需要连接的任意个数组里的所有元素再组成一个新的数组返回出来。
当然，参数类型也不仅仅只能是数组，也可以是具体的值，可以是任意多个
1 var arr = [1,2,3,4,5]; 2 var arr1 = arr.concat(6,7); // [1, 2, 3, 4, 5, 6, 7] 3 var arr2 = arr.concat(6,[7,8]); //[1, 2, 3, 4, 5, 6, 7, 8] 4 var arr3 = arr.concat(6,[7,[8,9]]); // [1, 2, 3, 4, 5, 6, 7, [8,9]] 当concat()操作的参数是数组时，那么添加的是数组中的元素，而不是数组。 单身如果是二维(或以上)数组，concat只能‘拆开‘一层数组 5 var arr4 = arr.concat(); // [1, 2, 3, 4, 5] 如果concat()没有参数或者参数是空数组也可以达到克隆数组的目的
- Array.slice()
返回指定数组的一个片段或子数组（也就是截取数组或者复制数组）。 不改变原数组
它的两个参数分别指定了片段开始和结束的位置，返回的新数组包含了：从第一个参数指定的位置起（包含）——到第二个参数指定的位置止（不包含），这之间所有的数组元素。
如果只指定一个参数，则新数组的元素就是：从这个参数位置起一直到原数组结尾的所有元素。
如果参数中出现负数，那就从后往前来找位置，比如-1是表示最后一个元素，-2是表示倒数第2个元素
1 var arr = [1,2,3,4,5]; 2 arr.slice(0,3) // 返回[1,2,3] 3 arr.slice(3) // 返回[4,5] 4 arr.slice(1,-1) // 返回[2,3,4] 5 arr.slice(-3,-2) // 返回[3] 6 7 //如果参数>=0,参数就是数组元素的索引值，从0开始的索引值 8 //如果参数为负数，就是从数组最后一位元素往前数的位置，从-1开始，-1就是最后一个元素的位置，-2就是倒数第二个元素的位置 9 //slice(n) 从索引n开始复制到最后一项 10 //slice()、 slice(0) 复制整个数组
- Array.splice()
在数组中插入元素或删除元素的通用方法（增删改）。 改变原数组
参数：
第一个参数：起始位置
第二个参数：要删除的项数
第三个参数至第任意多个参数：要插入的项
1 ary.splice(m,n,x，......,y); 2 //从数组的索引位置m开始，删除n项,然后再从位置m开始插入要添加的新项，第三个参数开始往后都是用来填补删除的项目位置的 3 4 var arr = [1,2,3,4,5]; 5 var arr2 = arr.splice(1,0,6,7);//从位置1开始，删除0项，然后在删除的地方插入要添加的6和7 6 console.log(arr); // [1, 6, 7, 2, 3, 4, 5] 7 console.log(arr2); // [] 8 //splice()方法至始至终都会返回一个数组，该数组包含从原数组中删除的项，如果没有删除任何项（0项），则返回一个空数组
1 //删除的功能,只需传前两个参数 2 ary.splice(m,n);//从数组的索引m开始，删除n项 3 4 var arr = [1,2,3,4,5]; 5 var arr2 = arr.splice(1,2); 6 console.log(arr); // [1，4，5] 7 console.log(arr2); // [2，3]
1 //修改(替换)的功能 2 arr.splice(m,n,x); //从数组的索引m开始，删除n项,然后再从位置m开始插入新项x 3 4 var arr = [1,2,3,4,5]; 5 var arr2 = arr.splice(1,2,6,7); 6 console.log(arr); // [1, 6, 7, 4, 5] 7 console.log(arr2); // [2，3]
//模拟 push(尾部添加) 和push二者返回值不同 arr.splice(arr.length,0,新的项) //因为splice是在开始项的位置处添加，所以第一个参数为arr.length //模拟 pop(尾部删除) arr.splice(arr.length-1,1); //模拟 shift(首项删除) arr.splice(0,1) //模拟 unshift(首项添加) 和unshilft二者返回值不同 arr.splice(0,0,新的项) //此外 arr.splice(n) // 表示从索引n开始删除到末尾 arr.splice(0) // 删除整个数组 有克隆数组的效果，利用返回值
- Array.push()和Array.pop()
push() : 向数组的尾部添加一个或多个元素，并返回数组新长度
pop()：删除数组的最后一个元素，减小数组的长度并返回被删除的元素
均改变原数组
1 var arr = []; //arr:[] 2 arr.push(1,2); //arr:[1,2] 返回2 3 arr.pop(); //arr:[1] 返回2 4 arr.push(3); //arr:[1,3] 返回2 5 arr.pop(); //arr:[1] 返回3 6 arr.push([4,5]); //arr:[1,[4,5]] 返回2 7 arr.pop(); //arr:[1] 返回[4,5] 8 arr.pop(); //arr:[] 返回1
- Array.unshift()和Array.shift()
unshift() : 向数组的头部添加一个或多个元素，其它元素的索引值也会相应往后移动，返回数组新长度
shift() : 删除数组的第一个元素，返回被删除的元素，后面的元素索引值相应往前补缺。
均改变原数组
1 var arr = []; //arr:[] 2 arr.unshift(1); //arr:[1] 返回1 3 arr.unshift(22); //arr:[22,1] 返回2 4 arr.shift(); //arr:[1] 返回22 5 arr.unshift(3,[4,5]); //arr:[3,[4,5],1] 返回3 6 arr.shift(); //arr:[[4,5],1] 返回3 7 arr.shift(); //arr:[1] 返回[4,5] 8 arr.shift(); //arr:[] 返回1
- Array.toString()和Array.toLocaleString()
针对数组，该方法将其每个元素转化为字符串，并输出用逗号分隔的字符串列表
1 [1,2,3].toString(); //生成‘1,2,3‘ 2 [‘a‘,‘b‘,‘c‘].toString(); //生成‘a,b,c‘ 3 [1,[2,‘c‘]].toString(); //生成‘1,2,c‘ 4 5 //注意，方括号或其他任何形式的包裹元素的分隔符，不会输出（如以上第2、3行）
- Array.forEach()
循环遍历数组的每一项 不改变原数组
参数：Array.forEach(每一项数组元素，元素索引，数组本身)
如果只需要得出数组元素的值，可以编写只有一个参数的函数，额外的参数将忽略
1 var arr = [‘a‘,‘b‘,‘c‘] 2 var arr2 = arr.forEach(function(item,index,ary){ 3 console.log(item,index,arr); 4 5 // item index arr 6 // a 0 ["a", "b", "c"] 7 // b 1 ["a", "b", "c"] 8 // c 2 ["a", "b", "c"] 9 10 return item; 11 }) 12 console.log(arr2) // undefined 无返回值
1 //只需求数组元素的值： 2 var arr = [1,2,3,4,5]; //计算数组元素的和 3 var sum = 0; //初始为0 4 arr.forEach(function(value){ 5 sum += value; 6 }) 7 console.log(sum); //和为15 8 9 10 //每个元素的值加1 11 arr.forEach(function(v,i,a){ 12 a[i] = v + 1; 13 }) 14 console.log(arr); //[2,3,4,5,6]
- Array.map()
调用map()方法后，原始数组的每一个元素都被传给指定的函数，并返回一个新数组，新数组的元素就是原始数组里的每个元素调用函数处理后的值。不改变原数组 返回值就是新数组
arr.map(function(每一项数组元素,索引值,当前数组){ })
1 var arr = [1,2,3]; 2 var arr2 = arr.map(function(i,j,arr){ 3 return i * i; 4 5 }) 6 console.log(arr2); //arr2为[1,4,9]
- Array.filter()
创建一个新的数组，新数组中的元素是原数组中通过检查并符合条件的所有元素。
也就是说，新数组是原数组的一个子集，传递的函数是用来逻辑判定的：该函数返回true或false，如果返回值为true或为能转化为true的值，那传过来的这个元素就是子集也就是新数组的成员。 不改变原数组
1 var arr = [1,2,3,4,5,6] 2 var arr2 = arr.filter(function(item){ 3 return item<3; 4 }) 5 console.log(arr2) // [1,2]
- Array.every()和Array.some()
这两个方法是数组的逻辑判定，返回true或false:
every() : 当数组中的所有元素都满足条件，它才返回true，只要有一个不满足，返回false；可字面理解，every就是每一个的意思
some() : 当数组中只要元素满足条件，它就返回true，全部不满足时才返回false；some就是一些的意思
1 var arr = [1,2,3,4,5,6] 2 var arr2 = arr.every(function(item){ 3 return item<10; 4 }) 5 var arr3 = arr.every(function(item){ 6 return item<3; 7 }) 8 console.log(arr2) // true 9 console.log(arr3) // false
注意：一旦every()和some()确定该返回什么值的时候，它们就会停止遍历数组元素，不会再继续。
every()在判定函数第一次返回false后就返回false，如果一直为true则会遍历完整个数组。
some()在判定函数第一次返回true后就返回true，如果一直为false则会遍历完整个数组。
根据数学惯例，在空数组上调用它们时，every()返回true，some()返回false。
- Array.indexOf()和Array.lastIndexOf()
查找整个数组中指定元素的位置，返回值是指定元素位置的索引，没有找到就返回-1，如果有多个，以第一次找到的位置索引为准。
indexOf() : 从头至尾查找，可理解为元素第一次出现的位置
lastIndexOf() : 反向的，从尾至头查找，可理解为元素最后一次出现的位置
1 var arr = [1,2,3,2,1]； 2 var a = arr.indexOf(2); 3 console.log(a); // 1 从头至尾，arr[1]为2 4 var b = arr.lastIndexOf(2); 5 console.log(b) // 3 反向查找，arr[3]为2 6 var c = arr.indexOf(5); 7 console.log(c) // -1 没有值为5的元素
这两个方法均不接收一个函数作为其参数；第一个参数是需要搜索的值，第二个参数是可选的，它指定数组中的一个索引，从索引处开始搜索；如果第二个参数是负数，如-1表示数组的最后一个元素，-2就是倒数第二个。
1 var arr = [1,2,3,2,1] 2 var a = arr.indexOf(2,-1); 3 console.log(a); // -1,查找不到 从最后一个元素开始往后找值为2的元素 4 var b = arr.lastIndexOf(2,-1); 5 console.log(b); // 3 从最后一个元素开始往前找，arr[3]为2 6 var c = arr.indexOf(2,-3); 7 console.log(c); // 3 从倒数第三个元素开始往后找值为2的元素，arr[3]为2 8 var d = arr.lastIndexOf(2,-3); 9 console.log(d); // 1 从倒数第三个元素开始往前找值为2的元素，arr[1]为2
下面再来举个例子，展示下如何运用indexOf()的第二个参数来查找所有匹配到的值
1 //在数组中查找所有出现的x，并返回一个包含匹配值索引的数组 2 function eq(arr,x){ 3 var result = [], //包含匹配值索引的数组 4 len = arr.length, //待搜索数组的长度 5 place = 0; //开始搜索的位置 6 while (place < len) { //循环搜索多个元素 7 place = arr.indexOf(x,place); 8 if(place === -1){ 9 break; //未找到就完成搜索 10 } 11 result.push(place); 12 place += 1; 13 } 14 return result; 15 } 16 17 var a = [1,5,2,8,6,4,5,6,7,5,5,9,5,1,2,5]; 18 console.log(eq(a,5)) // 查找数组a中所有的5，返回数组为[1, 6, 9, 10, 12, 15]
- Array.reduce()和Array.reduceRight()
这两个方法，是使用指定的函数将数组元素进行组合，生成单个值。
这里引用一篇博文，十分详细地讲解了这两个方法：
https://www.w3cplus.com/javascript/array-part-8.html
以上是关于JavaScript——数组数组方法汇总的主要内容，如果未能解决你的问题，请参考以下文章