JavaScript对象创建与操作-优快云博客

2019独角兽企业重金招聘Python工程师标准>>>

对象

字符串对象

创建字符串对象方式

<script>
	var str="test"
	console.log(typeof str)
</script>

string

或

<script>
	var str=new String("test")
	console.log(typeof str)
</script>

object

数组对象

创建字符串对象方式

<script>
	var array=[1,2,3]
	console.log(typeof array)
</script>

object

或

<script>
	var array=new Array(1,2,3);
	console.log(typeof array)
</script>

object

创建二维数组(数组嵌套)

<script>
	var test=new Array(3);				//创建的三个空数组
	for (var i=0;i<=2;i++){				//for循环方式添加子数组
		test[i]=new Array(2);			//每个数组元素中添加的子元素有两个数组
	}
	test[0][0]="星期一";					//添加主数组第一个元素的第一个子数组元素
	test[0][1]="Monday";				//添加主数组第一个元素的第二个子数组元素
	test[1][0]="星期二";					//添加主数组第二个元素的第一个子数组元素
	test[1][1]="Tuesday";				//添加主数组第二个元素的第二个子数组元素
	test[2][0]="星期三";					//添加主数组第三个元素的第一个子数组元素
	test[2][1]="Wednesday";				//添加主数组第三个元素的第二个子数组元素
	console.log(test);					//console.log方式打印数组
	document.write(test);				//document.write方式打印数组
</script>

document.write显示

星期一,Monday,星期二,Tuesday,星期三,Wednesday

console.log显示

(3) [Array(2), Array(2), Array(2)]     //三个主元素，每个元素里包含两个子元素
0:(2) ["星期一", "Monday"]
1:(2) ["星期二", "Tuesday"]
2:(2) ["星期三", "Wednesday"]
length:3
__proto__:Array(0)

函数对象

arguments()

<script>
	function test(){
		console.log("接收到的数值：",arguments);
		console.log("接收到的长度：",arguments.length);
	}
test(1,2,3,4,5);
</script>

接收到的数值： Arguments(5) [1, 2, 3, 4, 5, callee: ƒ, Symbol(Symbol.iterator): ƒ]
js_lesson.html:156 接收到的长度： 5

匿名函数

<script>
(function(arg){alert(arg)})("这是个测试函数")
//(function(参数){函数体})(执行调用参数)
</script>

windows对象

window对象用的时候操作系统识别可以省略前缀，如：

window.alert()可以直接写成alert()

window.alert()

显示带有一段消息和确认按钮的警示框

<script>
	window.alert("警告！");
</script>

window.configrm()

显示带有一段消息以及确认和取消按钮的对话框

<script>
	if (window.confirm("继续还是退出？"))
		{
		alert("继续后的代码！");
		}
	else
		{
		alert("你已经取消！");
		}
</script>

window.prompt()

显示可以提示用户输入的对话框

<script>
	var user = window.prompt("用户名：");
	var passwd = window.prompt("密码：");
	document.write("您输入的用户名：",user,"密码：",passwd);
</script>

用户名输入：abc密码输入：123后

您输入的用户名：abc密码：123

window.open()

打开一个新的浏览器窗口或查找一个已命名的窗口

<script>
	window.open("https://www.centos.org");
</script>

windos.close()

关闭浏览器窗口

window.setTimeout()

按照指定的时间(以毫秒计)调用函数或计算表达式，只调用一次

<script>
	function time()
	// 定义时间函数
	{
		document.write(new Date());   
		// 显示时间
	}
	window.setTimeout("time()",3000);
	// 指定的时间调用函数
</script>

window.setInterval()

按照指定的周期(以毫秒计)循环调用函数或计算表达式

每3000毫秒弹出框显示"Hell world"

<script>
	setInterval('alert("Hello world");', 3000);
</script>

在文本框显示当前时间

<input id="time" size="50" />
<!-- 定义文本输入框 -->

<script>
	// 定义时间函数
	function time()
	  {
	  	var time=new Date();
	  	// 定义当前时间
	  	document.getElementById("time").value=time;
	  	// 获取指定ID对象的引用，定义文本输入框的值为当前时间
	  }

	window.setInterval("time()",50);
	// 50毫秒执行一次时间函数time()
</script>

window.clearInterval()

取消由setInterval()设置的事件

<input id="time" size="50" />
<!-- 定义文本输入框 -->
<button onclick="window.clearInterval(Control)">点击停止</button>
<!-- 取消由setInterval()设置的事件，终止时间函数-->

<script>
	// 定义时间函数
	function time()
	  {
	  	var time=new Date();
	  	// 定义当前时间
	  	document.getElementById("time").value=time;
	  	// 获取指定ID对象的引用，定义文本输入框的值为当前时间
	  }

	var Control = window.setInterval("time()",50);
	// 定义执行时间函数time()，便于控制
</script>

history对象

window对象的子对象

包含用户在浏览器窗口中访问的对象

history方法	释义
back()	加载history列表中的前一个URL
forward()	加载history列表中的下一个URL
go()	加载history列表中的某个具体页面

前进

<a href="test2.html">测试超链接</a>
<button onclick="goForward()">前进</button>

<script>
function goForward()
  {
  window.history.forward();
  }
</script>

后退

<button onclick="back()">返回</button>

<script>
function back()
  {
  	window.history.back();
  }
</script>

go()前进

<a href="test2.html">测试超链接</a>
<button onclick="goForward()">前进</button>

<script>
function goForward()
  {
  window.history.go(1);
  }
</script>

go()后退

<button onclick="back()">返回</button>

<script>
function back()
  {
  	window.history.go(-1);
  }
</script>

Location对象

Location对象包含有关当前URL的信息

Location对象是window对象的子对象，可通过window.location来访问

Location方法	释义
location.assign(URL)	加载新页面
location.reload()	刷新页面
location.replace(newURL)	用新页面替代加载页面

综合示例

<button onclick="e()">Centos官网-点击跳转新页面</button>
<button onclick="f()">刷新页面</button>
<button onclick="g()">Centos官网-点击覆盖当前页面</button>

<script>
	function e()
		{
		window.location.assign("http://www.centos.org");	//可以用浏览器或后台按钮
		}
	function f()
		{
		window.location.reload();
		}
	function g()
		{
		window.location.replace("http://www.centos.org");	//直接覆盖当前页面，不能后退
		}
</script>

转载于:https://my.oschina.net/zhaojunhui/blog/1840474