- 很高心您打开了本篇博客;
- 主要作用:通过学习JavaScript和整理笔记,为前端/后端/大数据项目提供基石;
- 复习前面四篇:
一,JavaScript基础知识。初识JavaScript,变量var和let,变量提升(var和let的区别),常量(const),标识符,注释,引入方式和输出方式-CSDN博客
二,JavaScript之数据类型。原始数据类型,引用数据类型,数据类型转换,查看数据类型。-CSDN博客
三,JavaScript之运算符,详细篇。 算数,比较,逻辑,赋值,位,其他运算符等。运算符的优先级。-CSDN博客
四,JavaScript之条件分支和循环流程。if……else条件,for和while循环。-CSDN博客
- 本篇是 javascript 专栏,笔记梳理的 第五篇。
- 主要内容:对函数之前的js知识点,总体练习。海量的实操题和简答题,加深对知识的运用。
- 学习:知识的初次邂逅
- 复习:知识的温故知新
练习:知识的实践应用
目录
一,简答:js和es的区别
- js是JavaScript的简写,它是一种广泛的使用脚本语言,用于网页开发,也可以用于非浏览器环境比如node.js;
- es是ECMAScript的简写,是js的标准化形式,由欧洲计算机制造商协会进行的标准化;
- es是js的规范,js是es的实现。
二,简答:javascript的优点
- 跨平台:js可以在任何支持它的浏览器上运行,无需修改任何代码;
- 动态类型:变量类型可以动态改变;
- 面向对象:js支持面向对象编程;
- 轻量级和高性能:js是一个轻量级的语言,可以在浏览器种快速执行,它也可以着重提高浏览器的页面性能;
- 事件捕捉:js可以处理页面用户互动。比如点击,鼠标移动等;
- 丰富的库和框架:js有大量的库(jquery)和框架(vue,react)来简化开发。
三,简答:标识符的命名规则
- 可以包含字母,数字,下划线,美元符号;
- 不能以数字开头;
- 区分大小写;
- 不能是js的保留字或者关键字;
- 最好具有描述性,做到见名知意。
四,简答:常量的描述
- 常量的关键字是const;
- 常量是块级作用域,仅在{}内生效;
- 常量一段被赋值就不可以被修改;
- 常量不存在变量提升的情况;
- 声明的常量必须初始化,也就必须给他赋值,那么是null都可以;
五,实操:js引入方式
1,内联方式 在html文件种使用 <script>标签嵌入。
<body>
<script>
//编写js代码
</script>
</body>
2,本地引入方式,使用标签引入
<!--2,引入本地的javascript-->
<script src="2-1js.js"></script>
3,网络引入,引入网络标签
<!-- 网络地址后期学习-->
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"> </script>
六,实操:js输出方式
1,使用console.log()方法,在控制台输出信息
// // 在控制台输出
console.log('显示在控制台')
2,使用alert()方法,在对话框输出信息
alert('我以对话框的行驶展示出内容')
3,使用document.write()向HTML文档写入内容
document.write('显示在网页上面')
七,简答:写出10个以上的js常见的保留字
break,case,class,const,let,var,default,delete,do,if,else,export,function,in,while,void,typeof
try,for,true,flase,this,switch,null,new,instanceof,finally,extends,with,yield等
八,简答:变量声明。变量提升会导致什么后果如何避免
- var声明的变量:无论在哪个地方声明,在js执行机制里面都会自动提升到头部,声明提升到顶部,但是赋值还是原来的位置;
- let和const声明的变量:是块级作用域,他们不会被变量提升;
变量提升的后果:
- 访问未初始化的变量:访问到没有被初始化的变量,非返回undefined。这可能非导致逻辑错误或者意外行为,因为开发者可能期望变量已经被初始化;
- 作用域和生命周期混淆:变量提升使变量的作用域二分生命周期在代码种的表现变得不那么直观,进一步增加了代码的复杂性和出错的可能;
- 全局污染:如果不小心在全局作用域中使用了var声明变量。那么这个变量就会编变成去全局对象。成为window的一个属性,从而导致全局作用域被污染,他可能会和其他的库或者框架的变量名引起冲突,从而导致难以最终和摸不着头脑的bug;
- 循环中变量的持久性:在for循环中使用var声明的变量,由于变量提升和函数作用域的特性。这个变量在循环外部仍然是可以访问的,并且它的值将是循环结束后的值,这可能会导致一切非预期的行为,尤其是在闭包和异步操作的时候。
- 难以调试和维护:变量提升使代码变得不那么直观,特别是在复杂的项目中,这会大大增加项目的调试和维护的难度,因为开发者需要仔细最终变量的作用域和生命周期,以确保代码按预期工作
总结优化:
推荐用let和const声明变量。因为他们支持块级作用域,不会像var一样发生变量提升,这样变量的声明周期和作用域更加的清晰,减少了全局污染和意外行为的风险。
九,简答:原始数据分类
- Number:数字类型,可以是整数或者浮点数;
- String:字符串类型,单引号或者双引号括起来的,用于表示文本类型;
- Boolean:布尔值类型,只有两个值,true和flase;
- Undefined:一个特殊的值,当变量被声明但是未初始化的时候,其值就是undefined;
- Null:一个特殊的值,表示空置或者无值的概念;
- BigInt:表示任意进度的整数;
- Symbol:用于创建唯一的标识符。
十,实操:字符串,数值,布尔值的类型转换
1,字符串到数值
使用全局方法Number(),可以将字符串转换为数值,如果字符串不是有效的数字,则返回NaN
let str = "123";
let num = Number(str); // 123
let notANum = Number("abc"); // NaN
使用加号 +拼接也可以,如果字符串不是有效的数字,则结果一样是NaN
let str = "456";
let num = +str; // 456
let notANum = +"xyz"; // NaN
使用parselnt() 和parseFloat():这两个函数分别用于解析整数和浮点数。如果字符串不是数字,则返回NaN
let str = "123px";
let intNum = parseInt(str); // 123
let floatNum = parseFloat(str); // 123
let notANum = parseInt("abc"); // NaN
2,数值到字符串
1,使用全局方法 String():可以将数值转换为字符串。
// 定义一个数字
let number = 123;
// 使用全局的String()方法将数字转换为字符串
let stringNumber = String(number);
console.log(typeof stringNumber); // 输出: string
console.log(stringNumber); // 输出: "123"
2,使用.toString() 方法:可以讲其转换为字符串。
// 定义一个数字
let number = 456;
// 使用.toString()方法将数字转换为字符串
// 注意:.toString()是Number对象的方法,但是JavaScript会自动将基本类型的数字视为Number对象来调用此方法
let stringNumber = number.toString();
console.log(typeof stringNumber); // 输出: string
console.log(stringNumber); // 输出: "456"
// 还可以指定基数(radix),例如转换为十六进制
let hexString = number.toString(16);
console.log(hexString); // 输出: "1c8",因为456的十六进制是1C8
3,数值和字符串到布尔值
- 数值:0是flase,1是true;
- 数值:0 ,-0,NaN都是假值,都是false;
- 数值:任何非(0,-0,NaN)的值都认为是真true;
- 字符串:空字符串"" 被认为是假值 false;
- 字符串:任何非空字符串都会被认为是真值 true;
- 使用Boolean()方法,除了("",null,undefined,0,NaN,flase)会被认为假值 false;其余都是真值。
console.log(Boolean(123));//true
console.log(Boolean(''));//false
console.log(Boolean(null));//false
console.log(Boolean(undefined));//false
console.log(Boolean(0));//false
console.log(Boolean(NaN));//false
console.log(Boolean(false));//false
console.log(Boolean(1));//true
十一,实操:自增自减区别与案例
- 自增(++)和自减(--)运算符是用于将变量的值增加或者减少1;
- 所以自增和自减也叫做 一元运算符;
- 前缀形式:++或者--在前。会先执行运算,后执行代码语句;
- 后缀形式:==或者--在后。会先执行代码语句,后执行运算;
//自增
let inc=10;
console.log(++inc);//11
console.log(inc++);//11
console.log(inc);//12
//通常用作for循环里面
for(let i=0;i<10;i++){
console.log(i);
}
//自减
let dec=10;
console.log(dec--);//10
console.log(--dec);//8
console.log(dec);//8
十二,实操:==和===的区别与案例
- ==是等值比较。它仅仅比较值,不会比较类型,他们在比较之前不会进行类型转换;
- ===是严格等值比较。它不仅仅会比较值,还会比较类型。
console.log(10==9); //false
console.log(10=='10');//true
console.log(10===9); //false
console.log('1'==1); //true
console.log('1'===1); //false
十三,实操:求两个数的最大数
使用 if和else循环判断
<!--求2个数字的最大数 就是判断2个数字谁大谁小-->
<script>
var num1=100;
var num2=200;
if(num1>num2){
console.log("num1比num2大")
}
else {
console.log("num1比num2小")// 因为100比200小
}
</script>
十四,实操:判断一个整数是偶数还是奇数
使用if和else判断。用取余%运算符,偶数能被2整除的数,奇数不能被2整除
<!--判断一个偶数还是奇数-->
<script>
var num3=586;
if(num3%2 === 0){
console.log('这个是偶数') //除以2 可以除尽 就是偶数
}
else {
console.log("num3是奇数")
}
</script>
十五,实操:判断一个人是否满18岁
使用if和else判断,用<或者>运算符计算
let n111=10;
if(n11<18){
console.log('比18小')
}else {
console.log('比18大')}
十六,实操:判断一个年份是平年还是闰年
使用if和else判断,平年有365天,闰年有366天
<!--判断一个年份是闰年还是平年 闰年是366天 平年是365天-->
<script>
var num4=365;
if(num4===365){
console.log('一年中有'+num4+'天,是个平年')
}
else {
console.log('一年中有'+num4+'天,是个润年')
}
</script>
使用if和else判断。平年和闰年的计算公司,闰年是:是4的倍数,且不能被100整除,且不能被400整除
<script>
var yeah=2008;
if(yeah%4 === 0 && yeah%100 !==0 || yeah%400 ===0){
console.log(yeah+"是闰年!")
}
else {
console.log(yeah+"是平年")
}
</script>
十七,实操:找出三个数中最小的数
用if else判断。逐个互相比较
<script>
var n1=3;
var n2=4;
var n3=5;
if(n1<n2 && n1<n3){
console.log(n1+"最小")
}
else if(n2<n1 && n2<n3){
console.log(n2+"最小")
}
else if(n3<n1 && n3<n2){
console.log(n3+"最小")
}
//严谨一样 加一层嵌套
if(typeof n1 === Number && typeof n2 === Number && typeof n3 === Number){
if(n1<n2 && n1<n3){
console.log(n1+"最小") //返回这个结果
}
else if(n2<n1 && n2<n3){
console.log(n2+"最小")
}
else if(n3<n1 && n3<n2){
console.log(n3+"最小")
}
}else{
console.log('他们表示数值')
}
</script>
十八,实操:根据数字显示对应的星期
使用if和else判断
if(a=1){
console.log('礼拜一')};
if(a=2){
console.log('礼拜二')};
if(a=3){
console.log('礼拜三')};
if(a=4){
console.log('礼拜四')};
if(a=5){
console.log('礼拜五')};
使用switch语句判断
var a = 1;
switch (a) {
case 1:
console.log("礼拜一")
break
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
case 7:
console.log("礼拜七")
break
default:
console.log('请输入1-7之间的数字')
}
十九,实操:输入月份,显示当月的天数
不适用break穿透,要写啰嗦一点,逐个12月份对比。
使用break穿透,要稍微写的简单一点,仅比较特殊月份。
<!--输入月份,显示当月的天数,利用case穿透简化代码-->
<!--
-->
<!--不用case穿透实现的代码-->
<script>
var yeah = 2024;
var moth = 5;
switch (moth) {
case 1:
console.log(yeah + "的" + moth + "月有31天")
break
case 2:
if (yeah % 4 === 0 && yeah % 100 !== 0 || yeah % 400 === 0) {
console.log(yeah + '是闰年' + moth + '月有29天')
} else {
console.log(yeah + '是平年' + moth + '月有28天')
}
break
case 3:
console.log(yeah + "的" + moth + "月有31天")
break
case 4:
console.log(yeah + "的" + moth + "月有30天")
break
case 5:
console.log(yeah + "的" + moth + "月有31天")
break
case 6:
console.log(yeah + "的" + moth + "月有30天")
break
case 7:
console.log(yeah + "的" + moth + "月有31天")
break
case 8:
console.log(yeah + "的" + moth + "月有31天")
break
case 9:
console.log(yeah + "的" + moth + "月有30天")
break
case 10:
console.log(yeah + "的" + moth + "月有31天")
break
case 11:
console.log(yeah + "的" + moth + "月有30天")
break
case 12:
console.log(yeah + "的" + moth + "月有31天")
break
default:
console.log('信息输入有误')
}
</script>
<!--用穿透实现-->
<!--判断年数和天数时候合规 并且输入年份和月份 注意2月闰年和平年的月份不一样,1,3,5,7,8,10,12的月份天数也不一样-->
<script>
var yeah1 = 2023;
var mot1 = 2;
switch (mot1) {
case 1:case 3:case 5:case 7:case 8:case 10:case 12:console.log(yeah1 + '年的' + mot1 + '的月有31天')
break
case 4:case 6:case 9:case 11:
console.log(yeah1 + '年的' + mot1 + '的月有30天')
break
case 2:
if (yeah1 % 4 === 0 && yeah1 % 100 !== 0 || yeah1 % 400 === 0) {console.log(yeah1 + '年是闰年,他的' + mot1 + '的月有29天')}
else {console.log(yeah1 + '年是平年,他的' + mot1 + '的月有28天')}
break
default:console.log('您输入的月份有误')}
</script>
使用if else判断
let yeah1 = 2023; // 假设这是年份,可以根据需要修改或作为输入
let mot1 = 5; // 假设这是月份,可以根据需要修改或作为输入
if (mot1 === 1 || mot1 === 3 || mot1 === 5 || mot1 === 7 || mot1 === 8 || mot1 === 10 || mot1 === 12) {
console.log(yeah1 + '年的' + mot1 + '月份是31天');
} else if (mot1 === 4 || mot1 === 6 || mot1 === 9 || mot1 === 11) {
console.log(yeah1 + '年的' + mot1 + '月份是30天');
} else if (mot1 === 2) {
if ((yeah1 % 4 === 0 && yeah1 % 100 !== 0) || yeah1 % 400 === 0) {
console.log(yeah1 + '年是闰年,他的' + mot1 + '月份是29天');
} else {
console.log(yeah1 + '年是平年,他的' + mot1 + '月份是28天');
}
} else {
console.log('您输入的月份有误');
}
二十,简答:for循环的三个表达式
- for循环语句:for(初始表达式;条件表达式;迭代因子){循环语句};
- 初始表达式:确定循环变量的初始值,只在循环开始的时候执行一次;
- 条件表达式:每轮循环的开始的时候,都要执行这个条件判断,只有值为真的时候才会执行循环语句;
- 迭代因子:每一轮循环之后,都会递增迭代这个循环变量。这个也是循环的终止条件。如果没有迭代因子就会导致死循环。
二十一,实操:求1到100的数字和
用for循环实现
let sum = 0
for (let n = 1; n <= 100; n++) {
sum +=n
}
console.log(sum);// 5050
使用while循环
let sum = 0;
let i = 1;
while (i <= 100) {
sum += i;
i++;
}
console.log(sum);
二十二,实操:求1000以内的奇数
用for循环实现,1000以内的数字,不能被2整除的,且小于1000
for(let i=0;i<1000;i++){
if(i%2!==0){
console.log(i);
}
}
while循环
let i=0;
while(i<1000){
if(i%2!==0){
console.log(i);
}
i++;
}
二十三,实操:打印九九乘法表
用双层for循环实现
for(i=1;i<10;i++){
for(j=1;j<=i;j++){
document.write(i+'*'+j+'='+i*j+',');
}
document.write('<br>');
}
使用双层while循环
//用while循环
let i1=1;
let j1=1;
while(i1<10){
while(j1<=i1){
document.write(i1+'*'+j1+'='+i1*j1+',');
j1++;
}
document.write('<br>');
i1++;
j1=1;
}
二十四,实操:小明买洗发水,香皂,牙刷
题干:小明有100元的购物卡,他打算去超市购买三种用品。洗发水15元,香皂2元,牙刷5元。刚好把这100元花掉,它最大能分别买多少?。一共有多少个组合?
- 分析一共有100元。三种商品的种类阈值时多少?
- 比如单独买洗发水 最大可以买多少? 18*n<=100 求n的值;
- 比如单独买香皂,最大可以买多少?2*n<=100 求n的值;
- 比如单独买牙刷,最大可以买多少? 5*n<=100 求n的值;
- 拿到阈值之后 就可以使用三层for循环解答这一题了。
简单编写了一个函数,简化了求阈值的操作,当然也可以逐步写if else求阈值
function count_num(con) {
let n=0;
for(i=1;i<=100;i++){
if(con * i <= 100){
// console.log(con * i,n);
n++;
}
}
return n
};
console.log(count_num(15)); //6
console.log(count_num(2)); //50
console.log(count_num(5)); //20
var i = 1;
for (let n = 0; n <= 6; n++) { // 洗发水
for (let m = 0; m <= 20; m++) { //牙刷
for (let j = 0; j <= 50; j++) { //香皂
if (n * 15 + m * 5 + j * 2 === 100) {
document.write( i,":洗发水:" + n + "香皂:" + j + "牙刷:" + m + "<hr />");
i++;
}
}
}
}
document.write('一共有' +(i-1) + '种组合');
- 代码解析:
- 第一层for循环 记录买洗发水 花不同的钱的时候 分别可以买多少;它会循环6次;
- 第二层for循环 记录买牙刷,花不同的钱,分别可以买多少;他会循环6*20次;
- 第三层for循环 记录买香皂,花不同的钱,分别可以买多少,他会循环6*20*50次;
- 在第三层里面帅选以下,当水*15+牙刷*2+香皂*5 一共时100元的时候;分别值时多少
- 然后记录一个i 统计在里面求次数;
二十五,简答:js中7种常见的数据类型是什么
- undefined:当一个变量被声明了但是没有被赋值的时候,它就是undefined;
- null:null值是一个表示无的原始值,它表示空对象指针;
- boolean:布尔类型,表示逻辑上的 真true,假flase;
- string:字符串类型,表示文本数据;
- number:数值类型,用于表示整数与浮点数;
- symbol:一种独一无二的值,通常用作对象的唯一属性名;
- object:对象类型,更复杂的数据类型,可以包括属性,方法,数组,日期等特殊形式。
二十六,简答:break和continue的区别
- break:break语句用于立即退出包含他的循环,或者switch语句。它是直接终止循环;
- continue:continue语句用于跳过当前循环继续从头执行循环迭代。通常用于在满足特定条件之后跳过循环体的某部分。
二十七,简答:运算符都有哪些分类,分别是什么
- 算数运算符:执行基本的数学运算。+,-,*,/,%,**,++,--;
- 赋值运算符:用于给变量赋值。=,+=,-=,*=,/=,%=,**=;
- 比较运算符:用于比较两个值返回布尔值。==,===,<,>,<=,>=,!=,!==;
- 逻辑运算符:根据一个或者多个布尔值返回布尔值结果。&&,||,! ;
- 条件运算符:三目运算符。(条件)?为真表达式:为假表达式;
- 字符串运算符: 加号+ 也可以用作字符串运算符,可以连接两个或者多个运算符;
- 类型运算符:typeof,instanceof等可以用来确定一个值的类型或者对象是否是原型链上的构造函数的实例。
- 位运算符。对数字进行二进制计算,<<,>> ;
- 其他运算符。比如逗号运算符(,),删除属性运算符(delete),void运算符(常见于组织超链接a标签跳转行为),模板字符串运算符 反引号(``)。
- 学习:知识的初次邂逅
- 复习:知识的温故知新
练习:知识的实践应用
谢谢观看~