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 相关文章推荐
JavaScript 基础问答三
Dec 03 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
Dec 12 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
解决vue2中使用axios http请求出现的问题
Mar 05 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
js实现延迟加载的几种方法详解
Jan 19 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
TypeScript之调用栈的实现
Dec 31 Javascript
vue插槽slot的简单理解与用法实例分析
Mar 14 Javascript
jQuery实现增删改查
Dec 22 jQuery
详解JS ES6编码规范
May 07 Javascript
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里面的抽象类
2010/01/28 PHP
php对二维数组进行排序的简单实例
2013/12/19 PHP
php时间函数用法分析
2016/05/28 PHP
PHP实现的文件操作类及文件下载功能示例
2016/12/24 PHP
php 中奖概率算法实现代码
2017/01/25 PHP
详解PHP防止盗链防止迅雷下载的方法
2017/04/26 PHP
异步javascript的原理和实现技巧介绍
2012/11/08 Javascript
JS特殊函数(Function()构造函数、函数直接量)区别介绍
2013/05/19 Javascript
js获取url参数值的两种方式
2013/09/10 Javascript
js调试工具Console命令详解
2014/10/21 Javascript
Jquery 垂直多级手风琴菜单附源码下载
2015/11/17 Javascript
jquery实现加载进度条提示效果
2015/11/23 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
Javascript实现登录记住用户名和密码功能
2017/03/22 Javascript
从零开始学习Node.js系列教程之SQLite3和MongoDB用法分析
2017/04/13 Javascript
vue组件之Alert的实现代码
2017/10/17 Javascript
vue中v-cloak解决刷新或者加载出现闪烁问题(显示变量)
2018/04/20 Javascript
通过图带你深入了解vue的响应式原理
2019/06/21 Javascript
js+h5 canvas实现图片验证码
2020/10/11 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
使用C#配合ArcGIS Engine进行地理信息系统开发
2016/02/19 Python
Python WSGI的深入理解
2018/08/01 Python
使用 Python 实现微信群友统计器的思路详解
2018/09/26 Python
浅析python参数的知识点
2018/12/10 Python
Python实现操纵控制windows注册表的方法分析
2019/05/24 Python
pycharm激活码有效到2020年11月底
2020/09/18 Python
Python3基于plotly模块保存图片表格
2020/08/03 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
《世界多美呀》教学反思
2014/03/02 职场文书
王兆力在市委党的群众路线教育实践活动总结大会上的讲话稿
2014/10/25 职场文书
2014年医生工作总结
2014/11/21 职场文书
巾帼文明岗汇报材料
2014/12/24 职场文书
庆七一活动简报
2015/07/20 职场文书
2022年显卡天梯图(6月更新)
2022/06/17 数码科技