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 相关文章推荐
js可突破windows弹退效果代码
Aug 09 Javascript
jquery提示效果实例分析
Nov 25 Javascript
Angular 页面跳转时传参问题
Aug 01 Javascript
jQuery实现简单的网页换肤效果示例
Sep 18 Javascript
Vue数据驱动模拟实现1
Jan 11 Javascript
Vue.js 2.0窥探之Virtual DOM到底是什么?
Feb 10 Javascript
基于vue2.x的电商图片放大镜插件的使用
Jan 22 Javascript
JS实现常见的查找、排序、去重算法示例
May 21 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
vue实现文件上传读取及下载功能
Nov 17 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
vue项目页面嵌入代码块vue-prism-editor的实现
Oct 30 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
克隆一个新项目的快捷方式
2013/04/10 PHP
PHP版本的选择5.2.17 5.3.27 5.3.28 5.4 5.5兼容性问题分析
2016/04/04 PHP
PHP+MySql+jQuery实现的&quot;顶&quot;和&quot;踩&quot;投票功能
2016/05/21 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
浅谈PHP array_search 和 in_array 函数效率问题
2019/10/15 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
2012/07/21 Javascript
JavaScript禁止页面操作的示例代码
2013/12/17 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
深入剖析JavaScript面向对象编程
2016/07/12 Javascript
对Js OOP编程 创建对象的一些全面理解
2016/07/26 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
AngularJS自定义插件实现网站用户引导功能示例
2016/11/07 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
详解vue-admin和后端(flask)分离结合的例子
2018/02/12 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
让 babel webpack vue 配置文件支持智能提示的方法
2019/06/22 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
2019/11/26 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
javascript实现前端成语点击验证优化
2020/06/24 Javascript
[51:17]Mski vs VGJ.S Supermajor小组赛C组 BO3 第三场 6.3
2018/06/04 DOTA
python 截取 取出一部分的字符串方法
2017/03/01 Python
Python numpy.array()生成相同元素数组的示例
2018/11/12 Python
对pycharm 修改程序运行所需内存详解
2018/12/03 Python
Django 响应数据response的返回源码详解
2019/08/06 Python
html5 postMessage前端跨域并前端监听的方法示例
2018/11/01 HTML / CSS
澳大利亚礼品篮网站:Macarthur Baskets
2019/10/14 全球购物
小学教育毕业生自荐信
2013/11/18 职场文书
十八大闭幕感言
2014/01/22 职场文书
学生会部长竞聘书
2014/03/31 职场文书
农民工工资承诺书大全
2015/05/04 职场文书
小学生班干部竞选稿
2015/11/20 职场文书
Android开发手册TextInputLayout样式使用示例
2022/06/10 Java/Android
Python实现数据的序列化操作详解
2022/07/07 Python