JavaScript 基础
JavaScript 使用 JS 的几种写法行内式的 js 直接写道元素的内部
<button type="button" value="须弥" onclick="alert('纳西妲')"></button>
内嵌式 js
引入式
<script src="my.js"></script>
JS 注释单行注释与多行注释<script>// 单行注释 快捷键 CTRL+ //*多行注释 快捷键： shift + alt + a*/</script>JS 的输入输出语句 prompt('请输入你的年龄'); 输入框
alert('计算机结果是') 弹出框
console.log('程序员可见，在浏览器控制台'); 浏览器控制台 console 可见
doucument.write('要输出的内容'); 向 body 内输出内容，如果输出内容写的是标签，也会解析成网页元素
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</script>
</head>
<body></body>
</html>变量什么是变量？变量在 JavaScript 中就是用一个变量名表示，变量名是大小写英文、数字、 $ 和 _ 的组合，且不能用数字开头。变量名不能是 JavaScript 的关键字，如 if 、 while 等。
用来存储数据的一个空间。
变量的使用申明一个变量用 let 语句。
变量使用分两步：1. 声明变量 2. 赋值
如： let age; //声明变量，age 是声明的变量
变量初始化 let age = 19 ;
注意： let 声明变量只能声明一次。var 则可以声明多次，但是不推荐。
案例 1：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</script>
</head>
<body>
</body>
</html>案例 2
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><title>变量使用</title><script>// 1. 请输如用户名字 let myName = prompt('请输入你的名字');//2. 弹出 alert(myName);</script></head><body>
</body></html>变量的语法扩展一个变量被重新赋值后，原先的赋值被覆盖，一最后一次赋值为准。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let myname = "Nihida";alert(myname);myname = 'Barbatos';alert(myname);
</head><body>
</body></html>变量的命名规范由字母、数字、下划线、美元符号（$）组成严格区分大小写不能以数字开头，可以下划线、美元符号开头，其他符号不允许不能是 js 的保留字、关键字：let、console、name 等变量必须有意义遵守驼峰命名。首字母小写，后面的单词的首字母需要大写交换两个变量的值<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>交换两个变量的值</title><script>let nameA = 'Nahida',nameB = 'Barbatos',temp ;alert(nameA);alert(nameB);console.log(nameA,nameB)temp = nameA;nameA = nameB;nameB =temp;console.log(nameA,nameB)</script></head><body>
</body></html>数组的基本使用数组 Array 是一种可以按顺序保存多个数据
let arr = [];取值：arr[] 数组名[下标]
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = ['nahida','barbatos','Morax','Beelzebul'];console.log(arr);console.log(arr[0]);</script>
</body></html>数据类型计算机顾名思义就是可以做数学计算的机器，因此，计算机程序理所当然地可以处理各种数值。但是，计算机能处理的远不止数值，还可以处理文本、图形、音频、视频、网页等各种各样的数据，不同的数据，需要定义不同的数据类型。在 JavaScript 中定义了以下几种数据类型：
Number 字符串布尔值比较运算符 null 和 undefifined 数组对象数字型 NumberJavaScript 不区分整数和浮点数，统一用 Number 表示，以下都是合法的 Number 类型：
123; // 整数 123 0.456; // 浮点数 0.456 1.2345e3; // 科学计数法表示 1.2345x1000，等同于 1234.5-99; // 负数 NaN; // NaN 表示 Not a Number，当无法计算结果时用 NaN 表示 Infinity; // Infinity 表示无限大，当数值超过了 JavaScript 的 Number 所能表示的最大值时，就 表示为 Infinity-Infinity; //无穷小计算机由于使用二进制，所以，有时候用十六进制表示整数比较方便，十六进制用 0x 前缀和 0-9，a-f 表示，例如： 0xff00 ， 0xa5b4c3d2 ，等等。八进制以 0 开头，如 010、012。
初始化： let age = 123；
isNaN() 这个方法是判断是否是数字，是数字返回 true，不是就返回 false。//isNaN() 这个方法是判断是否是数字，是数字返回 true，不是就返回 falselet nameC = "ZhongLi"console.log(isNaN(nameC));let age = 100;console.log(isNaN(age));字符类型 String 字符串是以单引号'或双引号"括起来的任意文本，比如 'abc' ， "xyz" 等等。请注意， '' 或 "" 本身只是一种表示方式，不是字符串的一部分，因此，字符串 'abc' 只有 a ， b ， c 这 3 个字符。
可以单引号套双引号，也可以双引号套单引号：" ' ' " 、 ' " " '，不可以单引号套单引号或者双引号套双引号。
字符串转义字符，都是 \ 开头，但是这些转义字符都是写到引号里面。
案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>alert('须弥什么时候开？ \n 我不知道，"这个一定是米哈游干的"') // \n 换行</script></head><body>
</body></html>字符串长度以及拼接字符串的 length 属性可以获取整个字符的长度。
字符串的拼接 + 'str1' + 'str2' 字符串类型 + 任何类型 = 拼接智慧的新字符串
符号 + 数值是相加，字符是相连
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>alert('须弥什么时候开？ \n 我不知道，"这个一定是米哈游干的"')let str = '须弥什么时候开？ \n 我不知道，"这个一定是米哈游干的"';console.log(str.length);
</head><body>
</body></html>字符串拼接加强变量不要写在字符串里面，可以：字符串+ 变量 + 字符串
let age = 500;console.log('nahida age is ' + age + 'years');案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let age = prompt('请输入你的年龄');let str = "您今年" + age + '岁了';alert(str);</script></head><body>
</body></html>模板字符串符号：
··在英文输入模式下 tab 键上方的的那个键（1 左边的那个键）内容拼接变量时，用 ${ } 包住这玩意可以支持换行。举例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let age = prompt('请输入你的年龄');let str = 您今年 ${age} 岁了;alert(str);document.write(大家好，我今年${age}岁了);document.write( <div> <p>Beelzebul</p> </div> )</script></head><body>
</body></html>布尔值 Boolean、undefined 和 null 布尔值和布尔代数的表示完全一致，一个布尔值只有 true 、 false 两种值，要么是 true ，要么是 false ，可以直接用 true 、 false 表示布尔值，也可以通过布尔运算计算出来：
true; // 这是一个 true 值 false; // 这是一个 false 值 2 > 1; // 这是一个 true 值 2 >= 3; // 这是一个 false 值
let flag = true;ver flag2 = false;console.log(flag + 1) // 2console.log(flag + 1) // 1
let letiable = undefined; //undefine 只声明，不赋值 console.log(letiable + 1); //NaNconsole.log(letiable + 'Nahida'); //undefinedNahida
let space = null; //表示为空 console.log(space + 1); //1console.log(space + 'Nahida'); //nullNahida 获取变量的类型 typeof *
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let age =10,str = 'Nahida',flag = true,leti = undefined,nulli = null;console.log(typeof age);console.log(typeof str);console.log(typeof flag);console.log(typeof leti);console.log(typeof nulli); //objectconsole.log(typeof age+ '11') //number11 先判断 age 的类型，然后和 11 组成字符串为 number11</script></head><body>
</body></html>字面量在源码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。（不重要）
数据类型转换转换为字符串类型 toString() ：转换成字符串
let num = 1;alert(num.toString());
String() 强制转换额为字符串
let num = 1;alert(String(num));加号拼接 和字符拼接的结果都是字符串（更喜欢这个，一般称为 隐式转换）
let num = 1;alert(num + '字符串');转化为数字型（重点）parseInt(String)和 parseFloat(String) *（重点）parseInt('87'); //会得到整数，向下取整 parseInt('87px'); //只保留数字，如果非数字开头，则 NaNparseFloat('114.514'); //浮点数 parseFloat('114.514px'); //浮点数，只保留数字，如果非数字开头，则 NaNNumber()强制转换函数 和隐式转换 Number()内只能放数字类型的字符，其他的会报错
隐式转换：某些运算符被执行时，系统内部自动将数据类型进行转换。
利用算数运算 - * / 隐式转换，加号除外。
补充 + 号两边只要一个是字符串，就会把另外一个转成字符串
+ 号作为正号解析可以转换为 Number 类型
//Number(变量)let num = '114.514'Number(num) //强制转换函数
//利用算数运算 - * / 隐式转换 console.log(num - 0); //114.514console.log('120' - '110'); //10console.log(num * 1); //114.514console.log(+num); //114.514console.log(+'11' + 11) //22 计算年龄案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let ageA = prompt("输入你出生年");let ageB = prompt('今年年数');let age = 0;ageA = parseInt(ageA);ageB = parseInt(ageB);age = ageB - ageA;alert(ageB + '年时，你' + age + '岁了');</script></head><body>
</body></html>转型为布尔行 Boolean()函数
Boolean('true');Boolean('false');代表空、否定的值会被转换为 false，如 '' 、 0 、 NaN 、 null 、 undefined。其他非空字符、数字等类型皆转换为 true。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let myname = prompt('请输入你的姓名');let age = prompt('请输入你的年龄');let sex = prompt('请输入你的性别');alert('您的姓名是' + myname+'\n 您的年龄是' + age+'\n 您的性别是' + sex);</script></head><body>
</body></html>案例<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let price = +prompt('请输入商品价格'),num = +prompt('数量'),address = prompt('输入你的地址'),total = price * num;document.write(`<table><caption><h2>订单确认</h2></caption><tr><th>商品名称</th><th>商品价格</th><th>商品数量</th><th>总价</th><th>收货地址</th></tr><tr><td>小米 12 pro </td><td>{num} 元</td><td>{address} </td>
</tr></table>`)
</script>
</body></html>排错思路运算符算数运算符运算符号（加、减、乘、除、取余）：
// + - * / %
console.log(0.7 * 10); //7.00000000001let num = 0.1 + 0.2 ;console.log(num = 0.3); //false 注意：浮点数在算数运算里面会出现问题，不能用浮点数做对比。
算数运算符是有优先级的，先乘除后加减，有括号先算括号里。
表达式与返回值：// 是由数字、运算符、变量等组成的式子 为表达式 console.log(1 + 1); //2 返回值递增递减运算符++i i++ 单独使用时候效果一样的，但直作为 n = i ++ 或者 n = ++i ，效果是不一样的
//形如：let n=0, i = 0;
++i // i = i+1n = ++i //先自加，再赋值 i++ // i = i+1n = i++ //先赋值，再自加
--ii--
i +=2 // i = i + 2i -=2 // i = i - 2<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let i= 0, n= 2;n = i++;console.log(n); // n = 0console.log(i); // i = 1n = ++i; // n = 2 ; i = 2console.log(n); // 2
</script></head><body>
</body></html>比较常见的是 单独的使用 i++ 。但是其他也要掌握，面试和考试的时候为难人的
比较运算符当我们对 Number 做比较时，可以通过比较运算符得到一个布尔值：
2 > 5; // false5 >= 2; // true7 == 7; // true 实际上，JavaScript 允许对任意数据类型做比较：
false == 0; // truefalse === 0; // false 要特别注意相等运算符 == 。JavaScript 在设计时，有两种比较运算符：
第一种是 == 比较，它会自动转换数据类型再比较，很多时候，会得到非常诡异的结果；
第二种是 === 比较，它不会自动转换数据类型，如果数据类型不一致，返回 false ，如果一致，再比较。
由于 JavaScript 这个设计缺陷，不要使用== 比较，始终坚持使用 === 比较。 因为===是比较同类型的数值，优先使用全等符号===。
另一个例外是 NaN 这个特殊的 Number 与所有其他值都不相等，包括它自己：
NaN === NaN; // false 唯一能判断 NaN 的方法是通过 isNaN() 函数：
isNaN(NaN); // true 最后要注意浮点数的相等比较：
1 / 3 === (1 - 2 / 3); // false 这不是 JavaScript 的设计缺陷。浮点数在运算过程中会产生误差，因为计算机无法精确表示无限循环小数。要比较两个浮点数是否相等，只能计算它们之差的绝对值，看是否小于某个阈值：
Math.abs(1 / 3 - (1 - 2 / 3)) < 0.0000001; // true 逻辑运算符 && 与
|| 或
！ 非
与其他计算机语言的使用方法一致。
其他情况： 短路运算（逻辑中断）：当有多个表达式（值）时，左边的表达式可以确定结果时，就不再继续运算右边的表达式的值。
逻辑与： 表达式 1 && 表达式 2 如果表达式 1 为真 ，则返回表达式 2 如果表达式 1 为假， 则返回表达式 1console.log(123 && 456) //456console.log(0 && 456) // 0console.log(0 && 459+2356 && 100*235356) // 0
//如果有空、为 0 或者否定的，为假.其余的是真的逻辑或：表达式 1 || 表达式 2 如果表达式 1 为真，返回表达式 1 如果表达式 1 为假，返回表达式 2console.log(123 || 456) //123console.log(0 || 456) // 456console.log(1 || 459+2356 || 100*235356) // 1console.log(0 || 456 || 456+123) // 456
//如果有空、为 0 或者否定的，为假.其余的是真的
let num = 0;console.log(123 || num++); //123 123 为真，num++不执行 console.log(num); // 0 赋值运算符 i= 0;
n+=2; // n = n+2e-=2; // e = e-2v*=10; // v = v*3k/=13; // k = k/13p%=19; // p = p%19 运算符的优先级优先级越小越优先
JavaScript 基础插图
流程控制顺序结构、分支结构、循环结构
顺序结构按照代码的先后顺序，依次执行
分支结构根据不同条件，执行不同的路径代码
if 分支//语法结构 if(条件表达式){//条件成立时执行的执行语句}
//执行思路： 如果 if 里面的条件表达式为真，则执行大括号里边的执行语句//举例
if(5 > 3){alert(true);}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let age = prompt("请输入您的年龄")// age = parseFloat(age);if (age > 18){alert('您可以进入网吧了')}else {alert('您未满 18 岁或者输入年龄有误')}</script></head>
<body>
</body></html>if-else 分支 if(条件表达式){//条件为真，执行的语句} else{//条件为假。执行的语句}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let year = prompt("输入年份");year = parseInt(year);
</head><body>
</body></html>if -else if 多分支 if(条件一){//满足条件一执行的语句 1}else if(条件二){//满足条件二执行的语句 2
}else if(条件三){//满足条件三执行的语句 3
}else{//都不满足的时候，执行的语句
}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let performance = 0while (true){performance =prompt("请输入你的成绩");performance = parseFloat(performance);if (performance >= 90){alert('成绩优秀');}else if (performance >=80 && performance < 90){alert('成绩良好');}else if (performance >=60 && performance <80 ){alert('成绩合格');}else {alert('成绩不及格')}}
</head><body>
</body></html>三元表达式//三元表达式// 条件表达式 ？表达式 1 ：表达式 2// 条件表达式结果为真，执行（返回）表达式 1；如果条件表达式结果为假，执行（返回）表达式 2
//举例 let num = 5;let result = num > 5 ? '是的' : '不是的';console.log(result); //是的<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let num = prompt("请输入一个 0~59 的数字");let time = num<10 ? '0'+num : num; //三元表达式一定有一个返回值 alert(time);</script></head><body>
</body></html>switch 分支// 主要针对特定值，执行对应的语句// switch (判断表达式) {// case value1:// 执行语句一;// break;// case value2:// 执行语句一;// break;// ...// default:// 执行最后的语句;//// }
//如果表达式的值与 case 的 value 值匹配得上，就执行相应的语句。如果都没有匹配得上，就执行 default 里面的语句
//switch 的注意事项：//1. 表达式里边一般写为变量//2. case 的 value 值与判断表达式的值相匹配的时候是全等关系（也就是类型和数据值是一致的）//3. break；没有的话，会继续执行接下来的程序语句<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>switch (2) {case 1:alert(1);break;case 2:alert(2);break;
</head><body>
</body></html>switch 的注意事项：
表达式里边一般写为变量 case 的 value 值与判断表达式的值相匹配的时候是全等关系（也就是类型和数据值是一致的）break；没有的话，会继续执行接下来的程序语句<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><script>let f = prompt('请输入一种水果');switch (f){case '苹果':alert('3.5D/kg');break;case '榴莲':alert('6356D/kg');break;default:alert(null);}</script></head><body>
</body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>简易计算器</title></head><body><script>let num1 = prompt('输入第一个数');let num2 = prompt('输入第二个数');let sp = prompt('输入 +-/ 运算符');switch (sp) {case '+':alert(您选择的是加法，结果是${+num1 + +num2});break;case '-':alert(您选择的是减法，结果是${num1 - num2});break;case '':alert(您选择的是乘法，结果是${num1 * num2});break;case '/':alert(您选择的是除法，结果是${num1 / num2});break;default:alert('输入错误');
}
</script>
</body></html>if-if elae -else 和 switch 的区别
一般情况下，他们两个可以相互替换 switch 语句通常处理 case 的值的情况，而 if-else 语句更灵活 switch 语句进行条件判断后直接执行对应的程序语句，效率更高。而 if else if 语句会逐一判断各个条件，找到满足条件为止。当分支比较少时候，if-else 比较好一些当分支比较多的时候，switch 语句的执行效率更高一些，且结构清晰循环结构可以重复执行某些代码
循环退出： continue 和 breakcontinue：结束本次循环，继续下一次循环 break：直接退出 while 循环<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let i = 1;while (i < 6){if (i===3){i++;continue}if (i===4){i++;break}document.write(我要吃第${i}个包子<br>);i++;}
</body></html>for 循环 for(初始化变量;循环条件;操作表达式){//循环体}
//初始变量就是用 let 声明的一个普通变量，通常用于作为计数器使用//条件表达式 就是用来决定每一次循环是否继续执行 就是终止的条件//操作条件 是每次循环最后执行的代码 经常用于计数器变量进行更新
for(let i = 0 ; i <10 ; i++){alert('打印 10 次');}
// 先执行 let = 0// 再执行 i <100 判断条件，满足进行下一步// 执行循环体 alert('打印 100 次');// 执行 i++// 回到 执行 i <100 判断条件... 重复执行// 执行到没有满足 i <100 的判断条件，退出循环<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>//求 1-100 之间的偶数和 let sum = 0;for (let i = 0; i <= 100; i++) {if (i % 2 ===0){sum +=i;}
}document.write(sum);
//页面中打印 5 个小星星 for (let n = 0; n < 5; n++) {document.write('⭐');}</script>
</body></html>循环遍历数组：
let arr = ['Nahida','Barbatos','Morax','Beelzebul'];for (let j = 0; j < arr.length; j++) {document.write(${arr[j]} <br>)}循环嵌套 for(外部循环){for(内部循环){循环体;}}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>for (let i = 0; i < 5; i++) {for (let j = 0; j < 5; j++) {document.write(※)}document.write('<br>');}</script>
</body></html>案例：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三角形</title></head><body><script>for (let i = 1; i < 6; i++) {for (let j = 1; j <= i; j++) {document.write(★)}document.write('<br>');}</script>
</body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三角形</title><style>div{display: inline-block;height: 25px;line-height: 25px;background-color: aqua;margin: 5px;padding: 0 10px;border: 1px solid #66ccff;box-shadow: 2px 2px #66ccff;color: #1f9763;border-radius: 5px;}</style></head><body><script>for (let i = 1; i < 10; i++) {for (let j = 1; j <= i; j++) {document.write( <div>${i} x ${j} = ${i * j} </div> )}document.write('<br>');}</script>
</body></html>断点调试：浏览器，快捷键 F12（鼠标右键->检查）选择 ”Source“选择想要测试的代码，点击对应的行号，设置断点刷新浏览器点击一个 "向下弯曲的箭头 ，下面有一个点 " 的图标，逐步测试 while 循环 while() 在...区间
while(循环条件){//重复执行（循环体）}
//循环体为真时，重复执行循环体<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let i = 1;while (i <= 10){document.write(考研上岸,月薪过万<br>);i+=2;}
//计算 1~100 的累加 let j = 1;let sum = 0;while (j <=100){sum +=j;j++;}document.write(sum)
//计算 1-100 之间的偶数和 let n = 1;let sumD = 0;while (n <= 100){if (n % 2 ===0){sumD = sumD + n;}n++;}document.write(sumD)</script>
</body></html>do...while 循环（很少用）练习<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>简易 ATM</title></head><body><script>let money = 1000;while (true){let str = prompt(请输入您的操作： 1. 存钱 2. 取钱 3. 查看余额 4. 退出 );if ( str === '4') {break;}switch (str){case '1':let store = +prompt('请输入您存入的金额');money = money + store;break;
}</script>
</body></html>for 和 while 的区别当如果明确了循环次数的时候推荐使用 for 循环当不明确循环次数的时候推荐 while 循环数组声明语法：let arr = ['nahida','barbatos','Morax','Beelzebul']; let 数组名 = [元素 1 ，元素 2，元素 3，]
取值：arr[0] 数组名[下标]
案例
数组求和
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = [2,6,1,7,4];let sum = 0;for (let i = 0; i < arr.length; i++) {sum = sum + arr[i];}document.write(数组求和：${sum});</script>
</body></html>求数组中的最大值：
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = [2,6,1,77,52,25,7];let max_value = arr[0];for (let i = 0; i < arr.length; i++) {if (max_value < arr[i])max_value = arr[i];}document.write(最大值：${max_value});</script>
</body></html>操作数组增删查改：
查询数组： 数组[下标]
改（重新赋值）：数组[下标] = 新值
增 （添加新数据） arr.push (新内容） arr.unshift(新增的内容)
删 删除数据 arr.pop() arr.shift() arr.splice(操作下标 ，删除个数)
添加数组元素这一种方法是从数组结尾添加元素，顺带返回数组长度 arr.push(元素 1，元素 2，元素 3 ...)
这一种方法是从数组的开头添加元素，顺带返回数组长度
arr.unshift(元素 1，元素 2，元素 3 ...)
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arrA = [2,0,6,1,77,0,52,0,25,7];let arrB = [];let arrC = [];for (let i = 0; i < arrA.length; i++) {if (arrA[i] >= 10){ //将 A 数组大于 10 的元素存入 B 数组 arrB.push(arrA[i]);}if (arrA[i] !== 0){ //将 A 数组非 0 的元素存入 B 数组 arrC.push(arrA[i]);}}document.write(arrA);document.write(<br>)document.write(arrB);document.write(<br>)document.write(arrC);</script>
</body></html>删除数组元素从数组结尾删除元素：arr.pop()
删除素组的第一个元素 ： arr.shift()
指定指定元素（开发常用） ： arr.splice(数组下标 ，删除个数) arr.splice(起始位置 ，删除个数) 。
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = ['nahida','Barbatos','Morax','Beelzebul'];
</script>
</body></html>冒泡排序<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = [2,0,6,1,77,1,52,3,25,7];let temp = 0;for (let i = 0; i < arr.length-1; i++) {for (let j = 0; j < arr.length - i -1 ; j++) {if (arr[j+1] <arr[j]){temp = arr[j];arr[j] = arr[j+1];arr[j+1] = temp;}}}console.log(arr)
</script>
</body></html>综合案例用户输入 4 个季度数据，生成 4 个季度的柱状图
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title><style>*{margin: 0;padding: 0;}.box{display: flex;width: 700px;border-left: 1px solid pink;border-bottom: 1px solid pink;margin: 50px auto;justify-content: space-around;align-items: flex-end;text-align: center;}.box>div{display: flex;width: 50px;background-color: pink;flex-direction: column;justify-content: space-around;}.bax div span{margin-top: -20px;}
</head><body><script>let arr = [];for (let i = 0; i < 4; i++) {let num = +prompt(请输入第${i+1} 个季度的数据);arr.push(num);}console.log(arr)document.write(<div class="box">)for (let j = 0; j < arr.length; j++) {document.write( <div style="height: ${arr[j]}px"> <span>${arr[j]}</span> <h4>第${j+1}个季度</h4> </div> )}document.write(</div>)</script>
</body></html>函数基本使用精简代码，方便复用，提高开发效率。
函数的声明语法
function 函数名(){函数体}函数的调用 函数名()
函数命名的规范：
和变量名基本一致尽量小驼峰式命名法前缀应该为动词命名建议：常用动词约定 如 function getName(){}<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>三角形</title><style>div{display: inline-block;height: 25px;line-height: 25px;background-color: aqua;margin: 5px;padding: 0 10px;border: 1px solid #66ccff;box-shadow: 2px 2px #66ccff;color: #1f9763;border-radius: 5px;}</style></head><body><script>function fn(){for (let i = 1; i < 10; i++) {for (let j = 1; j <= i; j++) {document.write( <div>${i} x ${j} = ${i * j} </div> )}document.write('<br>');}}
</script>
</body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>function getSum(){let num = 12;let num2 = 16;document.write(num + num2);}
getSum();function getSum100(){let sum = 0;for (let i = 1; i < 101; i++) {sum +=i;
}getSum100();</script>
</body></html>参数需要参数的传参。使用者可以通过传入数据，那么就需要有参数的函数。以提高函数的灵活性。
开发种尽量保持形参和实参个数一致。
function 函数名(参数列表){函数体}function getSum(num1 , num2){let sum = num1 + num2;console.log(sum);}
getSum(1,2)
// num1 和 num2 是形参// 1、2 是实参案例：函数封装求和
合理利用逻辑中断
function getSum(x, y){x = x || 0;y = y || 0;console.log(x+y);}getSum(1,2);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>function getScore(numbers) {let sum = 0;for (let i = 0; i < numbers.length; i++) {sum +=numbers[i];
}
getScore([99,100,93]);
</script>
</body></html>返回值、返回多个值函数的返回值。当调用某个函数值的时候，函数返回一个特定的值。但是有些函数根据需求不需要返回值。
很多情况下需要返回值。
返回一个值如果函数需要返回数据时候，使用 return 关键字修饰 return 数据 return 20
return 有立即结束函数的作用。如果函数中没有写 return 则默认为为 undefined
function fn(){return 20;}
console.log(fn());
function getSum(x, y){x = x || 0;y = y || 0;return x+y;}let sum = getSum(1,2);console.log(sum);
function fn2(){
}let i = fn2(); //undefine<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>function getArrMaxValue(arr){let Max = arr[0];for (let i = 1; i < arr.length; i++) {if (arr[i] >= Max){Max = arr[i];}}return Max;}let maxP = getArrMaxValue([65,25,65,94,215,435,45])document.write(maxP);
</script>
</body></html>返回多个值 return 只返回一个值
function fn(x,y){let jia = x+y;let jian = x-y;return [jia , jian];}
let re = fn(1,2);document.write(相加之后的值是${re[0]}，相减之后的值是${re[1]});作用域以及作用域链作用域限定某个名字的可用性的代码范围（一个程序代码中所用到的名字并不是总时有效的和可用的）就是在那个位置起作用
作用域有全局作用域（整个 script 标签内部）、局部作用域（函数内的代码环境）、块级作用域（由{}包括，if 语句和 for 语句里面的{} 等）
let num = 10; //全局变量 function fn(){console.log(num);if(true){console.log(num);}}
//=======================function fn2(){let num2 = 20; //局部变量 function fn21(){let num3 = 30;}console.log(num3)//报错}console.log(num2); //报错
//=======================
if(true){let num5 = 50; //块级变量}consloe.log(num5); //报错坑： 如果在内部或者块级的内部直接赋值，则当作全局变量。函数形参是局部变量。
//一般 let sum = 0;
//max = 100; //全局变量作用域链变量的访问原则：就近原则,找到最终的值
let num = 10;function fn(){let num = 20;console.log(num); //20}匿名函数具名函数
function fn(){}fn();匿名函数
function(){//函数体}
// 1 种写法 let num = 10;let fn = function(){console.log(111);}fn();
// 2 种写法 let fn2 = function(x, y){console.log(x+y);}fn2(1,2);<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><button>点击我</button><script>// let btn = document.querySelector('button')// btn.onclick = function (){// alert('月薪过万');// }
let btn = document.querySelector('button')btn.addEventListener('click',function (){alert('月薪过万');})</script>
</body></html>立即执行函数立即执行，不用调用。多个立即执行函数之间必须有分号隔开
(function(){ console.log(11) })() //方式一
(function(){console.log(11)}()) //方式二<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><button>点击我</button><script>// let btn = document.querySelector('button')// btn.onclick = function (){// alert('月薪过万');// }
//第一个小括号放的是形参，第二个小括号里面放的是实参
(function (){console.log(111);})();(function (){ console.log(111)}());
(function (x , y){return x+y;})( 1 ,2);
(function (x,y){return x+y;}(1,2));</script>
</body></html>综合案例：转换时间<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let time = +prompt('请输入秒数');function getTime(time){
}let str = getTime(time);document.write(str);</script>
</body></html>实参个数少于形参，返回结果 NaN 实参个数多于形参，实际只看形参个数的多少，剩下的将不被处理如果不知道实参个数，可以算数下面的方式 function fn(){
//arguments 函数内有效 ，表现形式是伪数组//伪数组 比真数组 少了一些 pop push 等方法 console.log(arguments); //[1,2,3]let sum = 0;for(let i = 0; i<arrguments.length;i++){sum += arguments[i];}console.log(sum);}
fn(1,2,3) //6 函数传参赋值小技巧我怕你传参不带参数
方法一
function fn(x, y){x = x || 0;y = y || 0;console.log(x+y)}
fn();fn(1,2)方法二
function fn(x= 0,fn = 0){console.log(x+y)}
fn()fn(1,2) //调用的时候会进行内部替换对象，面向对象编程啥是对象？Object：对象也是一种数据类型，一种无序的数据集合。
对象声明语法：
ler 对象名 = {属性名: 属性值方法名 : function(){}}
//例子 let person = {uname = 'Barbatos',age = '5000',sex = 'M'，sayHi: function(){document.write('hi~');}，mtv: function(x){console.log(x)}}
//属性访问 let uname = person.uname; // 访问属性一 对象名.属性名 person.sayHi(); // 访问对象方法 person.mtv('Genshin Impact') // 访问对象方法并传参
let unmae = person['uname'] // 访问属性二 对象名['属性名']操作和遍历增删查改
改：属性赋值
对象.属性 = 值；对象.方法 = function(){}增：添加对象属性（js 可以非常方便的的动态新增属性或者方法）
对象.新属性 = 值;let person = {uname = 'Barbatos',age = '5000',sex = 'M'，sayHi: function(){document.write('hi~');}，mtv: function(x){console.log(x)}}
//改 persion.uname = 'Venti';persion.sayHi = function(){document.write('欸嘿');}
//新增 person.aName = '卖唱的';person.move = function(){};//删 delete person.aName;delete person.move;
//对象遍历 for(let key in person){console.log(key) //属性名 console.log(person[key]); //属性值 由于 unmae = person['uname']，可以把 key 看作是 'uname’}对象遍历 for(let key in 对象){//key//对象[key]}案例：学生信息表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><style>table{width: 700px;text-align: center;}
</style><body><script>//数组 里面可以存放任何数据类型，对象也可以//对象数组 let students= [{name : 'Barbatos', age:4000, gender : 'm' , hometown : 'MD'},{name : 'Morax', age:6000, gender : 'm' , hometown : 'LY'},{name : 'Beelzebul', age:3000, gender : 'w' , hometown : 'DQ'},{name : 'Nahida', age:500, gender : 'w' , hometown : 'XM'},];
document.write( </table>)</script><table><caption>学生列表</caption><tr><th>序号</th><th>姓名</th><th>年龄</th><th>性别</th><th>家乡</th></tr><tr><td>1</td><td>小米</td><td>16</td><td>男</td><td>河北</td></tr></table></body></html>Math 数学对象内置对象：JavaScript 一般也会有一些封装好的对象，提供开发者使用 Math 对象方法：
random() 生成 0-1 之间的随机数（不包括 0 和 1）ceil() 向上取整 floor() 向下取整 max() 找最大数 min() 找最小数 pow(x,y) 幂运算 abs() 绝对值 round() 就近取整（负值时，-*.5 往大取整 -1.5 取-1 值， -1.9 取-2 值 ， -1.1 取-1 值）其他方法，百度 console.log(Math.PI) //圆周率 属性
console.log(Math.random()) //随机数 方法随机数如何随机数
生成 0-10 的随机数：
Math.floor(Math.random()*10+1);生成 5-10 的随机数
Math.floor(Math.random()*(5+1)+5);生成 N-M 之间的随机数
Math.floor(Math.random()((M - N) + 1 ) + N );function getRandom(min,max){return Math.floor(Math.random()((max - min)+1) + min);}
let random = getRandom(1,10);案例：随机数点名
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>let arr = ['Nahida','barbatos','Morax','Beelzebul'];function getRandom(min,max){return Math.floor(Math.random()*((max - min)+1) + min);}
let random = getRandom(0,3);document.write(arr[random]);arr.splice(random,1);document.write(<br>)document.write(arr);
</script>
</body></html><!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><script>
function getRandom(min,max){return Math.floor(Math.random()*((max - min)+1) + min);}let random = getRandom(1,10);while (true){let num = +prompt("猜一个数");if (num === random){alert('猜正确了');document.write(random);break;}else if (num > random){
}
</script>
</body></html>综合案例：学成在线
<!DOCTYPE html><html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>学车在线首页</title><link rel="stylesheet" href="style.css"><style>* {margin: 0;padding: 0;}.w {width: 1200px;margin: auto;}body {background-color: #f3f5f7;}li {list-style: none;}a {text-decoration: none;}.clearfix:before,.clearfix:after {content:"";display:table;}.clearfix:after {clear:both;}.clearfix {*zoom:1;}
</head>
<body>
</body>
</html>不同数据类型的存储方式 JavaScript
版权声明: 本文为 InfoQ 作者【卢衍飞】的原创文章。
原文链接:【http://xie.infoq.cn/article/5bed128349ae5680730167ebd】。
本文遵守【CC-BY 4.0】协议，转载请保留原文出处及本版权声明。
君子藏器于腹，待时而动. 2022-11-08 加入
宜塔阿里巴巴低代码高级开发师 腾讯云V加开发者认证 HarmonyOS应用开发者认证 华为云云享专家Java开发工程师
评论