Javascript基础之数组的使用


Posted in Javascript onMay 13, 2016

Javascript 数组的工作方式与大多数编程语言的数组类似。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn4Array</title>
</head>
<body>
<script type="text/javascript">
//创建和填充数组
var myArray = new Array();
myArray[0] = 100;
myArray[1] = "Luka";
myArray[2] = true;
</script>
</body>
</html>

创建数组的时候不需要声明数组中元素的个数。 Javascript数组会自动调整大小以便容纳所有元素。

不必声明数组所含数据的类型。JavaScript数组可以混合包含各种数据的类型 。

1. 使用数组字面量

使用字面量,可以在一条语句中创建和填充数组。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn4Array</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Luka",true];
</script>
</body>
</html>

此例通过在一对方括号([ 和 ])之间指定所需要数组元素的方法创建了一个新数组,并将其赋给变量 myArray 。

2. 读取和修改数组内容

要读取指定索引位置的数组元素值,应使用一对方括号([ 和 ])并将索引值放在方括号间。JavaScript数组的索引值从0开始。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn4Array</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Luka",true];
//读取指定索引位置的数组元素值
document.writeln("Index 0:"+myArray[0]+"<br />");
//修改数组
myArray[0] = "Monday";
document.writeln("Index 0:"+myArray[0]);
</script>
</body>
</html>

输出结果:

Index 0:100
Index 0:Monday

3. 枚举数组内容

可以用 for 循环枚举数组内容。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn4Array</title>
</head>
<body>
<script type="text/javascript">
var myArray = [100,"Luka",true];
for(var i= 0;i < myArray.length;i++){
document.writeln("Index "+i+": "+myArray[i]+"<br />")
}
</script>
</body>
</html>

输出结果:

Index 0: 100
Index 1: Luka
Index 2: true

3. 使用内置的数组方法

Javascript 中的Array 对象定义了许多方法。下图罗列了一些最常用的方法。

Javascript基础之数组的使用

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>learn4Array</title>
</head>
<body>
<script type="text/javascript">
var myArray1 = [100,"Luka"];
var myArray2 = [true];
//concat(<otherArray>)
var myArray = myArray1.concat(myArray2);
for(var i= 0;i < myArray.length;i++){
document.writeln("myArray["+i+"]: "+myArray[i]+"<br />")
}
document.writeln("<br />");
//join(<separator>)
var strArray = myArray.join('-');
document.writeln(strArray+"<br />");
document.writeln("<br />");
//pop()
myArray.pop();
document.writeln(myArray+"<br />");
document.writeln("<br />");
//push(<item>)
myArray.push("Hello Javascript",200);
document.writeln(myArray+"<br />");
document.writeln("<br />");
//reverse()
myArray = myArray.reverse();
document.writeln(myArray+"<br />");
document.writeln("<br />");
//shift()
myArray.shift();;
document.writeln(myArray+"<br />");
document.writeln("<br />");
//slice(<start>,<end>)
document.writeln( myArray.slice(1,3)+"<br />");
document.writeln( myArray.slice(0)+"<br />");
document.writeln("<br />");
//sort()
function sortNumber(a,b)
{
return b - a;
}
var myArray3 = ["George","John","Thomas","James","Adrew","Martin"];
var myArray4 = [10,5,40,25,1000,1];
document.writeln( myArray3.sort()+"<br />");
document.writeln( myArray4.sort()+"<br />");
//使用一个排序函数,按照数值的大小对数字进行排序
document.writeln( myArray4.sort(sortNumber)+"<br />");
document.writeln("<br />");
//unshift(<item>)
myArray.unshift(1,2);
document.writeln(myArray+"<br />");
</script>
</body>
</html>

输出结果:

myArray[0]: 100
myArray[1]: Luka
myArray[2]: true
100-Luka-true
100,Luka
100,Luka,Hello Javascript,200
200,Hello Javascript,Luka,100
Hello Javascript,Luka,100
Luka,100
Hello Javascript,Luka,100
Adrew,George,James,John,Martin,Thomas
1,10,1000,25,40,5
1000,40,25,10,5,1
1,2,Hello Javascript,Luka,100

以上内容是小编给大家介绍的Javascript基础之数组的使用,希望对大家有所帮助!

Javascript 相关文章推荐
window.opener用法和用途实例介绍
Aug 19 Javascript
Js实现当前点击a标签变色突出显示其他a标签回复原色
Nov 27 Javascript
JS小游戏之宇宙战机源码详解
Sep 25 Javascript
JS更改select内option属性的方法
Oct 14 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
Angular4实现动态添加删除表单输入框功能
Aug 11 Javascript
webpack踩坑之路图片的路径与打包
Sep 05 Javascript
使用webpack搭建react开发环境的方法
May 15 Javascript
Node中对非阻塞I/O、事件循环的知识点总结
Jan 05 Javascript
JS实现悬浮球只在一侧滑动并且是横屏状态下
Aug 19 Javascript
深入讲解Vue中父子组件通信与事件触发
Mar 22 Vue.js
JS判断图片是否加载完成方法汇总(最新版)
May 13 #Javascript
BootStrap扔进Django里的方法详解
May 13 #Javascript
JavaScript重载函数实例剖析
May 13 #Javascript
JS加载iFrame出现空白问题的解决办法
May 13 #Javascript
基于JS判断iframe是否加载成功的方法(多种浏览器)
May 13 #Javascript
JS iFrame加载慢怎么解决
May 13 #Javascript
基于JS实现的笛卡尔乘积之商品发布
May 13 #Javascript
You might like
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
学习php分页代码实例
2013/10/24 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
基于JQuery的动态删除Table表格的行和列的代码
2011/05/12 Javascript
JavaScript生成GUID的多种算法小结
2013/08/18 Javascript
简单的邮箱登陆的提示效果类似于yahoo邮箱
2014/02/26 Javascript
JavaScript把数组作为堆栈使用的方法
2015/03/20 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
详解AngularJs HTTP响应拦截器实现登陆、权限校验
2017/04/11 Javascript
JS jQuery使用正则表达式去空字符的简单实现代码
2017/05/20 jQuery
详解AngularJs路由之Ui-router-resolve(预加载)
2017/06/13 Javascript
详解Vue项目部署遇到的问题及解决方案
2019/01/11 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
layer弹出层显示在top顶层的方法
2019/09/11 Javascript
Nodejs封装类似express框架的路由实例详解
2020/01/05 NodeJs
vue父子模板传值问题解决方法案例分析
2020/02/26 Javascript
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python检索特定内容的文本文件实例
2018/06/05 Python
python web框架中实现原生分页
2019/09/08 Python
Python 中@property的用法详解
2020/01/15 Python
Eclipse配置python默认头过程图解
2020/04/26 Python
Python matplotlib图例放在外侧保存时显示不完整问题解决
2020/07/28 Python
Python字符串三种格式化输出
2020/09/17 Python
python Protobuf定义消息类型知识点讲解
2021/03/02 Python
CSS3制作炫酷的自定义发光文字
2016/03/28 HTML / CSS
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
学习党章思想汇报
2014/01/07 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
婚宴新娘致辞
2015/07/28 职场文书
四十年同学聚会致辞
2015/07/28 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书
七年级作文之秋游
2019/10/21 职场文书
Win10系统下配置Java环境变量
2021/06/13 Java/Android