JS基础 Array[]数组常用方法、遍历、对象遍历速览

发布于:2023-01-29 ⋅ 阅读:(610) ⋅ 点赞:(0)

数组Array

下面是数组的一些常用方法,以及遍历方式

数组的遍历方式: for i

var scores = [10, 20, 50, 90, 80];
			//1、fori,i下标
			for (var i = 0; i < scores.length; i++) {
				console.log(scores[i]);
			}

结果在控制台输出
for i 遍历

for i in

//2、for 下标 in 数组名
			for (var i in scores) {
				console.log(scores[i]);
			}

结果在控制台输出
for in遍历

forEach

//3、forEach(function(每一项,对应下标,数组本身),
			//forEach方法没有返回值,回调函数
			scores.forEach(function(item, index, self) {
				console.log(item, index);
				console.log(self);
			})
			scores.forEach(function(item, index) {
				console.log(item, index);
			})
			scores.forEach(function(item) {
				console.log(item);
			})

结果在控制台输出
在这里插入图片描述

	for item of  array
for (var item of scores) {
				console.log(item);
			}

在这里插入图片描述

数组方法:

	    追加删除
		unshift()/shift()  开头追加删除
		开头添加

在这里插入图片描述
开头删除

//开头删除
			names.shift();
			console.log(names);

在这里插入图片描述

//开头添加
			names.unshift('沈腾', '马丽');
			console.log(names);
		push()/pop()      末尾追加删除
	追加	

var names = ['张三', '李四', '王五'];
			//末尾追加
			names[names.length] = '赵六';
			console.log(names);
			names.push('郭靖', '黄蓉');
			console.log(names);

在这里插入图片描述
删除

//末尾删除
			names.pop();
			console.log(names);

在这里插入图片描述

		splice(startIndex,lenght,"替换")  指定删除
//删除并替换
			// names.splice(startIndex,length,["替换的元素"])下标
			names.splice(1, 1); //删除张三
			console.log(names);
			names.splice(1, 3, 'cc', 'dd');
			console.log(names);

在这里插入图片描述

回调:

        every(function(item,index,selft){})	
        some
        find   //返回符合条件的第一个元素 undefined
        findIndex  //返回符合条件的第一个元素下标  -1
        filter	 //返回符合条件的所有元素数组  空数组
		map      //返回处理后的新数组
        reduce(function(res,item,index,selft){},"初始值")
		sort(function(a,b){
		    return a-b;  升序
			return b-a;  降序
		})

			 //排序方法
				var array2=[16,25,9,90,23];
				array2.sort(function(a,b){
					// return a-b; //升序排序
					return b-a;    //降序排序
				})

				console.log(array2);

在这里插入图片描述

冒泡排序:

		    外层n-1,内层n-1-i
			两两相比小靠前
<script>
		/* 	  16,25,9,90,23    5个数
		0第一轮:16 9 25 23  90   4次=5-1-0
		1第二轮:9 16 23 25       3次=5-1-1
		2第三轮:9 16 23          2次=5-1-2
		3第四轮:9 16             1次=5-1-3
		 
		   n个数字来排队,两两相比小靠前
		   外层循环n-1,内层循环n-1-i
		*/
			var array=[16,25,9,90,23];
			//外层控制轮数
			for (var i =0; i <array.length-1; i++) {
				//内层控制比较的次数
				for(var j=0;j<array.length-1-i;j++){
					//两两相比
					if(array[j]>array[j+1]){
						var temp=array[j];
						array[j]=array[j+1];
						array[j+1]=temp;
					}
				}
			}
			console.log(array);
			</script>

在这里插入图片描述

其他方法:

      var arr=array.concat(array1)    拼接数组
          array.reverse()            翻转数组
          array.join("")             将数组连接为字符串
          array.includes()         判断数组是否包含
          array.indexof()           查找数据的第一个下标
          array.lastIndexof()           查找数据的最后一个下标
          Array.isArray(array)        判断是否是数组
          array.slice(开始下标,结束下标)     截取(结束下标不闭合)

			var num1 = [10, 20, 30];
			var num2 = [10, 20, 30, 50, 60];
			//数组连接
			var num3 = num1.concat(num2);
			console.log(num3);
			//数组翻转
			num1.reverse();
			console.log(num1);
			//splice  截取  string也有
			var num5 = num2.slice(1, 4); //splice(下标,length)
			console.log(num5);
			//拆分和合并
			//string  split
			var str = '长亭外-古道边-芳草碧连天';
			//将字符串拆分为数组
			var array = str.split("-");
			console.log(array);
			//将数组合并为字符串
			var str2 = array.join(",");
			console.log(str2);

在这里插入图片描述
在这里插入图片描述

6、对象:属性+方法
var obj={
“key”:“value”,
“key”:20,
“方法名”:function(参数){}
}
var obj=new Object();
obj.key=value;
obj.test=function(参数){}
调用:
对象名.属性名
对象名.方法名(参数)
遍历对象: for key in obj

<script>
			//遍历数组fori   for i in array   forEach
			//遍历对象:  for key键 in 对象名
			//4、for of
			// for (let item of scores) {
			// 	console.log(item);
			// }
			var zs = {
				"name": "张三",
				"age": 20,
				"sex": "男",
				"height": 1.83
			}

			var _li = document.querySelector("li");
			for (var key in zs) {
				//zs.key=>zs["key"],可以将变成字符串
				_li.innerHTML += key + ":" + zs[key] + ",";
			}
					</script>

在这里插入图片描述