Web前端最新JavaScript学习02(2)，被阿里面试官征服了

最新推荐文章于 2024-10-31 15:49:24 发布
最新推荐文章于 2024-10-31 15:49:24 发布
阅读量753 收藏 8
点赞数 27
分类专栏： 程序员 文章标签： 前端 javascript 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84123113/article/details/138592897
版权

最后

面试一面会问很多基础问题，而这些基础问题基本上在网上搜索，面试题都会很多很多。最好把准备一下常见的面试问题，毕竟面试也相当与一次考试，所以找工作面试的准备千万别偷懒。面试就跟考试一样的，时间长了不复习，现场表现肯定不会太好。表现的不好面试官不可能说，我猜他没发挥好，我录用他吧。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

96道前端面试题：

常用算法面试题：

前端基础面试题：
内容主要包括HTML，CSS，JavaScript，浏览器，性能优化

  • } else {
    alert(‘成绩不合格！’)
    }


##### 三元运算符


语法： 条件 ？ 满足条件执行的代码 ：不满足条件执行的代码

// 三元运算符
// 返回两个数中的较大值
let a = 3
let b = 5
let max = a > b ? a : b
console.log(${a}和${b}中较大的是${max}) // 3和5中较大的是5


***数字补0案例***




// 需求：用户输入1个数，如果数字小于10，则前面进行补0，例如09、03
// 1. 用户输入
let num = prompt('请您输入一个数字：')
num = num < 10 ? 0 + num : num
// 2.判断输出
console.log(num) 
console.log(typeof num) // string


##### switch语句


switch (数据) {


​ case 值1：


​ 代码块1


​ break


​ case 值2：


​ 代码块2


​ break


​ case 值3：


​ 代码块3


​ break


​ default：


​ 代码4


​ // break


}


**释义**



> 
> 找到跟小括号里数据全等的case值，并执行里面对应的代码
> 
> 
> 若没有全等 ( === ) 的则执行default里的代码
> 
> 
> default可以不写在最后，写在最后时可以省略break
> 
> 
> switch case语句一般用于等值判断,不适合于区间判断
> 
> 
> switch case一般需要配合break关键字使用 没有break会造成case穿透
> 
> 
>

switch (1) {
default:
console.log(‘没有符合条件的’)
break
case 1 :
console.log(‘您选择的是1’)
break
case 2 :
console.log(‘您选择的是2’)
break
case 3 :
console.log(‘您选择的是3’)
break
}




---


**switch语句是可以使用中文的**

let name = prompt(‘请输入名字：’)
switch (name) {
case ‘木子’ :
console.log(您的名字是${name})
break
case ‘小明’ :
console.log(您的名字是${name})
break
case ‘小红’ :
console.log(您的名字是${name})
break
default:
console.log(查询不到信息)
}




---


##### if多分支语句与switch语句


* switch…case语句通常处理case为确定值得情况，而if…else…语句更加灵活，通常用于范围判断
* switch语句进行判断后直接执行到符合条件的代码，效率更高，而if…else…有几种判断条件，就得执行多少次
* switch一定要注意必须是 === 全等 ，一定注意数据类型，同时注意不要忘记break



> 
> 当分支比较少时，if…else语句执行效率高
> 
> 
> 当分支比较多时，switch语句执行效率更高，而且结构更清晰
> 
> 
> 


#### 循环语句


常用while循环和for循环


##### while循环


while (循环条件) {


​ 循环体


}



> 
> 小括号里的条件为true才会进入 循环体 执行代码
> 
> 
> while大括号里代码执行完毕后不会跳出，而是继续回到小括号里判断条件是否满足，若满足又执行大括号里的代码，然后再回到小括号判断条件，直到括号内条件不满足，即跳出
> 
> 
> 


**while循环三要素**


1. 变量起始值
2. 终止条件（没有终止条件，循环会一直执行，造成死循环）
3. 变量变化量（用自增或者自减）

// 1. 变量初始值
let i = 1
// 2. 终止条件
while (i <= 3) {
// 打印三次
console.log(‘月薪过万’)
// 3. 变量的变化量
i++
}


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0a8980d69afe43a9b85d9c3d81cd687e.png#pic_center)




---


***案例：计算1到100的偶数的和并输出***

// 1. 变量初始值
let i = 1
let sum = 0
// 2. 终止条件
while (i <= 100) {
if (i % 2 === 0) {
sum += i
}
// 3. 变量的变化量
i++
}
console.log(sum) // 2550


**break 和 continue 退出循环**


* break : 退出循环
* continue : 结束本次循环，继续下一次循环




---


**break**

// 1. 变量初始值
let i = 1
// 终止条件
while (i <= 5) {
// 打印 2句
if (i === 3){
break
}
console.log(这是第${i}句)
// 变量的变化量
i++
}


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/0a839a6ab9914009a06a1cb35bc86993.png#pic_center)




---


**continue**

// 1. 变量初始值
let i = 1
// 终止条件
while (i <= 5) {
// 打印 除第二句之外的句子

if (i === 2){
i++ // 如果不对i的值进行改变，则一直 i === 2 变成死循环
continue
}
console.log(这是第${i}句)
// 变量的变化量
i++
}


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/a6bff134b558416483759876906a376a.png#pic_center)




---


**区别**



> 
> continue : 退出本次循环，一般用于排除或者跳过某一个选项的时候, 可以使用continue
> 
> 
> break : 退出整个循环，一般用于结果已经得到, 后续的循环不需要的时候可以使用
> 
> 
> 


***简易ATM取款机案例***

let money = 2000
while (true) {
let re = +prompt( 请您选择操作： 1.存钱 2.取钱 3.查看余额 4.退出 )
// 用户输入4 退出服务
if (re === 4) {
break
}
// 根据用户输入进行操作
switch (re) {
// 存款
case 1:
let cun = +prompt(‘请输入存款金额：’)
// 存款金额不能少于0
if (cun >= 0) {
money += cun
} else {
alert(‘输入的数字不合法！’)
}
break
// 取款
case 2:
let qu = +prompt(‘请输入取款金额：’)
//取款金额不能少于0
if ( qu >= 0) {
//取款金额不能大于账号余额
if (money >= qu) {
money -= qu
} else {
alert(‘余额不足！’)
}
} else {
alert(‘输入的数字不合法！’)
}
break
// 余额打印
case 3:
alert(您的余额是${money})
break
default :
alert(‘error’)
}
}




---


##### for循环


将初始值声明、循环条件、变化值写到一起，一目了然，最常用


for (变量起始值；终止条件；变量变化量) {


​ // 循环体


}

// 打印三次
for (let i = 0; i < 3; i++) {
console.log(‘月薪过万’)
}


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/02d02715a4564823966945f35b49841a.png#pic_center)




---


**for循环遍历数组**

// 定义一个数组
let arr = [0,1,2,3,4,5]
// 遍历数组
for (let i = 0; i < arr.length; i++) {
console.log(arr[i])
}
// arr[6]未赋值 输出undefined
console.log(arr[6])


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/944ddd8043c34ac3bdc43d48fa72d4d6.png#pic_center)


**for循环中也能使用 continue 和 break 和while循环同理，使用continue执行“i++”，遇到break结束for循环**




---


###### for循环嵌套


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c700932b422c4a79aa368ea31b58553c.png#pic_center)


**打印n行m列星星**

let row = +prompt(‘请输入行数：’)
let col = +prompt(‘请输入列数：’)
// 外层循环打印行数
for (let i = 0; i < row ; i++) {
// 内层循环打印5个星星
for (let j = 0; j < col ; j++) {
document.write(‘⭐’)
}
// 换行输出
document.write(‘
’)
}


**6行6列输出页面：**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/c7327ba5d75947f7bbb62d5a3a69b5b6.png#pic_center)




---


**打印九九乘法表**
九九乘法表 

**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/21f97921e84e4fd1993b6ce42be4705e.png#pic_center)




---


##### for循环与while循环比较


* 当如果明确了循环的次数的时候推荐使用for循环
* 当不明确循环的次数的时候推荐使用while循环


### 数组的使用


1. 数组声明
2. 数组遍历

// 声明数组
let arr = [1, 2, ‘hello’, ‘world’]
let arr1 = new Array( 3, 2, ‘hello’, ‘world’) // 用对象声明，不推荐使用
// 数组遍历
for (let i = 0; i < arr.length; i++) {
document.write(arr[i])
}
document.write(‘
’)
for (let i = 0; i < arr1.length; i++) {
document.write(arr1[i])
}


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/08e3809d0b2542bc97ca1a7a68b40afe.png#pic_center)


#### 数组求和、求平均值

// 定义一个数组
let arr = [2, 6, 1, 7,4]
// 小测试
let s
console.log(typeof s) // undefined
console.log(s) // undefined
console.log(typeof (s + 1)) // number
console.log(s + 1) // NaN
console.log(typeof (s + ‘1’)) // string
console.log(s + ‘1’) // undefined1
console.log(‘--------------------’)
// 数组求和
// sum 必须赋值
let sum = 0
for (let i = 0; i < arr.length; i++) {
sum += arr[i]
}
// 打印数组的和sum
console.log(数组的和为${sum})
// 数组求平均值
let avg = sum / arr.length
console.log(数组的平均值为${avg})


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/112a9d0aabe64ba983762f63a718bb9d.png#pic_center)




---


#### 数组求最大值、最小值

// 定义一个数组
let arr = [2, 6, 1, 77, 52, 25, 7]
// 不需要赋值0
let max = arr[0]
// 遍历数组
for (let i = 1; i < arr.length; i++) {
if(max < arr[i]){
max = arr[i]
}
}
console.log(数组的最大值为：${max}) // 77
// 不需要赋值0
let min = arr[0]
// 变量数组
for (let i = 1; i < arr.length; i++) {
if(min > arr[i]){
min = arr[i]
}
}
console.log(数组的最小值为：${min}) // 1
// 也可以用三元运算符实现


**页面输出**


![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/67a838a17995437fbe8334c14cb68222.png#pic_center)




---


#### 数组的增删改查


![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c0c3015d41ad5bc3f01eb985bde30f2e.png#pic_center)

let arr = []
console.log(arr) // [] 空数组
console.log(arr[0]) // undefined
console.log(‘------------------’)
let arr1 = [‘pink’, ‘red’, ‘green’]
// 修改元素
console.log(原数组：${arr1})

文末

篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

direct/67a838a17995437fbe8334c14cb68222.png#pic_center)

数组的增删改查

在这里插入图片描述

  let arr = []
  console.log(arr) // [] 空数组
  console.log(arr[0]) // undefined
  console.log('------------------')
  let arr1 = ['pink', 'red', 'green']
  // 修改元素
  console.log(`原数组：${arr1}`)


### 文末
篇幅有限没有列举更多的前端面试题，小编把整理的前端大厂面试题PDF分享出来，一共有269页

![](https://i-blog.csdnimg.cn/blog_migrate/4108548db5145c5fe1083826224b1d95.png)  

![](https://i-blog.csdnimg.cn/blog_migrate/dff4146ba799d7342bfe0c6a761ed6ce.png)

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
2401_84123113
关注
专栏目录
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar
04-18
前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar前端学习笔记网站（HTML5+CSS3+JavaScript前端网页web课程设计）.rar ...
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
01-28
尚硅谷web前端学习笔记javaScript基础全部 143页 40207字
JavaScript面试题,JS面试题,WEB前端面试题下载.pdf
12-14
JavaScript 面试题是前端开发领域中常见的面试题，涵盖了 JavaScript 基础、Web 前端开发等方面的知识点。本文将对 JavaScript 面试题的知识点进行总结，包括 Object.create、instanceof、new 操作符、Promise 等。 ...
前端JavaScript面试题集详解
10-15
内容概要：本文档包含了大量前端JavaScript面试问题及答案，旨在帮助前端开发者准备JavaScript相关的工作和技术面试。主要内容围绕语法知识点、常见问题的解决方案、性能优化等方面。 适用人群：面向具有一定...
WEBRTC教程:局域网怎么调试，http://172.19.18.101:8080 ,无法访问摄像头和麦克风，请检查权限
keyboard专栏
10-25 1129
在局域网中使用 WebRTC 时，无法访问摄像头和麦克风通常是因为浏览器的安全策略限制了API 的使用。如果你在非localhost或非 HTTPS 环境下访问网页，浏览器会阻止访问摄像头和麦克风。localhost大多数浏览器允许在localhost上使用，即使没有 HTTPS。所以你可以在服务器和客户端同一台机器上使用localhost进行测试。如果你需要在局域网的 IP 地址上（如）进行访问，那么使用 HTTPS 是解决方案之一。通过配置 HTTPS，你可以避免浏览器的安全限制。使用openssl。
vue如何让下拉框可以输入---查询下拉框内容
qq_42666729的博客
10-28 456
使用filterable。
JavaScript中this的指向和改变this指向的方法 - 2024最新版前端秋招面试短期突击面试题【100道】
everfoot的博客
10-29 633
了解this的工作原理是掌握JavaScript的关键之一，特别是在编写复杂的应用程序时。正确使用this可以避免许多常见的问题和错误。在实际开发中，合理选择不同的绑定方法，可以让你的代码更加灵活和易于维护。掌握这些this的知识点将帮助你在前端面试中脱颖而出！祝你顺利上岸！
前端 常见开发工具使用
最新发布
weixin_45534301的博客
10-31 327
【代码】前端 常见开发工具使用。
CSS3新增盒子属性（三）
。
10-28 943
介绍CSS3新增盒子属性。
Google Recaptcha V2 简单使用
吴家健ken的博客
10-30 212
Google Recaptcha V2 简单使用
vue父子通讯
Jsjendndn的博客
10-28 286
下面是子组件子组件使用Props发送。
【源码+文档】基于SSM小区物业管理系统【提供源码+答辩PPT+参考文档+项目部署】
计算机项目定制开发&项目外包服务
10-27 725
作者简介：✌CSDN新星计划导师、Java领域优质创作者、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流。✌主要内容：🌟Java项目、Python项目、前端项目、PHP、ASP.NET、人工智能与大数据、单片机开发、物联网设计与开发设计、简历模板、学习资料、面试题库、技术互助、就业指导等。🌟。
JavaScript 前端开发
A_aspectJ的博客
10-27 491
JavaScript是一种广泛应用于前端开发的脚本语言，它赋予了网页动态化和交互性的能力。前端开发作为构建用户界面的重要一环，对于任何希望在互联网上有所作为的个体或组织来说都至关重要。JavaScript，作为前端开发的核心语言，凭借其强大的功能和灵活的特性，成为了现代前端开发者不可或缺的工具。
若依项目中vue处理字典和后端处理的方法汇总
SSHLY3的博客
10-31 281
但注意使用场景是数据仅拿来做页面展示，如若是修改页面调此接口就不适合。
ThreeJs 中如何实现动画效果
qq_34820371的博客
10-28 521
在 ThreeJs 中实现基础的动画效果非常简单。通过使用 requestAnimationFrame 创建渲染循环，你可以轻松实现物体的旋转、位置变化和其他动画效果。掌握这些基础知识后，你可以进一步探索更复杂的动画技术，例如利用 Tween.js 进行平滑过渡，或结合物理引擎实现逼真的物理动画。
.NET Core WebApi第4讲：控制器、路由
weixin_54966200的博客
10-28 594
在API里面，我们把每一个方法叫做action请求行为，把方法叫做行为（行为的英文是action）。为什么能把方法叫行为？——之前学类的时候，人吃喝拉撒睡、 跑步都是你这个人的一个行为。
Canvas字体高度计算与PDF高度如何统一
aa_qq110的专栏
10-31 190
如果前端使用Canvas生成图片，后面使用nodejs生成PDF，但PDF中没有计算boundingBoxAscent 和boundingBoxDescent的方法，这时可以简单将字的高度前后台统一为字体高度，而不使用基线的方式计算。请懂的大神指出有没有什么问题，有没有更好的方式。
【Web.路由】——路由约束
weixin_42031602的博客
10-28 214
一个介绍路由约束的文章（asp.net core)
高德地图WEB前端面试技术要点详解
"该文档是高德地图WEB前端面试的技术要求，旨在帮助候选人评估自己与岗位的匹配程度，提供了一套详细的JS（尤其是ES6）相关知识点和面试问题，强调了学习新技术的热情和全面掌握技能的重要性。" 在前端开发领域，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值