Array的方法

最新推荐文章于 2022-11-23 13:15:04 发布

Ling201509

最新推荐文章于 2022-11-23 13:15:04 发布

阅读量1.4k

点赞数

分类专栏： javascript 文章标签：对象 JavaScript 数组

本文链接：https://blog.csdn.net/Ling201509/article/details/50625499

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、转换方法

——此方法不会对原数组产生影响。所有对象都有toLocaleString()、toString()、valueOf()方法。

toString(); 返回以逗号拼接的字符串。
toLocaleString(); 返回本地格式的字符串。
valueOf(); 返回的还是数组。
join(); 返回按传入符号分割的字符串。

1、toString()和valueOf()

var arr1 = ["hi", "hello"];
console.log(arr1.toString()); //返回hi,hello
console.log(typeof arr1.toString()); //返回string

console.log(arr1.valueOf()); //返回原数组
console.log(typeof arr1.valueOf()); //返回object

2、toLocaleString()

oLocaleString()方法经常返回和toString()、valueOf()方法一样的值。不同的是：不会被默认调用；日期有一定的影响。

var arr1 = ["hi", "hello", new Date()];

document.write(arr1.toString());

document.write(arr1.valueOf());

document.write(arr1.toLocaleString());
//返回结果如下：
hi,hello,Sat Nov 28 2015 23:42:12 GMT+0800 (中国标准时间)
hi,hello,Sat Nov 28 2015 23:42:12 GMT+0800 (中国标准时间)
hi,hello,2015/11/28 下午11:42:12 —— 本地格式区域字符串

其中，toLocaleString()获取的是本地电脑上的时间

3、join()

接受一个参数（分割符），传入null或undefined时一空格分割。默认使用逗号分隔。

    var arr1 = ["hi", "hello", new Date()];

    document.write(arr1.join("/"));
    //返回hi/hello/Sat Nov 28 2015 23:52:47 GMT+0800 (中国标准时间)
    document.write(typeof arr1.join("/")); //返回string

    document.write(arr1);
    //返回hi,hello,Sat Nov 28 2015 23:52:47 GMT+0800 (中国标准时间)

二、栈方法

ECMAScript数组也提供了一种让数组的行为类似于其他数据结构的方法。具体来说，数组可以表现的像栈一样，后者是一种可以限制插入和删除项的数据结构。
栈是一种LIFO（Last-In-First-Out先进后出）的数据结构，也就是最新添加的像最早被移除。而栈中项的插入（叫做推入）和移除（叫做弹出），只发生在一个位置——栈的顶部。ECMScript为数组专门提供了push()和pop()方法，以便实现类似栈的行为。

push()；可以接收任意数量的参数，把它们逐个添加到数组末尾，并返回修改后的数组的长度。
pop()；从数组末尾移除最后一项，减少数组的length值，然后返回移除的项。

1、push()

    -----例：-----
    var arr = ["red"];
    var arr1 = ["blue", "yellow"];

    console.log(arr.push("blue", "yellow")); //3
    console.log(arr); //["red", "blue", "yellow"]

    console.log(arr.push(arr1)); //2
    console.log(arr); //["red", Array[2]]

push()插入数组时，该数组被当做一个元素插入，因此不管该数组中有多少了元素都只占一个长度。

2、pop()

-----例：-----
var arr = ["haha", "hehe"];

console.log(arr.pop()); //hehe
console.log(arr.length); //1

三、队列方法

栈数据结构的访问规则时LIFO（先进后出），而队列数据结构的访问规则是FIFO（First-In-First-Out先进先出）。队列在列表的末端添加项，从列表的前端移除项。实现这一操作的素组方法是unshift()和shift()。

unshift()；在数组前端添加任意个项并返回新数组的长度。 ——【IE7-unshift()方法总是返回undefined而不是新数组的长度】
shift()；移除数组中的第一个项并返回该项。

1、unshift()

    -----例：-----
    var arr = ["red"];
    var arr1 = ["blue", "yellow"];

    console.log(arr.unshift("blue", "yellow")); //3
    console.log(arr); //["blue", "yellow", "red"]

    console.log(arr.unshift(arr1)); //2
    console.log(arr); //[Array[2], "red"]

unshift()方法同push()方法一样，插入数组时，该数组被当做一个元素插入，因此不管该数组中有多少了元素都只占一个长度。

2、shift()

-----例：-----
var arr = ["haha", "hehe"];

console.log(arr.shift()); //haha
console.log(arr.length); //1

四、排序方法

reverse()；反转数组项的顺序。（reverse反向）
sort()；按升序/降序排列数组项，返回排序后的数组。
冒泡算法

1、revers()

    -----例：-----
    var arr = ["red", "blue", "yellow"];

    document.write(arr.reverse()); //yellow,blue,red

    document.write("<br />");
    document.write(arr); //yellow,blue,red

2、sort()

为了实现排序，sort()方法会调用每个数组项的toString()转型方法，然后比较的到的字符串，以确定如何排序。即使数组中的每一项都是数值，sort()方法比较的也是字符串。

    -----例：-----
    var arr = [0, 1, 5, 10, 15];
    console.log(arr.sort());
    console.log(arr); 
    //都返回： [0, 1, 10, 15, 5]

此处比较的是数值字符串(即比较字符串对应的字符编码值)。

因为sort()方法在很多情况下不是最佳方案，因此sort()方法可以接收一个比较函数作为参数，以便我们指定哪个值位于哪个值的前面。

如果为 sortfunction 参数提供了一个函数，那么该函数必须返回下列值之一：

负值，如果所传递的第一个参数比第二个参数小。

零，如果两个参数相等。

正值，如果第一个参数比第二个参数大。

升序：

-----例：-----
function compare(value1, value2) {
    if(value1 < value2) { //如果第一个参数比第二个参数大
        return -1;
    } else if(value1 > value2) {
        return 1;
    } else {
        return 0;
    }
}

var arr = [0, 1, 5, 10, 15];
console.log(arr.sort(compare));
console.log(arr); 
//都返回： [0, 1, 5, 10, 15]

反序（只需将返回值正负更换一下就可以了）——如果要反序用revers()方法更加方便：

-----例：-----
function compare(value1, value2) {
    if(value1 < value2) { //如果第一个参数比第二个参数大
        return 1;
    } else if(value1 > value2) {
        return -1;
    } else {
        return 0;
    }
}

var arr = [0, 1, 5, 10, 15];
console.log(arr.sort(compare)); 
console.log(arr);
//都返回： [15, 10, 5, 1, 0]

排序——冒泡算法

-----例：-----
var arr = [0, 1, 5, 10, 15];
for(var i = 0; i < arr.length - 1; i++) {
    for(var j = i + 1; j < arr.length; j++) {
        if(arr[i] < arr[j]) {
            var a = arr[i];  //定义一个中间变量
            arr[i] = arr[j];
            arr[j] = a;
        }
    }
}
console.log(arr); //[15, 10, 5, 1, 0]
/*---------数组元素按从大到小排序---此方法为冒泡排序---------------------------*/

五、操作方法

concat()；复制原数组，将其与传入参数/数组合并并返回合并后的新数组。 ——【并不会对原数组产生影响】
slice(startINDEX, endINDEX)；返回截取原数组中的项。 ——【并不会对原数组产生影响】
splice()；返回被删除的元素。有三种功能：删除、插入、替换。主要用途是向数组的中部插入项。

1、concat()

在没有传递参数的情况下，它只是复制当前数组并返回副本;

如果传递的参数是一个或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中;

如果传递的值不是数组，这些值就会被简单的添加到结果数组的末尾。——有先后顺序

-----例：-----
var arr = ["red", "yellow"];

console.log(arr.concat("blue"));
console.log(arr);
//返回结果如下： 
["red", "yellow", "blue", "gray", "123"]
["red", "yellow"]


console.log(arr.concat(["blue", "gray"], ["123"]));
console.log(arr);
//返回结果如下： 
["red", "yellow", "blue"]
["red", "yellow"]

2、slice()

如果只用一个参数，则返回从该参数指定位置开始到当前数组末尾的所有的项；

如果有两个数组，则返回起始位置和结束位置之间的项——但不包含结束位置的项。

-----例：-----
var arr = ["red", "yellow", "blue", "gray", "back"];

console.log(arr.slice(1));
console.log(arr.slice(1, 3));
console.log(arr);
//返回结果如下：
["yellow", "blue", "gray", "back"]
["yellow", "blue"]
["red", "yellow", "blue", "gray", "back"]

如果传递的参数中有一个是负数，则用数组长度加上该数来确定相应的位置（反向取得该索引位置的项）。

-----例：-----
var arr = ["red", "yellow", "blue", "gray", "back"];

console.log(arr.slice(-3, -1));  
//等价于console.log(arr.slice(2, 4));
console.log(arr);
//返回结果如下：
["blue", "gray"]
["red", "yellow", "blue", "gray", "back"]

如果传递的参数，结束位置小于起始位置，则返回空数组。

3、splice()

接收三个参数：

1、起始位置；
2、删除个数；

3、插入/替换元素或数组。

插入的元素索引值为splice方法的第一个参数对应的索引位置。

-----例：-----
var arr = ["red", "yellow", "blue", "gray", "back"];
console.log(arr.splice(3, 0,"hhhhhhhhhhhhhhhh"));  //插入的元素的索引为3
console.log(arr);
//返回结果如下：
[]
["red", "yellow", "blue", "hhhhhhhhhhhhhhhh", "gray", "back"]

六、索引位置方法

indexOf(item, startIndex)；返回需查找的项第一次出现的索引值；
lastIndexOf(item, startIndex)；返回需查找的项最后一次出现的索引值；

都接受两个参数：要查找的项和（可选的）表示查找七点位置的索引。当没有找到所匹配的项时，返回值为-1。
```
例：
var arr = [1, 2, 3, 1, 4, 5];
console.log(arr.indexOf(1)); //0
console.log(arr.lastIndexOf(1)); //3
```
在将需查找的项与数组中的每一项相比较时，会使用全等操作符（===）相比较。也就是说，要求查找的项必须全等。

console.log(arr.indexOf(“1”)); //-1

七、迭代方法

every(fn); 函数fn对每一项都返回true，则返回true；
some(fn); 函数fn对某一项返回true，则返回true；
filter(fn); 返回函数fn返回值为true的所有项组成的数组；
map(fn); 返回每次函数调用的结果组成的数组。
forEach(fn); 对数组中的每一项运行给定函数。此方法没有返回值。

1、every()方法：

    var arr = [1, 2, 3, 1, 4, 5];
    var everyItem1 = arr.every(function(item, index, arr) {
        return (item < 3);
    }); 
    var everyItem2 = arr.every(function(item, index, arr) {
        return (item < 10);
    }); 
    console.log(everyItem1); //false
    console.log(everyItem2); //true
    console.log(arr); //[1, 2, 3, 1, 4, 5]

2、some()方法：

    var arr = [1, 2, 3, 1, 4, 5];
    var someItem1 = arr.some(function(item, index, arr) {
        return (item < 3);
    }); 
    var someItem2 = arr.some(function(item, index, arr) {
        return (item < 10);
    }); 
    console.log(someItem1); //true
    console.log(someItem2); //true
    console.log(arr); //[1, 2, 3, 1, 4, 5]

3、filter()方法：

    var arr = [1, 2, 3, 1, 4, 5];
    var filterItem1 = arr.filter(function(item, index, arr) {
        return (item < 3);
    }); 
    var filterItem2 = arr.filter(function(item, index, arr) {
        return (item < 10);
    }); 
    console.log(filterItem1); //[1, 2, 1]
    console.log(filterItem2); //[1, 2, 3, 1, 4, 5]
    console.log(arr); //[1, 2, 3, 1, 4, 5]

此方法适合查询某些符合条件的所有数组项。

4、map()方法：

    var arr = [1, 2, 3, 1, 4, 5];
    var mapItem1 = arr.map(function(item, index, arr) {
        return (item * 3);
    }); 
    console.log(mapItem1); //[3, 6, 9, 3, 12, 15]
    console.log(arr); //[1, 2, 3, 1, 4, 5]

此方法适合创建包含的项与另一个数组一一对应。

5、forEach()方法：

    var arr = [1, 2, 3, 1, 4, 5];
    var forEachItem1 = arr.forEach(function(item, index, arr) {
        alert(item);
        //执行某些操作
    });

8、归并方法

obj.reduce(callback, startIndex); 从数组第一项开始遍历数组；
obj.reduceRight(callback, startIndex); 从数组最后一项开始遍历数组。

两个方法都会迭代数组中所有的项，然后构建一个最终返回的值。reduce()和reduceRight()最大的区别也是唯一的区别就是遍历数组项的顺序不同。

两个方法都接收两个参数：一个是在每一项上调用的函数，另一个是作为归并基础的起始索引值（为可选参数）。

传入的函数callback接收四个参数：前一个值；当前值；项的索引值，数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。

1、obj.reduce();

var obj = [1, 2, 3, 4, 5];
var sum = obj.reduce(function(prev, next, index, arr) {
    console.log(index);
    return prev + next
});
console.log(sum);
//1
//2
//3
//4
//15

第一次执行回调函数，传入的prev是1，next是2。第二次，prev是3（1+2），next是3（数组的第三项）。

obj.reduceRight(); 顺序相反

var obj = [1, 2, 3, 4, 5];
var sum = obj.reduceRight(function(prev, next, index, arr) {
    console.log(index);
    return prev + next
});
console.log(sum);
//3
//2
//1
//0
//15