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 相关文章推荐
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
使用jquery实现select添加实现后台权限添加的效果
May 28 Javascript
jquery 笔记 事件
Nov 02 Javascript
浏览器图片选择预览、旋转、批量上传的JS代码实现
Dec 04 Javascript
Javascript实现飞动广告效果的方法
May 25 Javascript
jquery.validate 自定义验证方法及validate相关参数
Jan 18 Javascript
Vue cli构建及项目打包以及出现的问题解决
Aug 27 Javascript
亲自动手实现vue日历控件
Jun 26 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
Feb 15 Javascript
JavaScript实现拖拽和缩放效果
Aug 24 Javascript
vue 封装面包屑组件教程
Nov 16 Javascript
create-react-app开发常用配置教程
Jun 25 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
使用MaxMind 根据IP地址对访问者定位
2006/10/09 PHP
收藏的一个php小偷的核心程序
2007/04/09 PHP
php empty函数判断mysql表单是否为空
2010/04/12 PHP
DISCUZ在win2003环境下 Unable to access ./include/common.inc.php in... 的问题终极解决方案
2011/11/21 PHP
跨浏览器PHP下载文件名中的中文乱码问题解决方法
2015/03/05 PHP
PHP用户验证和标签推荐的简单使用
2016/10/31 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
在Laravel 中实现是否关注的示例
2019/10/22 PHP
自制轻量级仿jQuery.boxy对话框插件代码
2010/10/26 Javascript
JS this作用域以及GET传输值过长的问题解决方法
2013/08/06 Javascript
node.js中的fs.fsyncSync方法使用说明
2014/12/15 Javascript
js实现网页右上角滑出会自动消失大幅广告的方法
2015/02/27 Javascript
JS使用ajax从xml文件动态获取数据显示的方法
2015/03/24 Javascript
DWR中各种java方法的调用
2016/05/04 Javascript
javascript常用经典算法详解
2017/01/11 Javascript
详解Node.js中exports和module.exports的区别
2017/04/19 Javascript
Angularjs的$http异步删除数据详解及实例
2017/07/27 Javascript
python 域名分析工具实现代码
2009/07/15 Python
python的dict,set,list,tuple应用详解
2014/07/24 Python
Python Web框架Flask中使用新浪SAE云存储实例
2015/02/08 Python
python实现计算倒数的方法
2015/07/11 Python
python使用paramiko实现远程拷贝文件的方法
2016/04/18 Python
对Python3中bytes和HexStr之间的转换详解
2018/12/04 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
基于python和flask实现http接口过程解析
2020/06/15 Python
python中entry用法讲解
2020/12/04 Python
突破canvas语法限制 让他支持链式语法
2012/12/24 HTML / CSS
Linux的文件类型
2012/03/07 面试题
2014爱耳日宣传教育活动总结
2014/03/09 职场文书
新员工试用期自我鉴定
2014/04/17 职场文书
新学期标语
2014/06/30 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
交通事故责任认定书
2015/08/06 职场文书
opencv-python图像配准(匹配和叠加)的实现
2021/06/23 Python
pandas求平均数和中位数的方法实例
2021/08/04 Python
Android中的Launch Mode详情
2022/06/05 Java/Android