JS(JavaScript)笔记

最新推荐文章于 2024-10-16 10:27:58 发布

_千寻瀑

最新推荐文章于 2024-10-16 10:27:58 发布

阅读量208

点赞数

分类专栏：前端文章标签：前端

本文链接：https://blog.csdn.net/qq_40191003/article/details/100068474

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细介绍了JavaScript的基础知识，包括它的特性、引入方式、执行顺序、变量声明、函数用法、作用域规则以及赋值操作和类型转换。特别讨论了等于与全等的区别，以及如何使用parseInt、parseFloat和Number方法进行数值转换。此外，还提到了String方法将各种类型数据转化为字符串的用法。

摘要由CSDN通过智能技术生成

1、什么是JS?

基于对象的——必须先有对象
事件驱动的 ——不会无缘无故的去运行
与平台无关的 ——因为他们的运行环境有浏览器提供
弱类型的 ——在声明变量的时候不需要指定数据类型，他的类型有你给定的这个值决定，也就意味着他的类型是可变的
脚本语言——所以不是编译型而是解析型

2、如何引入js?

在标签里面，以对应的属性来引入
内部，通过<script></>声明
外部，通过<script src=””></>引入

3、js基础

js可以放在html的任何地方
执行顺序从上往下
一般实际项目开发中，对于那些比较耗时的Js文件，一般放在body的最后面

    <script>
	    alert("1");
	</script>
<!doctype html>
<html>
    <script>
	    alert("2");
	</script>
<head>
<meta charset="utf-8">
<title>js可以放在html的任何地方</title>
    <script>
	    alert("3");
	</script>
</head>
    <script>
	    alert("4");
	</script>
<body>
    <script>
	    alert("5");
	</script>
     <!--当鼠标移到"哈哈哈"这个p标签上是，弹出写着“你要干嘛？”的框 -->
    <p onMouseOver="alert('你要干嘛？')">哈哈哈</p>  
</body>
    <script>
	    alert("6");
	</script>
</html>
    <script>
	    alert("7");
	</script>

4、浏览器加载顺序

html解析完毕
外部脚本和样式的加载完毕
脚本在文档内解析并执行
html DOM完全构建起来
图片和外部内容的加载
网页完成加载

5、变量的声明

js中声明变量用var
可以通过typeof(<变量名>)来获取变量的类型
undefined
number
string(html和js中不区分单双引号)
boolean
object
变量如果没有赋值，则类型为undefined，一旦赋值，则类型由所赋的值决定

/writln:代码换行，不是页面换行/

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>变量声明</title>
<script type="text/javascript">
    var a;
	
	document.write(typeof(a) +"<br/>");//undefined
	
	a=10;
	document.write(typeof(a) +"<br/>");//number
	
	a=12.8;
	document.write(typeof(a) +"<br/>");//number
	
	a='y';
	document.write(typeof(a) +"<br/>");//string
	
	a="yc";
	document.write(typeof(a) +"<br/>");//string
	
	a=new Object();
	document.write(typeof(a) +"<br/>");//Object
	
	a=null;
	document.write(typeof(a) +"<br/>");//Object
</script>
</head>

<body>
</body>
</html>

6、函数

由function<函数名>([参数列表]){}声明
函数的参数不需要指定数据类型
函数也不需要指定返回值类型
函数的返回值可有可无，如果有关的话通过return返回即可，如果没有则不需要
在Js中方法的调用时根据方法名来的，与方法后面的参数无关
如果方法名相同，则后面的会将前面的覆盖

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数</title>
<script>

	 function add(x,y){
	    return x+y;	
	}
	
    function add(x,y,z){
	    return x+y+z;	
	}
	
	 function add(x,y,m,n){
	    return x+y+m+n;	
	}//方法名相同，后面的会覆盖前面的
	
	
	document.write(add(1,2)+"<br/>");//NaN: not a number
	document.write(add(1,2,3)+"<br/>");//NaN: not a number
	document.write(add(1,2,3,4)+"<br/>");//10
	document.write(add(1)+"<br/>");//NaN: not a number
</script>
</head>

<body>
</body>
</html>

（调换函数位置结果不一样）

<script>

	 function add(x,y){
	    return x+y;	
	}
	
    function add(x,y,z){
	    return x+y+z;	
	}
	
	 function add(x,y,m,n){
	    return x+y+m+n;	
	}//方法名相同，后面的会覆盖前面的
	
	
	document.write(add(1,2)+"<br/>");//NaN: not a number
	document.write(add(1,2,3)+"<br/>");//6
	document.write(add(1,2,3,4)+"<br/>");//6   参数给多没关系，把可以加的加上
	document.write(add(1)+"<br/>");//NaN: not a number
</script>

函数的参数仅仅表明这个函数期望获得的参数个数，而实际参数可以通过函数的内置对象arguments来获取，这个内置对象实际是一个数组对象

<script>
    function add(){
	    var sum=0;//必须赋初值，否则报错（未定义类型）
		/*
		   实际上arguments是一个数组对象，数组取值是通过索引下标，从0开始
		 
		*/	
		for(var i=0;i<arguments.length;i++){
		    //sum=sum+arguments[i];
			sum+=arguments[i];	
		}
		return sum;
	}
	
	document.write(add(1,2)+"<br/>");
	document.write(add(1,2,3)+"<br/>");
	document.write(add(1,2,3,4)+"<br/>"); 
	document.write(add(1)+"<br/>"); 
</script>

（函数的多种写法）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>函数的写法</title>
<script>
    var add=function(x,y){
	    return x+y;	
	}
	
	console.info(add);
	/*ƒ (x,y){
	    return x+y;	
	}*/
	
	console.info(add(3,4));//7
	
	
	
	var add1=function(x,y){
		return x+y;
	}(3,4);
	
	console.log(add1);//7
	console.log(add1());//报错，不是一个函数
	
	//console.info()和console.debug()本质上与console.log()没有区别。是console.log()的另一个名字而以，可以理解为它们三个其实就是同一个，只不过名字不一样。
	
</script>
</head>

<body>
</body>
</html>

7、作用域

在函数外面用var或不用var声明的变量都是全局变量
在函数里面如果不是形参，那么用var声明的是局部变量，不用var声明的是全局变量(形参是局部变量)

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作用域</title>
<script type="text/javascript">

   var a=10;
   
   function add(){
       var x=20;//局部
	   console.info(x+a);//console:在控制台显示    30
   }
   add();//执行add方法
   
   m=30;
   
   function add1(){
        var x=20;//用var声明，是局部变量
		y=30;//不用var声明，是全局变量
		console.info(x+y+a+m);
   }
   add1();//90
   
   function add2(){
	   console.info(y+a);
   }
   add2();//40
   
   function add3(){
	   z=90;
	   console.info(y+z);
   }
   add3();//120
   console.info(z);//90
</script>
</head>

<body>
</body>
</html>

但是如果将js定义为use strict（严格的），则必须全部用var 声明
在js中变量没有块级作用域一说，即使你重新声明了，如果没有重新赋值，那么仍保留原有值（在哪个函数里面声明在哪个函数里有效，即使是函数里面的循环里面赋的值，在循环外面仍有效）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>作用域</title>
<script>
    function show(){
		for(var i=0;i<10;i++){
		    console.info(i);//0~9
	    }
		console.error(i);//10
		var i;
		console.error(i);//10
	}
    
	show();	
</script>
</head>

<body>
</body>
</html>

8、`==`（等于）和`===`（全相等）

等于只要求值相等
全等于要求值和数据类型都相等

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>等于== 和 全等于===</title>
<script>
    var i=10;
	var j=10;
	
	console.info(i==j);//true
	console.info(i===j);//true
	
	var k="10";
	console.info(i==k);//true
	console.info(i===k);//false
	
	var m="10";
	console.info(m==k);//true
	console.info(m===k);//true
</script>
</head>

<body>
</body>
</html>

9、强制类型转换

字符类型跟其他类型进行运算 + 时，都是做字符串拼接操作
paraseInt（）{
如果第一个字符不是数字，则输出NaN
如果整个字符串中没有一个数字，则输出NaN
从第一个数字开始，那么从第一个字符开始，到第一个非数字结束的这一段将转换为整型数（第一个字符开始，能转多少转多少）
}
parseFloat（）{
如果第一个字符不是数字，则输出NaN
如果整个字符串中没有一个数字，则输出NaN
从第一个数字开始，那么从第一个字符开始，到第一个非数字字符或第二个小数点之前的这一段将转换为浮点型数。即，这段字符串中可以包含一个小数点。（第一个字符开始，能转多少转多少）
}
Number(){
Number()与parseInt()和parseFloat()类似，它们区别在于Number()转换是整个值，而parseInt()和parseFloat()则可以只转换开头的数字部分

要求整个字符串能转成整型，或者浮点型，否则输出NaN
如果该字符串为空（不区分对象空还是字符串空），则输出0
}
Boolean(){
0为false，1为true
空为false，非空为true

在要转换的值为“至少有一字符的字符串”、“非0的数字”或“对象”，那么Boolean()将返回true，如果要转换的值为“空字符串”、“数字0”、“undefined”，“null”这些话，那么Boolean()会返回false。
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
var str1="12.6";
var str2="12yc";
var str3="y12c";
var str4="12.68.23";
var str5="";
var str6="ycinfo";
var str7=null;
var str8;

console.info(parseInt(str1));//12
console.info(parseInt(str2));//12
console.info(parseInt(str3));//NaN
console.info(parseInt(str4));//12
console.info(parseInt(str5));//NaN
console.info(parseInt(str6));//NaN
console.info(parseInt(str7));//NaN
console.info(parseInt(str8));//NaN

console.info("------------------")

console.info(parseFloat(str1));//12.6
console.info(parseFloat(str2));//12
console.info(parseFloat(str3));//NaN
console.info(parseFloat(str4));//12.68
console.info(parseFloat(str5));//NaN
console.info(parseFloat(str6));//NaN
console.info(parseFloat(str7));//NaN
console.info(parseFloat(str8));//NaN

console.info("------------------")

console.info(Number(str1));//12.6
console.info(Number(str2));//NaN
console.info(Number(str3));//NaN
console.info(Number(str4));//NaN
console.info(Number(str5));//0
console.info(Number(str6));//NaN
console.info(Number(str7));//0
console.info(Number(str8));//NaN

console.info("------------------")

console.info(Boolean(str1));//true
console.info(Boolean(str2));//true
console.info(Boolean(str3));//true
console.info(Boolean(str4));//true
console.info(Boolean(str5));//false
console.info(Boolean(str6));//true
console.info(Boolean(str7));//false
console.info(Boolean(str8));//false

console.info("------------------")

console.info(Boolean(0));//false
console.info(Boolean(1));//true
console.info(Boolean(-1));//true
</script>
</head>

<body>
<!--
\\211.69.254.35
-->
</body>
</html>

（综合实例）

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
    var a;
	a=10;
	console.info(typeof(a));//number
	
	a=true;
	console.info(typeof(a));//boolean
</script>

</head>

<body>
<script>
    var x=1;
	
	function add(a){
	    y=2;//全局
		a=3;//形参  局部
		console.info(x+y+a);//6	
	}
	add();
	
	function add1(){
		console.info(x+y+a);//x=1 y=2 a=true（第11行已赋值）  跟数字相加是true为1，false为0
		//4
	}
	add1();
</script>

</body>
</html>

6、String（）{
它可以把所有类型的数据转换成字符串，如：String(false)—“false”、String(1)—“1”。它和toString()方法有些不同，当变量值不确定或者为空时，String（）会返回“null”或者“undefined”,toString()会报错。
}

var t1 = null;
var t2 = String(t1);//t2的值 "null"
var t3 = t1.toString();//这里会报错  
var t4;          //undefined
var t5 = String(t4);//t5的值 "undefined"
var t6 = t4.toString();//这里会报错