JavaScript_易错基础知识、arr对象、string对象、math对象、event事件

最新推荐文章于 2025-05-28 08:49:35 发布

原创最新推荐文章于 2025-05-28 08:49:35 发布 · 344 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨JavaScript中易忽略的概念，如未声明变量的默认值、字符串中引号的使用、对象的定义与访问，以及数组和字符串的各种操作方法。同时，介绍了文件格式验证和随机数生成的实用技巧。

易忽略的地方

Value = undefined
未声明的变量，值为undefined。

     var carname;//carname 的值为 undefined：

重新声明 JavaScript 变量
如果重新声明 JavaScript 变量，该变量的值不会丢失：

var carname="Volvo"; 
var carname;//变量 carname 的值依然是 "Volvo"：

可以在字符串中使用引号，只要不匹配包围字符串的引号即可：

var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';

对象：
定义：
var person = {firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”};
访问属性：
对象名.对象属性
对象名[“对象属性”]
对象方法的创建：

方法名:function(){代码段}

向未声明的 JavaScript 变量分配值
如果您把值赋给尚未声明的变量，该变量将被自动作为 window 的一个属性。

这条语句：

carname="Volvo";//将声明 window 的一个属性 carname。

非严格模式下给未声明变量赋值创建的全局变量，是全局对象的可配置属性，可以删除。

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明，可配置全局属性

console.log(this.var1); // 1
console.log(window.var1); // 1

delete var1; // false 无法删除
console.log(var1); //1

delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。

以下实例中 carName 在函数内，但是为全局变量。

实例
// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

用于字符串的 + 运算符

运算符用于把文本值或字符串变量加起来（连接起来）。

如需把两个或多个字符串变量连接起来，请使用 + 运算符。

txt1="What a very";
txt2="nice day";
txt3=txt1+txt2;
txt3 运算结果为:What a verynice day

对字符串和数字进行加法运算
两个数字相加，返回数字相加的和，如果数字与字符串相加，返回字符串。

x=5+5;
y="5"+5;
z="Hello"+5;
x,y, 和 z 输出结果为:

10
55
Hello5

arr对象

concat方法：
concat(内容) 将括号内的内容连接到数组的后方，返回连接后的数组
pop()方法：
取出数组最后一个元素并返回取出的元素
push()方法：
在数组末尾添加元素并返回添加后数组的长度
reverse方法：
将数组反转
join()方法：
join(“内容”) 通过括号中双引号里面的内容分隔数组的元素

在这里插入图片描述

String对象

length属性：
返回字符串的长度
charAt方法：
charAt（位置）返回指定位置的字符
charCodeAt方法：
charCodeAt（位置）返回指定位置字符的ascii码
indexOf方法：
indexOf(“字符”) 返回字符在字符串中第一次出现的位置
lastIndexOf方法：
lastIndexOf(“字符”) 返回字符在字符串中最后一次出现的位置
split方法：
split(“字符”) 将字符串以指定字符为界，分隔为数组。若给定空字符则将字符串每个元素分隔为一个数组元素
substr方法：
substr（n，m）将字符串从位置n开始提取长度为m的字符串
substring方法：
substring（n，m）将字符串从位置n开始提取到位置m，位置m不包括在内
toLowerCase方法：
将字符串中的字母转变为小写字母
toUpperCase方法：
将字符串中的字母转变为大写字母

在这里插入图片描述

文件验证案例

要求：对用户上传的文件进行验证，符合格式允许上传，不符合格式不允许上传。
思路：获取文件的后缀，对后缀进行限制

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		function JudgeSubmit(){
			var filename=document.getElementById("FileName").value;//获取浏览按钮的对象的值
			var HouZhui=filename.substr(filename.lastIndexOf(".")+1);//获取文件的后缀
			//由于文件后缀不分大小写，所以为了方便判断，需要先将后缀统一大小写然后进行判断
			var HouZhui=HouZhui.toLowerCase();
			if (HouZhui=="jpg"||HouZhui=="png") {
				alert("可以上传");
			}
			else{
				alert("文件格式错误");
			}
		}
	</script>
</head>
<body>
	<input type="file" id="FileName" value="浏览">
	<input type="button" id="sub" value="上传" onclick="JudgeSubmit()">
</body>
</html>

此种方法仅供巩固string对象，真正对文件上传限制应做到前后端均限制才会保证安全，前端的限制很容易就可以绕过从而导致文件上传漏洞

Math对象

Math.random()方法
取0到1的随机数，可以取到0取不到1

取n到m的随机数的方法

Math.random()*(m-n)+n  //此方法取不到m

取任意n到m的随机数且n和m均可取到

Math.floor(Math.random()*(m-n+1)+n

event事件：

保存事件发生时的信息。
获取标签可以有两种方法，第一种通过document.getElementById()获取，第二种通过event.target获取（多个按钮具有相同的事件时使用，不用给标签加id）
实例：点击按钮弹出按钮标签的value

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script type="text/javascript">
		function fn1(){
			var obj=document.getElementById("d1");
			var zhi=obj.value;
			alert(zhi);
		}
		function fn2(e){
			alert(e.target.value);
		}
	</script>
</head>
<body>
	<input type="button" id="d1" value="点击1" onclick="fn1()">
	<input type="button" value="点击2" onclick="fn2(event)">
</body>
</html>