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 相关文章推荐
Add a Formatted Table to a Word Document
Jun 15 Javascript
JQuery 表单中textarea字数限制实现代码
Dec 07 Javascript
jQuery基本过滤选择器使用介绍
Apr 18 Javascript
设置checkbox为只读(readOnly)的两种方式
Oct 11 Javascript
Javscript调用iframe框架页面中函数的方法
Nov 01 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
浅谈angularjs module返回对象的坑(推荐)
Oct 21 Javascript
理解JavaScript原型链
Oct 25 Javascript
教你一步步用jQyery实现轮播器
Dec 18 Javascript
JavaScript 判断对象中是否有某属性的常用方法
Jun 14 Javascript
ES6中的class是如何实现的(附Babel编译的ES5代码详解)
May 17 Javascript
解决ant-design-vue中menu菜单无法默认展开的问题
Oct 31 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高级对象构建 工厂模式的使用
2012/02/05 PHP
php 多关键字 高亮显示实现代码
2012/04/23 PHP
PHP答题类应用接口实例
2015/02/09 PHP
yii2使用ajax返回json的实现方法
2016/05/14 PHP
PHP简单读取PDF页数的实现方法
2016/07/21 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
jquery焦点图片切换(数字标注/手动/自动播放/横向滚动)
2013/01/24 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
2015/08/21 Javascript
js父页面中使用子页面的方法
2016/01/09 Javascript
JS中创建函数的三种方式及区别
2016/03/13 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
vue 实现 tomato timer(蕃茄钟)实例讲解
2017/07/24 Javascript
让你彻底掌握es6 Promise的八段代码
2017/07/26 Javascript
详解用webpack的CommonsChunkPlugin提取公共代码的3种方式
2017/11/09 Javascript
jQuery实现弹窗下底部页面禁止滑动效果
2017/12/19 jQuery
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
python实现登录密码重置简易操作代码
2019/08/14 Python
django实现模型字段动态choice的操作
2020/04/01 Python
django 解决model中类写不到数据库中,数据库无此字段的问题
2020/05/20 Python
如何让PyQt5中QWebEngineView与JavaScript交互
2020/10/21 Python
分享一个python的aes加密代码
2020/12/22 Python
毕业生的自我评价范文
2013/12/31 职场文书
食堂个人先进事迹
2014/01/22 职场文书
2014领导班子专题民主生活会对照检查材料思想汇报
2014/09/23 职场文书
财务人员岗位职责
2015/02/03 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
调任通知
2015/04/21 职场文书
Nginx设置日志打印post请求参数的方法
2021/03/31 Servers
Nginx隐藏式跳转(浏览器URL跳转后保持不变)
2022/04/07 Servers