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 相关文章推荐
ext form 表单提交数据的方法小结
Aug 08 Javascript
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
Apr 27 Javascript
onkeypress字符按键兼容所有浏览器使用介绍
Apr 24 Javascript
js的正则test,match,exec详细解析
Jan 29 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JQuery操作元素的css样式
Mar 09 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
Dec 08 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
Jul 21 Javascript
BootStrap日期控件在模态框中选择时间下拉菜单无效的原因及解决办法(火狐下不能点击)
Aug 18 Javascript
JS前向后瞻正则表达式定义与用法示例
Dec 27 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
js 判断一个数字是不是2的n次方幂的实例
Nov 26 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获取表单textarea数据中的换行问题
2010/09/10 PHP
PHP 5.5 创建和验证哈希最简单的方法详解
2013/11/07 PHP
PHP和C#可共用的可逆加密算法详解
2015/10/26 PHP
强大的jquery插件jqeuryUI做网页对话框效果!简单
2011/04/14 Javascript
jQuery $.get 的妙用 访问本地文本文件
2012/07/12 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
简体中文转换繁体中文(实现代码)
2013/12/25 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
Javascript核心读书有感之词法结构
2015/02/01 Javascript
javascript实现点击提交按钮后显示loading的方法
2015/07/03 Javascript
jquery淡入淡出效果简单实例
2016/01/14 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
2016/08/29 Javascript
前端 Vue.js 和 MVVM 详细介绍
2016/12/29 Javascript
vue组件 $children,$refs,$parent的使用详解
2017/07/31 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
JavaScript变量声明var,let.const及区别浅析
2018/04/23 Javascript
[49:41]NB vs NAVI Supermajor小组赛A组 BO3 第一场 6.2
2018/06/03 DOTA
Python中Django框架利用url来控制登录的方法
2015/07/25 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
Python使用中文正则表达式匹配指定中文字符串的方法示例
2017/01/20 Python
python 列表,数组,矩阵两两转换tolist()的实例
2018/04/04 Python
Python实现简单http服务器
2018/04/12 Python
python 实现对文件夹中的图像连续重命名方法
2018/10/25 Python
python中使用while循环的实例
2019/08/05 Python
Python使用turtle库绘制小猪佩奇(实例代码)
2020/01/16 Python
Python 实现自动获取种子磁力链接方式
2020/01/16 Python
python网络爬虫实现发送短信验证码的方法
2021/02/25 Python
size?法国官网:英国伦敦的球鞋精品店
2020/03/15 全球购物
生产车间主管岗位职责
2013/12/28 职场文书
商业房地产广告语
2014/03/13 职场文书
医院党员公开承诺书
2014/08/30 职场文书
中国文明网2015年“向国旗敬礼”活动网上签名寄语
2015/09/24 职场文书
《雪域豹影》读后感:父爱的伟大
2019/12/23 职场文书
Nginx快速入门教程
2021/03/31 Servers
手写实现JS中的new
2021/11/07 Javascript
详解JSON.parse和JSON.stringify用法
2022/02/18 Javascript