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 相关文章推荐
JS 时间显示效果代码
Aug 23 Javascript
基于jquery的回到页面顶部按钮
Jun 27 Javascript
jquery插件jSignature实现手动签名
May 04 Javascript
JavaScript中this详解
Sep 01 Javascript
jquery获取img的src值的简单实例
May 17 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
Bootstrap源码解读导航(6)
Dec 23 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
Jan 06 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
May 24 Javascript
微信小程序实现登录遮罩效果
Nov 01 Javascript
JavaScript 处理树数据结构的方法示例
Jun 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
全国FM电台频率大全 - 2 天津市
2020/03/11 无线电
PHP生成不同颜色、不同大小的tag标签函数
2013/09/23 PHP
Fleaphp常见函数功能与用法示例
2016/11/15 PHP
laravel创建类似ThinPHP中functions.php的全局函数
2016/11/26 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
JavaScript高级程序设计 学习笔记 js高级技巧
2011/09/20 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
Javascript中实现trim()函数的两种方法
2015/02/04 Javascript
简单实现js选项卡切换效果
2016/02/03 Javascript
requireJS使用指南
2016/04/27 Javascript
星期几的不同脚本写法(推荐)
2016/06/01 Javascript
Bootstrap的Refresh Icon也spin起来
2016/07/13 Javascript
AngularJs入门教程之环境搭建+创建应用示例
2016/11/01 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
详解关于vue-area-linkage走过的坑
2018/06/27 Javascript
vue通过滚动行为实现从列表到详情,返回列表原位置的方法
2018/08/31 Javascript
微信小程序实现跳转的几种方式总结(推荐)
2019/04/24 Javascript
轻松解决JavaScript定时器越走越快的问题
2019/05/13 Javascript
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
JS原型和原型链原理与用法实例详解
2020/02/05 Javascript
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Python自动化导出zabbix数据并发邮件脚本
2019/08/16 Python
Python如何使用函数做字典的值
2019/11/30 Python
python 统计文件中的字符串数目示例
2019/12/24 Python
Python如何实现定时器功能
2020/05/28 Python
详解selenium + chromedriver 被反爬的解决方法
2020/10/28 Python
python性能测试工具locust的使用
2020/12/28 Python
国家助学金获奖感言
2014/01/31 职场文书
民生工程实施方案
2014/03/22 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
汉语言文学专业求职信
2014/06/19 职场文书
学风建设演讲稿
2014/09/12 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
信用卡催款律师函
2015/05/27 职场文书
十七岁的单车观后感
2015/06/12 职场文书
2016国培学习心得体会
2016/01/08 职场文书