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

所属分类: 网络编程 / JavaScript 阅读数: 1186
收藏 0 赞 0 分享
数组的创建
第一种:
复制代码 代码如下:

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
更多精彩内容其他人还在看

Vue组件选项props实例详解

父组件通过 props 向下传递数据给子组件,子组件通过 events 给父组件发送消息。本文将详细介绍Vue组件选项props,需要的朋友可以参考下
收藏 0 赞 0 分享

javascript将url解析为json格式的两种方法

本篇文章主要介绍了javascript将url解析为json格式的两种方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

详解JS数组Reduce()方法详解及高级技巧

reduce 为数组中的每一个元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素。接下来通过本文给大家分享JS数组Reduce()方法详解及高级技巧,一起看看吧
收藏 0 赞 0 分享

JS模拟超市简易收银台小程序代码解析

本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
收藏 0 赞 0 分享

JavaScript 完成注册页面表单校验的实例

下面小编就为大家带来一篇JavaScript 完成注册页面表单校验的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

简单的网页广告特效实例

下面小编就为大家带来一篇简单的网页广告特效实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue内容分发slot(全面解析)

下面小编就为大家带来一篇Vue内容分发slot(全面解析)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Vue自定义事件(详解)

下面小编就为大家带来一篇Vue自定义事件(详解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Mui使用jquery并且使用点击跳转新窗口的实例

下面小编就为大家带来一篇Mui使用jquery并且使用点击跳转新窗口的实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

深入理解ES6的迭代器与生成器

本篇文章主要介绍了深入理解ES6的迭代器与生成器,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享
查看更多