javascript学习笔记(五) Array 数组类型介绍


Posted in Javascript onJune 19, 2012

数组的创建
第一种:

var colors = new Array(); 
var colors = new Array(20);//创建包含20项的数组 
var colors = new Array("Greg");//创建包含1项,即字符串"Greg"的数组 
var colors = new Array("red","blue","green"); //创建包含3项

第二种:
var colors = ["red","blue","green"]; 
var colors = [];//创建一个空数组

注意:数组的索引是从0开始的

1. length属性
length属性中保存数组的项数,如:

var colors = ["red","blue","green"]; 
alert(colors.length); //3

length属性不是只读的,可以利用length属性在数组的末尾移除项,或者添加新的项,如:
var colors = ["red","blue","green"]; 
colors.length = 2; 
alert(colors); //red,blue 
colors[colors.length] = "black"; 
alert(colors); //red,blue,black

2.join()方法,连接数组中的项
var colors = ["red","blue","green"]; 
alert(colors.join(",")); //red,blue,green 
alert(colors.join("||")); //red||blue||green

3.数组的栈方法:push()和pop()
push()方法 可以接受任意数量的参数把它们逐个添加的数组的末尾,并返回修改后数组的长度
pop()方法 从数组末尾移除最后一项,减少数组的length值,返回移除的项
var colors = new Arrary(); //创建一个数组 
var count = colors.push("red","green"); //推入两项到数组末尾 
alert(count); //2 
count = colors.push("black"); //推入一项到数组末尾 
alert(count); //3 
var item = colors.pop(); //移除最后一项并返回该值 
alert(item); //"black" 
alert(count); //2

4.数组的队列方法:push()和shift()、unshift()
push()方法同上
shift()方法 移除数组中的第一项并返回该项,数组长度减1
unshift()方法 在数组前端添加任意项,并返回新数组的长度
var colors = new Arrary(); //创建一个数组 
var count = colors.push("red","green"); //推入两项到数组末尾 
alert(count); //2 
count = colors.push("black"); //推入一项到数组末尾 
alert(count); //3 
var item = colors.shift(); //移除第一项并返回该值 
alert(item); //"red" 
alert(colors); //green,black 
count = colors.unshift("blue"); //推入一项到数组前端 
alert(count); //3 
alert(colors); //blue,green,black

5.重排序方法:reverse()和sort()
reverse()方法 反转数组项的顺序
sort()方法 默认按字符串大小升序排列数组项,可以接受一个比较大小的函数作为参数
var values = [1,2,3,4,5]; 
values.reverse(); 
alert(values); //5,4,3,2,1

//升序排序函数 
function compare(value1,value2) { 
if (value1 < value2) { 
return -1; //降序改为1 
} else if (value1 > value2) { 
return 1; //降序改为-1 
} else { 
return 0; 
} 
}

//数组升序排列 
var values = [0,1,5,15,20,10]; 
values.sort(compare); 
alert(values);//0,1,5,10,15,20

//对于数值型可以用这个函数,升序 
function compare(value1,value2) { 
return value2 - value1; 
}

6.数组的一些方法:concat()方法、slice()方法和splice()方法
concat()方法 将参数添加到原数组末尾,返回新的数组,原数组不变
slice()方法 返回数组中的项,一个参数时返回指定位置到数组末尾所有的项,两个参数时返回起始位置和结束位置之间的项(不包括结束位置),原数组不变
splice()方法 向数组中插入,删除,或替换数组中的项,返回删除的项(没有删除时返回空数组),原数组改变
//concat()方法 
var colors = ["red","green","blue"]; 
var colors2 = colors.concat("yellow",["black","brown"]); 
alert(colors); //red,green,blue 
alert(colors2); //red,green,blue,yellow,black,brown

//slice()方法 
var colors = ["red","green","blue","yellow","black"]; 
var colors2 = colors.slice(1); //一个参数时返回指定位置到数组末尾所有的项 
var colors3 = colors.slice(1,4); //两个参数时返回起始位置和结束位置之间的项(不包括结束位置) 
alert(colors2); //green,blue,yellow,black 
alert(colors3); //green,,blue,yellow

//splice()方法 
//插入项,插入时指定3个参数:起始位置、0(要删除的项)、要插入的项 
var colors = ["red","green","blue"]; 
var inserted = colors.splice(1,0,"yellow","orange"); //从位置1开始插入两项 
alert(colors); //red,yellow,orange,green,blue 
alert(inserted); //空数组 //替换项,删除时指定3个参数:起始位置、要删除的项、要插入的任意项 
var colors = ["red","green","blue"]; 
var replaced = colors.splice(1,1,"black","brown"); //删除一项,插入两项 
alert(colors); //red,black,browm,blue 
alert(replaced); //green
Javascript 相关文章推荐
浅谈Javascript 数组与字典
Jan 29 Javascript
简单分析javascript面向对象与原型
May 21 Javascript
JavaScript中的setUTCDate()方法使用详解
Jun 11 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
Javascript 实现计算器时间功能详解及实例(二)
Jan 08 Javascript
JsChart组件使用详解
Mar 04 Javascript
vue脚手架搭建过程图解
Jun 06 Javascript
vue组件命名和props命名代码详解
Sep 01 Javascript
浅谈Webpack4 Tree Shaking 终极优化指南
Nov 18 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
如何在JS文件中获取Vue组件
Sep 16 Javascript
原生js实现滑块区间组件
Jan 20 Javascript
javascript学习笔记(四) Number 数字类型
Jun 19 #Javascript
javascript学习笔记(三) String 字符串类型介绍
Jun 19 #Javascript
javascript学习笔记(二) js一些基本概念
Jun 18 #Javascript
javascript学习笔记(一) 在html中使用javascript
Jun 18 #Javascript
到处都是jQuery选择器的年代 不了解它们的性能,行吗
Jun 18 #Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 #Javascript
jquery不会自动回收xmlHttpRequest对象 导致了内存溢出
Jun 18 #Javascript
You might like
2.PHP入门
2006/10/09 PHP
按上下级层次关系输出内容的PHP代码
2010/07/17 PHP
两种php实现图片上传的方法
2016/01/22 PHP
php通过会话控制实现身份验证实例
2016/10/18 PHP
Node.js的Koa框架上手及MySQL操作指南
2016/06/13 Javascript
jQuery编写textarea输入字数限制代码
2017/03/23 jQuery
元素全屏的设置与监听实例
2017/11/28 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
Webpack之tree-starking 解析
2018/09/11 Javascript
基于Vue实现图片在指定区域内移动的思路详解
2018/11/11 Javascript
vue+elementUI动态生成面包屑导航教程
2019/11/04 Javascript
JavaScript数组及常见操作方法小结
2019/11/13 Javascript
使用webpack搭建pixi.js开发环境
2020/02/12 Javascript
[14:21]VICI vs EG (BO3)
2018/06/07 DOTA
python清除字符串中间空格的实例讲解
2018/05/11 Python
使用Python AIML搭建聊天机器人的方法示例
2018/07/09 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
解决Pycharm界面的子窗口不见了的问题
2019/01/17 Python
对python读取CT医学图像的实例详解
2019/01/24 Python
python数据类型之间怎么转换技巧分享
2019/08/20 Python
2021年的Python 时间轴和即将推出的功能详解
2020/07/27 Python
Python configparser模块应用过程解析
2020/08/14 Python
Python try except else使用详解
2021/01/12 Python
html5 制作地图当前定位箭头的方法示例
2020/01/10 HTML / CSS
中专生毕业自我鉴定
2013/11/01 职场文书
5.1手机促销活动
2014/01/17 职场文书
自我鉴定 电子商务专业
2014/01/30 职场文书
恐龙的灭绝教学反思
2014/02/12 职场文书
商学院大学生求职的自我评价
2014/03/12 职场文书
妇女工作先进事迹
2014/08/17 职场文书
学院党委班子四风问题自查报告及整改措施
2014/10/25 职场文书
酒店辞职书怎么写
2015/02/26 职场文书
房租涨价通知
2015/04/23 职场文书
男生贾里读书笔记
2015/06/30 职场文书
初任公务员培训心得体会
2016/01/08 职场文书
2022新作动画《福星小子》释出宣传影片 加入内田真礼&宫野真守配音演出
2022/04/08 日漫