web前端必背知识 javascript 数组 下

简介: web前端必背知识 javascript 数组 下


五、遍历数组

遍历数组的基本了解

数组中的每一项我们怎么取出来?

可以通过数组名【索引号】的方式一项项的取出:

var arr = ['星期1','星期2','星期3','星期4','星期5','星期6','星期7']
      console.log(arr[0])
      console.log(arr[1])
      console.log(arr[2])
      console.log(arr[3])
      ......
      console.log(arr[6])

怎么把数组里面的元素全部取出呢?

从代码中可以发现,从数组中每取出一个元素时,代码是重复的,有所不一样的是索引值在递增,所以答案就是循环

var arr = [1,2,3,4]
for(var i=0; i<4; i++){
  document.write(arr[i])//输出时 i 当索引号来用
}//因为我们数组的索引是从0开始的,所以必须从零开始

遍历:就是把数组中的每个元素从头到尾都访问一次

如果你对循环还不够了解可以去看我关于循环的文章:

https://blog.csdn.net/weixin_71170351/article/details/125224949

数组长度

使用数组名.length可以访问数组元素的数量(数组长度),数组的长度是元素的个数不要跟索引号混淆哦

var arr = [1,2,3,4]
  console.log(arr.length)//数组名.length

var arr = [1,2,3,4]
for(var i=0; i<4; i++){
  document.write(arr[i])//输出时 i 当索引号来用
}//因为我们数组的索引是从0开始的,所以必须从零开始

结果:

六、数组中新增元素

通过修改length 长度新增数组元素

1.可以通过length长度实现数组扩容的目的,length属性是可读写的。

var arr=[1,2,3]
arr.length=5
document.write(arr)
document.write(arr[4])

其中除了1,2,3是没有给值的 所以默认值是undefined

2.新增元素,修改索引号 追加数组元素

var arr =['讲解','数','组']
arr[0]='我来讲解'//替换
arr[3]='关注'//新增
arr[4]='点赞'
arr[5]='收藏'
console.log(arr)

七、数组案例

1.数组去重

要求:将数组【2,0,6,1,77,0,52,0,25,7】中的 0 去掉后形成一个新数组。

var arr=[2,0,6,1,77,0,52,0,25,7]
var newarr=[]
for(var i=0; i<arr.length; i++){
  if(arr[i]!=0){
    newarr[newarr.length] = arr[i]
  }
}
console.log(newarr)

冒泡排序

冒泡排序是一种算法,把一系列的数据按照一定的顺序进行排列显示(从小到大或者从大到小)

列如:

//var arr =[5,4,3,2,1]
var arr=[4,1,2,3,5]
for(var i=0; i<=arr.length - 1; i++){//外循环管趟数
  for(var j=0; j<=arr.length -i -1; j++){//里循环管 每一趟的交换次数
  //内部交换2个变量的值 前一个和后一个数组元素相比较
    if(arr[j]<arr[j+1]){
      var temp =arr[j]
      arr[j]=arr[j+1]
      arr[j+1]=temp
    }
  }
}
document.write(arr)

结束

好的各位到这里本文章就结束了,如果对你有帮助请:

目录
相关文章
|
15天前
|
前端开发 JavaScript 开发者
JavaScript:无处不在的Web语言
JavaScript:无处不在的Web语言
|
2月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
317 108
|
15天前
|
前端开发 JavaScript 开发者
JavaScript:构建动态Web的核心力量
JavaScript:构建动态Web的核心力量
|
2月前
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
295 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
15天前
|
JavaScript 前端开发 开发者
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
5月前
|
前端开发 算法 API
构建高性能图像处理Web应用:Next.js与TailwindCSS实践
本文分享了构建在线图像黑白转换工具的技术实践,涵盖技术栈选择、架构设计与性能优化。项目采用Next.js提供优秀的SSR性能和SEO支持,TailwindCSS加速UI开发,WebAssembly实现高性能图像处理算法。通过渐进式处理、WebWorker隔离及内存管理等策略,解决大图像处理性能瓶颈,并确保跨浏览器兼容性和移动设备优化。实际应用案例展示了其即时处理、高质量输出和客户端隐私保护等特点。未来计划引入WebGPU加速、AI增强等功能,进一步提升用户体验。此技术栈为Web图像处理应用提供了高效可行的解决方案。
|
15天前
|
JavaScript 前端开发 物联网
JavaScript:驱动现代Web的核心引擎
JavaScript:驱动现代Web的核心引擎
|
4月前
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
48 2
|
4月前
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
102 1
|
6月前
|
JavaScript 前端开发 API