JavaScript编程用法——JavaScript语法

判断符号===

JavaScript的判断符号“=”既比较类型也比较数值,然而“”只比较值,在不同类型的比较中“==”会将数值转换成同一类型进行比较。

源码

function js_var_cmp(){

	console.log("cmp 1 == '1' is " +(1 == '1'));
	console.log("cmp 1 === '1' is " +(1 === '1'));

	console.log("cmp 1 == true is " +(1 == true));
	console.log("cmp 1 === true is " +(1 === true));

	console.log("cmp NaN == NaN is " +(NaN == NaN));
	console.log("cmp NaN === NaN is " +(NaN === NaN));

	console.log("cmp null == undefined is " +(null == undefined));
	console.log("cmp null === undefined is " +(null === undefined));
}

执行结果

在这里插入图片描述

数值的特殊变量NaN在任何时候都与其他值不等,包括自己。

变量

变量定义

js为解释性语言,变量类型不区分int、float甚至字符串,类等类型。定义类型都可以通过关键字var定义,具体是确定初始化的是相应的类型,解释器就会赋予该相应的类型。

源码

function js_var_test(){ 
	
	var strtest = "string ";
	var chartest = ' A ';
	var istest = 3;
	var fpai = 3.14159;
	var strout = chartest + 'top ' + strtest  + istest + " pai = " + fpai;

	document.write(fpai + "<br/>");	
	document.write(strout);
}

执行结果
在这里插入图片描述

"
"在document.write中是换行。

可以看到,字符串定义用单引号’ '和双引号" "都可以,但为保持代码的完整性,字符串和字符的赋值遵循C/C++的用法。

获取变量定义符号:typeof

调用该运算符,会将变量的信息当做字符串返回,用于判断类型值。修饰可以添加括号也可以省略。
返回值类型:string,number,boolean,object,function,undefined

源码

function js_value_typeof(){ 
	
	var strtest = "string";
	var fpai = 3.14159;
	var istrue = true;
	var arraytest = ["zx",6.626E-34,'B',8];
	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		sinum: 2.71828,
		
		functest: function stfunc(){ return true;}
	};
	var funcTest = function(){
		return "function";
	}

	console.log(typeof strtest);
	console.log(typeof(fpai));
	console.log(typeof istrue);
	console.log(typeof arraytest);
	console.log(typeof(stTest));
	console.log(typeof(funcTest));
	console.log(typeof(undfinevalue));
	console.log(typeof(NaN));
	console.log(typeof(null));
	console.log(typeof(undefined));}

执行结果

在这里插入图片描述

对于数组、定义的混合对象以及null,都返回object字符串。未定义的变量返回undefined。但NaN返回number字符串。

数组定义

数组类型用var定义,初始化不用定义数组长度,根据赋值的数量自动定义数组长度,当然数组长度可以改变。

源码

function js_var_array(){
	var isarray = [6,3.14,"String"];
	
	console.log("array length is " + isarray.length);
	for(var i = 0; i < isarray.length; ++i){
		console.log(isarray[i]);
	}
	
	isarray[2] = "ZX Test";
	console.log(isarray[2]);
}

执行结果
在这里插入图片描述

数组长度:length

数组长度在函数中可变,可以增长也可以截断,增长未初始化的元素用undefined填充。但为保持代码的安全性与可控性,禁止在任何时候直接改变一个已经定义的数组长度,与C/C++保持一致,防止数组访问越界。但可以通过push、pop等增减元素。

源码

function js_var_array_length(){
	
	var isarray = [6,3.14,"String"];	
	isarray[6] = "ZX Test";
	
	console.log("*********************************");
	console.log("array length is " + isarray.length);
	for(var i = 0; i < isarray.length; ++i){
		console.log(isarray[i]);
	}
	
	console.log("*********************************");
	isarray.length = 10;
	console.log("array length is " + isarray.length);
	for(var i = 0; i < isarray.length; ++i){
		console.log(isarray[i]);
	}	
	
	console.log("*********************************");
	isarray.length = 2;
	console.log("array length is " + isarray.length);
	for(var i = 0; i < isarray.length; ++i){
		console.log(isarray[i]);
	}	
}

执行结果
在这里插入图片描述

数组搜索:indexOf

数组下标通过indexOf搜索数组,并返回该元素的数组下标,若没有搜索到,则返回-1,。
源码

function js_var_array_indexOf(){
	
	var isarray = [6,3.14,"String"];
	
	console.log(isarray[2] + " index is " + isarray.indexOf(isarray[2]));
	
	console.log("Failed index is " + isarray.indexOf("ZX test"));
}

执行结果
在这里插入图片描述

数组堆栈与出栈:push,pop

使用方法与C类似,对数组进行栈类型操作,操作后会改变数组长度。

源码

function js_var_array_push_pop(){
	
	var isarray = [6,3.14,"String"];

	console.log("*********************************");
	console.log("new array is " + isarray.push(1.41,"ZX Test"));
	console.log("array length is " + isarray.length);
	for(var i = 0; i < isarray.length; ++i){
		console.log(isarray[i]);
	}
	
	console.log("*********************************");
	var islength = isarray.length
	for(var i = 0; i < islength; ++i){
		console.log("new value = " + isarray.pop());
		
	}	
	
	console.log("array length is " + isarray.length);
}

执行结果
在这里插入图片描述

元素连接:join

将数组的元素通过join的连接符连接在一起返回的是一个字符串

源码

function js_var_array_sort_join(){
	
	var isarray = [12,5,46,28,34];
	
	console.log(isarray.join('-'));
}

执行结果
在这里插入图片描述

字符串定义

JavaScript中的字符和字符串可以用**单引号’ '、双引号" "和反引号**定义,但保持编码格式,按照C/C++的标准定义。和C/C++一样,JavaScript的字符串定义后是一个常量,不会被改变。

源码

function js_var_string(){
	
	var teststring = "test one\ntest two\ntest three\n";
	
	console.log(teststring);
	
	var newteststring = `new test one
	new test two
	new test three`;
	
	console.log(newteststring);
}

执行结果
在这里插入图片描述

字符串换行可以通过\n进行,也可以通过反引号结合回车定义字符串。但用反引号结合回车进行换行,换行后字符串需要顶格,否则tab和空格会直接体现在输出。

字符串连接

通过“+”号进行字符串和数字的混合拼接,也可以通过和Makefile语法那样,通过${name}代替,但要通过反引号字符串定义才有效。

源码

function js_var_string_join(){
	
	var strtest = "string ";
	var charname = ' A ';
	var isnum = 3;
	var fpai = 3.14159;
	
	var straddjoin = charname + "top " + strtest  + isnum + " pai = " + fpai;
	var strvarjoin = `${charname}top ${strtest}${isnum} pai = ${fpai}`;
	
	console.log(straddjoin + "\nlength is = " + straddjoin.length);
	console.log(strvarjoin + "\nlength is = " + straddjoin.length);
}

执行结果
在这里插入图片描述

大小写转换:toUpperCase、toLowerCase

toUpperCase:将字符串转换为大写
toLowerCase:将字符串转换为小写

源码

function js_var_string_Upper_Lower(){
	
	var teststring = "This is ZX Test";

	console.log(teststring.toUpperCase());
	console.log(teststring.toLowerCase());
}

执行结果
在这里插入图片描述

结构体定义

结构体定义与Linux驱动结构体赋值类似,结构体可以直接输出。

源码

function js_var_struct(){
	
	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		strclass: "One",
	};
	
	console.log(`index is ${stTest.siindex},name is ${stTest.strname},class is ${stTest.strclass}`);
	console.log(stTest);
}

执行结果
在这里插入图片描述

结构体操作

JavaScript的结构体支持动态操作,即可以在代码中改变结构体的结构组成。但和数组操作一样,为保持代码的安全性与可控性,禁止在任何时候直接改变一个已经定义的结构体结构。

源码

function js_var_struct_operation(){
	
	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		strclass: "One",
	};
	
	stTest.num = 12.34;		//添加一项属性
	delete stTest.strclass;		//删除一项属性
	
	console.log(stTest);
}

执行结果
在这里插入图片描述

日期

JavaScript通过函数获取当前时间。

在JavaScript获取的月份从0开始算起,因此月份要加1才显示正确。

源码

	var Times = new Date();

	//获取当前日期
	console.log(Times);	
	//显示年月日
	console.log(Times.getFullYear() + "-" + (Times.getMonth() + 1) + "-" + Times.getDate());
	//获取星期,星期日为 0
	console.log(Times.getDay());		
	//显示时分秒
	console.log(Times.getHours() + ":" + Times.getMinutes() + ":" + Times.getSeconds());
	//1970年1月1日到当前的秒数
	console.log("seconds is " + Times.getTime());	
	console.log(Times.toUTCString());

执行结果
在这里插入图片描述

在网页上创建一个时钟显示

源码

<html>
	<head>
		<title> ZX test title </title>
		<p id = "ShowTime"></p>
		<script>

			function js_nowtime(){
				var Times = new Date();
				function showzero(value){
					if(10 < value)
						return value;
					else
						return '0' + value;
				}
				
				var showdate = Times.getFullYear() + "-";
				showdate += (Times.getMonth() + 1) + "-";
				showdate += Times.getDate() + "   ";
				
				var showtimes = showzero(Times.getHours()) + ":"; 
				showtimes += showzero(Times.getMinutes()) + ":"; 
				showtimes += showzero(Times.getSeconds());
				
				//将时间显示到标签ShowTime上
				document.getElementById('ShowTime').innerHTML = showdate + showtimes;
			}
			
			function js_showtime(){
				js_nowtime();
				setTimeout('js_nowtime()',1000);
			} 

		</script>
	</head>
	<body onload = "js_showtime()" >
	</body>
</html>

执行结果
在这里插入图片描述

容器

Set容器

类似C++的vector容器,但里面的元素不能重复,初始化或添加重复的元素会被合并。

源码

function js_var_STL_set(){
	
	var testarray = ['D',3,56,'D',"Test"];
	var tsetset1 = new Set(testarray);
	var tsetset2 = new Set([1,4,7,7,4]);

	console.log(tsetset1);
	console.log(tsetset2);
}

执行结果
在这里插入图片描述

添加重复元素或添加新元素,返回值都为set容器本身。删除元素或删除未知元素,删除成功返回true,删除失败返回false。

源码

function js_var_STL_set_operation(){
	
	var testarray = ['D',3,56,"Test",2.71828];

	var tsetset = new Set(testarray);

	console.log(tsetset.add("ZX Test"));
	console.log(tsetset.add('D'));	//不会添加重复元素

	console.log(tsetset.delete(56));
	console.log(tsetset.delete(4));	

	console.log(tsetset);
}

执行结果
在这里插入图片描述

Map容器

用法和C++的map类似,通过key值来寻找内容。
初始化map容器可以用一个二维数组初始化,也可以一项项添加初始化。map容器的key值不能有重复元素,否则新的值会直接代替旧的值。

源码

function js_var_STL_map(){
	
	var arraymap1 = ['D',"D value"];
	var arraymap2 = [3,6];
	var arraymap3 = [3,9];	//重复的key
	var arraymap4 = [56,3.14];
	var arraymap5 = ["string","Test"];

	var tsetmap1 = new Map([arraymap1,arraymap2,arraymap3,arraymap4,arraymap5]);
	var tsetmap2 = new Map([[1,4],["ZX","String Test"]]);

	console.log(tsetmap1);
	console.log(tsetmap2);
}

执行结果
在这里插入图片描述

添加重复元素或添加新元素,返回值都为map容器本身,若添加的key是重复的key,则新的value会替换旧的value。

has函数是判断是否有该key值,成功返回true,失败false
get函数获取该key值的value,成功返回具体的值,失败返回undefined。

删除元素或删除未知元素,删除成功返回true,删除失败返回false。

源码

function js_var_STL_map_operation(){
	
	var arraymap1 = ['D',"D value"];
	var arraymap2 = [3,6];
	var arraymap3 = [56,3.14];
	var arraymap4 = ["string","Test"];

	var tsetmap = new Map([arraymap1,arraymap2,arraymap3,arraymap4]);

	console.log(tsetmap.set(3,9));
	console.log(tsetmap.set('A',46));

	var haskey = 'A';
	console.log("Map has " + haskey + " is "+ tsetmap.has(haskey));
	console.log("Map has " + haskey + " value is "+ tsetmap.get(haskey));

	haskey = 'B';
	console.log("Map has " + haskey + " is "+ tsetmap.has(haskey));
	console.log("Map has " + haskey + " value is "+ tsetmap.get(haskey));

	haskey = "string";
	console.log("Map has " + haskey + " delete is "+ tsetmap.delete(haskey));

	haskey = "test";
	console.log("Map has " + haskey + " delete is "+ tsetmap.delete(haskey));

	console.log(tsetmap);
}

执行结果
在这里插入图片描述

解构赋值

定义

在ES6引入的解构赋值,能够同时对多个变量进行赋值

源码

function js_value_init(){
	var [siIndex,strName,siNum,isValue] = [2, "ZX_Test",,1.41];

	console.log("Index = " + siIndex + 
				" Name = " + strName + 
				" Num = " + siNum + 
				" Value = " + isValue);
}

执行结果
在这里插入图片描述

赋值可以遗漏,遗漏的赋值变量为undefined。

同时也可以进行随机指定赋值,但需要用{}而不是[]符号,
源码

var {siIndex = 9,strName,siNum,isValue} = {"isValue":1.41,strName:"ZX_Test"};

	console.log("Index = " + siIndex + 
				" Name = " + strName + 
				" Num = " + siNum + 
				" Value = " + isValue);	

执行结果
在这里插入图片描述

未赋值的变量会使用初始化值或undefined,变量可以直接引用也可以加""引用。

类赋值

类赋值需要用{}对象限制而不是[]数据进行限制。

源码

	var stTest = {
		siindex: 1,
		strname: "ZX Test",
		strclass: "One",
		value:{
			id: 123456,
			key:"CSKE57DH6WE32PM",
		},
	};

	var {siindex,value,strclass:sclass} = stTest;

	console.log("Index = " + siindex + 
				" class = " + sclass +
				" value = " + value);

	console.log(" id = " + value.id);
	console.log(" key = " + value.key);	

执行结果
在这里插入图片描述

类的赋值可以按顺序同名赋值,也可以不按顺序赋值。赋值后同名的变量就赋值为类中对应变量的值,若想赋值的名字不同,例如strclass:sclass,在:后面定义新的变量。对于类与类的赋值,打印引用时需要用.对应相应的变量。

异常处理

JavaScript异常处理关键字:try、catch、throw

try	:处理代码
throw	:抛出异常
catch	:捕获异常

因为JavaScript中变量不分类型,因此抛异常的catch只能有一个

源码

	try
	{
		run_function();
	}
	catch(err)
	{
		console.log("Error is " + err.message);
	}

	try
	{
		throw "string error";
	}
	catch(err)
	{
		console.log("Error is " + err);
	}	

执行结果
在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值