13个你必须知道的js数组技巧

在js中,数组是一个重要切常见的知识点,我们经常将数据存储在数组中,并且数组是面试中重要的考察对象,所以数组我们必须要运用自如,下面将展示一些数组操作技巧

1 数组去重

这也是一道常见的面试题,怎么对JS的数组去重。

在ES6的时代,有个非常快速且简单的方法,使用new Set()以及Array.from()或者展开运算符(…)

			// 数组去重
			let arr = [1,2,3,1,2,4];
			//方法1
			let arr_one = Array.from(new Set(arr));
			 console.log(arr_one);
			// 方法2
			let arr_two = [...new Set(arr)];
			console.log(arr_two);

2 替换

日常开发中我们经常需要替换或者删除一些指定的数据,这个时候我们可以使用
Array.prototype.splice()这个方法
传参有多个,第一个是开始的索引,第二个是需要删除的数量,剩下是需要增加的值(一个或者多个)
注意次数返回值为被删除的数据

			let arr = [1,2,3,4,5,6];
			//索引1开始,删除2个
			//let result1 = arr.splice(1,2);
			//console.log(result1)   //返回删除的数据  2 3
			//替换前两个元素
			let result2 = arr.splice(0,2,9,9);
			console.log(result2);   //打印 1 2
			console.log(arr);   //打印 9 9 3 4 5 6

3 遍历数组

如果对于遍历数组想要有更多的了解,可以去看看我的这篇博文呐 js之遍历数组的一些方法
最常使用的数组遍历就是map函数,但是这里Array.from也可以实现

//map
			var arr = [0,1,2,3,4];
			let arr1 = arr.map((function(x){
				return x+2; 
			}))
			console.log(arr1);  //结果为 [2,3,4,5,6]
			
			var str = arr.map(function(i,index,arr){
			    console.log(this);
			    return ++i;
			},this);
			console.log(str);  //结果为 [1,2,3,4,5]
			
			
//Array.from
			let test = [
				{name:'wanger',age:22},
				{name:'zhangsan',age:21},
				{name:'lisi',age:23},
				{name:'mazi',age:24}
			]
			
			let test_new = Array.from(test,({name})=>name)
			console.log(test_new);  // wanger zhangsan lisi mazi

4 清空数组

  • 有时候我们需要进行一个清空数组的操作,比如用户点击了清空了购物车。
  • 当然可以一条条删除数据,但是会显得我们很憨憨,
  • 这时候最方便的就是直接将数组长度变为0
			let arr = [1,2,3,4,5];
			arr.length = 0;
			console.log(arr);  // []

5 数组转换成对象

  • 有时候我们需要将数组转换成对象的形式,使用.map()一类的迭代方法可以达到目的。
    但是这里我们可以使用一个更快的方式 前提是你正好希望对象的key就是数组的索引
    使用…扩展运算符
			let arr = [1,2,3,4,5];
			let result = {...arr};
			console.log(result);
			

6 填充数组

  • 有时候我们可能会遇到填充默认值的场景,当然循环这个数组进行填充也是可以的,但是这样会显得很憨
  • es6提供了更便捷的.fill方法
			let arr = new Array(3).fill(0);
			console.log(arr);  //[0,0,0]

7 合并数组

  • 说起合并数组,肯定会想起concat()
  • 不过今天的主角可不是concat哦,尝试一下ES6的…扩展运算符吧
			let arr1 = [1,2,3];
			let arr2 = [4,5,6];
			let result = arr1.concat(arr2);
			console.log('concat:',result)
			let result_new = [...arr1,...arr2];
			console.log('...:',result_new);

8 两个数组的交集

找出两个数组的交集一般是面试题经常出现的啦,当然方法有很多
这里说一下ES6的简便写法

			let arr1 = [1,2,3,4,5,6];
			let arr2 = [3,4,5,6,7,8];
			let duplicatedValues = [...new Set(arr1)].filter(item=>{
				return arr2.includes(item);
			})
			console.log(duplicatedValues);

9 去除假值

首先先熟悉一下假值是什么?
在js中,假值有:false,0,’ ',null,NaN,undefined
在这里使用filter方法可以去除假值

			let arr = [0,'a','',NaN,null,undefined,'b',true,false];
			//let result = arr.filter(Boolean);
			let result = arr.filter(item=>item);
			
			console.log(result);

10 随机值

从数组中获取随机的一个值
其实这个里面的核心知识就是随机生成一个index,index>=0并index<数组的length
floor()方法返会小于等于index的最大整数

			arr = [1,2,3,4,5];
			let rand = Math.floor(Math.random()*(arr.length));
			let result = arr[rand];
			console.log(result);
			console.log(arr);  //[1,2,3,4,5]
			//不改变原数组取出某值
			let result1 = this.arr.slice(rand,arr.length)[0];
			console.log(result1);
			console.log(arr);  //[1,2,3,4,5]
			//改变原数组取出
			let result2 = this.arr.splice(rand,1)[0];
			console.log(result2);
			console.log(arr);  //[1,3,4,5] 会缺少取出的数

11 倒序

如何将数组进行倒叙?
说实话很简单哦

			// 注意区别哦
			let arr = [1,2,3,4,5];
			let result = arr.reverse();
			console.log(result); //[5, 4, 3, 2, 1]
			console.log(arr);    //[5, 4, 3, 2, 1]
			let result1 = arr.slice().reverse();
			console.log(result1);  //[1,2,3,4,5]
			console.log(arr);     //[5, 4, 3, 2, 1]

12 lastIndexOf()

很多时候我们查找元素是否存在于某个数组中,经常使用indexOf()方法
而忽略了lastIndexOf()方法,这个方法的常用场景就是某个数组中有重复的数据最后一个的位置

			let arr = [1,2,3,4,4,3,5,4,6,7];
			let result = arr.lastIndexOf(4);
			console.log(result);   //7

13 求和

对数组中的元素进行求和,这个也经常在面试中出现哦
当然答案是有很多的。这里使用reduce进行计算,
reduce()方法对累加器和数组中的每个元素(从左到右)应用一个函数,以将其减小为单个值

			//数组求和
			let arr = [1,2,3,4,5];
			let sum = arr.reduce((x,y)=>x+y);
			console.log(sum);

如果感觉对你有所帮助的话,请随手点赞哦,感谢你的支持呐!

相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页