js操纵数组的技巧

最新推荐文章于 2022-04-20 11:31:47 发布

原创最新推荐文章于 2022-04-20 11:31:47 发布

· 322 阅读

2 ·

版权

原生JavaScript 专栏收录该内容

29 篇文章

订阅专栏

操纵数组的技巧

数组常用的方法

一、数组更改方法

常见的数组移入移除方法如以下，一般会用以下方法模拟数据结构中对栈和队列

1、push()和pop()尾部操作

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

2、shift()和unshift()头部操作

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

3、splice 数组操作

splice(起始位置，操作个数，替换值(可空))

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

4、concat()

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

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

总结

以上是数组增删最常用对api，前四种缺点在于只能对数组开头或者结尾进行操作。数组任意位置截取推荐使用slice操作

二、数组查询

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 默认从后向前找

三、拼接与截取

slice()数组截取

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

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

四、数组反转

reverse()

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

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

五、转换成字符串

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"

toString()

var a = [1,2,3,4]
console.log(a.toString()); // "1,2,3,4"

六、数组排序

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]

[在排序的时候，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 的值

七、数组遍历操作

数组遍历操作可分为以下几种

对部分项或某一项进行处理生成新数组
对数组进行过滤
利用数组某些项生成新的变量类型

1、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原数组
复制代码

2、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]
复制代码

3、filter()

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

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

4、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
复制代码

5、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
复制代码

6、reduce()和 reduceRight()

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

很多人不是很会用reduce，主要在于没有搞懂下面这个：

reduce中匿名函数输出项为下一次调用对匿名函数时的第一个参数
第一次调用对默认值是reduce的第二个参数，这个参数也能看出 reduce输出什么值

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