JavaScript

已于 2022-04-12 19:26:25 修改
阅读量118 收藏
点赞数
分类专栏： 前端 文章标签： javascript
于 2022-04-12 19:23:57 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_61399281/article/details/124130527
版权

基础用法

javascript
                1.行内js
                    直接定义在标签中
                
                2.内部js
                    建议定义在head标签中或者body标签的最后，编写在script标签中
                    <script type="text/javascript">
                        console.log('控制台打印');
                    </script>
                    
                3.外部js   如果script标签中有src属性，那么当前标签体中的js代码无效
                    定义一个外部js文件，通过script标签引入进来
                    <script src="js/test.js" type="text/javascript" charset="utf-8"></script>
                    
                
                alert();  消息框/弹出框
                console.log("");  控制台打印
                
            注释
                HTML   <!--注释- ->
                CSS    /**/
                JS     //

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 内部 -->
		<script type="text/javascript">
		console.log('控制台打印');
		</script>
	<body>
		<!-- 引入外部js -->
			<script src="js/test.js" type="text/javascript" charset="utf-8">
				<!-- console.log('控制台打印'); -->
			</script>
		</head>
		<body>
        <button type="button" onclick="alert('abc')"> 按钮</button>
	    </body>
</html>

变量

变量
                变量即一个带名字的用来存储数据的内存空间，数据可以存储到变量中，也可以从变量中取出数据。
                JavaScript是一种弱类型语言，在声明变量时不需要指明数据类型，直接用var修饰符进行声明。
                
                声明变量方式
                    1.先声明，再赋值
                    2.声明并赋值
                    
                注意点
                    1.若只声明而没有赋值，则该变量的值为undefined。
                    2.变量要有定义才能使用，若变量未声明就使用，JavaScript会报错，告诉你变量未定义。
                    3.可以同时声明多个变量
                    4.若使用var重新声明一个已经存在的变量，是无效的。
                    5.若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
                    6.JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
                    
                    
                变量提升
                ​    JavaScript 引擎的工作方式是，先解析代码，获取所有被声明的变量，然后再一行一行地运行。
                    这造成的结果，就是所有的变量的声明语句，都会被提升到代码的头部，这就叫做变量提升。
                    只针对于用var修饰的变量，不用var修饰的变量无效
                    
                不用var声明的变量是全局变量

	<script type="text/javascript">
				//先声明,再赋值
				var a;
				a=10;
				console.log(a);
				
				//声明并赋值
				var b =12;
				console.log(b);
				
				//若只是声明没赋值,则变量的值为undefined
				var c;
				console.log(c);
				
				//可以同时声明多个变量
				var q,w,e=100;
				console.log(q,w,e);//undefined undefined 100
				
				//若使用var重新声明一个已经存在的变量，是无效的。
				var a;
				console.log(a);//10
				
				//若使用var重新声明一个已经存在的变量且赋值，则会覆盖掉前面的值
				var a = 99;
				console.log(a);
				
				//JavaScript是一种动态类型、弱类型语言，也就是说，变量的类型没有限制，可以赋予各种类型的值。
				var num1=1;
				var num2='abc';
				var num3=true;
				var num4=3.54;
				var num5=[1,8,7,5,6];
				var obj={
					name:'小红',
					age : 18
				};
			console.log(num1,num2,num3,num4,num5,obj);
			
			//变量提升
			console.log(abc);//undefined
			var abc = 999;
			
			//不用var声明的变量是全局变量
			lbw = "钢铁侠";
			console.log(lbw);
				</script>

数据类型

数据类型
                undefined
                ​    undefined类型的值是undefined。
                ​    undefined 是一个表示"无"的原始值，表示值不存在。
                ​    出现undefined的常见情况：
                    ​    1.当声明了一个变量而没有初始化时，这个变量的值就是undefined
                        2.调用函数时，该函数有形参，但未提供实参，则该参数为undefined。
                        3.函数没有返回值时，默认返回 undefined。
                        
                null
                ​    null类型是只有一个值的数据类型，即特殊的值null。它表示空值，即该处的值现在为空，它表示一个空对象引用。
                    使用Null类型值时注意以下几点：
                    ​        1）使用typeof操作符测试null返回object字符串。
                    ​        2）undefined派生自null，所以等值比较返回值是true。未初始化的变量和赋值为null的变量相等。
                    
                布尔类型
                    布尔类型有两个值：true、false。常用来做判断和循环的条件
                    
                数值型
                ​    数值型包含两种数值：整型和浮点型。
                ​    1）所有数字（整型和浮点型）都是以 64 位浮点数形式储存。所以，JS中1 与 1.0 相等，而且 1 加上 1.0 得到的还是一个整数。浮点数最高精度是17位小数，由于浮点数运算时可能不精确，尽量不要使用浮点数做判断。
                ​    2）在存储数值型数据时自动将可以转换为整型的浮点数值转为整型。
                
                字符串
                ​    使用 ' ' 或 " "引起来，如：'hello'，"good"。
                ​    使用加号 '+' 进行字符串的拼接，如：console.log('hello' + ' everybody');    
                
                对象
                ​    对象是一组数据和功能的集合。
                ​    说明：
                ​        {}：表示使用对象字面量方式定义的对象。空的大括号表示定义包含默认属性和方法的对象。

<script type="text/javascript">
			//当声明了一个变量而没有初始化时，这个变量的值就是undefined
			var a;
			console.log(a);
			
			//2.调用函数时，该函数有形参，但未提供实参，则该参数为undefined。
			function fun1(b){
				console.log(b);//undefined
			}
			fun1();
			
			//函数没有返回值时，默认返回 undefined。
			function fun2(){
				console.log("fun2方法");
			}
			var ret = fun2();
			console.log(ret);
			
			//typeof    返回某个数据的类型
			var a = 1;
			var b = "abc";
			var c = true;
			var d;
			console.log(typeof a);
			console.log(typeof b);
			console.log(typeof c);
			console.log(typeof d);
			
			var nu = null;
			console.log(typeof nu);
			
			console.log(d == nu);
			
			//number类型  数值型
			var num1 = 1.0;
			var num2 = 1;
			console.log(num1);
			console.log(num1 == num2);
			console.log(num1 + num2);
			
			//字符串  '' ""
			var str1 = "abc";
			var str2 = 'abc';
			console.log(num2 + "");
			
			console.log(num1.toString());

函数转换

函数转换  数据必须是字符串
                parseInt() 
                ​    在转换之前，首先会分析该字符串，判断位置为0处的字符，判断它是否是个有效数字，
                    如果不是，则直接返回NaN，不再继续，如果是则继续，直到找到非字符
                parseFloat() 
                ​    该方法与 parseInt() 方法的处理方式相似，从位置 0 开始查看每个字符，直到找到第一个非有效的字符为止，
                    然后把该字 符之前的字符串转换成数字。不过，对于这个方法来说，第一个出现的小数点是有效字符。如果有两个小数点，第二个小数点将被看作无效的，parseFloat()方法会把这个小数点之前的字符串转换成数字。
                    
            显示转换
            ​    几乎每个数对象都提供了toString()函数将内容转换为字符串形式，其中Number提供的toString()函数可以将数字转换为字符串。
            ​    Number还提供了toFixed()函数将根据小数点后指定位数将数字转为字符串，四舍五入

<script type="text/javascript">
			//parseInt()   
			console.log(parseInt("123")); //123
			console.log(parseInt("123.45"));//123
			console.log(parseInt("123.45.56"));//123
			console.log(parseInt("abc"));//NaN
			
			//parseFloat() 
			console.log(parseFloat("123")); //123
			console.log(parseFloat("123.45"));//123.45
			console.log(parseFloat("123.45.56"));//123.45
			console.log(parseFloat("abc"));//NaN
			
			
			//显示转换 toString() 不能对null和undefined使用
			var num = 10;
			var nu = null;
			console.log(num + "");
			console.log(num.toString());
			// console.log(nu.toString());
			
			
			//toFixed()函数
			var num2 = 1.364;
			console.log(num2.toFixed(2));
			
			//=== 全等 比较值和类型
			var un;
			console.log(un === nu);
		</script>

 数组

数组
                创建数组方式
                    1.隐式创建
                    2.直接实例化
                    3.创建并赋予长度
                属性
                    设置长度  数组名.length = 值;
                    获取长度  数组名.length
                    
                取值/设置值
                    数组名[索引]        取值
                    数组名[索引] = 值   设置值

<script type="text/javascript">
			//隐式创建
			var arr = [1,"abc",true];
			console.log(arr);
			
			//直接实例化
			var arr2 = new Array(1,2,3,4);
			console.log(arr2);
			
			//创建并赋予长度
			var arr3 = new Array(5);
			console.log(arr3);
			
			//设置长度
			arr.length = 5;
			console.log(arr);
			//获取长度
			console.log(arr2.length);
			
			//设置值
			arr2[0] = 99;
			arr2[5] = 999;
			console.log(arr2);
			//取值
			console.log(arr2[1]);
			
			arr2['name'] = 'zhangsan';
			console.log(arr2);
			console.log(arr2.name);
			
			
			console.log("===========for==============");
			
			//普通for遍历   可以遍历出 正常数据和空数据
			for(var i = 0; i < arr2.length; i++){
				console.log(arr2[i]);
			}
			
			
			console.log("========for..in=========");
			//for..in    可以遍历出 正常数据和属性
			for(var num in arr2){
				console.log(num);
			}
			
			console.log("========forEach=========");
			//forEach  方法的形参 ele:数据    index:索引      可以遍历出 正常数据
			arr2.forEach(function(ele,index){
				console.log(ele,index);
			});
			
			
			
			
			var arr = ['1','a',5,'3'];
			console.log(arr);//1,a,5,3
			//后追加
			arr.push(10);
			console.log(arr);//1,a,5,3,10
			//前追加
			arr.unshift('b');
			console.log(arr);
			//后删除
			arr.pop();
			console.log(arr);
			//前删除
			arr.shift();
			console.log(arr);
			//反转
			arr.reverse();
			console.log(arr);
			//以某个字符分隔数据
			console.log(arr.join('='));
			console.log(arr);
			//返回字符在数组中的索引
			console.log(arr.indexOf('a'));
			//截取
			console.log(arr.slice(2,5));
			console.log(arr);
			//替换
			arr.splice(1,1,'一','二');
			console.log(arr);
			var arr1 = [0,'100'];
			//拼接
			console.log(arr.concat(arr1));
			console.log(arr);
			console.log(arr1);
			console.log(arr1,(arr));
		</script>

函数

函数的声明
                函数声明语句  作用域提升
                    function 函数名(参数列表){
                        ......
                    }
                    调用：函数名(参数);
                    
                函数定义表达式
                    var 函数名 = function(参数列表){
                        ......
                    }
                    调用：函数名(参数);
                    
                Function构造函数
                    var 函数名 = new Function('参数1','参数2','执行语句');
                    
            注意：
                   1. js中的函数没有重载，同名的函数，会被后面的函数覆盖。
                   2. js中允许有不定数目的参数，后面介绍arguments对象
                
                
            函数的参数、调用和return语句
                参数
                    - 实参可以省略，那么对应形参为undefined
                    - 若函数形参同名（一般不会这么干）：在使用时以最后一个值为准。
                    - 可以给参数默认值：当参数为特殊值时，可以赋予默认值。
                    - 参数为值传递，传递副本  ；引用传递时传递地址，操作的是同一个对象。
                    
                    
                函数的调用
                    1. 常用调用方
                    
                    2.函数调用模式
                    
                    3.方法调用模式
                    
                return
                ​    函数的执行可能会有返回值，需要使用return语句将结果返回。return 语句不是必需的，如果没有的话，该函数就不返回任何值，或者说返回 undefined。
                ​    作用：
                ​    1. 在没有返回值的方法中，用来结束方法。
                ​    2. 有返回值的方法中，一个是用来结束方法，一个是将值带给调用者。
                
            函数的作用域
            ​    函数作用域：全局 (global variable) 和 局部 (local variable)
                1.全局变量与局部变量同名问题
                2.在函数中定义变量时，若没有加var关键字，使用之后自动变为全局变量

 <script type="text/javascript">
		 	function fun1(){
				console.log("abc");
			}
			fun1();
			
			var fun2 = function(){
				console.log("函数定义表达式");
			}
			fun2();
			//Function构造函数
			var fun3 =new Function('a','b','console.log(a+b)');
			fun3(54,6);
			
			function fun4(a,b){
				console.log("方法2");
				console.log(a,b);
			}
			
			function fun4(a){
				console.log("方法1");
				console.log(a);
			}
			fun4(1,2);
			
			
			function fun5(a){
				console.log(a);
			}
			fun5();
			
			function fun6(b,b,b){
				console.log(b);
			}
			fun6(7,8,9);
			
			function fun7(ab){
			//ab = (ab==undefined)?"默认值" : ab;
			ab = ab||"默认值"
				console.log(ab);
			}
			fun7(119);
			
			
			console.log("=========");
			var num = [1,2,3,4];
			function fun8(num){
				num[0] = 99;
			}
			fun8(num);
			console.log(num);
			
			//方法调用模式
			var obj = {
				fun:function(){
					console.log("对象中的方法")
				},
				name:'张三',
				arr:[1,6,5,7]
			};
			obj.fun();
			console.log(obj.name)
			
			//js作用域问题
			if(true){
				var nums=100;
			}
			console.log(nums);
			
			function funn(){
				numm = 88;
			}
			funn();
			console.log(numm);
		 </script>

对象

json对象
                创建
                    1.字面量形式创建对象
                    2.通过new Object对象创建
                    3.通过Object对象的create方法创建对象。
                    
                设置值/取值
                    设置值        对象名.属性 = 值      如果属性存在，值覆盖，如果属性不存，新建属性
                    取值           对象名.属性
                    
                
                对象的序列化和反序列化
                ​    序列化即将JS对象序列化为字符串，反序列化即将字符串反序列化为JS对象。JS中通过调用JSON方法，
                    可以将对象序列化成字符串，也可以将字符串反序列化成对象 。
                    
                this
                ​    this是JavaScript语言的一个关键字。 
                ​    它代表函数运行时，自动生成的一个内部对象，只能在函数内部使用。
                ​    随着函数使用场合的不同，this的值会发生变化。但是有一个总的原则，那就是this指的是，调用函数的那个对象。

<script type="text/javascript">
			//1.字面量形式创建对象
			var obj1 = {
				name:'zhansgan',
				age:20
			};
			console.log(obj1);
			
			//通过new Object对象创建
			var obj2 = new Object();
			obj2.name = 'lisi';
			obj2.job = 'programmer';
			console.log(obj2);
			console.log(obj2.job);
			
			//通过Object对象的create方法创建对象。   以某个对象为模板去创建对象
			var obj3 = Object.create(null);
			obj3.age = 10;
			console.log(obj3);
			
			var obj3 = Object.create(obj1);
			obj3.name = 'wangwu';
			console.log(obj3);
			console.log(obj3.name);
			
			
			// 序列化对象，将对象转为字符串
			var obj = {
			   'name' : 'hello',
			   age : 12,
			   sayHello : function () {
				   console.log(this);
					console.log("我是对象中的方法");
			   },
			   courses : {
					javase : 4,
					javascript : 3
			   },
			   isLike : true,
			   members : [
					{name : "小红",age : 20},
					{name : "小绿",age : 22},
					{name : "小蓝",age : 27},
					{name : "小黄"}
			   ]
			};
			//序列化
			var xlhObj = JSON.stringify(obj);
			console.log(xlhObj);
			
			//反序列化
			var newObj = JSON.parse(xlhObj);
			console.log(newObj);
			
			console.log("=======");
			//this关键字
			obj.sayHello();
			
			console.log(this); //window
		</script>

HikZ.919
关注
专栏目录
javascript
02-10
JavaScript是一种广泛用于网页开发的脚本语言，它是实现Web前端交互功能的核心技术之一。在给定的文件内容中，我们可以提取到关于JavaScript的多个知识点： 1. JavaScript的变量类型：JavaScript中主要有几种基本的...
JS基础语法
qq_44288282的博客
09-03 156
基本用法 1: ⾏内 JS： <button onclick="alert('you clicked hered!!!')">click here</button> 2:内部JS <script type="text/javascript" charset="utf-8"> alert('this is inner js code') </script> 3:外部JS <!-- 在需要使⽤js的html⻚⾯中引⼊ --> <script
JS 对象的属性如果没有就初始化
dicha7140的博客
06-08 364
function fuck (inObj, path, parms) { // 一个长得像对象的字符串 var Things = path.split("."); // 即将返回的对象 var obj = inObj; // 不断迭代的key值 var key = ""; // 赋值 var str...
JavaScript中关于变量初始化和变量未定义
foreverlikui的博客
08-03 2393
简单理解  变量未定义,就是根本没有var(声明)这个变量.                 而变量未初始化,其实也就是变量根本没赋值.               例如: 就是给变量赋值,然后对变量进行操作 var a=2; //变量初始化
JavaScript中只声明但没有初始化的变量和未声明的变量以及null/undefined的区别
weixin_33858336的博客
05-25 2684
只声明但没有初始化的变量和未声明的变量以及null/undefined的区别 1. 声明但没有初始化的变量 var aa; alert(aa); 浏览器会弹出窗口显示 undefined. 因为对于使用了 var 声明但没有进行初始化定义的变量, 其值默认为 undefined. 2. 未声明的变量(1) alert(aa); 浏览器不会...
js中的数据类型
gmf7471的博客
09-30 172
js中的数据类型分为两类分别是基本数据类型和引用数据类型（也是复杂数据类型） 基本数据类型 基本数据类型保存在栈中 基本数据类型有 number（数字） string（字符串） boolean（布尔值） underfind（未定义） null（空值） symbol（唯一值） 引用数据类型 引用数据类型保存在堆中 引用数据类型有 object （对象） array（数组） function（函数） 基本数据类型和引用数据类型的区别 基本数据类型指的是简单的数据段，引用数据类型指的是有多个值..
javaScript api
11-03
JavaScript API 是一种重要的编程资源，它为开发者提供了与JavaScript语言交互的接口和工具。这个离线版的JavaScript API 指南，以CHM（Compiled Help Manual）格式提供，是开发者学习和查阅JavaScript相关功能和...
JavaScript JavaScript JavaScript
06-26
JavaScript JavaScript JavaScript
前端javascript
08-31
对应狂神 javascript
JavaScript结课大作业.zip
12-25
JavaScript是一种广泛应用于网页和网络应用开发的脚本语言，它主要负责实现客户端的交互效果、动态更新内容以及处理用户输入。在"JavaScript结课大作业.zip"这个压缩包中，我们可以推测这是一份关于JavaScript编程的...
javascript只声明不初始变量默认值测试
香巴拉
05-11 1186
在Javascript中，当只声明变量，js默认初始化为undefined 测试如下： var r; alert(Object.prototype.toString.call(null));               // alert(Object.prototype.toString.call(undefined));   // alert(Object.prototype.
JavaScript基础
weixin_30897079的博客
10-18 68
JavaScript基础 1.JS引入方式 1 直接编写 <script> alert('hello yuan') </script> 2 导入文件 <script src="hello.js"></script> 2.JS的变量、常量和标识符 1、声明变量时不用声明变量类型. 全都使用var...
JavaScript变量及数据类型
weixin_30731305的博客
10-09 98
变量 ECMAScript的变量是松散类型的，表现为： 声明变量时，不用指定数据类型 同个变量可以引用不同的数据类型 变量声明 使用var操作符声明变量 var variableName; //由于未初始化，变量值为undefined 变量初始化 当我们声明一个变量但未初始化时，变量的默认值是undefined var variableName = value; 全局变量和局部变量 var n...
JavaScript练习
紫夜的博客
11-23 146
1.判断下面的变量名是否正确 var _; var a; var $; var a12; var 2a; var o2; var 02; 2.判断下面的说法是否正确 1.由''或""括起来的表示字符串 2.var a = ''; 变量a的值是一个字符串 3.字符串中不可以出现'或者" 4.关系运算符可以连写，逻辑运算符不可以连写，算数运算符可以连写 3.++ 练习 var result = 3; result= ++result*result++; result = ++result;
web前端技术练习题
在深度学习的路上不断探索
07-01 4030
web技术练习题
web、css、HTML学习笔记
gosickkiss的博客
11-01 261
WEB WEB Basic :HTML + CSS + JavaScript Django： =========================================================================================== 1.WEB 1. 什么是WEB web就是互联网上的一种应用程序 -网页 典型的应用： 1. C/S Client：客户端 Server：服务端 2.B/S Browser：浏.
JavaScript测试题
哈
12-06 2470
一、选择题 针对以下题目，请选择最符合题目要求的答案。针对每一道题目，所有答案都选对，则该题得分，所选答案错误或不能选出所有答案，则该题不得分。每题2分) 在javascript中，系统时间为“2012-2-20”，调用Date对象的getMonth（）方法得到的结果是(). (选择一项) A. 2 B. 3 C. 1 D. 什么都不显示 在javascript中，下列正则表达式的重复...
大于等于0小于等于100的正数用正则表达式表示
热门推荐
ApatheCrazyFan的博客
12-21 1万+
大于等于0小于等于100的正数用正则表达式
Babel
最新发布
小秀的博客
09-20 420
它的主要作用是为了确保在不同浏览器和环境中运行 JavaScript 代码时保持一致的行为，尤其是提供对较新 ECMAScript 特性（如 Promise、Symbol、Object.assign 等）的支持。随着 JavaScript 标准不断更新，新的特性和功能被添加，但并不是所有的浏览器都能及时支持这些新特性。core-js 通常与 Babel 一起使用。core-js 是模块化的，这意味着开发者可以按需引入自己需要的 polyfill，而不是全部引入，这不仅能减少代码体积，还有助于提高性能。
日本JavaScript函数教学课件详解：背景色与样式控制
本教学课件是关于日语版的JavaScript编程语言，专注于讲解函数这一核心概念。课程内容包括以下几个部分： 1. **函数基础**: - 函数定义：讲解了如何在JavaScript中使用`function`关键字来创建一个名为`f`的函数，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值