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 相关文章推荐
javascript重写alert方法的实例代码
Mar 29 Javascript
返回页面顶部top按钮通过锚点实现(自写)
Aug 30 Javascript
理解Javascript闭包
Nov 01 Javascript
当鼠标滑过文本框自动选中输入框内容的JS代码分享
Nov 26 Javascript
JQuery EasyUI 数字格式化处理示例
May 05 Javascript
jquery获取复选框checkbox的值实现方法
May 30 Javascript
Javascript 一些需要注意的细节(必看篇)
Jul 08 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
vue的无缝滚动组件vue-seamless-scroll实例
Dec 18 Javascript
学习React中ref的两个demo示例
Aug 14 Javascript
微信小程序基于picker实现级联菜单
Feb 15 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
May 11 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 mail()函数使用及配置方法
2014/01/14 PHP
zf框架的数据库追踪器使用示例
2014/03/13 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php实现斐波那契数列的简单写法
2014/07/19 PHP
php中使用array_filter()函数过滤空数组的实现代码
2014/08/19 PHP
thinkphp的dump函数无输出实例代码
2016/11/15 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
php使用curl代理实现抓取数据的方法
2017/02/03 PHP
PHP错误处理函数register_shutdown_function使用示例
2017/07/03 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
浅谈laravel中的关联查询with的问题
2019/10/10 PHP
php生成随机数/生成随机字符串的方法小结【5种方法】
2020/05/27 PHP
Backbone.js中的集合详解
2015/01/14 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
Vue.js -- 过滤器使用总结
2017/02/18 Javascript
你有必要知道的10个JavaScript难点
2017/07/25 Javascript
JS获取子节点、父节点和兄弟节点的方法实例总结
2018/07/06 Javascript
Vue基于iview实现登录密码的显示与隐藏功能
2020/03/06 Javascript
Python代码调试的几种方法总结
2015/04/15 Python
利用Python的Django框架生成PDF文件的教程
2015/07/22 Python
python实现多线程抓取知乎用户
2016/12/12 Python
python 生成器生成杨辉三角的方法(必看)
2017/04/10 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python实现正则表达式匹配任意的邮箱方法
2018/12/20 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
阿玛尼化妆品美国官网:Giorgio Armani Beauty
2017/02/02 全球购物
美国顶级品牌男士大码服装店:DXL
2017/08/30 全球购物
Skyscanner台湾:全球知名的旅行比价引擎
2018/07/01 全球购物
环境工程求职简历的自我评价范文
2013/10/24 职场文书
2015年政府采购工作总结
2015/05/21 职场文书
六五普法学习心得体会
2016/01/21 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
Java基础之线程锁相关知识总结
2021/06/30 Java/Android
Python通过loop.run_in_executor执行同步代码 同步变为异步
2022/04/11 Python