周浦高端网站建设公司,单页面网站制作,找seo外包公司需要注意什么,网站注册域名多少钱目录 前言 一、数组 1.1 定义数组 1.2 数组存取与删除 1.3 使用数组统一操作敌机 二、实战 例题一#xff1a;使用数组统一操作敌机 例题一代码#xff1a; 总结 前言
为了提高作者的代码编辑水品#xff0c;作者在使用博客的时候使用的集成工具为 HBuilderX。
下文所有截…目录 前言 一、数组 1.1 定义数组 1.2 数组存取与删除 1.3 使用数组统一操作敌机 二、实战 例题一使用数组统一操作敌机 例题一代码 总结 前言
为了提高作者的代码编辑水品作者在使用博客的时候使用的集成工具为 HBuilderX。
下文所有截图使用此集成工具读者随意。
此系列文章需要HTML JavaScript 基础知识 操作系统 版本 Windows 11 家庭中文版 版本 23H2 安装日期 2024/5/28 操作系统版本 22631.3593 体验 Windows Feature Experience Pack 1000.22700.1003.0 一、数组
用来存储多个数据变量的容器存储在数组中的数据称为数组的元素。
优点便于集中统一处理某些数据 例定义多个变量表示学生的成绩不便于同一维护
var stu1 59;
var stu2 60;
var stu3 70;
var stu4 80;
var stu5 45;
var stu6 50;
var stu7 55;
var stu8 61;
//.....100名学生就要定义 100个变量
//如何同时为每位同学的成绩加十分
//如何计算班级平均分
//如何将不及格的学生成绩改为及格 1.1 定义数组
定义数组语法
var 数组名称 [];
例
var as [];
创建数组时添加数据语法
var as [数据1,数据2,数据3...]
例
var as [59 , 60 , 70 , 80 , 45 , 50 , 55 , 61];
//在控制台输出as中的内容
console.log( as );此时as 就表示了一组数据
运行效果 1.2 数组存取与删除
有些时候数组由系统创建 或 无法在创建时得到数据并存入数据 此时必须通过数组提供的函数当得到数据时再存入数组中 1.2.1、添加元素数据
语法
数组名称.push( 数据 );
例向数组中添加数据
//定义数组
var as [];
//向数组中添加一个元素10
as.push( 10 );
//向数组中添加一个元素20
as.push( 20 );
as.push( 30 );
as.push( 40 );
as.push( 50 );
//在控制台中输出 as
console.log( as );
运行效果 1.2.2、获取元素数据
数组为每个元素都进行了编号编号表示该元素在数组中的位置 在程序中我们称该编号为数组的下标 下标从0开始到数组长度-1结束通过下标可以获取数组中的元素
语法
数组名称[下标];
例 var as [50,10,800];as[0];//数组中的第 1 个元素as[1];//数组中的第 2 个元素as[2];//数组中的第 3 个元素var a1 as[0];//提取数组中的第 1 个元素var a2 as[1];//提取数组中的第 2 个元素var a3 as[2];//提取数组中的第 3 个元素//输出数组中的第 1 个元素console.log( 输出数组中的第 1 个元素as[0] );//输出数组中的第 2 个元素console.log( 输出数组中的第 2 个元素as[1] );//输出数组中的第 3 个元素console.log( 输出数组中的第 3 个元素as[2] );运行效果 使用循环遍历数组【重点】
遍历数组获取数组中的每一个元素
例当数组元素很多时不便于统一操作
var as [50,10,800];
//输出数组中的第 1 个元素
console.log( as[0] );
//输出数组中的第 2 个元素
console.log( as[1] );
//输出数组中的第 3 个元素
console.log( as[2] );(重复的步骤放到循环中不重复的步骤放到循环之外有规律的变量想办法用循环变量替代)
例使用循环遍历【重点】
var as [50,10,800];
//已知as数组长度为3下标范围0~2
//使用循环变量i充当下标控制下标范围区间在0~2
//每次循环可以获取数组中的一个元素直到最后一个元素
for(var i0; i3; i){
//输出数组中的某个元素
console.log( as[i] );
} 1.2.3、获取数组长度
数组的长度等于数组中的元素个数 在程序中可以动态的获取数组长度以便在数组元素个数改变时依然能够正确遍历
动态获取数组长度
数组名.length;
例如
var as [10,20,30];
as.length;//获取as数组长度结果为3
使用数组长度增强遍历
//遍历数组
for( var i 0; i数组名.length; i){
//获取数组中的某个数据
var a as[i]);
//输出到控制台中
console.log( a );
}1.2.4、删除元素数据
语法
数组名称.splice(下标 , 个数);
个数从下标位置开始含下标位置的元素删除几个元素
例删除数组中的某一个元素 var as [100,200,300,400,500];//删除数组中的某一个元素 数组名称.splice(下标 , 1);//2下标//1删除1个元素as.splice(2,1);//结果[100,200,400,500];console.log( as ); 例删除数组中的多个元素 var as [100,200,300,400,500];//输出as数组中的元素//从下标0开始删除3个元素 0、1、2元素将被删除as.splice(0,3);//结果[400,500];console.log( as );
运行 二、实战
例题一使用数组统一操作敌机
1. 创建一个名为 app 的应用宽500高7002.用数组创建敌机实现敌机的移动超过窗口回到起始位置。
示范图 例题一代码 script typetext/javascriptvar appnew PIXI.Application(500,700);document.body.appendChild(app.view); function add(img,x,y){//创建图片元素var anew PIXI.Sprite.fromImage(img);//将元素添加到页面中app.stage.addChild(a);//调整位置a.xxa.yy //对当前元素直接开启监听a.interactivetrue;return a;}var bg add(img/bg2.jpg,0,0); //创建用于存储敌机元素的数组【关键步骤】var enemys [];//循环添加5架敌机for(var i1; i5; i){var enemy new PIXI.Sprite.fromImage(img/enemy1.png);//i变量的值不同所生成的敌机位置也不同enemy.x i*60;enemy.y i*70;//将飞机元素保存到数组中【关键步骤】enemys.push( enemy );app.stage.addChild(enemy);}//自定义帧频函数function animate(){//遍历数组获取每个敌机元素【关键步骤】for(var i0; ienemys.length; i){//提取数组中的敌机元素【关键步骤】var e enemys[i];//敌机元素下移e.y 2;//当敌机元素超出边界时返回顶部if( e.y 700) e.y -74;}}//添加帧频函数app.ticker.add( animate );/script 运行效果 Pixi.js学习 六数组 源码以及图片地址https://download.csdn.net/download/qq_56376552/89423325 总结
本文 数组 就此结束
如有错误或者网址更新步骤更改代码错误欢迎私信作者进行更正
感谢您的观看。
