前端常用的数组方法

最新推荐文章于 2024-03-26 10:18:35 发布

weixin_50170612

最新推荐文章于 2024-03-26 10:18:35 发布

阅读量184

点赞数

文章标签： javascript es6 vue.js js html5

本文链接：https://blog.csdn.net/weixin_50170612/article/details/116016774

版权

**es6 filter() 数组过滤方法总结**
1.创建一个数组，判断数组中是否存在某个值
```
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }]
console.log(newarr.filter(item => item.num===2 ))
```
2.也可以通过上面方法过滤掉num为2的留下num为1的
```
var newarr = [
{ num: 1, val: 'ceshi', flag: 'aa' },
{ num: 2, val: 'ceshi2', flag: 'aa2' }
]
console.log(newarr.filter(item => item.num!=2 ))
```
3.去掉空数组空字符串、undefined、null
```
var arr = ['1','2',undefined, '3.jpg',undefined]
var newArr = arr.filter(item => item)
console.log(newArr)

var arr = ['1','2',null, '3.jpg',null]
var newArr = arr.filter(item => item)
console.log(newArr)

>//空字符串里面不能包含空格
var arr = ['1','2','', '3.jpg','']
var newArr = arr.filter(item => item)
console.log(newArr)
```
4.去掉数组中不符合项
```
var arr = [20,30,50, 96,50]
var newArr = arr.filter(item => item>40)
console.log(newArr)
```
5.过滤不符合项
```
var arr = ['10','12','23','44','42']
var newArr = arr.filter(item => item.indexOf('2')<0)
console.log(newArr)
```
6.数组去重
```
var arr = [1, 2, 2, 3, 4, 5, 5, 6, 7, 7,8,8,0,8,6,3,4,56,2];
var arr2 = arr.filter((x, index,self)=>self.indexOf(x)===index)
console.log(arr2); //[1, 2, 3, 4, 5, 6, 7, 8, 0, 56]
```
**es6 Set() 数组去重**
1.数组去重es6
```
var arr=[1,2,1,'1',null,null,undefined,undefined,NaN,NaN]
let res=Array.from(new Set(arr));//{1,2,"1",null,undefined,NaN}
//or
let newarr=[...new Set(arr)]
```
2.数组对象去重es6
```
let person = [
{id: 0, name: "小明"},
{id: 1, name: "小张"},
{id: 2, name: "小李"},
{id: 3, name: "小孙"},
{id: 1, name: "小周"},
{id: 2, name: "小陈"},
];

let obj = {};
//设置cur默认类型为数组，并且初始值为空的数组
let peon = person.reduce((cur,next) => {obj[next.id] ? "" : obj[next.id] = true && cur.push(next);return cur;},[])
console.log(peon);
```
**数组常用方法**
1. arr.splice()
(1)作用：允许从指定的数组中，删除一部分元素，同时还可以添加另外一部分元素;
(2)语法：var res=数组名.splice(start,count,e1,e2,e3)；
(3)语法解释：start:开始删除和(或)添加元素的位置；count：删除的数量，0表示不删除任何元素，省略表示从开始位置全部删除；e1,e2,e3:新添加的元素；
```
// 定义一个数组
let arr=[1,2,3,4,5,6];
// 用splice方法处理
let res=arr.splice(1,2,'new1','new2','new3');
// 查看返回值
console.log('res',res);// [2,3]
// 查看修改后的数组
console.log('arr',arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证为count为0的情况
let newRes=arr.splice(1,0);
console.log(newRes);// []
console.log(arr);// [1, "new1", "new2", "new3", 4, 5, 6]
// 验证count空着的情况
let myNewRes=arr.splice(1);
console.log(myNewRes);// ["new1", "new2", "new3", 4, 5, 6]
console.log(arr);// [1]
```
2. arr.reverse()
(1)作用：将一个数组反转(次序反转);
(2)语法：var res=数组名.reverse()；
(3)语法解释：#；
```
let arr=[1,2,3,4,5,6];
let res=arr.reverse();
console.log(res);// [6, 5, 4, 3, 2, 1]
console.log(arr);// [6, 5, 4, 3, 2, 1]
```
3. arr.sort()
(1)作用：将数组中的元素排序;
```
一、//按字母排序
var arr=["f","g","b","a"];
arr.sort();//.sort()方法默认按字母排序

二、//数字排序：给.sort()添加一个函数参数
var array=[2,5,1,9,56,109];
array.sort(function(a,b){
return num1-num2;
});
```
5. arr.push()
(1)作用：在数组尾部(栈顶)添加新元素;
(2)语法：var res=数组名.push(n)；
(3)语法解释：n是需要插入数组的元素；
(4)返回值：更新后的原数组的长度；
```
let arr=[10,20,30];
let res=arr.push(40);
console.log(arr);// [10, 20, 30, 40]
console.log(res);// 4
```
6. arr.pop()
(1)作用：删除数组尾部(栈顶)的元素;
(2)语法：var res=数组名.push()；
(3)语法解释：#；
(4)返回值：被删除的元素；
```
let arr=[10,20,30];
let res=arr.pop();
console.log(arr);// [10, 20]
console.log(res);// 30
```
7. arr.unshift()
(1)作用：在数组头部(栈底)添加新元素;
(2)语法：var res=数组名.unshift(n)；
(3)语法解释：n是需要插入数组的元素；
(4)返回值：更新后的原数组的长度；
```
let arr=[10,20,30];
let res=arr.unshift(40);
console.log(arr);// [40, 10, 20, 30]
console.log(res);// 4
```
8. arr.shift()
(1)作用：删除数组头部(栈底)的元素;
(2)语法：var res=数组名.shift()；
(3)语法解释：#；
(4)返回值：被删除的元素；
```
let arr=[10,20,30];
let res=arr.shift();
console.log(arr);// [20, 30]
console.log(res);// 10
```
9. arr.fill()
(1)作用：用一个固定值填充一个数组中从起始索引到终止索引内的全部元素；
(2)语法：arr.fill(value,start,end);
(3)语法解释：value某个值，start起始下标，end结束下标；
(4)返回值：修改后的原数组；
```
let arr=[1,2,3,4,5,6,7,8,9];
const res=arr.fill('tom',2,14);
console.log(res);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(arr);// [1, 2, "tom", "tom", "tom", "tom", "tom", "tom", "tom"]
console.log(res===arr);// true
```
10. arr.concat()
(1)作用：拼接两个或多个数组；
(2)语法：let res=数组名.concat(arr1,arr2,arr3.......);
(3语法解释：arr指代数组；
(4)返回值：拼接后的新数组；
```
const arr=["中国","俄罗斯","英国"];
const arr1=["日本","韩国","朝鲜"];
const arr2=["美国","巴西","西班牙"];
const res=arr.concat(arr1,arr2);
console.log(res);// ["中国", "俄罗斯", "英国", "日本", "韩国", "朝鲜", "美国", "巴西", "西班牙"]
console.log(arr);// ["中国", "俄罗斯", "英国"]
```
11. arr.slice()
(1)作用：用来截取子数组，从指定的数组中，截取几个连续的元素，组成一个新数组；
(2)语法：let res=数组名.slice(start,[end]);
(3)语法解释：start截取的开始下标，end截取的结束下标(可省略，如果省略，一直截取到数组末尾)，[]表示可以省略；
(4)返回值：截取的元素组成的新数组；
```
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.slice(2,5);
console.log(res);// [3, 4, 5]
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```
12. arr.join()
(1)作用：将数组的元素值通过指定的字符连接到一起，并组成一个新的字符串；
(2)语法：let res=arr.join(str);
(3)语法解释：str指代一个字符串；
(4)返回值：返回数组元素加分割字符串组成的一个新数组；和字符串方法arr.split(str)有互反的作用；
```
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.join('-');
console.log(res);// 1-2-3-4-5-6-7-8-9
console.log(arr);// [1, 2, 3, 4, 5, 6, 7, 8, 9]
const test=res.split('-');
console.log(test);// ["1", "2", "3", "4", "5", "6", "7", "8", "9"]
console.log(res);// 1-2-3-4-5-6-7-8-9
```
13. arr.toString()
(1)作用：将数组的元素值通过逗号连接到一起，并组成一个新的字符串；
(2)语法：let res=arr.toString();
(3)语法解释：#；
(4)返回值：返回用数组元素加逗号分隔组成的新字符串；
```
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.toString();
console.log(res);// 1,2,3,4,5,6,7,8,9
console.log(arr)// [1, 2, 3, 4, 5, 6, 7, 8, 9]
```
14. arr.reduce()和arr.reduceRight()
(1)作用：依据指定函数对数组进行收敛/缩减，最终返回单一值作为计算结果；
(2)语法：arr.reduce(function(res,value,index,arr){return res+value},n);
(3)语法解释：res为每次计算的结果，初始值是n，如果n没给，则延取数组第一个元素作为其初始值，value则延取数组第二个元素；value是数组的元素值，index是数组的下标，arr是数组本身；res和value必须给，index/arr/n可选；注意arr为空数组且未给参数n时报错；arr为单元素数组，未给n时，简单返回单元素；arr为空数组，n给了时，简单返回n；reduce从左到右处理，reduceRight从右到左处理；
(4)返回值：返回最终计算后的res值；
```
const arr=[1,2,3,4,5,6,7,8,9];
const res1=arr.reduce((res,value)=>{return res+value},0);
console.log(res1);// 45 求和
const res2=arr.reduce((res,value)=>{return res*value},1);
console.log(res2);// 362880 求积
const res3=arr.reduce((res,value)=>{return res>value?res:value});
console.log(res3);// 9 求最大值
```
15. arr.find()
(1)作用：判断数组内是否有符合条件的元素，并返回这个元素；
(2)语法：arr.find(function(item,index,arr){return item<9});
(3)语法解释：item数组元素，index数组下标，arr数组本身；
(4)返回值：返回数组内通过判断的第一个元素的值,若找不到返回undefined；空数组不执行函数；
```
const arr=[1,2,3,4,5,6,7,8,9];
const res=arr.find((item)=>{return item<4})
console.log(res);// 1
const arr1=[{name:'tom',age:30},{name:'jery',age:35}];
const res1=arr1.find((item)=>{return item.name==='tom'});
console.log(res1);// {name: "tom", age: 30}
const res2=arr1.find((item)=>{return item.name==='tomBro'});
console.log(res2);// undefined
```
16. Array.from()
(1)作用：从一个类似数组或可迭代对象中创建一个新的数组；
(2)语法：Array.from(arrayLike, mapFn, thisArg)；
(3)语法解释：arrayLike(必须)想要转换成数组的伪数组对象或可迭代对象；mapFn(可选)如果指定了该参数，新数组中的每个元素会执行该回调函数；thisArg(可选)执行回调函数 mapFn 时的 this 对象；
(4)返回值：一个新的数组；
```
function fun() {
return Array.from(arguments);
}
const res=fun('tom', 'jery');
console.log(res);// ["tom", "jery"]

const res1=Array.from('test');
console.log(res1);// ["t", "e", "s", "t"]

const res4=Array.from('test',item=>item+2);
console.log(res4);// ["t2", "e2", "s2", "t2"]

const set = new Set(['test', window]);
const res2=Array.from(set);
console.log(res2);// ["test", Window]

weixin_50170612

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端常用的数组方法

**es6 filter() 数组过滤方法总结**1.创建一个数组，判断数组中是否存在某个值```var newarr = [{ num: 1, val: 'ceshi', flag: 'aa' },{ num: 2, val: 'ceshi2', flag: 'aa2' }]console.log(newarr.filter(item => item.num===2 ))```2.也可以通过上面方法过滤掉num为2的留下num为1的```var newarr = [ { ...
复制链接

扫一扫