美文网首页
5.2 Array类型

5.2 Array类型

作者: AbbyLC | 来源:发表于2017-07-23 17:10 被阅读0次

第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

相关文章

  • 5.2 Array类型

    第2最常用类型。 特点: 数据的有序列表 数据的每一项可以保存任何类型的数据 数组的大小可以动态调整、自动增长 创...

  • 5.2 Array类型

    Array简介 创建Array的方式 使用构造器创建var colors = new Array();var co...

  • JavaScript高级程序设计(第三版)5章

    Menu 第5章 引用类型5.1 Object类型5.2 Array类型5.4 RegExp 类型5.4.2 Re...

  • Array类型

    数组的每一项可以保存任何类型的数据;数组的大小是可以动态调整的; 创建数组的基本方式有两种。 tip:在使用 Ar...

  • Array类型

  • Array类型

    ECMAScript中的数组与其他多数语言的数组有很大的区别。1、ECMAScript数组的每一项可以保存任何类型...

  • php版本进化

    以下只是简单记录:PHP5.2 以前:autoload, PDO 和 MySQLi, 类型约束PHP5.2:JSO...

  • JavaScript引用类型——Array类型

    Array类型 除了Object之外,Array类型恐怕是ECMAScript中最常用的类型了。ECMAScrip...

  • 8.集合类型(CollectionType)

    kotlin_集合类型 Array_数组 Set Map swift_集合类型 Array_数组

  • 系统学习 JavaScript 的笔记【7】

    引用类型 引用类型分为 object 类型 Array 类型,我个人觉得 Array 的重点能多一些,因此我主要总...

网友评论

      本文标题:5.2 Array类型

      本文链接:https://www.haomeiwen.com/subject/wdbpkxtx.html