web前端第十五之数组

最新推荐文章于 2024-02-01 08:15:00 发布
最新推荐文章于 2024-02-01 08:15:00 发布
阅读量272 收藏 1
点赞数
分类专栏： web前端开发复习，从头再来 文章标签： javascript html jquery css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39664934/article/details/108620836
版权

                                                     数组

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>数组</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
			}
	</style>
	
</head>
<body>
	<div id="box">
		
	</div>
	<script>
	//数组 属于引用类型，属于对象数据类型
	//什么是数组
	//就是用来存放数据结构的集合
	//集合有长度，length
	//集合有索引或者下标，数组的第一个元素用arr[0]
	// 1.使用new关键字
	var  arr=new Array(); //创建一个空数组
	var arr1=new Array("red","yellow","blue");
	// 创建一个有数据的数组，每一个数据可以称为数组的元素
	console.log(arr1);
	var oBox=document.getElementById('box');
	oBox.style.backgroundColor=arr1[0];
	// 数组有长度
	var arr2=new Array(10); //创建一个包含十个元素的数组，每项元素都是空的
	console.log(arr2);

	// 2.可以省略new关键字
	var arr3=Array();  //空数组
	arr3[0]="red";
	arr3[1]="blue";

	// 3.用自变量的形式定义数组方式
	var arr4=["red","blue"];
	console.log(arr4.length);

	for (var i = 0; i < 4; i++) {
		oBox.innerHTML+="<span>"+i+"</span>";
	}
	var oSpan=document.getElementsByTagName('span')
	for(var j=0;j<oSpan.length;j++){
		oSpan[j].style.color=arr4[j];
	}
	</script>
</body>
</html>

                                           中等计算器

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		.box input:nth-child(2n+1){
			width: 100px;
		}
		.pox input{
			width: 50px;
			height: 50px;
			margin: 12px;
		}
	</style>
</head>
<body>
	<div class="box">
		<input type="text">
		<input type="button" value="+">
		<input type="text">
		<input type="button" value="=">
		<input type="text">
	</div>
	<div class="pox">
		<input type="button" value="+">
		<input type="button" value="-">
		<input type="button" value="*">
		<input type="button" value="/">
		<input type="button" value="%">
	</div>
	<script type="text/javascript">
		// 先获取标签
		var oInput = document.getElementsByTagName('input');

		oInput[5].onclick=function(){
			oInput[1].value=oInput[5].value;
		}
		oInput[6].onclick=function(){
			oInput[1].value=oInput[6].value;
		}
		oInput[7].onclick=function(){
			oInput[1].value=oInput[7].value;
		}
		oInput[8].onclick=function(){
			oInput[1].value=oInput[8].value;
		}
		oInput[9].onclick=function(){
			oInput[1].value=oInput[9].value;
		}
		oInput[3].onclick=function(){

			if(oInput[1].value=="+"){

				oInput[4].value=Number(oInput[0].value)+Number(oInput[2].value);

			}else if(oInput[1].value=="-"){

				oInput[4].value=oInput[0].value-oInput[2].value;

			}else if(oInput[1].value=="*"){

				oInput[4].value=oInput[0].value*oInput[2].value;

			}else if(oInput[1].value=="/"){

				oInput[4].value=oInput[0].value/oInput[2].value;

			}else{

				oInput[4].value=oInput[0].value%oInput[2].value;
				
			}
		}
	</script>
</body>
</html>

                                                   for循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 需求：求出1-100之间偶数的和
		// 2、4、6、8、10等等

		// for四部曲
		// 1、初始化变量  var i=0
		// 2、条件判断  
		// 3、执行大括号中所有代码
		// 4、条件更新

		var num = 0;    //先定义一个变量储存偶数的和
		for(var i=0;i<=100;i++){

			if(i%2==0){
				num=num+i;
			}

		}
		console.log(num);
	</script>
</body>
</html>

                                               逢七过游戏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		// 需求：求出7的倍数打印出来
		
		for(var i=1;i<=100;i++){
			if(i%7==0 || i%10==7){
				console.log(i);
			}
		}

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

                                             双重for循环

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/*  需求
		⭐⭐⭐⭐⭐
		⭐⭐⭐⭐⭐
		⭐⭐⭐⭐⭐
		⭐⭐⭐⭐⭐
		⭐⭐⭐⭐⭐
		*/
		for(var i=1;i<=5;i++){     //大循环
			for(var j=1;j<=5;j++){     //小循环
				document.write("⭐");
			}
			document.write("<br>")
		}
		// 执行步骤：
		/*
		第一次大循环
		i=1     i<=5条件成立   执行小循环
				j=1   j<=5条件成立    document.write("⭐")    j++
				j=2   j<=5条件成立    document.write("⭐")    j++
				j=3   j<=5条件成立    document.write("⭐")    j++
				j=4   j<=5条件成立    document.write("⭐")    j++
				j=5   j<=5条件成立    document.write("⭐")    j++
				j=6   j<=5条件不成立    小循环结束
				document.write("<br>")   添加一个换行   i++
		i=2     i<=5条件成立   执行小循环
				j=1   j<=5条件成立    document.write("⭐")    j++
				j=2   j<=5条件成立    document.write("⭐")    j++
				j=3   j<=5条件成立    document.write("⭐")    j++
				j=4   j<=5条件成立    document.write("⭐")    j++
				j=5   j<=5条件成立    document.write("⭐")    j++
				j=6   j<=5条件不成立    小循环结束
				document.write("<br>")   添加一个换行   i++
		i=3     i<=5条件成立   执行小循环
				j=1   j<=5条件成立    document.write("⭐")    j++
				j=2   j<=5条件成立    document.write("⭐")    j++
				j=3   j<=5条件成立    document.write("⭐")    j++
				j=4   j<=5条件成立    document.write("⭐")    j++
				j=5   j<=5条件成立    document.write("⭐")    j++
				j=6   j<=5条件不成立    小循环结束
				document.write("<br>")   添加一个换行   i++
		i=4		i<=5条件成立   执行小循环
				j=1   j<=5条件成立    document.write("⭐")    j++
				j=2   j<=5条件成立    document.write("⭐")    j++
				j=3   j<=5条件成立    document.write("⭐")    j++
				j=4   j<=5条件成立    document.write("⭐")    j++
				j=5   j<=5条件成立    document.write("⭐")    j++
				j=6   j<=5条件不成立    小循环结束
				document.write("<br>")   添加一个换行   i++
		i=5		i<=5条件成立   执行小循环
				j=1   j<=5条件成立    document.write("⭐")    j++
				j=2   j<=5条件成立    document.write("⭐")    j++
				j=3   j<=5条件成立    document.write("⭐")    j++
				j=4   j<=5条件成立    document.write("⭐")    j++
				j=5   j<=5条件成立    document.write("⭐")    j++
				j=6   j<=5条件不成立    小循环结束
				document.write("<br>")   添加一个换行   i++
		i=6     i<=6条件不成立    大循环结束
		*/

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

                                               打印星星

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		/*  需求
		⭐⭐⭐⭐⭐
		⭐⭐⭐⭐
		⭐⭐⭐
		⭐⭐
		⭐
		*/
		for(var i=0;i<5;i++){

			for(var j=0;j<5-i;j++){
				document.write('⭐');
			}
			document.write('<br>');
		}
		/*  需求
		⭐
		⭐⭐
		⭐⭐⭐
		⭐⭐⭐⭐
		⭐⭐⭐⭐⭐
		*/
		for(var i=1;i<=5;i++){
			for(var j=0;j<i;j++){
				document.write('⭐');
			}
			document.write('<br>');
		}
	</script>
</body>
</html>

                                                    Math对象

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<script type="text/javascript">
		
		// Math 数学函数
		// Math.min()    找出一组数组中的最小值
		// Math.max()	 找出一组数组中的最大值
		// Math.floor()  向下取整
		// Math.ceil()	 向上取整
		// Math.round()  四舍五入
		// Math.random() 返回介于0和1之间的随机数，不包括0和1

		console.log(Math.min(1,3,2,6,33,22,11))
		console.log(Math.max(1,3,2,6,33,22,11))
		console.log(Math.floor(1.9))
		console.log(Math.floor(-1.9))
		console.log(Math.ceil(1.1))
		console.log(Math.ceil(-1.1))
		console.log(Math.round(1.5))
		
		// 需求：5-10
		// 公式：Math.floor(Math.random() * (上限 - 下限 + 1)) + 下限;
		console.log(Math.floor(Math.random()*(10-5+1))+5)
		
	</script>
</body>
</html>

                                      访问和修改数组元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	<script type="text/javascript">
		var arr1 = ['张三','李四',18,true];

		// 访问数组中的元素
		console.log(arr1[0])
		console.log(arr1[4-2])    //访问索引为2的元素  18

		// 修改数组中的元素
		arr1[1] = '男';			 //["张三", "男", 18, true]
		arr1[1+2] = false;       //["张三", "男", 18, false]

		console.log(arr1)


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

                                     添加和删除数组元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		#box{
			width: 200px;
			height: 200px;
		}
	</style>
</head>
<body>
	<div id="box">
		
	</div>
	<script type="text/javascript">
		var heroes = [];

		// 通过索引去添加
		heroes[0] = '孙悟空';
		heroes[1] = '哪吒';

		//使用 push() 方法在数组的末尾添加一个或多个元素
		heroes.push('曹操');            //在数组末尾添加一个元素
		heroes.push('刘备','孙策');      //在数组末尾添加多个元素

		//在数组末尾添加一个元素给数组的长度索引赋值是一样的
		heroes[heroes.length] = '韩信';

		// 使用 unshift() 方法在数组的开始添加一个或多个元素
		heroes.unshift('项羽');      
		heroes.unshift('刘邦','张良','萧何','马超');      

		// 通过改变数组长度去删除元素
		// heroes.length = 5;

		// 使用pop()方法在数组的结尾弹出一个元素
		heroes.pop();
		// 使用shift()方法在数组的开头弹出一个元素
		heroes.shift();

		// 使用 splice(开始删除的下标,删除的数量) 方法去删除数组中的某一段元素
		// 开始删除的下标，包括自身
		// heroes.splice(4,2)

		// splice()方法还可以从截取的位置去添加一个或多个数组元素
		heroes.splice(4,2,'你','我','他')
		console.log(heroes)

		// 截取的数组可以通过变量保存截取掉的数组，返回一个新的数组
		// var arr1=heroes.splice(4,2,'你','我','他')
		// console.log(arr1)
	</script>
</body>
</html>

 

思丰百年
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
web 数组
xuxu_77的博客
09-05 121
冒泡排序思路
web前端——笔记5：一维数组
weixin_44501506的博客
01-26 507
了解什么是数组？ 数组（array）,就是一种常用的保存批量数据的数据结构 多个元素组合的集合——在一个变量名中存储多个值。 JS数组中元素的数据类型可以相同，也可以不同 元素按照线性顺序排列，所有线性书序指除了第一个元素外，每一个元素都有唯一的前驱元素；除最后一个元素外，每一个元素都有唯一的后继元素（一个跟一个） 可以通过元素所在位置的顺序号（下标）做标识来访问每个元素（下标从0开始，最大到元素...
Web前端开发笔记——第四章 JavaScript程序设计 第五节 数组
小宇y的博客
12-22 1954
目录一、数组的创建（一）Array()构造函数（二）字面量方法二、数组元素的读写和遍历三、添加和删除数组元素（一）添加数组元素（二）删除数组元素（三）splice()方法四、二维数组及多维数组五、数组的搜索和排序（一）数组的排序（二）数组的搜索六、数组的截取和合并 一、数组的创建 JavaScript中数组和其它语言不一样，它的一个数组中可以存放多种类型的元素，即数组每一项可以是任何一种数据类型的数据，且数组的大小是可以动态调整的，即根据数据的增加而自动增长以容纳更多的数据。 有两种方式可以创建数组，分别是
Web前端----JavaScript数组的学习
软件测试的坑，让我来踩吧
07-28 284
随着计算机的不断发展，Web前端这门技术也越来越重要，很多人都开启了前端的学习，本篇文章就是简单的写了一下JavaScript的语法，用来对JavaScript进行基础的学习。
Web前端——Javascript复习（数组）
zxy9602的博客
04-22 505
1、数组 （1）程序=数据结构+算法 一个好的数据结构，可极大提高程序的执行效率； 相关的多个数据应集中存储、管理； 分类和排序 （2）数组概念 一组连续的变量组成的集合，批量管理多个数据。 ··创建 2-1：var 变量名 = []; 2-2：var 变量名 = [值1,值2,值3,值4]; var week = ['日','一','二','三','四','五','六'];
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十：正则表达式
01-20
JavaScript是Web前端开发中不可或缺的一部分，它为网页赋予了动态功能和交互性。在JavaScript中，正则表达式（Regular Expression）是一种强大的文本处理工具，用于执行模式匹配和字符串操作。本篇教程将深入探讨...
最常见web前端开发面试题（三）
11-01
【CSS基础】 1. 两个`div`元素垂直距离计算：...以上内容涵盖了Web前端开发面试中常见的CSS和JavaScript知识，包括基础概念、实践技巧以及一些进阶问题。了解这些知识点对于提升前端开发技能和面试准备都是非常有益的。
web前端重点业务难点
10-17
Web 前端业务难点总结 Web 前端开发中存在一些业务逻辑难点，以下是对这些难点的总结： 1. HTML 是超文本标记语言，由浏览器解释运行。了解 HTML 实体的使用规则，例如 `>` `<` ` ` `&` 等。 2. ...
知乎大神萧井陌web前端课程
10-24
第15章 log的要素、git和github、js的一些高级内容 bind apply call、前端CSS框架Bootstrap和Pure 第16章 JS的历史现状和未来、什么是ES6有什么新东西、CSS最基础的套路 第17章 前端工程师 第1章 网址组成、端口、...
前端JavaScript篇之实现一个将多维数组展示的方法有哪些，分别是？
最新发布
星辰迷上大海的博客
02-01 1003
递归展开成一维数组： 创建一个递归函数，负责将多维数组展开成一维数组。 遍历数组元素，对于每个元素，如果是数组则递归展开，否则添加到结果数组中。
Java 浅谈数组(Array)和列表(ArrayList)的区别 介绍Arrays常用方法
热门推荐
senxu_的博客
08-11 1万+
Java 浅谈数组(Array)和列表(ArrayList)的区别 介绍Arrays常用方法
前端JS接收二维数组(列表)的解决办法
weixin_43819847的博客
03-24 2755
今天使用一个课程表的js工具，需要传一个二维数组的参数，因为要动态生成，所以要从后端接收一个二维数组(列表)，但如果直接用EL表达式获取会报错，该EL表达式是会报错；加上引号则会被解析成一长串字符串，二维数组的结构已被破坏。 在这里插入图片描述 在这里插入图片描述 解决办法： 方法一 使用JSON,转化为JSON字符串传给前端 ①先导入fastjson依赖(或下载jar包) <depe...
前端比较常用的几种数组处理方法
qq_47629187的博客
05-12 304
1.单个数组去重 代码如下： var a=[1,1,2,3,4,4,5,6,7,8,9,1] const res=new Map();//这个是必须要写的 //开始去重 a=a.filter((a)=>!res.has(a)&&res.set(a,1)); 2.两个数组去重 代码如下： var a=[1,2,3,4] var b=[1,2,3,4.5,6,] //建两个临时数组 let aa=[ ] let bb=[ ] //开始循环拿 for(let .
原生js实现ajax和将数组以列表形式显示出来
u011286208的专栏
07-31 5706
function go(arrs){ //将一个字符串解析后放入ul标签中 var node=document.getElementById('list').firstChild; node.appendData('\n'); for(var j=0;j<arrs.length;j++){ node.appendData(''+arrs[j]+''); } }
通用vue组件化展示列表数据
qq_55928824的博客
01-08 7978
通用vue组件化展示列表数据
Web前端常用操作数组的方法
小柠檬爱编程
03-22 3105
一.shift()方法 把数组的第一个元素删除,返回删除元素的值,(改变原数组.) 二.unshift() 方法 向数组的开头添加一个或多个元素，返回新数组的长度,(改变原数组.) 三.concat() 方法 concat() 方法用于连接两个或多个数组。 该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本 例子 1: 在本例中，我们将把 concat() 中的参数连接到数组 a 中： 例子 2: 在本例中，我们创建了两个数组，然后使用 concat() 把它们连接起来： 例子 3: 在本
web第七课：列表
YY的博客
08-23 1527
有序标签、无序标签、自定义标签
计算机Web前端学习及面试资料
03-15
在Web前端开发中，JavaScript是最核心的语言之一，对于JS的掌握程度直接影响到开发效率和项目质量。以下是对JavaScript中部分关键知识点的详细说明： 1. **数组方法**： - `push()`：在数组末尾添加元素，返回新的...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

思丰百年

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值