前端路线--JavaScript篇（day04）

发布于：2023-01-04 ⋅ 阅读:(141) ⋅ 点赞:(0)

数组的栈方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// push:为数组的末尾添加一个或者多个元素
		// 参数:增加的元素
		// 返回值：是数组的长度
		// 改变原数组
		var heroes = ['张飞','刘备','关羽','孙悟空','猪八戒'];

		// heroes.push('金蝉');
		// console.log(heroes)
		// var rel = heroes.push('哪吒','孙策');
		// console.log(rel)
		// console.log(heroes)

		// pop:从数组的末尾移除并返回移除数组的一个元素
		// 参数:无
		// 返回值：移除的那个元素
		// 改变原数组
		heroes.pop();
		var rel = heroes.pop();
		console.log(heroes)
		console.log(rel)

	</script>
</body>
</html>

数组的队列方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// unshift:为数组的开头添加一个或者多个元素
		// 参数:增加的元素
		// 返回值：是数组的长度
		// 改变原数组
		var heroes = ['张飞','刘备','关羽','孙悟空','猪八戒'];

		// heroes.unshift('金蝉');
		// console.log(heroes)
		// var rel = heroes.unshift('哪吒','孙策');
		// console.log(rel)
		// console.log(heroes)

		// shift:从数组的开头移除并返回移除数组的一个元素
		// 参数:无
		// 返回值：移除的那个元素
		// 改变原数组
		heroes.shift();
		var rel = heroes.shift();
		console.log(heroes)
		console.log(rel)

	</script>
</body>
</html>

数组的检索方法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 不会改变原数组

		// 1、array.includes(item, start)：用于确定数组中是否含有某个元素
		// 从左到右检索
		// 参数:item要找的元素，start起始的下标
		// 返回值：true\false

		var heroes = ['张飞','孙悟空','刘备','关羽','孙悟空','猪八戒'];

		console.log(heroes.includes('关羽'));   //true
		console.log(heroes.includes('关'));     //false
		console.log(heroes.includes('刘备',1));     //false
		console.log(heroes.includes('刘备',-2));     //false

		// arr.length+start值为负数，整个数组都会被检索
		console.log(heroes.includes('刘备',-100));     //true
		// arr.start起始值大于等于数组的长度，返回false,整个数组都不会被检索
		console.log(heroes.includes('刘备',100));     //false


		// indexOf(item,start)：检测当前值在数组中第一次出现的位置索引,返回值是在数组中可以找到给定值的,第一个索引，如果不存在，则返回-1。
		console.log(heroes.indexOf('孙悟空'));     //1
		console.log(heroes.indexOf('悟空'));       //-1
		console.log(heroes.indexOf('孙悟空',2));   //4
		console.log(heroes.indexOf('孙悟空',-3));  //4


		// lastIndexOf(*item*,*start*)：检测当前值在数组中最后一次出现的位置索引，从数组的后面向前查找，从 *start*处开始。
		console.log(heroes.lastIndexOf('孙悟空'));     //4
		console.log(heroes.lastIndexOf('悟空'));       //-1
		console.log(heroes.lastIndexOf('孙悟空',2));   //1
		console.log(heroes.lastIndexOf('孙悟空',-3));  //1
		console.log(heroes.lastIndexOf('孙悟空',-2));  //4



	</script>
</body>
</html>

数组的判断方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		var arr = [1,2,3,4,5];

		console.log(typeof arr);   //object

		// Array对象
		// Array.isArray();  判断是否是一个数组
		console.log(Array.isArray(arr))   //true
		console.log(Array.isArray(123))   //false  
	</script>
</body>
</html>

数组的方法join

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// join():把数组转换成一个字符串
		// 参数：要连接的符号
		// 返回值：连接后的字符串
		// 不改变原数组
		var arr = ['a','b','c','d','e'];
		
		var rel = arr.join();
		console.log(rel);

		console.log(arr.join(''));   //abcde
		console.log(arr.join('+'));   //abcde
		console.log(arr.join('-'));   //abcde
		console.log(arr.join('&'));   //abcde
		console.log(arr.join('ZZZ'));   //abcde
	</script>
</body>
</html>

数组的方法splice

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>

		var arr = ['a','b','c','d','e'];
		// 语法:array.splice(index,howmany,item1,.....,itemX)
		// 参数：
			// index:索引的开始位置，包含元素本身
			// howmany:删除多少个元素
			// item...:增加的元素
		// 返回值:删除的元素组成的新数组
		// 改变元数组
		
		// 1、增加
		var rel = arr.splice(1,0,'f','g');
		console.log(rel);
		console.log(arr);

		// 2、修改:在替换的情况下，删除几个就添加几个
		// var rel = arr.splice(2,2,'f','g');
		// console.log(rel)
		// console.log(arr)

		// 3、删除
		// var rel = arr.splice(2,2);
		// console.log(rel)
		// console.log(arr)
	</script>
</body>
</html>

数组的方法slice

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// 截取一个数组，返回一个新的数组，不改变元数组
		// 参数：start开始的索引，end:结束的索引
		var arr = ['a','b','c','d','e'];
		
		var rel = arr.slice(2,3);
		console.log(rel)  
		console.log(arr)

		// 从左往右截取，起始值和结束值没有交集，截取不到任何参数
		var rel1 = arr.slice(-2,-3);
		console.log(rel1)

		var rel2 = arr.slice(-4,3);
		console.log(rel2)

		// 不写结束位置，默认截取到末尾：相当于又克隆了一个数组
		var rel3 = arr.slice(0);
		console.log(rel3)
	</script>
</body>
</html>

数组的方法reverse

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// reverse():把数组倒过来
		// 参数：无
		// 返回值：倒序后的数组
		// 改变原数组

		var arr = ['a','b','c','d','e'];
		
		var rel = arr.reverse();

		console.log(rel)  //['e', 'd', 'c', 'b', 'a']
		console.log(arr)  //['e', 'd', 'c', 'b', 'a']
	</script>
</body>
</html>

数组的方法concat

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>
		// concat：合并数组

		// 参数：被合并的数组
		// 返回值：
		// 不改变原数组

		var arr1 = ['关羽','刘备'];
		var arr2 = ['悟空','唐僧'];
		var arr3 = ['宋江','林冲'];

		var arr4 = arr1.concat(arr2);

		console.log(arr1)
		console.log(arr2)
		console.log(arr3)
		console.log(arr4)

		var arr5 = arr1.concat(arr3,arr2);
		console.log(arr5)
	</script>
</body>
</html>

清空数组的方式

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<script>

		var arr1 = ['关羽', '刘备', '宋江', '林冲', '悟空', '唐僧'];

		// 1
		// arr1.length = 0;

		// 2
		// arr1 = [];

		// 3
		arr1.splice(0,arr1.length);
		console.log(arr1);
		
	</script>
</body>
</html>

冒泡排序

var a=[32,12,24];
//外层控制比较几趟
for(var i=0;i<a.length-1;i++){
	//内层控制每一趟里比几次
	for(var j=0;j<a.length-1-i;j++){
		if(a[j]>a[j+1]){
			[a[j],a[j+1]]=[a[j+1],a[j]];
		}
	}
}

选择排序

var a=[32,12,24];
//拿第一个和后面的依次比较
for(var i=0;i<a.length-1;i++){
	for(var j=i+1;j<a.length;j++){
		if(a[i]>a[j]){
			[a[i],a[j]]=[a[j],a[i]];
		}
	}
}

数组去重

//法一:双重for循环
var a=[2,4,5,2,6,2];
for(var i=0;i<a.length;i++){
	for(var j=i+1;j<a.length;j++){
		if(a[i]==a[j]){
			a.splice(j,1);
			j--
		}
	}
}

//法二:通过includes()
var newArr=[];
for(var i=0;i<a.length;i++){
	if(!newArr.includes(a[i])){
		newArr.push(a[i]);
	}
}
console.log(newArr);
本文含有隐藏内容，请 开通VIP 后查看

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布