常用的数组方法

数组方法

js的里面的数组方法有很多，平时开发中常用的如forEach、map、filter等等，接下来是对数组方法的一些使用和总结，方便日后查阅。

1. join()

• 将数组中所有元素都转化为字符串并连接在一起，返回最后生成的字符串
• 可以指定一个可选的字符串在生成的字符串中来分隔数组的各个元素，默认为逗号

var a = [1,2,3,4]
console.log(a.join()); // "1,2,3,4"
console.log(a.join(""); // "1234"
console.log(a.join(" ")); // "1 2 3 4"
console.log(a.join("-")); // "1-2-3-4"
复制代码

2. reverse()

• 将数组中的元素倒叙排序，返回逆序的数据
• 不重新生成数组，而是在原先数组的基础上进行重新排列

var a = ['a','b','c','d']
console.log(a.reverse()); // ["d", "c", "b", "a"]
复制代码

3. sort()

• 将数组中的元素排序并返回排序后的数组（按升序）
• 当不带参数调用sort时，数组元素以字母表的顺序排序

var a = ['aa', 'dd', 'bb', 'cc']
console.log(a.sort()); // ["aa", "bb", "cc", "dd"]
var a = [20,10,5,2,3,4]
console.log(a.sort()); // [10,2,20,3,4,5]  ???? 没有进行排序？？？
复制代码

-这种情况是why？

原因：[在排序的时候，sort方法会去调用数组每一项的toString方法，不管数组元素是什么类型，都将转成字符串进行比较]

可以通过以下方式来解决上述问题

  var a = [20,10,5,2,3,4]
  function sequence(a,b){
5   return a - b;
6  }
7  console.log(arr.sort(sequence)); // [2,3,4,5,10,20]
//[总结]：
// A.若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
// B.若 a 等于 b，则返回 0。
// C.若 a 大于 b，则返回一个大于 0 的值
复制代码

4. concat()

• 连接两个或多个数组
• 返回一个新的数组，不改变原数组

var a = ['a','b']
console.log(a.concat([3,4,5])) // ["a", "b", 3, 4, 5]
console.log(a) // ['a','b']
复制代码

5. push()和pop()

• push(): 在数组末尾添加元素，返回数组长度，会改变原数组
• pop(): 删除数组最后一项，返回删除的元素,会改变原数组

var a = ['a','b']
console.log(a.push('c')) // 3 返回数组长度
console.log(a) // ['a','b','c']
console.log(a.pop()) // 'c' 返回末尾删除的元素
console.log(a) // ['a','b']
复制代码

6.shift()和unshift()

• shift(): 删除数组的第一项，返回删除元素的值,会改变原数组
• unshift(): 在数组第一项前面添加元素，返回添加后数组长度，会改变原数组

var a = ['a','b']
console.log(a.shift()) // 'a' 返回删除第一项元素
console.log(a) // ['b','c']
console.log(a.unshift()) // 3 返回添加元素后数组长度
console.log(a) // ['a','b','c']
var a = []
console.log(a.shift()) // undefined 当数组为空时，返回undefined
复制代码

7.slice

• 返回数组中指定范围（下标）的数组元素组成的新数组
• 可以接受1或2个参数
• 1个参数表示的时数组的当前位置开始一直到数组末尾的所有项
• 2个参数则表示从起始位置至结束位置之间的所有项，但不包含结束位置项
• 不改变原数组

var a = [1,3,5,7,9]
console.log(a.slice(2)) // [5,7,9] 从下标2开始一直截取到最后
console.log(a) // [1,3,5,7,9]
console.log(a.slice(2,4)) [5,7] // 从下标2开始截取到下标4的元素，不包含下标为4的值
console.log(a.slice()) // [1,3,5,7,9]
console.log(a.slice(1,-2)) // [3,5] 终止下标为负数，出现负数时，将负数加上数组长度的值来替换该位置的数（1，3）
console.log(a.slice(-4,-1)) // [3,5,7] 两个值都为负数时，都加上数组长度值（1，4）
复制代码

8.splice

• 可以实现数组的插入、删除和替换
• 2个参数时，可以作删除操作，分别表示要删除数组第一个元素的位置和项数
• 3个参数时，可以做插入操作，分别表示起始位置、删除的项数（0）、插入的项
• 3个参数，可以作替换操作，分别表示起始位置、删除的项数、插入的项
• 改变原数组

var a = [1,3,5,7,9]
console.log(a.splice(1,3)) // [3,5,7]
console.log(a) // [1,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,0,2,3)) // [1,2,3,3,5,7,9]
var a = [1,3,5,7,9]
console.log(a.splice(1,2,2,3) // [1,2,3,7,9]
复制代码

9.indexOf()和 lastIndexOf()

• indexOf(): 接受两个参数，第一个表示要查找的元素，第二个表示起点位置索引，从数组的首位向后找，返回元素下标
• lastIndexOf(): 接受两个参数，第一个表示要查找的元素，第二个表示起点位置索引，从数组末尾向前找，返回元素下标

var a = [1,3,5,7,9]
console.log(a.indexOf(9)) // 4
console.log(a.lastIndexOf(9)) // 4
var a = [1,3,3,5,7,7,9]
console.log(a.indexOf(3)) // 1 默认从前向后找
console.log(a.lastIndexOf(3)) // 2 默认从后向前找
复制代码

10.forEach()

• 对数组进行遍历循环

var arr = [1,3,5,7,9];
arr.forEach(function(item, index, arr){
console.log(item + '-' + index + '-' + (arr === arr));
});
// 1-0-true 3-1-true 5-2-true 7-3-true 9-4-true
// item表示数组每项的值，index表示下标，arr原数组
复制代码

11.map()

• 对数组中的每一项运行给定函数，返回每次函数调用的结果组成的数组

var arr = [1,3,5,7,9];
var arr2 = arr.map(function(item){
return item*2
});
console.log(arr2) // [2,6,10,14,18]
复制代码

12.filter()

• 对数组中的每一项运行给定函数，返回满足条件的元素组成的数组

var arr = [1,3,5,7,9];
var arr2 = arr.filter(function(item,index){
return item > 3
});
console.log(arr2) // [5,7,9]
复制代码

13.every()

• 判断数组中的每一项是否满足条件，只有当每一项都满足才返回true

var arr = [1,3,5,7,9];
var arr2 = arr.every(function(item){
return item < 10
});
console.log(arr2) // true

var arr2 = arr.every(function(item){
return item > 1
});
console.log(arr2) // false
复制代码

14.some()

• 判断数组中的每一项是否满足条件，只要有一项都满足就返回true

var arr = [1,3,5,7,9];
var arr2 = arr.some(function(item){
return item = 9
});
console.log(arr2) // true

var arr2 = arr.some(function(item){
return item > 10
});
console.log(arr2) // false
复制代码

15.reduce()和 reduceRight()

• 这两个方法都是用来迭代数组的所有项，最终会有一个返回值
• reduce()：从数组的第一项开始，逐个遍历至最后一项
• reduceRight(): 从数组最后一项开始，遍历至第一项
• 接受两个参数：（1）每项调用的函数 （2）初始值
• 函数里面包含四个参数：前一个值、当前值、元素索引和数组对象，该函数返回的任何值都会作为一个参数传给下一项，第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项

var arr = [1,3,5,7,9];
var sum = arr.reduceRight(function(prev, cur, index, array){
return prev + cur;
},10);
console.log(sum) // 35
复制代码

转载于:https://juejin.im/post/5d0c3604f265da1b6f437c59