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 相关文章推荐
AutoSave/自动存储功能实现
Mar 24 Javascript
IE与firefox之jquery用法区别
Oct 03 Javascript
Jquery知识点一 Jquery的ready和Dom的onload的区别
Jan 15 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
JavaScript中的数组操作介绍
Dec 30 Javascript
jQuery表格插件datatables用法汇总
Mar 29 Javascript
js replace(a,b)之替换字符串中所有指定字符的方法
Aug 17 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
es6在react中的应用代码解析
Nov 08 Javascript
微信小程序使用Promise简化回调
Feb 06 Javascript
p5.js入门教程之鼠标交互的示例
Mar 16 Javascript
javascript实现小型区块链功能
Apr 03 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字符串函数的总结分析
2013/06/05 PHP
PHP 清空varnish 缓存的详解(包括指定站点下的)
2013/06/20 PHP
解析php做推送服务端实现ios消息推送
2013/07/01 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
php实现无限级分类
2014/12/24 PHP
javascript 处理HTML元素必须避免使用的一种方法
2009/07/30 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
该如何加载google-analytics(或其他第三方)的JS
2010/05/13 Javascript
ExtJS下书写动态生成的xml(兼容火狐)
2013/04/02 Javascript
js绘制购物车抛物线动画
2020/11/18 Javascript
基于Bootstrap框架实现图片切换
2017/03/10 Javascript
Vue.js在使用中的一些注意知识点
2017/04/29 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
浅谈laytpl 模板空值显示null的解决方法及简单的js表达式
2019/09/19 Javascript
Nuxt页面级缓存的实现
2020/03/09 Javascript
Python全局变量操作详解
2015/04/14 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python使用threading获取线程函数返回值的实现方法
2017/11/15 Python
python+pandas分析nginx日志的实例
2018/04/28 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
Python读取YUV文件,并显示的方法
2018/12/04 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
Python企业编码生成系统之系统主要函数设计详解
2019/07/26 Python
Python实现图像去噪方式(中值去噪和均值去噪)
2019/12/18 Python
PYQT5 vscode联合操作qtdesigner的方法
2020/03/24 Python
Sunglasses Shop丹麦:欧洲第一的太阳镜在线销售网站
2017/10/22 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
怎样自定义一个异常类
2016/09/27 面试题
师范大学生求职信
2014/06/13 职场文书
党员教师群众路线个人整改措施
2014/10/28 职场文书
致毕业季:你如何做好自己的职业生涯规划书?
2019/07/01 职场文书
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android
《异世界四重奏》剧场版6月10日上映 PV视觉图原创角色发表
2022/03/20 日漫
nginx rewrite功能使用场景分析
2022/05/30 Servers
Zabbix对Kafka topic积压数据监控的问题(bug优化)
2022/07/07 Servers
使用python生成大量数据写入es数据库并查询操作(2)
2022/09/23 Python