5.2 Array类型

第2最常用类型。

特点:

  1. 数据的有序列表
  2. 数据的每一项可以保存任何类型的数据
  3. 数组的大小可以动态调整、自动增长

创建方法:

  1. 构造函数
var colors = new Array();

new 可省略

var colors = new Array(20);
var colors = Array(20);
var colors = new Array("red", "blue", "green");
var colors = Array("red", "blue", "green");
  1. 数组字面量表示法
var colors = ["red", "blue", "green"];   //创建包含3个字符串的数组
var names = [];                          //创建空数组

在使用数组字面量表示法时,不会调用Array构造函数。(Firefox3.0及更早版本除外)

注意:

  1. 数组索引从0开始,最后一项的索引是length-1
  2. 数组的length属性——不是只读的。so,可以通过设置length的值进行数组的除项&增项

检测数组

  1. instanceof 操作符
if (value instanceof Array) {
    //对数组的操作
}

问题:假定了单一的全局执行环境。

  1. Array.isArray() 方法
    不管数组是在哪个全局执行环境中创建的,确定某个值是否是数组。
if (Array.isArray(value) {
    //对数组的操作
}

转换方法

转换方法 说明
toString() 返回由数组中每个值的字符串形式拼接而成的一个逗号分隔的字符串。
valueOf() (返回值同上) 实际上会调用数组每一项的toString() 方法
toLocaleString() 经常也会返回与toString() 和 valueOf()的方法的值。但是,若数组每一项有toLocaleString() 的方法,将会返回toLocaleString() 的值。
var colors = ["red", "blue", "green"];
alert(colors.toString());             //输出: red,blue,green
alert(colors.valueOf());              //输出:red,blue,green
alert(colors);                        //输出:red,blue,green

toLocaleString()返回的值与toString() 和 valueOf()的方法的值不同的例子:

var person1 = {
    toLocaleString:function() {
        return "张";
    },
    toString:function() {
        return "三";
    }
};

var person2 = {
    toLocaleString:function() {
        return "李";
    },
    toString:function() {
        return "四";
    }
};

var people = [person1, person2];
alert(people);                                     //输出:三,四
alert(people.toString());                          //输出:三,四
alert(people.toLocaleString());                    //输出:张,李

用join() 方法可以替换输出的连接符:

alert(colors.join("||")                        //输出: red||blue||green

栈方法

数组表现的跟栈(LIFO,后进先出)一样。
ECMAScript为数组专门提供了push() 和pop() 方法,以便实现类似栈的行为。

var colors() = ["red", "blue"];
colors.push("brown");
colors[3] = "black";
alert(colors.length);           //4

var item = colors.pop();
alert(item);                    // black

队列方法

数组表现的跟队列(FOFO,先进先出)一样。
push() 和 shift() 实现类似队列的行为。

var colors = new Array();
var count = colors.push("red", "green");
alert(count);                          //2       数组:red, green

count = colors.push("black");
alert(count);                         //3       数组:red, green,black

var item = colors.shift();
alert(item);                           //"red"
alert(colors.length);                  //2       数组:green,black

总结:实现组数像栈和队列一样的方法

方法名 说明
push() 在数组的末尾添加任意个项,并返回修改后数组的长度
pop() 在数组的末尾移除 最后一个项,并返回修改后数组的长度
unshift() 在数组的前端添加任意个项,并返回修改后数组的长度
pop() 在数组的前端移除 第一个项,并返回修改后数组的长度

重排列方法

方法名 说明
reverse() 直接反转数组项的顺序,并返回数组
sort() 按升序排列数组项:小→大;
调用每个数组项的toString()转型方法,比较得到的字符串,以确定排序;
返回排序后的数组。
var values = [5,6,7,1,2,3];
values.reverse();
alert(values);                           //3,2,1,7,6,5

var values2 = [5,6,7,1,2,3];
values2.sort();
alert(values2);                          //1,2,3,5,6,7

values2.reverse();
alert(values2);                          //7,6,5,3,2,1

// but!!!!!!!!!!!!!!!!!!
var values3 = [0,1,5,10,15];
values3.sort();
alert(values3);                          //0,1,10,15,5         10位于5前,不正确
// so ↓
function compare(value1,value2) {
    if (value1<value2) {
        return -1;
    } else if(value1>value2){
        return 1;
    } else {
        return 0;
    }
}

//或者
//function compare(value1,value2) {
//    return value2-value1;
//}  数值类型的数组,升序

var values4 = [0,1,5,10,15];
values4.sort(compare);
alert(values4);                          //0,1,5,10,15

操作方法

方法名 说明
concat() 将传递进来的各个数组 或值添加到结果数组中,组成一个数组
slice() 可接受1或2个参数,表示要返回数组的起始和结束位置。slice()不会影响原数组
splice() 主要用途:向数组的中部插入项:删、插、替换
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
var colors = ["red",",green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2);                      //green,blue,yellow,purple
alert(colors3);                      //green,blue,yellow
var colors = ["red",",green","blue"];

 //参数 → (要删除的第一项的位置,要删除的数目)
var removed = colors.splice(0,1);          //删除第1项
alert(colors);                             //green,blue
alert(removed);                            //red,返回的数组只包含1项

//参数 → (起始位置,0即要删除的项数,要插入的项)
var removed = colors.splice(1,0,"yellow","orange");          //删除第1项
alert(colors);                             //green,yellow,orange,blue
alert(removed);                            //返回的1个空数组

//参数 → (起始位置,要删除的项数,要插入的任意数量的项)  插入的项数不必=删除的项数
var removed = colors.splice(1,1,"red","purple");          //删除第1项
alert(colors);                             //green,red,purple,orange,blue
alert(removed);                            //yellow,返回的数组只包含1项

位置方法

方法名 说明
indexOf() 从头到后严格查找(===),没找到返回-1
lastIndexOf() 从尾到头严格查找(===),没找到返回-1

indexOf()、lastIndexOf() 可有且最多有两个参数:
eg:

indexOf(searchvalue,fromindex)

searchvalue:需检索的字符串值。必要。
fromindex:在字符串中开始检索的位置,默认为0。可选。

var number = [1,2,3,4,5,4,3,2,1];
alert(number,index(4));                       //3
alert(number,lastIndex(4));                   //5
var person = {name:"lc"};
var people = [ {name:"lc"} ];

var morePeople = [person];

alert(people.indexOf(person));              //-1
alert(morePeople.indexOf(person));          //0

迭代方法

不会修改数组中包含的值.

方法名 说明
every() 对数组中的每一项运行给定函数,若该函数对每一项都返回True,则返回True;
filter() 对数组中的每一项运行给定函数,若该函数返回True,则返回True;
forEach() 对数组中的每一项运行给定函数。返回值。
map() 对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组
some() 对数组中的每一项运行给定函数,若该函数对任一项都返回True,则返回True;
var numbers = [1,2,3,4,5,4,3,2,1];

var everyResult = numbers.every(function(item, index, array) {
    return (item>2);
})
alert(everyResult);                                          //False

var someResult = numbers.every(function(item, index, array) {
    return (item>2);
})
alert(someResult);                                           //True

var filterResult = numbers.every(function(item, index, array) {
    return (item>2);
})
alert(filterResult);                                          //[3,4,5,4,3]

var mapResult = numbers.every(function(item, index, array) {
    return (item*2);
})
alert(mapResult);                                             //[2,4,6,8,10,8,6,4,2]

 numbers.forEach(function(item, index, array) {
    //执行某些操作
})

缩小方法

方法名 说明
reduce() 迭代数组的所有项构建一个最终返回的值。方向:头→尾
reduceRight() 迭代数组的所有项构建一个最终返回的值。方向:尾→头
var values = [1,2,3,4,5];
var result = values.reduce(function(prev, cur, index, array) {
    return prev - cur;
});
alert(result);    // 1-2-3-4-5 = -13

var result2 = values.reduceRight(function(prev, cur, index, array) {
    return prev - cur;
});
alert(result2);  //5-4-3-2-1 = -5
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,530评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 86,403评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,120评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,770评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,758评论 5 367
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,649评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,021评论 3 398
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,675评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,931评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,751评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,410评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,004评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,969评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,042评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,493评论 2 343

推荐阅读更多精彩内容

  • Array简介 创建Array的方式 使用构造器创建var colors = new Array();var co...
    程序员大狗阅读 218评论 0 0
  • 第5章 引用类型(返回首页) 本章内容 使用对象 创建并操作数组 理解基本的JavaScript类型 使用基本类型...
    大学一百阅读 3,205评论 0 4
  • Chapter 5 引用类型 Object类型 创建Object实例new Object()var person ...
    云之外阅读 389评论 0 0
  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,638评论 0 6
  • 有部老电影叫心慌方《Cube》(特指第一部),讲了一个神奇的项目——不断变化的模仿陷阱监狱。而这个没有幕后黑手的项...
    alucardzhou阅读 124评论 0 2