济南公司快速建站,wordpress新用户管理,中国建筑出国招聘网,google关键词排名优化✨✨ 欢迎大家来到景天科技苑✨✨
#x1f388;#x1f388; 养成好习惯#xff0c;先赞后看哦~#x1f388;#x1f388;
所属的专栏#xff1a;前端泛海 景天的主页#xff1a;景天科技苑 文章目录 1.流程控制与分支结构1.if分支结构2.switch case 分支结构3.循环结…
✨✨ 欢迎大家来到景天科技苑✨✨ 养成好习惯先赞后看哦~
所属的专栏前端泛海 景天的主页景天科技苑 文章目录 1.流程控制与分支结构1.if分支结构2.switch case 分支结构3.循环结构 2.函数1.函数定义方式一 普通函数2.函数定义方式二匿名函数3.变量提升4.函数定义方式三不推荐 (了解) 把代码写在Function()里面5.函数定义方式四闭包函数6.函数定义方式五箭头函数7.函数参数 (普通位置参数,默认参数)8.arguments 自动收集所有的实参是个数组 3.函数调用 1.流程控制与分支结构
在javascript中的一个程序执行的过程中各条代码的执行顺序对程序的结果是有直接影响的。
很多时候我们要通过控制代码的执行顺序来实现我们要完成功能。
简单理解︰流程控制就是来控制我们的代码按照什么结构顺序来执行
流程控制主要有三种结构分别是顺序结构、分支结构和循环结构这三种结构代表三种代码执行的顺序。
1.if分支结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title流程控制 - 分支结构 /title
/head
bodyscriptvar mashengni 美女;//1.单项分支// if(mashengni 美女){// alert(给他买好吃的~);// }//2.双项分支// if(mashengni 野兽){// alert(给他一榔头~);// }else{// alert(跳起来给他一榔头~);// }//3.多项分支// 不推荐判断条件连续比较,有可能失效;多条件用 连接才行不能用 10000 salary15000var salary 1000;if(10000 salary salary 12000){console.log(正常薪资范围~);}else if(12000 salary salary 15000){console.log(超过一般水平~);}else if(15000 salary salary 18000){console.log(大神级毕业生~);}else if(salary 18000){console.log(王牌毕业生~);}else{console.log(回炉重生~)}//4.巢状分支分支嵌套var youqian true;var youfang true;if(youqian){if(youfang){console.log(老子要嫁给你~!);}}/script/body
/html2.switch case 分支结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title分支结构 : switch case /title
/head
bodyscriptjs日期
日期的获取方法 Date/date
获取当前小时 var date new Date();console.log(date);// 获取星期 getDayvar week date.getDay();console.log(week)week 1// 注意点: switch case中的判断(全等于): (1) 值的比较(2)类型的比较 全部符合才能满足条件;switch语法 switch (week){case 1:console.log(星期一);break; //一定要加break 打断后续的case, 能防止case穿透 不然寻找到正确的条件之后后面的case不做判断直接执行case 2:console.log(星期二);break;case 3:console.log(星期三);break;case 4:console.log(星期四);break;case 5:console.log(星期五);break;case 6:console.log(星期六);break;default: //所有条件都不满足走default分支console.log(星期日!);break;}week为字符串’1’case里面是数值1所以匹配不到打印出默认值 星期日
将week改为1则匹配成功 /script/body
/html// 给你月份判断该月份是第几季度利用case穿透使代码更简洁
// var month 2
// switch (month){
// case 1:
// case 2:
// case 3:
// console.log(第一季度);
// break
// case 4:
// case 5:
// case 6:
// console.log(第二季度);
// break
// //...
// }3.循环结构
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title分支结构 : 循环结构 /title
/head
bodyscript// ### 1.for循环/*语法特征:1号 2号 3号for(初始值;判断条件;自增自减的值){code1code2..}先执行1,2满足后执行代码体然后执行3,2满足后在执行代码体以此类推...直到不满足条件终止循环;*/// 打印 1~100for(var i 1;i100;i){console.log(i);}// 打印1~100 遇到50,自动跳过;
for(var i 1;i100;i){if(i 50){continue;}console.log(i);
}50被跳过 // ### 2.while 循环//遇到5,终止循环i 0while(i10){if( i 5){break;}console.log(i);i; } console.log(第一组)// ### 3.for( var i in Iterable ) 获取的是数组中的索引号;var arr [孟浩然,赵子龙,康乃馨,张飞,汪精卫];可以根据索引拿数组中的值 for(var i in arr ){console.log(i);console.log(arr[i]);}console.log(第二组)
// 获取的是js对象中的键
var dic {a:王同培,b:马村你,c:张宇};
for(var i in dic){console.log(i) console.log(dic[i]) ;
}console.log(第三组)// ### 4.for( var i of Iterable ) 获取的是数组中的值; [等价于python中 for i in Iterable:]for(var i of arr){console.log(i);}console.log(第四组)// 注意点: for(var i of dic) 不能遍历js对象[字典] error/*var dic {a:王同培,b:马村你,c:张宇};for(var i of dic){console.log(i) }*/// 字符串的遍历:for(var i of abcdefg){console.log(i)}/script
/body
/html2.函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。JavaScript函数语法,函数就是包裹在花括号中的代码块前面使用了关键词 function 当调用该函数时会执行函数内的代码。可以在某事件发生时直接调用函数比如当用户点击按钮时并且可由 JavaScript 在任何位置进行调用。 将脚本编写为函数就可以避免页面载入时执行该脚本。 函数包含着一些代码这些代码只能被事件激活或者在函数被调用时才会执行 [1]。 你可以在页面中的任何位置调用脚本如果函数嵌入一个外部的 .js 文件那么甚至可以从其他的页面中调用。函数在页面起始位置定义即 head 部分。
1.函数定义方式一 普通函数
(存在预加载机制,提前把函数加载到内存中,然后代码整体再执行)
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title函数/title
/head
bodyscriptfunc1()// ###1 函数// 方式一 普通函数 (存在预加载机制,提前把函数加载到内存中,然后代码整体再执行)func1()function func1(){console.log(111);}存在预加载机制可以先调用再定义
函数命名的特殊字符
$和_
function _(){console.log(我是一个$函数);}_(); // $, _普通字符 - 1是为了简单, 2是为了绕你// // fn();// 让变量fn所指向的那个东西. 运行起来//// gn fn; // 实际上是内存地址的复制// fn();// gn(); // 123 对// // 函数的运行不是依赖于函数名. 而是依赖于内存地址2.函数定义方式二匿名函数
(匿名函数没有预加载价值,必须先定义再调用) 匿名函数想要运行 让该内存地址 加括号就可以了
// func2() error
var func2 function(){console.log(我是func2~);
}
func2();匿名函数先调用报错
先定义后调用正常执行 var x (function(a){ // 形参-变量console.log(我爱你a);return 堕落小羊})(123456); // 自运行函数console.log(x);window是顶级作用域,内部的东西想要调用的话. 可以省略window// // 关于对象的补充// var wf {// name: 子怡,// age: 199,// songs: [吹天理, 夏天不里, 秋天奖励, 冬天美丽],// chi: function(){// // this就是当前对象// console.log(this.name 喜欢吃饭); // this关键字// this.he(北冰洋);// },// he: function(yinliao){// console.log(this[name] 在喝 yinliao);// } // 7// }//// wf.chi(); // 777 999// // 在前端js中不存在多个返回值// function fn(){// // 前端 多个逗号隔开. 最终返回的是最后一项.// //// var i 0// i;// i;// i;// return i;// return na(),// n,// tb(n),// t;// }//// var r fn();// console.log(r);如果要返回多个值需要用数组包裹
也可以封装到json中返回
3.变量提升
// 记住结论即可
// var - 创建变量
// let - 创建变量
// const - 创建常量// function fn(){
// // 提前声明name, 这种现象叫变量提升
// // 站在开发人员的角度分析. 是不合理的.
// console.log(name);
// var name 大马猴; // 正常人理解. 应该是报错的.
// // 新版本的js - es6 对变量的提升进行的修复.
// // let声明的变量. 没有变量提升
// }
// fn()// 常量的声明,不希望后续的程序去修改该变量的值
// const BIRTH_DAY 2000;
//
// BIRTH_DAY 1998; // 把规范的东西标准化
// console.log(BIRTH_DAY);变量提升打印出name undefined
const 修饰的常量不允许修改强制修改报错
4.函数定义方式三不推荐 (了解) 把代码写在Function()里面 // var func3 new Function(alert(我是func3~);alert(woshi3333););// console.log(func3,typeof(func3));// func3();带参数前面写参数后面写代码体// var func4 new Function(x,y,alert(xy));// func4(5,6);5.函数定义方式四闭包函数
function func5(){var a 100;function func6(){console.log(a,);return 我是闭包函数;}return func6;
}func func5();
res func();
console.log(res);内函数使用了外函数的变量外函数将内部函数返回出来 func6是闭包函数
在一个html中引入多个js文件时大概率会出现变量名冲突的变量 怎样才能让自己代码的变量名与别人的不冲突呢 将变量名设为局部变量
外部要想用到局部变量则需要将变量返回出来 此时就用到了闭包
// rsa 加密 - key
// 这里直接用var声明的东西. 自动进window
(function(){// 局部变量// 外界无法对key进行修改var key 22222222;var b64 function(){console.log(我是rsa, 我也需要b64);}// 提供给外界的一个接口.// 外界使用该变量来访问闭包中的功能window.rsa function(){console.log(我也要开始加密了. 我是rsa)b64();console.log(key);return rsa加密结果;}
})()6.函数定义方式五箭头函数
function mysum(x,y){return xy;
}
res mysum(5,6)
console.log(res,11122233);
var mysum (x,y) {return xy;}
var res mysum(5,6);
console.log(res,3334444);箭头函数把一个函数传递到另一个函数作为参数 箭头格式不能变一定得是向右指向
// if (a 5) console.log(3333333); // 如果只有一句话.可以省略大括号
// else {
// console.log(6666666);
// }// let fn function(){
// console.log(你好啊);
// }
//
// fn();
//
// // 箭头函数
// let gn (){
// console.log(我不叫赛利亚);
// }
//
// gn();// setTimeout((){
// console.log(123)
// }, 1000);// // 如果只有1个参数. 可以省略()// let an n {// console.log(n);// }//// an(18);// // 慢慢捋// function fn(n, m){// m(n); //// }//// a 10;// fn(a, n {// console.log(n);// });7.函数参数 (普通位置参数,默认参数)
// js中的形参实参不匹配不会报错
function func7(a,b,c3){console.log(a,b,c);
}
func7(10,11);
func7(10,11,12);
func7(10,11,12,13);参数写多了也不报错
只能按位置参数处理不能用关键字传参 console.log()8.arguments 自动收集所有的实参是个数组
// 计算任意个数值的累加和;
function func8() {// console.log(a,b)// console.log(arguments)var total 0;for(var i of arguments){total i;console.log(i);}return total;
}
res func8(1,100,2,3,4,5,56,6);
console.log(res);收集所有实参不管有没定义形参都收集
遍历出参数计算出参数计算结果
控制台打印 /script
/body
/html3.函数调用
在JavaScript中常见的有四种不同的方式进行函数调用
1.作为一个函数进行调用这是最简单的形式。 2.作为一个方法进行调用在对象上进行调用支持面向对象编程。 3.作为构造器进行调用创建一个新对象。 4.通过apply() 或call() 方法进行调用。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title函数的调用/title
/head
bodyscriptfunction func(){console.log(函数正在执行 ... );}// 1.正常调用func();// 2.函数的立即执行不用手动调用(function func2(){console.log(函数正在执行2 ... )})();// 3.匿名函数的立即执行(function(){console.log(匿名函数正在执行3 ... )})();// 4.其他立即执行的方法;!function(){console.log(我在执行4 ... );}();~function(){console.log(我在执行5 ... );}();/script
/body
/html
