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 浮动导航栏实现代码
Aug 27 Javascript
如何确保JavaScript的执行顺序 之实战篇
Mar 03 Javascript
jquery弹出层类代码分享
Dec 27 Javascript
JavaScript中Math对象方法使用概述
Jan 02 Javascript
使用jQuery不判断浏览器高度解决iframe自适应高度问题
Dec 16 Javascript
javascript实现选中复选框后相关输入框变灰不可用的方法
Aug 11 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
React组件生命周期详解
Jul 03 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue里的data要用return返回的原因浅析
May 28 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 5.3 下载时 VC9、VC6、Thread Safe、Non Thread Safe的区别分析
2011/03/28 PHP
关于php unset对json_encode的影响详解
2018/11/14 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
RR vs IO BO3 第二场2.13
2021/03/10 DOTA
获取HTML DOM节点元素的方法的总结
2009/08/21 Javascript
JavaScript 学习笔记(六)
2009/12/31 Javascript
js时间日期和毫秒的相互转换
2013/02/22 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
使用JQuery在线制作ppt并在线演示源码特效
2015/09/08 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
移动端 一个简单易懂的弹出框
2016/07/06 Javascript
JavaScript正则表达式实例详解
2016/10/16 Javascript
浅谈Angularjs link和compile的使用区别
2016/10/21 Javascript
微信小程序如何获知用户运行小程序的场景教程
2017/05/17 Javascript
详解EasyUi控件中的Datagrid
2017/08/23 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
原生JS实现简单的无缝自动轮播效果
2018/09/26 Javascript
如何基于JavaScript判断图片是否加载完成
2019/12/28 Javascript
在js文件中引入(调用)另一个js文件的三种方法
2020/09/11 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python中文乱码的解决方法
2013/11/04 Python
Python中的进程分支fork和exec详解
2015/04/11 Python
Python 操作文件的基本方法总结
2017/08/10 Python
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python requests抓取one推送文字和图片代码实例
2019/11/04 Python
tensorflow使用range_input_producer多线程读取数据实例
2020/01/20 Python
关于TensorFlow新旧版本函数接口变化详解
2020/02/10 Python
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
跑步、骑行和铁人三项的高性能眼镜和服装:ROKA
2018/07/06 全球购物
法国春天百货官网:Printemps.com
2020/06/29 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
客房领班岗位职责
2015/02/11 职场文书
严以律己学习心得体会
2016/01/13 职场文书
初二英语教学反思
2016/02/15 职场文书
学习师德师风的心得体会(2篇)
2019/10/08 职场文书
Python Pygame实战在打砖块游戏的实现
2022/03/17 Python