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版Tab标签切换
Mar 16 Javascript
Javascript中的String对象详谈
Mar 03 Javascript
jquery append()方法与html()方法的区别及使用介绍
Aug 01 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
基于express中路由规则及获取请求参数的方法
Mar 12 Javascript
微信小程序实现弹出菜单功能
Jun 12 Javascript
支付宝小程序tabbar底部导航
Nov 06 Javascript
详解vue父子组件关于模态框状态的绑定方案
Jun 05 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
vue 解决数组赋值无法渲染在页面的问题
Oct 28 Javascript
如何利用javascript接收json信息并进行处理
Aug 06 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文件向另一个地址post数据,不用表单和隐藏的变量的
2007/03/06 PHP
用php或asp创建网页桌面快捷方式的代码
2010/03/23 PHP
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP模板引擎Smarty内置变量调解器用法详解
2016/04/11 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
用jquery设置按钮的disabled属性的实现代码
2010/11/28 Javascript
js判断样式className同时增加class或删除class
2013/01/30 Javascript
jquery设置元素的readonly和disabled的写法
2013/09/22 Javascript
jquery实现多行文字图片滚动效果示例代码
2014/10/10 Javascript
js 操作符汇总
2014/11/08 Javascript
jQuery实现高亮显示的方法
2015/03/10 Javascript
兼容各大浏览器的JavaScript阻止事件冒泡代码
2015/07/09 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
vue axios 表单提交上传图片的实例
2018/03/16 Javascript
微信小程序实现刷脸登录
2018/05/25 Javascript
layer父页获取弹出层输入框里面的值方法
2019/09/02 Javascript
vue设置一开始进入的页面教程
2019/10/28 Javascript
jQuery实现鼠标移入显示蒙版效果
2020/01/11 jQuery
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
原生js滑动轮播封装
2020/07/31 Javascript
JS实现公告上线滚动效果
2021/01/10 Javascript
python实现对文件中图片生成带标签的txt文件方法
2018/04/27 Python
TensorFlow的权值更新方法
2018/06/14 Python
Python 利用切片从列表中取出一部分使用的方法
2019/02/01 Python
Django中create和save方法的不同
2019/08/13 Python
Python 多线程,threading模块,创建子线程的两种方式示例
2019/09/29 Python
详解Python3迁移接口变化采坑记
2019/10/11 Python
Python partial函数原理及用法解析
2019/12/11 Python
Python Lambda函数使用总结详解
2019/12/11 Python
使用python图形模块turtle库绘制樱花、玫瑰、圣诞树代码实例
2020/03/16 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
中国电子产品外贸网站:MiniIntheBox
2017/02/06 全球购物
英国手工制作的现代与经典的沙发和床:Love Your Home
2020/09/26 全球购物
楼面部长岗位职责范本
2014/02/14 职场文书
高中班级口号
2014/06/09 职场文书
Java使用Unsafe类的示例详解
2021/09/25 Java/Android