JavaScript进阶：数组常用方法

前言

为了加深对数组多个方法的理解，再此对数组常用方法进行总结。

转换方法

分别是：toLocaleString()、toString()、valueOf()。
定义：这里直接看看W3Cschool的定义，简单理解一下

1、toLocaleString()、toString()有什么区别？
看我写的两段代码：
代码1：
var arr = [1,2,3];
console.log(arr.toLocaleString());
console.log(arr.toString());

结果没有区别。
其实不仅仅是数字数组，包括数字值、字符串数组两个方法输出都是一样的。

再看代码2：
var arr = new Date();
arr.getTime();
console.log(arr.toLocaleString());
console.log(arr.toString());

区别显而易见。
2、valueOf()介绍
这里介绍valueOf()方法。如果存在任意原始值，它就默认将对象转换为表示它的原始值；对象是复合值，而大多数对象无法真正表示为一个原始值，因此默认的valueOf()方法简单地返回对象本身，而不是返回一个原始值。
那什么是原始值？
原始值是表示Javascript中可用的数据或信息的最底层形式或最简单形式。原始类型的值被称为原始值，是因为它们是不可细化的。也就是说，数字是数字，字符是字符，布尔值则是true或false，null和undefined就是null和undefined。这些值本身很简单，不能表示由其他值组成的值。
看一段代码：
代码1：
var a = 111;
var b = true;
var c = “apple”;
var d = null;
var e = undefined;
console.log(a.valueOf());
console.log(b.valueOf());
console.log(c.valueOf());
console.log(d.valueOf());
console.log(e.valueOf());
结果：

数值类型、字符串类型、布尔类型都可以，但undefined和null是不可以的。

再看一段代码：
代码2：
document.writeln( foo.valueOf() === foo ); // true
var foo2 = new Function(“x”, “y”, “return x + y;”);
document.writeln( foo2.valueOf() === foo2 ); // true

// Object：返回对象本身
var obj = {name: “张三”, age: 18};
document.writeln( obj.valueOf() === obj ); // true

// String：返回字符串值
var str = “http://www.365mini.com“;
document.writeln( str.valueOf() === str ); // true
// new一个字符串对象
var str2 = new String(“http://www.365mini.com“);
// 两者的值相等，但不全等，因为类型不同，前者为string类型，后者为object类型
document.writeln( str2.valueOf() === str2 ); // false
}
结果：

valueOf相对来说比较简单，理解比较容易。

3、join()方法
join() 方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分 隔符进行分隔的。返回一个字符串。
看例子：
var arr = [1,2,3];
console.log(arr.join(‘|’));
console.log(arr.join(‘a’));
console.log(arr.join(‘5’));
console.log(arr.join(‘abc’));
结果：

join()方法的参数须为字符串，字符串的内容可任意。
栈方法
这里介绍后进先出的两个方法：ArrayObj.push()方法和ArrayObj.pop()方法

（1）ArrayObj.push()：就是向数组末尾添加新的元素，返回的是数组新的长度。
（2）ArrayObj.pop()：就是向数组中删除数组最后一个元素并且返回该元素。如 果数组为空就返回undefined。
看一段代码：
var arr = [1,2,3];
console.log(arr.push(1)); //返回元素个数4
console.log(arr.pop()); //返回出栈的元素1
结果：

队列方法

介绍两个先进后出的方法：ArrayObj.shift()和ArrayObj.unshift()
ArrayObj.shift():方法用于把数组中的第一个元素删除，并返回第一个元素的值。如果数组是空的，则shift() 方法不进行任何操作，返回undefined。请注意，该方法不创建新数组，而是直接修改原来的数组。该方法会改变数组的长度。
ArrayObj.unshift() ：该方法可把它的参数添加到数组的头部。它直接修改了数组，而不是创建一个新的数组。返回的是新数组的长度。
var arr = [1,2,3];
console.log(arr.shift()); //删除第一个元素
console.log(arr); //[2,3]
console.log(arr.unshift(5));
console.log(arr); //[5,2,3]
结果：

重排序方法

常用的重排序方法有：reverse()和sort()
1、reverse()方法反转数组的顺序；
代码：
var arr = [1,2,3,12];
arr.reverse();
console.log(arr);
结果：

2、（1）sort()方法为将数组按从小到大的顺序排列，因为在排序前，该方法会调用toString()方法，将数组内元素转换为字符串，所以会出现“12”在“2”前面的情况，因为比对的是两元素的第一个数字。
看一个例子：
var arr = [1,2,3,12];
arr.sort();
console.log(arr);
结果：

（2）这种排序方式在很多情况下都不是最佳方案。因此sort()方法可以接受一个比较函数作为参数，以便我们指定那个值位于那个值的前面。
看一段代码：
var arr = [1,2,3,12];
arr.sort(cmp);
console.log(arr);

    function cmp (value1, value2) {
        if(value1 < value2){
            return -1;
        }
        else if(value1 > value2){
            return 1;
        }
        else {
            return 0;
        }
    }

结果：

操作方法

concat()、slice()和splice()方法：
（1）concat(array)方法用于连接两个或多个数组。
代码：
var arr1 = [1,2,3];
var arr2 = [4,5,6];
console.log(arr1.concat(arr2));
结果：

（2）slice(start,end)方法：
start 必需。规定从何处开始选取。如果是负数，那么它规定从数组尾部开始算起的位置。也就是说，-1 指最后一个元素，-2 指倒数第二个元素，以此类推。
end 可选。规定从何处结束选取。该参数是数组片断结束处的数组下标。如果没有指定该参数，那么切分的数组包含从 start 到数组结束的所有元素。如果这个参数是负数，那么它规定的是从数组尾部开始算起的元素。
返回值：返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
代码：
var arr1 = [1,2,3,4,5,6];
var arr2 = arr1.slice(1,5);
console.log(arr2); //[2,3,4,5]

（3）splice（）

有删除，插入，替换的功能
删除:
需要两个参数，要删除的第一项的位置和要删除的项数。
var colors = [“red”, “green”, “blue”];
var removed = colors.splice(0,1);
console.log(colors); // greeen, blue
console.log(removed); // red
插入
需要三个参数：起始位置、0（要删除的项数）和要插入的项
var colors = [“red”, “green”, “blue”];
var removed = colors.splice(1,0,”yellow”, “orange”);
console.log(colors); // [“red”, “yellow”, “orange”, “green”, “blue”]
console.log(removed); // 返回空
替换
需要三个参数：起始位置、要删除的项数和要插入的任意数量的项。
var colors = [“red”, “green”, “blue”];var removed = colors.splice(1,1,”yellow”, “orange”);
console.log(colors); // [“red”, “yellow”, “orange”, “blue”]
console.log(removed); // [“green”]