JavaScript Array API

1. 创建数组
ECMAScript 的数组不像其他语言的数组,比如java,C,它的同一个数组中可以包含多种类型的数据,数值,和字符串可以在同一数组红。它创建数组的方式有两种,一种是使用Array的构造函数;

var arr = new Array();   //创建一个空数组
var arr1 = new Array(20); //创建一个长度为20的数组
var arr2 = new Array("red","green","blue"); //包含3个成员的数组

另一种方式是不用 new 关键字

var arr = Array(3); //长度为3 的数组
var arr1 = Array("blue","red");

或者

var arr = ["red","blue"];
var arr1 = [];
var arr2 = [1,2,];  //建议不要这样做,包含了 2项,或者 3项的数组
var arr3 = [,,];  //建议不要这样做,包含了2项或者3项的数组

2. 检测数组
在ECMAScript 3 中规定的某个对象是不是数组使用 instanceof 判断,对于一个网页,或者一个全局作用而言,instanceof 可以判断。

if(array instanceof Array){
    // 对数组的操作
}

但网页如果包含多个框架,就存在多个全局环境,从而存在不同版本的Array 构造函数,instanceof 就不行了。
所以 ECNAScript 5 新增了 Array.isArray();方法

if(Array.isArray(arr)){
    //对数组的操作
}

3.转换方法
toLocaleString(),toString(),valueOf()方法。
数组的 toString();方法返回数组的每一个成员,并用逗号分隔,toLocaleString()方法,也返回同样的结果,但区别在于toLocaleString();方法调用了数组每一项的 toLocaleString()方法,而toString() 不是。

var per1 = {
    toLocaleString:function(){
        return "1";
    },
    toString:function(){
        return "2";
    }
}
var per2 = {
    toLocaleString:function(){
        return "3";
    },
    toString : function(){
        return "4";
    }
}

var per = [per1,per2];
alert(per); // 2,4
alert(per.toString()); // 2,4
alert(per.toLocaleString()); //1,3

4.栈方法
ECMAScript 数组提供了类似于其他数据结构的方法,比如栈,栈是一种(后进先出 last in first out)的数据结构;ECMAScript提供了push()和pop()方法,来实现栈的行为。

var arr = ['1','2'];
var count = arr.push('0');
alert(count); // 3

var item = arr.pop();
alert(item); // 0

可以看出push() 返回的是新数组的长度,而pop() 返回的是删除的元素。

5.队列方法
队列的数据结构是(先进后出 first in first out),ECMAScript 提供了shift()方法,它能够移出数组的第一项,并返回该元素,数组的长度减1,

var arr = new Array();
var count  = arr.push('red','blue');
alert(count); //2

count = arr.push('black');
alert(count); // 3

var item = arr.shift();
alert(item); // red
alert(arr.length); // 2

还有一个 unshift()方法,与shift() 方法相反,是在数组的前端插入元素,因此,push() 与 shift() ,unshift() 与 pop() 是两对正好相反的方法。

var arr = new Array('red','blue');
var count = arr.unshift('black');
alert(arr); // black,red,blue
alert(count); // 3 

var item = arr.pop();
alert(item); //blue
alert(arr.length); //2

6. 重排序方法
reverse() 和 sort() 方法,reverse() 是反转数组

var arr = [1,2,3,4,5];
arr.reverse();
alert(arr); // 5,4,3,2,1

默认情况 sort() 是按升序排列,即从小到大排列,sort() 方法会调用数组每一项的toString() 方法,然后比较得到的字符串。

var arr = [1,2,15,10,5];
arr.sort();
alert(arr); // 1,2,10,15,5

这显然不是我们想要的结果,我们想让其按照数字的顺序排序,我们可以给sort() 方法传一个函数。

function numSort(value1 , value2){
    if(value1 < value2){
        return -1;
    } else if(value1 > value2){
        return 1;
    } else {
        return 0;
    }   
}
var arr = [1,2,15,10,5];
arr.sort(numSort);
alert(arr); // 1,2,5,10,15

如果想要让其倒序排列,我们可以这样

function numSort(value1,value2){
    if(value1 < value2){
        return 1;
    } else if(value1 > value2){
        return -1;
    } else {
        return 0;
    }   
}
var arr = [1,2,15,10,5];
arr.sort(numSort);
alert(arr); // 15,10,5,2,1

或者可以用reverse()反转即可。我们还可以重构 numSort()函数。

function numSort(value1,value2){
    return value2 - value1;
}

7.操作方法
ECMAScript 提供了 concat();方法,当不传参数时,该方法只是复制当前数组,当传递参数时,该方法将参数添加至数组的末尾,返回新数组。

var colors = ['red','blue'];
var coloes2 = colors.concat('green',['black','yellow']);
alert(colors); // red,blue
alert(color2); //red,blue,green,black,yellow

另一个方法slice(); 该方法可以传递一个或两个参数,传一个参数时,返回指定位置到当前数组的末尾所有项组成的新数组,当传递两个参数时,返回从起始位置到结束位置之间的所有项,和其他语言类似,返回结果中包含起始位置的项,不包含结束位置的项,组成的新数组。注意该方法对原数组没有影响。

var colors = ['red','blue','yellow','green','black','purple'];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);

alert(colors2); //blue,yellow,green,black,purple
alert(colors3); //blue,yellow,green

还有一个方法 splice(),这个方法非常强大,可以对数组进行插入,删除,替换等操作。

var colors = ['red','blue','yellow'];
var colors1 = colors.splice(0,1); // 删除第一项,返回删除元素组成的数组
alert(colors); // blue,yellow
alert(colors1); // red

var colors2 = colors.splice(1,0,'green','black'); //从位置1开始插入两项,返回一个空数组
alert(colors); //blue, green, black, yellow

var colors3 = colors.splice(1,1,'red','purple'); //从位置1开始,插入两项,删除一项
alert(colors); //blue,red,purple,black,yellow
alert(colors3); // green

8.位置方法
ECMAScript 5 为数组添加了两个方法 indexOf() 和 lastIndexOf();这两个方法都可接受两个参数,要查找的项,和表示查找起点位置的索引,其中,indexOf() 是从头开始往后查的,而lastIndexOf() 是从末尾开始向前查的。

var numbers = [1,2,3,4,5,4,7,8,9];
alert(numbers.indexOf(4)); // 3 索引为 3 的4
alert(numbers.lastIndexOf(4)); // 5 索引为 5 的4

alert(numbers.indexOf(4,4)); //5 从位置4开始查找4的索引
alert(numbers.lastIndexOf(4,4));//3

9.迭代方法
ECNMAScript 5 为数组定义了 5 个迭代方法,分别是:
every() :对数组中的每一项运行给定函数,如果该函数对每一项都返回 true,则 返回 true。
filter():对数组的每一项运行给定函数,返回该函数返回 true 的项组成的数组。
forEach():对数组每一项运行给定函数,该方法没有返回值。
map() :对数组每一项运行给定函数,返回该函数返回结果组成的数组。
some():对数组的每一项运行给定函数,如果该函数对任一项返回 true,则返回 true。
还有一种 for … in … 的循环方式迭代数组,
在 ECNAScript 6 (ECNAScript 2015)又添加了一个 for … of … 的循环,它的功能非常强大,这个在往后的博客中给大家介绍。

var num = [1,2,3,4,3,2,5,7];
var everyResult = num.every(function(item,index,array){
    return (item > 2);
});
alert(everyResult); //false

var someResult = num.some(function(item,index,array){
    return (item > 2);
});
alert(someResult); // true

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

var mapResult = num.map(function(item,index,array){
    return (item * 2);
});
// f(x) = x * x;  x 的平方
function pow(x) {
    return x * x;
}
var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
var mapResult = arr.map(pow);
alert(mapResult); // [1, 4, 9, 16, 25, 36, 49, 64, 81]

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
arr.map(String); // ['1', '2', '3', '4', '5', '6', '7', '8', '9']

var forEachResult = num.forEach(function(item,index,array){
    // do something;
});

// Array的reduce()方法
// [x1, x2, x3, x4].reduce(f) = f(f(f(x1, x2), x3), x4)
var arr = [1, 3, 5, 7, 9];
arr.reduce(function (x, y) {
    return x + y;
}); // 25

10.缩小方法
ECMAScript 5 为数组提供了两个缩小方法 reduce() 和 rightReduce();这两个方法都会迭代数组的每一项,然后重构一个最终返回值。reduce() 是从头往后迭代,而 rightReduce() 是从后往前迭代,他们的区别仅此而已

var num = [1,2,3,4,5];
var sum = num.reduce(function(prev,cur,index,array){
    return prev + cur;
});
alert(sum); // 15

var sum1 = num.rightReduce(function(prev,cur,index,array){
    return prev + cur;
});
alert(sum1); // 15

join
join()方法是一个非常实用的方法,它把当前Array的每个元素都用指定的字符串连接起来,然后返回连接后的字符串:

var arr = ['A', 'B', 'C', 1, 2, 3];
arr.join('-'); // 'A-B-C-1-2-3'

如果Array的元素不是字符串,将自动转换为字符串后再连接。

多维数组
如果数组的某个元素又是一个Array,则可以形成多维数组,例如:

var arr = [[1, 2, 3], [400, 500, 600], '-'];
alert(arr[1][1]); //500

补充清空数组的方法

var a=[123,234,345,456];
a.splice(0); //清空了
a.length=0; //清空了
  • 3
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值