珊姐带你学JavaScript:数组和函数 (万文建藏)

58 篇文章 0 订阅
本文深入讲解了JavaScript中的关键字`break`和`continue`的使用,以及数组的概念、操作和应用。还介绍了冒泡排序的原理,并探讨了函数的定义、参数和返回值。通过实例解析,帮助读者掌握这些基础知识。
摘要由CSDN通过智能技术生成

?? 作者:阿珊

?? 简历模板、职场PPT模板、技术交流尽管关注私聊我。

?? 期许:欢迎点赞 ?? 收藏 留言 ?? 如有错误敬请指正!

热门专栏推荐:

?? 大数据集锦专栏:大数据-硬核学习资料 & 面试真题集锦?
??数据仓库专栏:数仓发展史、建设方法论、实战经验、面试真题?
??Python专栏:Python相关黑科技:爬虫、算法、小工具?

(优质好文持续更新中……)

本篇重点

  • 关键字的使用: break,continue

  • 数组

  • 冒泡排序

  • 函数

01 break关键字的使用

break关键字:如果在循环中使用,遇到了break,则立刻跳出当前所在的循环

  for(var i=0;i<10;i++){ 

找到100到200之间第一个可以被7整除的数字

for (var i = 100; i <= 200; i++) { 

02 continue关键字的使用

continue:在循环中如果遇到continue关键字,直接开始下一次循环

var i=0; 

03数组

数组:一组有序的数据

数组的作用:可以一次性存储多个数据

数组元素:数组中存储的每个数据,都可以叫数组的元素

**数组长度:**就是数组的元素的个数,比如有3个元素,就说,这个数组的长度是3

数组索引(下标):用来存储或者访问数组中的数据的,索引从0开始,到长度减1结束

数组的索引和数组的长度的关系:长度减1就是最大的索引值

数组的定义方式:

1.构造函数定义数组: var 数组名=new Array();

2.字面量方式定义数组: var 数组名=[];

1.通过构造函数的方式定义一个数组

语法:

数组的名字如果直接输出,那么直接就可以把数组中的数据显示出来,

如果没有数据,就看不到数据,就是一个数组----字面量的方式

 var arr3 = new Array(10,20,1000,40,50); 

2. 通过字面量的方式创建数组

var 数组名=[];//空数组 

无论是构造函数的方式还是字面量的方式,定义的数组,如果有长度,那么默认是****undefined

如何设置数组中某个位置的值

数组名[下标]=值;  

如何获取数组中某个位置的值

var result=数组名[下标];

通过构造函数的方式定义一个数组

var array=new Array(5);//没有数据,空数组 

数组中存储的数据类型一定是一样的吗 类型可以不一样

  var arr=[10,"哈哈",true,null,undefined,new Object()];

数组的长度是不是可以改变呢

 var arr = []; 

04冒泡排序

案例8:反转数组—把数组中的数据的位置调换

var array = [1, 2, 3, 4, 5]

冒泡排序:把所有的数据按照一定的顺序进行排列(从小到大,从大到下)

  var arr = [10, 0, 100, 20, 60, 30]

05函数介绍及定义

函数:把重复的代码封装,在需要的时候直接调用即可

函数的作用:代码的重用

function 函数名字(){

函数的调用:函数名();

函数名字:要遵循驼峰命名法

注意:

  • 函数需要先定义,然后才能使用

  • 函数一旦重名,后面的会把前面的函数覆盖

  • 一个函数最好就是一个功能

例子:

?通过函数求两个数字的和

06函数的参数

函数参数:

在函数定义的时候,函数名字后面的小括号里的变量就是参数,目的是函数在调用的时候,用户传进来的值操作,此时函数定义的时候后面的小括号里的变量叫参数;写了两个变量,就有两个参数,

在函数调用的时候,按照提示的方式,给变量赋值—>就叫传值,把这个值就传到了变量(参数)中

形参:函数在定义的时候小括号里的变量叫形参

实参:函数在调用的时候小括号里传入的值叫实参,实参可以是变量也可以是值

 function consoleSum1() {

07函数的返回值

set:设置

get:获取

函数的返回值:在函数内部有return关键字,并且在关键字后面有内容,这个内容被返回了

当函数调用之后,需要这个返回值,那么就定义变量接收,即可

如果一个函数中有return ,那么这个函数就有返回值

如果一个函数中没有return,那么这个函数就没有返回值

如果一个函数中没有明确的返回值,那么调用的时候接收了,结果就是undefined

(没有明确返回值:函数中没有return,函数中有return,但是return后面没有任何内容)

函数没有返回值,但是在调用的时候接收了,那么结果就是undefined

变量声明了,没有赋值,结果也是undefined

如果一个函数有参数,有参数的函数

如果一个函数没有参数,没有参数的函数

形参的个数和实参的个数可以不一致

return 下面的代码是不会执行的

    function f11(x,y){

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个简单的实现烟花绽放然后坠落的HTML代码,并添加了“杨文建”这个文字: ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>烟花绽放</title> <style> #canvas { background: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } h1 { color: #fff; text-align: center; position: absolute; top: 50%; width: 100%; font-size: 5rem; font-weight: bold; transform: translateY(-50%); } </style> </head> <body> <canvas id="canvas"></canvas> <h1>杨文建</h1> <script> // 获取canvas元素 var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // 设置canvas宽高 canvas.width = window.innerWidth; canvas.height = window.innerHeight; // 烟花粒子数组 var particles = []; // 烟花粒子数量 var particleCount = 30; // 烟花粒子构造函数 function Particle(x, y, color) { this.x = x; this.y = y; this.color = color; this.radius = 2; this.vx = Math.random() * 10 - 5; this.vy = Math.random() * 10 - 5; this.gravity = 0.2; } // 烟花绘制函数 function drawFirework(x, y) { // 随机颜色 var color = 'rgb(' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ',' + Math.floor(Math.random() * 255) + ')'; // 创建烟花粒子 for (var i = 0; i < particleCount; i++) { particles.push(new Particle(x, y, color)); } // 绘制烟花 for (var j = 0; j < particles.length; j++) { ctx.beginPath(); ctx.arc(particles[j].x, particles[j].y, particles[j].radius, 0, Math.PI * 2); ctx.fillStyle = particles[j].color; ctx.fill(); // 烟花粒子运动 particles[j].x += particles[j].vx; particles[j].y += particles[j].vy; particles[j].vy += particles[j].gravity; particles[j].radius -= 0.02; } } // 鼠标点击事件 document.addEventListener('click', function(e) { var x = e.clientX; var y = e.clientY; drawFirework(x, y); }); </script> </body> </html> ``` 你可以将上述代码保存为一个HTML文件,然后用浏览器打开,就可以看到烟花绽放并坠落的效果,并且中间有“杨文建”这个文字。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值