Web前端最全JavaScript学习02(1)，字节跳动前端面试题库

最新推荐文章于 2024-09-30 15:42:36 发布
最新推荐文章于 2024-09-30 15:42:36 发布
阅读量343 收藏 5
点赞数 4
分类专栏： 程序员 文章标签： 前端 面试 学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84437982/article/details/138971827
版权

文末

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

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

  • 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++
 }

页面输出

在这里插入图片描述

案例：计算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++
 }

页面输出

在这里插入图片描述

continue

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

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

页面输出

在这里插入图片描述

区别

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('月薪过万')
  }

页面输出

在这里插入图片描述

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])

页面输出

在这里插入图片描述

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

for循环嵌套

在这里插入图片描述

打印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('<br>')
  }

6行6列输出页面：

在这里插入图片描述

打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>九九乘法表</title>
  <style>
    span {
      display: inline-block;
      width: 100px;
      padding: 5px 10px;
      margin: 2px;
      border: 1px solid pink;
      border-radius: 5px;
    }
  </style>
</head>
<body>
<script>
  for (let i = 1; i <= 9; i++) {
    for (let j = 1; j <= i; j++) {
      document.write(`<span>${j} \* ${i} = ${j \* i}</span>`)
    }
    document.write('<br>')
  }
</script>
</body>
</html>

页面输出

在这里插入图片描述

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('<br>')
  for (let i = 0; i < arr1.length; i++) {
    document.write(arr1[i])
  }

页面输出

在这里插入图片描述

数组求和、求平均值
  // 定义一个数组
  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}`)

页面输出

在这里插入图片描述

数组求最大值、最小值
  // 定义一个数组
  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
  // 也可以用三元运算符实现

页面输出

在这里插入图片描述

数组的增删改查

在这里插入图片描述

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

页面输出

在这里插入图片描述

函数

增加

  1. 数组.push(元素1, 元素2， …，元素n) 方法：将一个或多个元素添加到数组的末尾，并返回该数组的长度
  2. 数组.unshif(元素1, 元素2， …，元素n) 方法：将一个或多个元素添加到数组的开头，并返回该数组的长度

删除

  1. 数组.pop() 方法：执行一次将从末尾删除一个元素，并返回删除元素
  2. 数组.shift() 方法：执行一次将从开头删除一个元素，并返回删除元素
  3. 数组.splice(起始位置,删除的个数n)：从指定位置的下表开始，删除n个元素,若未指定个数，则删除至最后，返回值为删除元素
  let arr = ['red', 'orange', 'yellow', 'green']
  let re = null
  console.log(`原数组：${arr}`)
  // arr.push()在数组末尾添加元素
  re = arr.push('blue')
  console.log(`arr.push('blue')修改后的数组：${arr}`)
  console.log(`arr.push('blue')方法的返回值：${re}`)
  console.log('--------------------')
  // arr.unshift()在数组末尾添加元素
  re = arr.unshift('black')
  console.log(`arr.unshift('black')修改后的数组：${arr}`)
  console.log(`arr.unshift('black')方法的返回值：${re}`)
  console.log('--------------------')
  // arr.pop()在数组末尾添删除一个元素
  re = arr.pop()
  console.log(`arr.pop()修改后的数组：${arr}`)
  console.log(`arr.pop()方法的返回值：${re}`)
  console.log('--------------------')
  re = arr.shift()
  console.log(`arr.shift()修改后的数组：${arr}`)
  console.log(`arr.shift()方法的返回值：${re}`)
  console.log('--------------------')
  re = arr.splice(1,1)
  console.log(`arr.splice(1,1)修改后的数组：${arr}`)
  console.log(`arr.splice(1,1)方法的返回值：${re}`)
  console.log('--------------------')
  re = arr.splice(1)
  console.log(`arr.splice(1)修改后的数组：${arr}`)
  console.log(`arr.splice(1)方法的返回值：${re}`)

页面输出

在这里插入图片描述

数组元素筛选案例

需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组

分析：

①：声明一个新的数组用于存放新数据newArr

②：遍历原来的旧数组， 找出大于等于 10 的元素

③：依次追加给新数组 newArr

  // 需要：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中大于等于 10 的元素选出来，放入新数组中
  let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]
  // 1. 声明新数组
  let newArr =[]
  // 2. 遍历旧数组
  for (let i = 0; i < arr.length; i++) {
    // 3. 将满足条件的元素增加至新数组
    if (arr[i] >= 10) {
      newArr.push(arr[i])
    }
  }
  // 打印新数组
  console.log(newArr)

页面输出

在这里插入图片描述

数组去0案例

需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组

分析：

①：声明一个新的数组用于存放新数据newArr

②：遍历原来的旧数组， 找出不等于0的元素

③：依次追加给新数组 newArr

  let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]


### 最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

>技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

![](https://img-blog.csdnimg.cn/img_convert/4791812de3b48601512270a9646d13fd.webp?x-oss-process=image/format,png)


c8d4c8c9a5a19510e9b2d89.png#pic_center)




---


***数组去0案例***



> 
> 需求：将数组 [2, 0, 6, 1, 77, 0, 52, 0, 25, 7] 中的 0 去掉后，形成一个不包含 0 的新数组
> 
> 
> 分析：
> 
> 
> ①：声明一个新的数组用于存放新数据newArr
> 
> 
> ②：遍历原来的旧数组， 找出不等于0的元素
> 
> 
> ③：依次追加给新数组 newArr
> 
> 
>

let arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7]

最后

技术是没有终点的，也是学不完的，最重要的是活着、不秃。零基础入门的时候看书还是看视频，我觉得成年人，何必做选择题呢，两个都要。喜欢看书就看书，喜欢看视频就看视频。最重要的是在自学的过程中，一定不要眼高手低，要实战，把学到的技术投入到项目当中，解决问题，之后进一步锤炼自己的技术。

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

技术学到手后，就要开始准备面试了，找工作的时候一定要好好准备简历，毕竟简历是找工作的敲门砖，还有就是要多做面试题，复习巩固。

[外链图片转存中…(img-3hXUxzK9-1715856578983)]

2401_84437982
关注
专栏目录
前端面试题及答案（字节跳动）（二）
m0_54585610的博客
07-12 1666
前端面试题及回答（字节跳动）
字节跳动前端笔试题
好川的博客
02-19 3698
Toast 支持String/Object 两种类型的调用，其基本的样式为垂直/水平居中于屏幕中央,图片文字上 下混排，实现一个多层级树组件，点击左侧图标能收起展开，同时点文字时暴露给父组件，点击了那个节点
2(2)，2024年最新高级web前端工程师面试题库
m0_61331237的博客
04-20 1079
如果30岁以前，可以还不知道自己想去做什么的话，那30岁之后，真的觉得时间非常的宝贵，不能再浪费时间在一些碎片化的事情上，比如说看综艺，电视剧。一个人的黄金时间也就二，三十年，不能过得浑浑噩噩。这也是为什么大家都说30岁是程序员的门槛，很多人迈不过去，其实各行各业都是这样都会有个坎，公司永远都缺的高级人才，只用这样才能在大风大浪过后，依然闪耀不被公司淘汰不被社会淘汰。，如空指针异常、sql异常、状态异常等导致的请求中断，对于这些异常，如果直接将报错信息暴露给用户，那么我们的系统的体验就会非常的差。
字节前端高频面试题总结，请收好！
2301_79773949的博客
12-15 1137
字节前端高频面试题总结，请收好！
记一次字节跳动前端面试，四轮技术面通过，已拿offer
2401_85147537的博客
09-12 760
技术题问的不多1.写一个EventEmitter三面：主管面，介绍工作经历，聊项目亮点balabala1.编程题，在一个无序数组中找到第二大的数2.项目设计题，写一个***大战（写出类和属性方法，不需要实现）3.***大战的各个动画是怎么动起来的（游戏引擎怎么运作）4.当浏览器地址栏输入一个url到页面展现，这个过程？
2021-最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)---Vue篇
m0_61331407的博客
04-20 636
现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。// 创建一个接收为编码的二进制数据流的方法实例 接收 name 为 newimg 字段的上传文件，最大接收为 1。★★★ MySQL 和 MongoDB 的区别，他们都是怎么查询语句的，具体讲讲怎么查询的？★★★ 请使用 Node.js 编写代码实现遍历文件夹并输出所有的文件名。★★★★★ koa 和 express 的区别。
2024年Web前端最全【面试题】 JS手写ES6的Object，35岁程序员
2401_84446513的博客
05-04 705
为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。
2024年Web前端最全阿里面试题合集118道送答案（新总结）：天猫+蚂蚁金服+阿里巴巴，2024金九银十
2401_84434237的博客
05-05 821
前端字节跳动真题解析开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】看看自己能答对多少，如果能回答70%的题目，就大胆去阿里以及各互联网公司试试身手吧。【阿里、天猫、蚂蚁面试题目】涵盖：开源、Java集合、JVM、NIO、Dubbo、秒杀系统、高并发、分布式、锁、redis、MySQL、Linux、hashMap、中间件等。自我介绍及工作经历自己优势技术在哪些方面（钉钉）用过哪些中间件。做过工作流引擎没有。NIO的底层实现。
前端面经真题与解析3:字节/抖音/实习(2万字长文）
浪里个浪的博客
05-18 476
前端面试真题及答案解析，字节抖音前端面试，超详细记录及解析
2022年最新前端面试题（字节跳动）真题解析
07-07
在准备2022年字节跳动前端面试的过程中，了解和掌握最新的面试题型及解题思路至关重要。以下是对2021年字节跳动前端面试题的详细解析，旨在帮助你全面理解前端技术栈的核心知识和面试技巧。 1. HTML与CSS基础： - ...
前端面试题库 Vue，React，JS面试题，HTTP，工程化，CSS，算法面试题，大厂面试题，高频面试题
02-21
对于`web-interview-master.zip`这样的资源，它很可能包含了一套完整的前端面试题库，可以帮助你系统地学习和练习上述各个领域的知识。通过深入理解和实践，你可以更好地应对各种前端面试挑战。
2022前端秋招面试题总结 阿里 腾讯 字节 百度 网易 京东 小红书 快手面试记录
m0_46424423的博客
12-08 1634
等了百度三个月，终于发offer了，白菜价，92大佬们拒的薪资，我知足了。排序挂了狠多，快手，蚂蚁，… 很绝望我的新博客：https://jzq422bol5.feishu.cn/wiki/个人分享：https://jzq422bol5.feishu.cn/wiki/wikcnuSye5AxZ1IwRyRedlKxaAhGithub：https://github.com/Sunny-117自我介绍手写：实现n阶乘手写：相邻数组的最大哪个，不能排序手写：tree 可以看这里https://www.nowcod
登录功能开发 P167重点
最新发布
2303_81204446的博客
09-30 205
前端无法识别controller方法，因此存在Dispa什么的。Claims：jwt中的第二部分。
Vue实战教程：如何用JS封装一个可复用的Loading组件
Jiaberrr的博客
09-28 468
通过以上步骤，我们成功在Vue项目中封装了一个可复用的Loading组件。在实际开发中，我们可以根据项目需求对Loading组件进行样式和功能的扩展，使其更加完善。封装组件是提高代码复用性和维护性的有效手段，希望本文能对你有所帮助。
前端规范工程-2：JS代码规范（Prettier + ESLint）
Vinca@的博客
09-26 766
Prettier 主要关注代码的格式，而 ESLint 则关注代码的质量和规范。结合使用这两个工具，可以极大地提高代码的可读性和维护性，同时减少潜在的错误和不一致性。
前端面试经验总结2(经典问题篇)
rita_0567的博客
09-28 896
因为计算机技术的快速发展，所以程序员如果不能保持对技术的持续性学习，会更容易的被淘汰，我从来不觉得程序员是一个轻松的职业，但是程序员是我最热爱的职业，我做好了充足的准备让自己能够长期在前端行业深耕。既要扩充自己的知识宽度，同时又不要一味的追求学习的东西越多越来，今天学两天这个，明天学两天那个，工作中又没有得到使用的话，很快也都会忘记的。了解，贵公司主要是在xxx行业从事xxx业务，贵公司所处的行业是我非常看好的，我感觉贵公司的氛围我很喜欢，比如xxxx。遇到了哪些挑战，我如何在不利的条件下成长起来的。
基于webComponents的纯原生前端框架
u013776700的博客
09-28 177
采用artComponent模板引擎,在数据更新后实现UI更新，当然这里做了优化处理,尽量减小页面渲染受影响的范围，实现最小化更新。基于框架，开发了一套常用UI组件，提升开发速度。组件库采用开放原则，也就是说别人都可以使用我的开发接口去开发组件库。我本人的个人开发web前端前框架xui，正在开发中，业已完成50%的核心开发工作，并且在开发过程中逐渐完善.目前框架未采用任何和市面上框架模式，没有打包过程，实现真实的开箱即用。框架完成了事件触发和事件监听的封装，在页面和组件事件处理上更加方便。
构建.NET Core Web API为Windows服务安装包
学习和分享
09-28 299
请注意，以上步骤仅适用于将.NET Core Web API作为Windows服务安装。如果需要更高级的功能，例如服务启动类型、日志记录等，可能需要进一步的自定义和配置。安装完成后，.NET Core Web API将作为Windows服务在目标服务器上运行。可以通过NuGet包管理器或在.csproj文件中手动添加引用。方法，以便将Web API应用程序作为Windows服务运行。创建一个新的.NET Core Web API项目或使用现有的项目。文件夹中，找到发布的Web API应用程序和安装脚本。
Web前端开发面试技巧：HTML、CSS和JavaScript知识点总结
Web 前端开发面试技巧总结 本文档总结了 Web 前端开发面试中...本文档提供了 Web 前端开发面试中的常见问题和答案，涵盖了 HTML、CSS、JavaScript 等多方面的知识点，为开发者提供了一个系统的学习和面试准备的参考。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值