提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
一、JavaScript Switch 语句
示例:switch 语句用于基于不同的条件来执行不同的动作。
1.语法
代码如下(示例):
switch (year % 400) {
case 0:
return true;
default:
if (year % 4 == 0 && year % 100 !== 0) {
return true;
}
return false;
}
2.工作原理
首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
3.注意事项
1.switch..case的效率问题case后面是字面量(常量)
2.不要强用Switch
3.函数名的命名规则:小驼峰式
4.Switch...case 里的break是可选的
二、循环
1.For循环
for 循环是您在希望创建循环时常会用到的工具。
(1)语法
for (语句 1; 语句 2; 语句 3){被执行的代码块}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
for (let i = 0; i < arr.length; i++) {
if (num == arr[i]) {
return i;
}
}
return -1;
}
(2)注意事项
1.let i=0;初始循环条件,当i=0,循环开始,只走一次,在第一次循环的初始化只走一次
2.i<10 判断循环体,会和初始化等条件配合循环的执行
3.i++ 循环条件 每次循环体执行完毕让i产生变化
4.面试题:for循环步骤
a.i可以看做一个局部变量
b.循环条件是可以根据实际情况更改的
c.当循环条件修改时,要确保循环可以向着终点前进
d.开发中,避免死循环
三、For/In循环
JavaScript for/in 语句循环遍历对象的属性。
1.语法
let arr=[1,2,3,4,5];
// for in 语句,能做的较少,只能做遍历操作
// 可以理解为a式arr数组的下标通过映射给a
for(let a in arr){
console.log(arr[a]);
}
四、While循环
1.语法
While 循环会在指定条件为真时循环执行代码块。
let a = 10;
function isexist() {
let year = 2022;
while (a <= 100) {
year++;
a = a * 1.1;
Math.trunc(a);
}
return year+"年人数超过100人,人数是:"+a;
}
console.log(isexist());
2.注意事项
let a=10;初始条件
a<100 循环判断条件
a++ 循环条件
while循环执行流程
1. 初始化条件
2. 判断条件
3. 执行循环体
4.自增
while 循环 pk for循环
初始化条件不好控制 每个for循环的初始化条件都是隔离的
循环条件不好控制 每个for循环的a++都是隔离的
写函数时,返回值便于管理
提示:如果忘记增加条件中所用变量的值,该循环永远不会结束。该可能导致浏览器崩溃。
五、Do/While循环
do/while 循环是 while 循环的变体。该循环会执行一次代码块,在检查条件是否为真之前,然后如果条件为真的话,就会重复这个循环。
1.语法
let a=10;
do{
a++;
console.log(a);
}
while(a<20);
2.注意事项
do...while循环
let a 初始化
do做什么事 log 循环体 a>100 判断条件
do...while 和while区别:
do...while 先执行一次,无论条件是否成立,都至少走一次
while 如果条件不成立,一次都不走
死循环
for(;;){}
while(true){}
do{}while(true);
别忘记增加条件中所用变量的值,否则循环永远不会结束!
六、内置函数
1、Array
1.concat()连接
2.jion()设置分隔符连接数组为一个字符串
3,pop()删除最后一个函数
4.sort()从小到大排序
2.Global
1.isNaN():判断一个值是不是数字
2.parseFloat():把一个整数转成一个小数
3.parseInt():把一个小数转成整数
4.number():把一个只转成number类型
5.string():把其他类型转成字符串110+120+119
3.string:
1.charAt():取出指定位置的字符
2.indexOf():判断指定字符是否存在,如果存在返回下标
3.lastIndexOf("a"):从后往前找
4.resplace("a","b"):替换字符串
5.split("-"):根据-去拆分字符串,得到一个数组
6.substring(1,6):字符串的截取
4. Math:
1.ceil()向上取整
2.floor()向下取整
3.round()四舍五入
4.random()随机,生成0-1的随机数
5.tan() sin cos cot
6.E PI
5.Date:
1.new Date():获取当前时间
2.getDate():返回日期的日 1~31
3.getHours():返回时间中的时0~23
4.getMinutes():返回时间中的分
5.getSeconds():返回时间中的秒
6.getTime():获取系统当前时间
6.新写法
新写法 .aaa/#div
let div=document.querySelector("#div");
div.innerText =“<b>我是加粗的</b>”;
console.log(div.innerText);
div.innerHTML =“<b>我是加粗的</b>”;
console.log(div.innerHTML);
7.抓元素
1.根据id抓元素
let div1=document.getElementById("div1");
console.log(div1);
2.根据class抓元素,并得到元素
let div=document.getElementsByClassName("div");
console.log(div[0]);
3.根据tag抓取HTML元素,得到的是一堆元素
let div = document.getElementsByTagName("div")
console.log(div[0]);
4.新方法
.根据选择器去抓取一个元素
let div =document.querySelector(".div2");
console.log(div2);
实例:
<p>
账号: <input type="text" id="username">
</p>
<p>
密码: <input type="text" id="password">
</p>
<p>
<input type="button" value="登录" onclick="login()">
</p>
<script>
function login() {
let username = document.querySelector("#username").value;
let password = document.querySelector("#password").value;
if (username == "admin" && password == "123456") {
alert("登陆成功");
} else {
alert("用户名或密码错误!");
}
}
</script>
8.二级联动
<select id="sheng" onchange="setshi">
<option value="ji">吉林省</option>
<option value="liao">辽宁省</option>
</select>
<select id="shi">
<option>---请选择城市---</option>
<!-- <option value="cc">长春市</option>
<option value="sy">沈阳市</option>
<option value="sp">四平市</option>
<option value="dl">大连市</option> -->
</select>
<script>
function setshi(){
let sheng=document.querySelector('#sheng').value;
let shi=document.querySelector('#shi');
shi.innerHTML=null;
shi.innerHTML='<option value="">---请选择市----</option>'
let htm=shi.innerHTML;
if(sheng == 'jl'){
//追加
htm += '<option value="cc">长春市</option><option value="sp">四平市</option>';
shi.innerHTML=htm;
}
htm=shi.innerHTML
if(sheng=='ln'){
htm += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
shi.innerHTML=htm;
}
htm=shi.innerHTML
9.三级联动
<select id="sheng" onchange="setshi()">
<option value="">---请选择省----</option>
<option value="jl" >吉林省</option>
<option value="ln" >辽宁省</option>
</select>
<select name="" id="shi" onchange="setshi1()">
<option value="">--请选择市----</option>
</select>
<select id="qu">
<option value="">--请选择区----</option>
</select>
<script>
function setshi1(){
let sheng=document.querySelector('#sheng').value;
let shi=document.querySelector('#shi');
let qu=document.querySelector('#qu')
qu.innerHTML=null;
shi.innerHTML=null;
shi.innerHTML='<option value="">---请选择市----</option>'
qu.innerHTML='<option value="">--请选择区----</option>'
let htm=shi.innerHTML;
if(sheng == 'jl'){
//追加
htm += '<option value="cc">长春市</option><option value="jls">吉林市</option>';
shi.innerHTML=htm;
}
htm=shi.innerHTML
if(sheng=='ln'){
htm += '<option value="sy">沈阳市</option><option value="dl">大连市</option>';
shi.innerHTML=htm;
}
htm=shi.innerHTML
}
function setshi1(){
let shi=document.querySelector('#shi').value;
let qu=document.querySelector('#qu');
qu.innerHTML=null;
qu.innerHTML='<option value="">--请选择区----</option>'
let htm=qu.innerHTML;
if(shi=='cc'){
htm+='<option value="cyq">朝阳区</option><option value="gxkfq">高新开发区</option>'
qu.innerHTML=htm;
}if(shi=='jls'){
htm+='<option value="cy">昌邑区</option><option value="lt">龙潭区</option>'
qu.innerHTML=htm;
}if(shi=='sy'){
htm+='<option value="aq">A区</option><option value="bq">B区</option>'
qu.innerHTML=htm;
}if(shi=="dl"){
htm+='<option value="cq">C区</option><option value="dq">D区</option>'
qu.innerHTML=htm;
}
}
</script>
七、学习心得
二级联动,三级联动没咋听懂,懵懵的,自己写总是错,心态崩了!!!