首页 > 编程语言 >【前端】JavaScript入门及实战71-75

【前端】JavaScript入门及实战71-75

时间:2024-07-22 11:25:19浏览次数:13  
标签:arr 元素 71 JavaScript Person 75 遍历 数组 var

文章目录

71 数组

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">

	// 使用字面量来创建数组
	// 语法:[]
	var arr = [];
	
	// 使用字面量创建数组时,可以在创建时就指定数组中的元素
	var arr = [1, 2, 3, 4, 5, 10];
	
	// 使用构造函数创建数组时,也可以同时添加元素,将要添加的元素作为构造函数的参数传递
	// 元素之间使用,隔开
	var arr2 = new Array(10, 20, 30);
	
	// 创建一个数组,数组中只有一个元素10
	arr = [10];
	
	// 创建一个长度为10的数组
	arr2 = new Array(10);
	
	// 数组中的元素可以是任意的数据类型
	arr = ["hello", 1, true, null, undefined];
	
	// 也可以是对象
	var obj = {name: "孙悟空"};
	arr[arr.length] = obj;
	arr = [{name: "孙悟空"}, {name: "猪八戒"}, {name: "沙和尚"}]
	
	// 也可以是一个函数
	arr = [function(){alert(1)}, function(){alert(2)}];
	arr[0]; // alert(1)
	
	// 数组中也可以放数组,如下这种数组称为二维数组
	arr = [[1, 2, 3], [4, 5, 6], [7, 8, 9]];
	arr[0]; // 1, 2, 3	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

72 数组的方法

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">

	// 创建一个数组
	var arr = ["孙悟空", "猪八戒", "沙和尚"];
	
	/*
		push()
		该方法可以向数组的末尾添加一个或多个元素,并返回数组的新的长度
		可以将要添加的元素作为方法的参数传递,这样这些元素将会自动添加到数组的末尾
		该方法会将数组新的长度作为返回值返回
	*/
	
	var res = arr.push("唐三藏", "白龙马");
	console.log(res); // 6
	
	/*
		pop()
		该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
	*/
	
	res = arr.pop();
	console.log(res); // 白龙马
	
	/*
		unshift()
		向数组开头添加一个或多个元素,并返回新的数组长度
		向前面插入元素以后,其他的元素会依次调整
	*/
	
	arr.unshift("牛魔王", "二郎神");
	
	/*
		shift()
		可以删除数组的第一个元素,并将被删除的元素作为返回值返回
	*/
	
	res = arr.shift();
</script>
<style>
</style>
</head>
<body>
</body>
</html>

73 数组的遍历

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">

	// 创建一个数组
	var arr = ["孙悟空", "猪八戒", "沙和尚"];
	
	// 所谓的遍历数组,就是将数组中所有的元素都取出来	
	
	for(var i = 0; i < arr.length; i++){
		console.log(arr[i]);
	}
</script>
<style>
</style>
</head>
<body>
</body>
</html>

74 数组练习

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	function Person(name, age){
		this.name = name;
		this.age = age;
	}
	
	Person.prototype.toString = function(){
		return "name = " + this.name + ",age = " + this.age;
	};	
	
	//创建一个Person实例
	var per = new Person("孙悟空", 18);
	var per1 = new Person("猪八戒", 28);
	var per2 = new Person("红孩儿", 8);
	var per3 = new Person("白骨精", 18);
	var per4 = new Person("二郎神", 38);

	/*
		将这些person对象放入到一个数组中
	*/
	var perArr = [per, per2, per3, per4, per5];
	
	/*
		创建一个函数,可以将perArr中的满18岁的Person提取出来,
		然后封装到一个新的数组中并返回
		arr:形参,要提取信息的数组
	*/
	function getAdult(arr){
		// 创建一个新数组
		var newArr = [];
		
		// 遍历arr,获取arr中的Person对象
		for(var i = 0; i < arr.length; i++){
			// 判断Person对象的age是否大于等于18
			// 如果大于等于18,则将这个对象添加到newArr中
			var p = arr[i];
			if(p.age >= 18){
				newArr.push(p);
			}
		}
		
		// 将新数组返回
		return newArr;
	}
	
	var res = getAdult(perArr);
	document.write(res);	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

75 forEach

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset = "utf-8">
<script type="text/javascript">
	/*
		一般我们都是使用for循环去遍历数组
		JS中还为我们提供了一个方法,用来遍历数组
		forEach()
		这个方法只支持IE8以上浏览器,
		IE8及以下的浏览器均不支持该方法,所以如果需要兼容IE8则不要使用forEach,
		还是使用for循环来遍历
	*/
	
	//创建一个数组
	var arr = ["孙悟空", "猪八戒", "沙和尚", "白龙马", "唐三藏"];	
	
	/*
		forEach()方法需要一个函数作为参数
		像这种函数,由我们创建,但是不由我们调用的,称为回调函数。
		数组中有几个元素函数就会执行几次,每次执行时,浏览器会将遍历到的元素以实参的形式传递进来,我们可以定义形参,来读取这些内容。
		浏览器会在回调函数中传递三个参数
		
		第一个参数,就是当前正在遍历的元素,
		第二个参数,就是当前正在遍历的元素的索引
		第三个参数,就是正在遍历的数组
	*/
	arr.forEach(function(a){
		console.log("a = " + a);
	});
	
	arr.forEach(function(a, b, c, d){
		console.log("d = " + d); // undefined
	});
	
	arr.forEach(function(value, index, obj){
		console.log(obj == arr); // true
	});	
</script>
<style>
</style>
</head>
<body>
</body>
</html>

标签:arr,元素,71,JavaScript,Person,75,遍历,数组,var
From: https://blog.csdn.net/weixin_45980065/article/details/140604524

相关文章

  • Metasploit Pro 4.22.2-2024071501 (Linux, Windows) - 专业渗透测试框架
    MetasploitPro4.22.2-2024071501(Linux,Windows)-专业渗透测试框架Rapid7Penetrationtesting,releaseJul15,2024请访问原文链接:https://sysin.org/blog/metasploit-pro-4/,查看最新版。原创作品,转载请保留出处。作者主页:sysin.org世界上最广泛使用的渗透测试框架......
  • 坐牢第十三天 20240719
    一.笔记一.链表的引入1.1总结顺序表的优缺点1>优点:能够直接通过下标进行定位元素,访问效率高,对元素进行查找和修改比较快2>不足:插入和删除元素需要移动大量的元素,效率较低3>缺点:存储数据元素有上限,当达到MAX后,就不能再添加元素了1.2链表的概念1>链式存储的线性表叫......
  • javascript中常规操作节点的方法
    JavaScript常用操作DOM节点的方法包括获取节点、创建节点、添加节点、删除节点、替换节点等。1.获取节点(1)通过ID获取使用document.getElementById(“元素ID”)方法,通过元素的ID获取单个元素。这是最常用的方法之一,因为ID在页面中是唯一的,可以直接定位到具体元素。<d......
  • 【前端】JavaScript入门及实战21-25
    文章目录21关系运算符22编码23相等运算符24条件运算符25运算符优先级21关系运算符<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"><scripttype="text/javascript"> /* 通过关系运算符可以比较两个值之间的大小关系, 如果关......
  • 【前端】JavaScript入门及实战51-55
    文章目录51函数52函数的参数53返回值54练习55return51函数<!DOCTYPEhtml><html><head><title></title><metacharset="utf-8"><scripttype="text/javascript"> /* 函数: 1.函数也是一个对象 2.函数中可以封装一些功能......
  • (20240719)无机非金属材料工学(2) 水泥
    一、胶凝材料(复习)1.胶凝材料:通常把在一定条件下能产生凝固作用,同时能将块状物料、颗粒状物料或纤维状物料粘结成整体,并最终形成具有一定机械抵抗能力的硬化体的材料,称为胶凝材料。(分类)2.以无机物为主要成分的称为无机胶凝材料,如:水泥、石灰、石膏等。3.以有机物为主的称......
  • 875. 爱吃香蕉的珂珂
    传送锚点:.-力扣(LeetCode)珂珂喜欢吃香蕉。这里有n堆香蕉,第i堆中有piles[i]根香蕉。警卫已经离开了,将在h小时后回来。珂珂可以决定她吃香蕉的速度k(单位:根/小时)。每个小时,她将会选择一堆香蕉,从中吃掉k根。如果这堆香蕉少于k根,她将吃掉这堆的所有香蕉,然后这一小时......
  • 【JavaScript】王者荣耀英雄卡牌动画切换效果
    动画呈现  代码详解<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"/><metaname="viewport"content="width=device-width,initial-scale=1.0"/><title>王者英雄卡牌......
  • 【C++BFS 回溯】756. 金字塔转换矩阵
    本文涉及知识点C++BFS算法C++回溯LeetCode756.金字塔转换矩阵你正在把积木堆成金字塔。每个块都有一个颜色,用一个字母表示。每一行的块比它下面的行少一个块,并且居中。为了使金字塔美观,只有特定的三角形图案是允许的。一个三角形的图案由两个块和叠在上面的单......
  • JavaScript - jSignature移动端手写签名
    <html><head><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script><scriptsrc="https://cdn.bootcdn.net/ajax/libs/jSignature/2.1.3/jSignature.min.js"></script>......