JavaScript基础语法

最新推荐文章于 2025-12-27 19:25:02 发布

原创最新推荐文章于 2025-12-27 19:25:02 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #js #ViewUI

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文介绍JavaScript中对象和数组的基本用法，展示了如何利用这两种数据结构实现计算两点间距离的功能。通过具体示例，读者可以了解如何声明和操作对象及数组，并掌握它们之间的相互包含关系。

JavaScript中两个重要的数据类型是对象和数组(JavaScript权威指南)。

使用{}表示对象(JSON)，使用[]表示数组，通过"."或"[]"访问对象属性和数组内容。对象和数组之间可以相互包含。

数组属于特殊的对象，”[]“与”{}“最大的区别是"[]" 声明的是带编号的有序集合，"{}"声明的是不带编号的无序集合。

以一个计算两点间距离的demo为例：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> 测试Demo </TITLE>
  <script>
		function getDistance(){
			var points = []
			var a_x = document.getElementById('a_x').value;
			var a_y = document.getElementById('a_y').value;
			var b_x = document.getElementById('b_x').value;
			var b_y = document.getElementById('b_y').value;
			points[0] = {x : (a_x == null ? 0 : a_x), y : a_y == null ? 0 : a_y};
                        //数组的元素是对象，对象的属性可以是数组/对象/方法...
			points[1] = {x : (b_x == null ? 0 : b_x), y : b_y == null ? 0 : b_y};
			points.dist = function(){
                        //可以使用"."的方式添加或访问属性
				var p1 = this[0];
                                //数组内可使用"this"关键字
				var p2 = this[1];
				var a = p1.x - p2.x;
				var b = p1.y - p2. y;
				return Math.sqrt(a * a + b * b);
			}
			alert('点A与点B之间的距离为：' + points.dist());
		}
  </script>
 </HEAD>

 <BODY>
	<center>
		<span>点A: x值</span><input type="text" id="a_x" name="a_x"/><span>,y值为</span><input type="text" id="a_y" name="a_y"/><br>
		<span>点B: x值</span><input type="text" id="b_x" name="b_x"/><span>,y值为</span><input type="text" id="b_y" name="b_y"/><br>
		<input type="button" value="计算两点间距离" onClick="getDistance();"/><br/>
	</center>
 </BODY>
</HTML>