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 使用个人心得
Feb 26 Javascript
原生的html元素选择器类似jquery选择器
Oct 15 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
JavaScript学习笔记之创建对象
Mar 25 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
jquery中live()方法和bind()方法区别分析
Jun 23 Javascript
微信小程序 video详解及简单实例
Jan 16 Javascript
jquery封装插件时匿名函数形参和实参的写法解释
Feb 14 Javascript
vue.js 实现输入框动态添加功能
Jun 25 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
浅谈vue在html中出现{{}}的原因及解决方式
Nov 16 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.MVC的模板标签系统(一)
2006/09/05 PHP
详解WordPress中简码格式标签编写的基本方法
2015/12/22 PHP
抛弃 PHP 代价太高
2016/04/26 PHP
php文件系统处理方法小结
2016/05/23 PHP
php实现对文件压缩简单的方法
2019/09/29 PHP
Js 获取当前日期时间及其它操作实现代码
2021/03/04 Javascript
jqeury eval将字符串转换json的方法
2011/01/20 Javascript
js String对象中常用方法小结(字符串操作)
2012/01/27 Javascript
js通过地址栏给action传值(中文乱码全是问号)
2013/05/02 Javascript
jQuery父级以及同级元素查找介绍
2013/09/04 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
Jquery和angularjs获取check框选中的值的方法汇总
2016/01/17 Javascript
BootStrap tab选项卡使用小结
2020/08/09 Javascript
利用Bootstrap实现表格复选框checkbox全选
2016/12/21 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
VUEX采坑之路之获取不到$store的解决方法
2019/11/08 Javascript
Vue学习之常用指令实例详解
2020/01/06 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
2020/01/21 Javascript
JS常用跨域方法实现原理解析
2020/12/09 Javascript
详解Django缓存处理中Vary头部的使用
2015/07/24 Python
浅谈Python peewee 使用经验
2017/10/20 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
python3.6使用pickle序列化class的方法
2018/10/22 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
基于python3.7利用Motor来异步读写Mongodb提高效率(推荐)
2020/04/29 Python
Python unittest基本使用方法代码实例
2020/06/29 Python
秘书岗位职责
2013/11/18 职场文书
工程管理专业个人求职信范文
2013/12/07 职场文书
明信片寄语大全
2014/04/08 职场文书
党日活动总结
2014/05/07 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
Python学习之os包使用教程详解
2022/03/21 Python
Web应用开发TypeScript使用详解
2022/05/25 Javascript
CSS 实现角标效果的完整代码
2022/06/28 HTML / CSS