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 相关文章推荐
lyhucSelect基于Jquery的Select数据联动插件
Mar 29 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
Zero Clipboard实现浏览器复制到剪贴板的方法(多个复制按钮)
Mar 24 Javascript
jQuery Ajax 实例代码 ($.ajax、$.post、$.get)
Apr 29 Javascript
如何解决手机浏览器页面点击不跳转浏览器双击放大网页
Jul 01 Javascript
canvas绘制环形进度条
Feb 23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
Mar 09 Javascript
原生Aajax 和jQuery Ajax 写法个人总结
Mar 24 jQuery
layui实现文件或图片上传记录
Aug 28 Javascript
js实现有趣的倒计时效果
Jan 19 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无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
php简单实现多字节字符串翻转的方法
2015/03/31 PHP
php结合正则批量抓取网页中邮箱地址
2015/05/19 PHP
php正则表达式获取内容所有链接
2015/07/24 PHP
实例详解PHP中html word 互转的方法
2016/01/28 PHP
PHP关键特性之命名空间实例详解
2017/05/06 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
onmouseover和onmouseout的一些问题思考
2013/08/14 Javascript
jQuery中clone()方法用法实例
2015/01/16 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
2016/06/13 Javascript
AngularJs 指令详解及示例代码
2016/09/01 Javascript
JavaScript之cookie技术详解
2016/11/18 Javascript
Angular.JS中指令ng-if的注意事项小结
2017/06/21 Javascript
React Native 搭建开发环境的方法步骤
2017/10/30 Javascript
基于JSONP原理解析(推荐)
2017/12/04 Javascript
node简单实现一个更改头像功能的示例
2017/12/29 Javascript
vue的安装及element组件的安装方法
2018/03/09 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
vue-cli3.0 脚手架搭建项目的过程详解
2018/10/19 Javascript
js实现简单掷骰子小游戏
2019/10/24 Javascript
Vue组件为什么data必须是一个函数
2020/06/11 Javascript
Vue项目配置跨域访问和代理proxy设置方式
2020/09/08 Javascript
python绘制热力图heatmap
2020/03/23 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
玩转CSS3色彩
2010/01/16 HTML / CSS
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
肯尼亚网上商城:Kilimall
2016/08/20 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
自荐信封面
2013/12/04 职场文书
英语复习计划
2015/01/19 职场文书
西安事变观后感
2015/06/12 职场文书
python opencv通过4坐标剪裁图片
2021/06/05 Python
mysql连接查询中and与where的区别浅析
2021/07/01 MySQL