JavaScript基础（详细总结）

在js中数值可与字符串进行数学运算，底层实现隐式转换。

let str = "10";let num = 20;console.log(str + num); // 1020console.log(str - num); // -10 console.log(str * num); // 200console.log(str / num); // 0.5

var a = 3;var b = 4;var c = "hello";alert(a/b);//js相除可以得到小数alert(typeof(a+c));// number类与字符串类型相加，字符串拼接var d = 6;var f = '4';alert(d+f);//拼接的64var a1 = 3;var a2 = "4";alert(a1-a2);//-1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型var b1 = 3;var b2 = "abc";alert(b1-b2);//NaNnot a number ;//如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0var bo1 = true;var bo2 = false;alert(a+bo1);//4alert(a+bo2);//3

注意：字符串类型与数字类型的运算中，只有相加会进行字符串拼接，而减、乘、除运算中，字符串中的数值可与字符串进行数学运算。

2.6.2、比较运算符

==、===（全等于）之间的区别？

== : 只比较内容是否相同 根本不比较数据类型
===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

let num = 100;let str = "100";console.log(num == str); // trueconsole.log(num === str);// false

2.6.3、三目（元）运算符

格式： 表达式 ？ 结果1 ： 结果2 ；

如果表达式运算的结果是true,把结果1返回
如果表达式运算的结果是false,把结果2返回

//定义一个变量为3let a = 3;//定义一个变量为4let b = 4;//页面输出//如果满足的 非0 ，非null， 非undefined 为true//如果满足的 是0 ，是null , 是undefined 为falsedocument.write(a>b ? a : b);

2.7、JS流程控制语句

2.7.1、if结构

if (条件表达式) {代码块;} else if(条件表达式){代码块;} else {代码块;}

JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。

JS中对各种数据类型作为布尔值有以下特点：

无意义的数据都为false 反之都为true。

let obj = new Object();if(obj) { // 对象console.log("满足条件");} else {console.log("不满足条件");}

2.7.2、switch语句

 var score = 90;//定义一个变量/* parseInt 取整的一个函数（方法） *//* 注意事项： 1、switch表达式一定会先找case,找到后一定要给break2、switch给位置没有关系，跟case有关3、如果找到后没有break，可以继续执行，直到找到break或都程序结束 */switch(parseInt(score/10)){case 10:case 9:alert("学霸");// break;default:alert("学渣");// break;case 8:alert("优秀");// break;case 7:alert("还行");break;}

在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)。

在JS中,switch语句可以接受任意的原始数据类型。

2.8、循环结构

2.8.1、for循环

普通for循环

for(let 初始化语句; 条件表达式; 条件控制语句){循环体;}

增强for循环

for(let 变量名 of 对象){需要执行的代码;}

索引for循环

for(let 变量 in 对象){需要执行的代码;}

代码演示

// 定义数组let arr = ["张三","李四","王五"];console.log("===================普通for循环===================");// 普通for循环for (let i = 0 ; i < arr.length ; i++) {console.log(arr[i]);}console.log("===================forof循环===================");// for of循环for (let e of arr) {console.log(e);}console.log("===================forin循环===================");// for in循环for (let index in arr) {console.log(arr[index]);}

forof 与 forin之间的区别

1. forin可以遍历对象,forof不能遍历对象
2. forin遍历出数组中的索引,forof遍历出数组中的元素

2.8.2、while循环

for一般用在某一个范围中循环
while一般用在一个确定范围中循环

for中的 var i = 1;这个只能在for循环中使用
while中的 var i = 1; 可以全局中使用

 //1 ~ 100 求和 let sum = 0; let num = 1; while(num <= 100){ sum += num; num++; }document.write(sum);

2.8.3、do…while循环

do…while循环就不再单独演示，跟java中的do…while循环用法是一致的！

//定义了一个变量let a = 1;do{//循环体，至少执行一次document.write(a)a++;}while(a <= 10);//循环判断条件

总结

普通for 与 java一样
forin：遍历出数组的索引
遍历出对象中的属性名key
forof: 遍历数组中的元素

2.9、JS函数

js函数是执行特定功能的代码块，也可以称为js方法。与java中的方法的功能是一样的。

function 函数名(参数列表){函数体;[return 返回值;]}

2.9.1、函数的第一种定义方式

function demo(){let a = 3;let b = 4;alert(a+b);}//方法必须调用，不调用不执行demo();//===============================================//有参无返回值的方法function demo2(a,b){alert(a+b);}demo2(4,6);//===============================================//无参有返回值的方法function demo3(){return 4+4;}let sum = demo3();alert(sum);//===============================================//有参有返回值的方法function demo4(a , b , c){return a+b+c;}let d =demo4(2,3,4);alert(d);

2.9.2、函数的第二种定义方式

/* 比较复杂，只需要了解，开发很少使用 */var demo = new Function("a,b", "alert(a+b)");demo(4,4);

2.9.3、函数的第三种定义方式

/* 匿名函数: 了解 */var demo= function(){alert(77);}demo();

2.9.4、绑定一个函数

function demo(){alert("点我干嘛？");}

2.9.5、获取标签中的内容

function demo(){//获取p标签var pid = document.getElementById("pid");//获取p标签中的内容// alert(pid.innerHTML);//修改标签中的内容pid.innerHTML = "静相思";/** * 1、拿到要获取内容的标签 * 2、跟获取的标签，再【获取内容】对象名.innerHTML【修改内容】对象名.innerHTML = "修改内容" */}
唐诗三百首
修改内容

2.9.6、函数总结

注意事项

• 方法定义时，形参的类型不用写,返回值类型可写可不写

• 如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念

• 在JS中，方法的调用只与方法的名称有关，和参数列表无关

• 在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数

• JS函数中也可以有匿名函数

匿名函数经常会跟事件进行结合着使用

function(参数列表){函数体;[return 返回值;]}

2.10、正则表达式

RegExp对象，正则对象，正则表达式的书写规则和Java也一致：

. 当前可以是任意字符
? 表示零次或一次
* 表示零次或多次
+ 表示一次或多次

() 对某个存在的正则进行分组组的使用 \组号$组号
{} 当前的规则可以出现的次数
{2} 正好 2次 {m,} 最少m次 {m,n} 最少m次 最多n
[] 当前位置上可以是中括号中某个字符
[abc] [^abc] [a-zA-Z][0-9]

\\d 当前位置上可以数字
\\w 当前位置上可以是字母 数字 下划线
\b 单词边界 hello world
^ 行开始
$ 行结尾

3、JS的常用内置对象

3.1、String对象

3.1.1、创建对象

有三种方式: 单引号(”) 、双引号(“”) 、反引号(“)

//双引号字符串 let s1 = "双引号字符串"; //单引号 let s2 = '单引号字符串'; //反引号字符又叫做`字符串模板` ,模板中可以使用${}来进行插值.let s3 = `反引号字符串`;let n = 3547;let s5 =`你的验证码是：${n}`;console.log(s5);//你的验证码是：3547

3.1.2、常用方法

let a = "我爱这个世界";document.write(a.substring(2, 6));document.write("
")let b = "abcdefg";document.write(b.toLocaleUpperCase());//把字符串转换为大写document.write("
")let c="ABCDEFG";document.write(c.toLocaleLowerCase());//把字符串转换为小写document.write("
")let e="awejjj";document.write(e.charAt(2));//从0开始 //edocument.write("
")let f="wii i";document.write(f.trim());//wii i//只清除两边的空白单词中间空格不清除document.write("
")let o="d,w,a,d,w";console.info(o.split(","));

3.2、Array对象

3.2.1、创建数组

let 数组名 = [元素1,元素2,元素3…..];

格式一

//数组中元素类型是随便写let arr = [11,22,33,44,"55"];//长度// alert(arr.length);//指定获取数组中的元素// alert(arr[4]);//通过脚标修改元素arr[2] = 99;arr[3] = "hello";//遍历一for(let i = 0; i< arr.length; i++){document.write(arr[i]);document.write("
");}//遍历二for(let a in arr){document.write(arr[a]+",");}

格式二

let 数组名 = new Array(元素1,元素2,元素3…..);

 //如果给出多个参数，表示的是数组的元素let arr = new Array(11,22,"hello",'88',true);//长度alert(arr.length);//获取alert(arr[2]);//如果给的参数所number类型，并且只有一个，表示是长度let arr = new Array(11);alert(arr.length);//如果给的参数所number类型，是一个小数，无法表示长度let arr = new Array(3.14);alert(arr.length);//如果给的参数字符中类型，并且是一个，表示元素let arr = new Array("11");alert(arr.length);//遍历for(let i in arr){document.write(arr[i]);}

3.2.2、常用方法

// 格式一创建数组let arr1 = ["张三","李四","王五",true];// 格式二 创建数组let arr2 = new Array("古力娜扎","玛尔扎哈",12.3,false);// arr1 和 arr2 合为一个数组let newArray = arr1.concat(arr2);console.log(newArray);// push: 添加一个新的元素let len = arr2.push("新元素");console.log(arr2);console.log(len);// join：按照一定的格式拼接字符串let strArray = arr2.join("=");console.log(strArray);

3.2.3、数组特点

1、JS中，数组元素的类型可变的。
2、JS中，数组长度可变的。

3.3、Math对象

3.3.1、创建对象

Math对象不用创建，直接使用。 Math.方法名();

let round = Math.round(3.14);let ceil = Math.ceil(3.14);let floor = Math.floor(3.14);let random = Math.random();// 获取1~100之间的随机整数let randomNumber =Math.floor((Math.random() * 100)) + 1;

3.4、Date对象

3.4.1、创建对象

var date = new Date();

3.4.2、常用方法

var d = new Date();console.info(d);//Fri Jul 02 2021 17:23:09 GMT+0800 (中国标准时间)console.info(d.toLocaleString());//2021/7/2 下午5:23:19console.info(d.toLocaleDateString());//2021/7/2console.info(d.toLocaleTimeString());//下午5:23:19console.info('获取年:'+d.getFullYear());//获取年console.info('获取月:'+d.getMonth());//获取月console.info('获取日:'+d.getDate());//获取日console.info('获取小时:'+d.getHours());//获取小时console.info('获取分:'+d.getMinutes());//获取分console.info('获取秒:'+d.getSeconds());//获取秒console.info('获取毫秒:'+d.getTime());获取毫秒

3.5、全局函数

3.5.1、什么是全局函数

全局函数不需要对象就可以直接调用: 方法名();

3.5.2、常用全局函数

console.log(parseInt("123.456"));//123console.log(parseInt("12abc3.456"));//12console.log(parseFloat("123.456"));//123.456console.log(parseFloat("123.45abc6"));//123.45console.log(parseInt("abc123"));//NaN : not a number 不是一个数字console.log(isNaN("abc123"));//true

如果要判断是否是一个NaN类型的数据，使用isNaN()

3.5.3、字符编码

let name = "明下午两点偷袭珍珠";let encodeName = encodeURI(name);//编码//%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0console.log(encodeName);// 对数据进行解码let resultStr = decodeURI(encodeName);//解码console.log(resultStr);

3.5.4、普通字符串解析js代码

3.5.5、URL和URI

如下面网址：

https://www.baidu.com/a/fdks/kdjs

http:// 网络传输协议

www 万维网

.baidu.com 域名

/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）

URL: 统一资源定位符 百度一下，你就知道

URI：统一资源标识符 /a/fdks/kdjs