javascript
javascript 对于数组对象有很多函数, 熟练的运用这些函数, 对于我们日常的工作有很大的帮助
下面简单的分享一下 10 个简单的 js 对于处理数组的方法, 希望能抛砖引玉
1, 数组去重复, 这个的实现原理和过程就是遍历原来的数组 arrOld, 判断 arr 有没有当前遍历到的数组元素, 没有加添加进去
- function removeReapt(arrOld) {
- var arr = [];
- for (var i = 0,
- len = arrOld.length; i < len; i++) {
- if (arr.indexOf(arrOld[i]) == -1) {
- arr.push(arrOld[i]);
- }
- }
- return arr;
- }removeReapt([1, 2, 3, 6, 5, 2, 2, 5, 6, 2, 1]) // [1, 2, 3, 6, 5]
2, 数组最大值最小值, 这一块的封装, 主要是针对数字类型的数组, 是通过 js 的 Math 对象来实现的, 我们还可以通过遍历数组, 比较每一个值的大小来封装
- function maxArr(arr){
- return Math.max.apply(null,arr);
- }
- function minArr(arr){
- return Math.min.apply(null,arr);
- }
- maxArr([1,4,65,843,2,1,4]) // 843
- minArr([1,4,65,843,2,10,4]) // 1
3, 数组求和, 平均值, 这一块的封装, 主要也是是针对数字类型的数组其中对于平均值小数点可能会有很多位, 这里没有做处理如果要处理, 我们可以用 js 的向下取整 Math.floor 或者向上取整 Math.ceil 等函数来实现
- // 求和
- function sumArr(arr) {
- var sumText = 0;
- for (var i = 0,
- len = arr.length; i < len; i++) {
- sumText += arr[i];
- }
- return sumText
- }
- // 平均值
- function covArr(arr) {
- var sumText = sumArr(arr);
- var covText = sumText / arr.length;
- return covText
- }sumArr([1, 4, 65, 843, 2, 1, 4]) // 920
- covArr([1, 4, 65, 843, 2, 1, 4]) // 131.42857142857142
4, 从数组中随机获取元素
- function randomOne(arr) {
- return arr[Math.floor(Math.random() * arr.length)];
- }
- randomOne([1,2,3,6,8,5,4,2,6]) // 1
5, 返回对应元素在数组中的下标
- function isHasElementOne(arr,value){
- for(var i = 0,vlen = arr.length; i < vlen; i++){
- if(arr[i] == value){
- return i;
- }
- }
- return -1;
- }
- isHasElementOne([1,2,3,4,5],3) // 2
6, 返回数组 (字符串) 一个元素出现的次数
- function getEleCount(obj, ele) {
- var num = 0;
- for (var i = 0,
- len = obj.length; i < len; i++) {
- if (ele == obj[i]) {
- num++;
- }
- }
- return num;
- }getEleCount('asd56+asdasdwqe', 'a') // 3
- getEleCount([1, 2, 3, 4, 5, 66, 77, 22, 55, 22], 22) // 2
7, 得到 n1-n2 下标的数组, 即返回数组下标 arr[n1]到数组 arr[n2]的值
- function getArrayNum(arr, n1, n2) {
- var arr1 = [],
- len = n2 || arr.length - 1;
- for (var i = n1; i <= len; i++) {
- arr1.push(arr[i])
- }
- return arr1;
- }getArrayNum([0, 1, 2, 3, 4, 5, 6, 7, 8, 9], 5, 9) // [5, 6, 7, 8, 9]
8, 筛选数组, 这里所做的就只是删除相应的数组, 大家可以按需要扩展
- /* arr: 要进行操作的数组
- val: 要删除的值
- type: 如果有值, 则删除数组中所有含有 val 值的元素, 如果没值或者不指定, 则删除必须完全匹配 val 的值
- */
- function removeArrayForValue(arr, val, type) {
- return arr.filter(function(item) {
- return type ? item.indexOf(val) === -1 : item !== val
- })
- }removeArrayForValue(['test', 'test1', 'test2', 'test', 'aaa'], 'test', '%') // ["aaa"]
- removeArrayForValue(['test', 'test1', 'test2', 'test', 'aaa'], 'test')
- // ["test1", "test2", "aaa"]
9, 根据 id 的值获取相应的 item 值, 并存入相应的目标数组, 如果数组里面的对象里面还有 children 的 item 的时候, 我们可以使用递归
- function findItemByOrgModuleId(arr, id, resArr) {
- arr.forEach(function(item){
- if (item.id === id) {
- resArr.push(item);
- }
- });
- return resArr;
- }
- var resArr = []; // 存放结果的目标数组
- var arr = [
- {id:1,name:'aaa'},
- {id:2,name:'bbb'},
- {id:3,name:'ccc'},
- {id:4,name:'ddd'},
- {id:4,name:'555'},
- ]; // 要操作的数组
- findItemByOrgModuleId(arr,4,resArr) // [{id:4,name:'ddd'},{id:4,name:'555'}]
10, 根据 id 来删除数组中相应 id 的对象, 这里默认所有的 id 都是唯一的
- function deleteById(arr, id) {
- arr.forEach(function(item, i){
- if (item.id === id) {
- arr.splice(i, 1);
- }
- });
- return arr;
- }
- var arr = [
- {id:1,name:'aaa'},
- {id:2,name:'bbb'},
- {id:3,name:'ccc'},
- {id:4,name:'ddd'},
- {id:5,name:'555'},
- ]; // 要操作的数组
- deleteById(arr,5)
- // [{id:1,name:'aaa'},{id:2,name:'bbb'},{id:3,name:'ccc'},{id:4,name:'ddd'}];
如果 arr 中的 item 值有子元素话, 我们需要遍历, 如下
- // 如果 arr 对象如下所示
- var arr = [
- {id:1,name:'aaa'},
- {id:2,name:'bbb'},
- {id:3,name:'ccc'},
- {id:4,name:'555'},
- {id:5,name:'555',children: [
- {id: 6,name:'666'},
- {id: 7,name:'777'},
- {id: 8,name:'888'},
- ]},
- ]
- function deleteById(arr, id) {
- arr.forEach(function(item, i){
- if (item.id === id) {
- arr.splice(i, 1);
- }
- if (item.children && item.children.length) {
- deleteById(item.children, id);
- }
- });
- return arr;
- }
- deleteById(arr,6)
结果返回了将 id 等于 6 的值删除之后的新的数组如下图所示
image
附加: 下面是 js 的数组常用的常用 api, 具体的使用方法大家可以参考相应的 w3cschool 相应的 api 的 demo
concat(): 连接两个或更多的数组, 并返回结果
join(): 把数组的所有元素放入一个字符串元素通过指定的分隔符进行分隔
pop(): 删除并返回数组的最后一个元素
push(): 向数组的末尾添加一个或更多元素, 并返回新的长度
reverse(): 颠倒数组中元素的顺序
shift(): 删除并返回数组的第一个元素
slice(): 从某个已有的数组返回选定的元素
sort(): 对数组的元素进行排序
splice(): 删除元素, 并向数组添加新元素
toString(): 把数组转换为字符串, 并返回结果
unshift(): 向数组的开头添加一个或更多元素, 并返回新的长度
valueOf(): 返回数组对象的原始值
结语: 此篇文章是受了 编写自己的代码库(javascript 常用实例的实现与封装 作者的启发
文章中加了自己的一些测试数据和自己工作用到的几个库, 希望能给大家带来一点启发
来自一个奔跑在前端路上的前端小白
来源: http://www.jianshu.com/p/5dc83169ee4f