数组

173 阅读5分钟

直接用类型来调用的属性或方法,叫静态属性或方法 prototype下的方法,原型方法,可以用实例对象来调用

Array.of():方法用于将一组值,转换为数组

	var arr = Array.of(4,8,"aa","bb");        
	console.log(arr);

在这里插入图片描述

concat(arr1,arr2.....);将一个或多个数组合并到arr中返回合并后的新数组

var arr1 = ["a","b"];            
var newArr = arr.concat(arr1,["d","f"]);            
arr.push(arr1)            
console.log(arr);

在这里插入图片描述

var arr = [4,5,6,3,7,8,8];       
var newArr = arr.concat(44,55);            
console.log(arr,newArr);

在这里插入图片描述

every 测试数组内每个成员都会执行一个回调,根据回调返回值,来决定结果。

布尔值

	var arr = [3,-6,4,-7,8,9];        
	//判断arr中的元素是否都大于0        
	//每一个都大于0,结果才为true        
	       
	var flag = arr.every(function(ele,index,array){            
		console.log(index)//0     1            
		return ele > 0;        
	});        
	console.log(flag);//true或false

copyWidthin(index,staart,end)在当前数组内部,将指定位置成员赋值到其他位置(覆盖原有成员),然后返回当前数组。 会修改当前数组

它接受三个参数。
index(必需):从该位置开始替换数据。 start(可选):从该位置开始读取数据,默认为0。如果为负值,表示倒数。 end(可选):到该位置前停止读取数据,默认等于数组长度。如果为负值,表示倒数。

	var arr = [1,2,3,4,5,6,7];//1,1,2,3,4,5,6        
	var newArr = arr.copyWithin(1);        
	console.log(newArr,arr);

在这里插入图片描述

	var arr =[1,2,3,4,5,6,7,8,9]    
	var newArr =arr.copyWithin(1,3,5);    
	console.log(newArr,arr);

在这里插入图片描述

from();将两类对象转为真正的数组:类似数组的对象

	var obj = {            
		3:333333,            
		0:"0000",            
		100:100,            
		length:101       
	}        
	var newArr = Array.from(obj);        
	console.log(newArr);

forEach 循环

从index位置开始向后查找ele在arr中是否存在 ,如果存在返回所在下标,如果不存在返回-1

	var arr = [54,23,658,8,80];                
	arr.forEach(function(ele,index,array){            
		//ele:获取所有元素            
		//index:对应元素下标            
		//array:数组本身 (很少用到)            
	console.log(ele,index,array);        
	});
        
        //箭头函数写法
        arr.forEach((ele, index, array)=> {
          //ele:获取所有元素            
          //index:对应元素下标            
          //array:数组本身 (很少用到)            
          console.log(ele, index, array);
    });

filter 过滤 将条件为true返回,组成新数组

每一个数组成员都会执行一个回调
根据这个回调return的条件,条件为true,将该元素以新数组的元素返回,如果为false过滤掉这个元素 过滤奇数

	var arr = [5,4,7,4,9,0,2];              
	var newArr = arr.filter(function(ele,index,array){            
		return ele % 2 == 0;        
	})        
	console.log(newArr);

底层实现

	var arr = [5,4,7,4,9,0,2];
	function filter(arr,callBack //回调函数){            
		var flag;            
		var newArr = [];            
		for (var i = 0; i < arr.length; i++) {
		//每个成员执行回调                
			flag = callBack(arr[i],i,arr);
			//每执行一个都有一个结果,进行判断                
			if(flag){
			//把arr[i]放进新数组                    
				newArr.push(arr[i]);                
			}            
		}            
		return newArr;        
	}        
	var newArr = filter(arr,function(ele,index,array){            
		return ele % 2 == 0;        
	})        
	console.log(newArr);

find 找元素

	var arr = [1,2,3,4,5,6,7];                
	var ele = arr.find(function(ele,index,array){            
		//console.log(ele,index,array);            
		return ele > 5;        
	})        
	console.log(ele);//6

findIndex 找下标

	var arr = [1,2,3,4,5,6,7];        
	var index = arr.findIndex(function(ele,index,array){            
		//console.log(ele,index,array);            
		return ele > 5;        
	})        
	console.log(index)//5

fill 使用给定val值,填充一个数组

	var arr = [1,2,3,4,5,6,7];                  
	var newArr = arr.fill("a");         
	console.log(newArr,arr);

在这里插入图片描述 还可以接受第二个和第三个参数,用于指定填充的起始位置和结束位置。不包含end

	var arr = [1,2,3,4,5,6,7];        
	var newArr = arr.fill("a",2,5);        
	console.log(newArr,arr);//

在这里插入图片描述

indexOf(ele);从数组查找ele在arr中是否存在,如果存在返回所在下标,如果不存在返回-1

arr.indexOf(ele,index);

从index位置开始向后查找ele在arr中是否存在

	console.log(arr.indexOf(45));//-1        
	console.log(arr.indexOf(5)); //2        
	console.log(arr.indexOf(5,4));//5        
	console.log(arr.indexOf(5,7));//-1        
	console.log(arr.indexOf(5,-3));//6

includes 方法返回一个布尔值。表示某个数组是否包含给定的值

	var arr = [1,2,NaN,4,5,6,7];                
	var flag = arr.includes(4);//true        
	// var flag = arr.includes(40);//false        
	// var flag = arr.includes(NaN);//true        
	console.log(flag)

🍑instanceof操作符 用于检测一个引用数据类型的的值属于哪一种类型

在这里插入图片描述 数组拍平 在这里插入图片描述

isArray(val);判断是否是数组,如果是一个数组返回true,如果不是返回false

	//实例对象可以调用的方法(原型下的方法);                
	var arr = [];        
	console.log(Array.isArray(arr));//true        
	console.log(Array.isArray("6778"));//false

⭐案例:var arr = [1,"a",[2,"b",[3,[4,[5,[6,[7,[8,9]]]]]]]]; 铺平[1,"a",2,"b",3,4,5,6,7,8,9];

	var arr = [1, "a", [2, "b", [3, [4, [5, [6, [7, [8, 9]]]]]]]];
    //[1,"a",2,"b",3,4,5,6,7,8,9];        
    function fn(arr, newArr) {
      //获取arr中的所有元素            
      //判断元素是否是一个数组            
      //如果不是一个数组,将这个元素添加到一个新的数组中返回             
      //如果是一个数组,继续使用递归作上面的操作            
      //var newArr = [];            
      //参数默认值的设置            
      //如果newArr的参数没有传递是一个undefined,初始始化newArr为一个空数组            
      newArr = newArr || [];
      for (var i = 0; i < arr.length; i++) {
        if (Array.isArray(arr[i])) {                
          //是数组                    
          fn(arr[i], newArr);
        } else {
          newArr.push(arr[i]);
        }
      }
      return newArr;
    }
    console.log(fn(arr));

在这里插入图片描述

join() 将数组转换成字符串

var arr = [4,5,6,3,7,8,8];    
console.log(arr);    
var str = arr.join();            
var str1 = arr.toString();                        
var str = arr.join("");//把arr的每一个元素连接成字符串返回            
var str = arr.join("|");//把arr的每一个元素用|连接成字符串返回            
console.log(arr,str);

在这里插入图片描述

lastIndexOf();从后往前找

	var arr = [4,6,5,NaN,3,5,5,7,9];        
	console.log(arr.lastIndexOf(45));//-1        
	console.log(arr.lastIndexOf(5));//6        
	console.log(arr.lastIndexOf(5,4));//2

实现数组去重

function noRepeat(arr) {
      var newArr = [];
      for (var i = 0; i < arr.length; i++) {
        //if(arr[i]在newArr中不存在){                
        if (newArr.indexOf(arr[i]) === -1) {
          newArr.push(arr[i]);
        }
      }
      return newArr;
    }
    console.log(noRepeat(arr));

⭐foeEach底层实现

	function forEach(arr,callBack){            
		for (var i = 0; i < arr.length; i++) {                
			callBack(arr[i],i,arr);//数组每一个成员都会执行这个回调函数。            
		}        
	}        
	var maxNum = arr.shift();        
	forEach(arr,function(ele,index,array){            
		//console.log(ele,index,array);            
		if(maxNum < ele){                
			maxNum = ele;            
		}        
	})        
	alert(maxNum);

简易实现数组中最大值

	var arr = [54,23,658,8,80];
	var maxNum = arr.shift();//获取第一个元素        
	arr.forEach(function(ele){            
		if(maxNum < ele){                
			maxNum = ele;            
		}        
	})        
	alert(maxNum);

map 映射 每一个数组成员都会执行一个回调(与foreach不同点)

根据回调return的处理结果,返回新数组元素

	var arr = [5,4,7,4,9,0,2];                
	var newArr = arr.map(function(ele,index,array){            
		return ele + 1;//        
	});        
	console.log(newArr);

在这里插入图片描述

push 在数据的末尾追加一个元素

var arr = [1, 2, 3, 4]
      arr.push(5)
      console.log(arr);

pop 删除数组末尾一个元素

      var arr = [5, 2, 3, 4]
      arr.pop()
      console.log(arr);//5,2,3

sort 对数组进行排序

      var arr = [5, 2, 3, 4] 
      arr.sort()
      console.log(arr);

reduce归并 每一个数组成员都会执行一个回调 每一个回调中有一个return结果, 程序将每一次结果都合并为一个值或一个数组或一个对象

	var arr = [5,3,8,9,7];                
	var result = arr.reduce(function(prev,next,index){            
		//第一次执行回调            
		//prev:第一个元素            
		//next:是第二个元素            
		//index:从1开始            
		//第二次执行回调            
		//prev是上一次回调的返回值            
		console.log(prev,next,index);            
		//return "上一次";            
		return prev + next;       
	})        
	//result获取的是最后一个回调的return结果        
	console.log(result);

在这里插入图片描述 使用该方法做数组拍平

	var arr = [1,"a",[2,"b",[3,[4,[5,[6,[7,[8,9]]]]]]]];                
	function fn(arr){            
		return arr.reduce(function(prev,next,index){                
			return prev.concat(Array.isArray(next) ? fn(next) : next);            
		},[]);        
	}        
	console.log(fn(arr));

在这里插入图片描述

some 测试数组是否至少还有一个元素通过被提供的函数测试。返回布尔值

至少1个才为true 0个false

	//判断arr中是否有小于0的值        
	var flag = arr.some(function(ele,index,array){            
		console.log(index);            
		return ele < -10;        
	});        
	console.log(flag);//true或false
	function ever(arr,callBack){            
		var flag;            
		for (var i = 0; i < arr.length; i++) {                
			flag = callBack(arr[i],i,arr);//接受3个实参                
			/*if(flag){//true                                    
			}else{                    
				return false;                
			}*/                
			if(flag === false){                    
				return false;                
			}            
		}            
		return flag;        
	}        
	var arr = [3,-6,4,-7,8,9];                
	var flag = ever(arr,function(ele,index,array){            
		console.log(index)//0  1  2  3  4  5            
		return ele > -10;        
	})        
	console.log(flag); //true

slice 返回一个新数组对象。由begin和end决定的原数组返回的浅拷贝。原始数组不会改变。返回值:一个含有被提取元素的新数组。

 var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];
    console.log(arr.slice(1))//[2, 3, 4, 5, 6, 7, 8, 9, 0]
    console.log(arr.slice(1, 4))//[2, 3, 4]
    console.log(arr)// [1, 2, 3, 4, 5, 6, 7, 8, 9, 0]

splice()方法应该是最强大的数组方法了

主要用途是向数组的中部插入项,参数有三个,一个是起始位置,第二个是删除,插入的项数,第三个是要插入的项

var arr1 = [1, 2, 3, 4, 5, 6];//删除任意数量的项
    console.log(arr1.splice(0, 1))//[1]    返回了要删除的项
    console.log(arr1)//[2, 3, 4, 5, 6]  他改变了原来的数组

    var arr2 = [1, 2, 3, 4, 5, 6];//插入任意的数量项
    console.log(arr2.splice(6, 0, 7, 8, 9))//[]
    console.log(arr2)//[1, 2, 3, 4, 5, 6, 7, 8, 9]

    var arr3 = [1, 2, 3, 4, 5, 6];//向指定位置插入任意数量的项,并删掉任意数量的项
    console.log(arr3.splice(1, 2, 7, 8))//[2, 3]
    console.log(arr3)//[1, 7, 8, 4, 5, 6]

关于 应用场景

转载 [JavaScript Array 奇技淫巧](JavaScript Array 奇技淫巧 - 掘金 (juejin.cn))