吃透Javascript数组操作的正确姿势—再读《Js高程》

Javascript中关于数组对象的操作方法比较多也比较杂，正好再次捡起《Javascript高级程序设计》来读，把它们一一总结梳理了一下：

方法类别	方法名称	方法描述	参数	返回值	备注
转换方法	toString()	把数组转换为字符串，并返回结果。	无	以逗号分隔的字符串	调用每一项的toString()方法
	valueOf()	返回数组对象的原始值。	无	原数组
	toLocaleString()	把数组转换为字符串，并返回结果。	无	以逗号分隔的字符串	调用每一项的toLocaleString()方法
	join()	用指定的分隔符把数组的所有元素放入一个字符串。	无参数或者一个参数	以指定分隔符分隔的字符串	不传参数时，以逗号分隔
栈和队列方法	push()	向数组的末尾添加一个或更多元素	任意数量参数	返回新的长度	原数组被修改了，长度也变了
	pop()	删除数组的最后一个元素并。	无参数	返回删除的元素	原数组被修改了，长度也变了
	shift()	删除数组的第一个元素并返回删除的元素。	无参数	返回删除的元素	原数组被修改了，长度也变了
	unshift()	向数组的开头添加一个或更多元素。	任意数量参数	返回新的长度。	原数组被修改了，长度也变了
重排序方法	reverse()	反转数组的元素顺序。	无参数	反转后的数组	原数组被修改后返回（再次访问数组变量是反转之后的值）
	sort()	对数组的元素进行排序。	无参数或者一个比较函数做参数	排序后的数组	默认是按升序排列，可通过比较函数做参数决定排序规则。同样原数组被修改后返回
操作方法	concat()	连接两个或更多的数组，并返回结果	任意数量参数，如果参数是数组，会拆分数组的每一项添加到结果数组数组	返回连接后的新数组	concat()方法不会修改原数组，而是先创建当前数组的副本，在副本上进行连接，而原数组在操作前后并不会发生变化
	slice()	选取数组的的一部分，并返回一个新数组。	零到两个参数	返回新创建的数组	slice()方法不会修改原数组，而是基于原数组中的项创建新数组返回
	splice()	实现数组项的删除、插入、替换	零到三个参数	包含从原数组中删除项的数组	原数组会按照相应操作改变，如果没有删除任何项，则返回一个空数组
位置方法	indexOf()	搜索数组中的元素，并返回它所在的索引位置	要查找的项和可选的查找起点位置索引	查找项在数组中的索引位置，没找到就返回-1	在查找过程中比较参数与数组中的项时，使用全等操作符（===）
	lastIndexOf()	返回一个指定的字符串值最后出现的位置，在一个字符串中的指定位置从后向前搜索。		查找项在数组中的索引位置，没找到就返回-1	在查找过程中比较参数与数组中的项时，使用全等操作符（===）
迭代方法	every()	检测数值元素的每个元素是否都符合条件	给定一个判定函数	如果该函数对每一项都返回 true，则返回 true。	做为参数的判定函数、过滤函数或处理函数会接收三个参数：数组项的值、该项在数组中的索引位置、数组对象本身
	some()	检测数组元素中是否有元素符合指定条件。		如果该函数对任一项返回 true，则返回 true。
	filter()	检测数值元素，并返回符合条件所有元素的数组。	给定一个过滤函数	返回该函数会返回 true 的项组成的数组
	forEach()	对数组中的每一项运行给定函数	给定一个处理函数	无返回值
	map()	通过指定函数处理数组的每个元素，并返回处理后的数组。		返回每次函数调用的结果组成的数组
归并方法	reduce()	这两个方法都会迭代数组的所有项，然后构建一个最终返回的值。	这两个方法都接收两个参数：一个在每一项上调用的函数和（可选的）作为归并基础的初始值。	归并后的值	给 reduce() 和 reduceRight() 的函数接收 4 个参数：前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上，因此第一个参数是数组的第一项，第二个参数就是数组的第二项。
	reduceRight()

Note:

No1.如果数组的某一项是null或者是undefined,那么该值在join(),toLocaleString(),toString()方法返回的结果中以空字符串表示。

var values=[1,null,3,4];
console.log(values.join()); //1,,3,4

《JS高程》原书上说valueOf()方法对于null和undefined也会返回空字符串，经过验证这种说法是错误的。和前面说的此方法返回原数组相矛盾。

var values=[1,undefined,3,4];
console.log(values.valueOf()); //[ 1, undefined, 3, 4 ]

No2.push()和unshift()方法可以接收任意数量的参数，每个参数会被当作整体推入数组。

var values=[1,2,3,4];
values.push(5,[6,7]); 
values.unshift(-2,[0,-1])
console.log(values);//[ -2, [ 0, -1 ], 1, 2, 3, 4, 5, [ 6, 7 ] ]

No3.sort()方法会调用每个数组项的toString()转型方法，然后比较得到的字符串。

var values=[5,10,3,4];
values.sort(); 
console.log(values);//[ 10, 3, 4, 5 ]

由于5转成字符串“5”比“10”大，所以5排在后面。可以通过传递比较函数来规定比较合适的排序规则，比较函数接收两个参数，如果第一个参数应该位于第二个参数之前则返回一个负数，如果第一个参数应该位于第二个参数之后则返回一个正数，如果两个参数相等则返回0.对于数值类型或者其valueOf()方法会返回数值类型的对象类型，可以简单的采用下面的比较函数。

function compare(value1,value2) {
	return value1-value2;
}
var values=[5,10,3,4];
values.sort(compare); 
console.log(values);//[ 3, 4, 5, 10 ]

No4.concat()方法会先创建当前数组一个副本，然后将接收到的参数添加到这个副本的末尾，最后返回新构建的数组。在没有给 concat() 方法传递参数的情况下，它只是复制当前数组并返回副本。如果传递给 concat() 方法的是一或多个数组，则该方法会将这些数组中的每一项都添加到结果数组中。

var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
        
console.log(colors);     //[ 'red', 'green', 'blue' ]        
console.log(colors2);    //[ 'red', 'green', 'blue', 'yellow', 'black', 'brown' ]

No5.slice()方法的分割区间为左闭右开区间，即[起点索引,终点索引)，索引从0开始，当只传入一个参数时这个参数作为起点索引，终点索引默认为数组最后一个元素的索引，slice()方法也可以不接收参数，此时相当于复制当前数组并返回副本。slice()方法还有一种经常使用的方法，即将arguments类数组对象转化成真正的数组。

function test(){
	var args=Array.prototype.slice.call(arguments);
	console.log(Array.isArray(args));
}
test(1,2,3,4);//true

No6.使用splice()的三种方式

• 删除：可以删除任意数量的项，只需指定 2 个参数：要删除的第一项的位置和要删除的项数。例如， splice(0,2) 会删除数组中的前两项。

• 插入：可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。如果要插入多个项，可以再传入第四、第五，以至任意多个项。例如，splice(2,0,"red","green") 会从当前数组的位置 2 开始插入字符串"red" 和"green" 。

• 替换：可以向指定位置插入任意数量的项，且同时删除任意数量的项，只需指定 3 个参数：起始位置、要删除的项数和要插入的任意数量的项。插入的项数不必与删除的项数相等。例如，splice (2,1,"red","green") 会删除当前数组位置 2 的项，然后再从位置 2 开始插入字符串"red"和"green"。

问题1：toLocaleString()与toString()有什么不同？

这两个方法都会返回以逗号分隔的字符串，为了创建这个字符串会调用数组每一项的相应方法，也就是说两者唯一的区别是当数组调用toLocaleString()时，为了取得每一项的值，调用的是每一项的toLocaleString()方法，而不是toString()方法.

   <script type="text/javascript">
        var person1 = {
            toLocaleString : function () {
                return "Nikolaos";
            },
            
            toString : function() {
                return "Nicholas";
            }
        };
        
        var person2 = {
            toLocaleString : function () {
                return "Grigorios";
            },
            
            toString : function() {
                return "Greg";
            }
        };
        
        var people = [person1, person2];
        alert(people);                      //Nicholas,Greg
        alert(people.toString());           //Nicholas,Greg
        alert(people.toLocaleString());     //Nikolaos,Grigorios
    </script>

Q&A

问题2.给join()方法传递参数undefined、null，结果如何？

传递参数undefined——以逗号分隔

var values=[1,2,3,4];
console.log(values.join(undefined)); //1,2,3,4

传递参数null——以字符串“null”分隔

var values=[1,2,3,4];
console.log(values.join(null)); //1null2null3null4

问题3.《JS高程》提到slice()方法的参数中如果有负数，则用数组长度加上该数来确定相应的位置，（相当于从右向左数，最后一项索引为-1），书中并没有说splice()方法是否可以传入负数参数，那么splice()方法的第一个参数也可以接收负数参数吗？

var colors = ["red", "green", "blue","yellow","purple"];
 var colors2=colors.splice(-2);
        
 console.log(colors);     //[ 'red', 'green', 'blue' ]     
 console.log(colors2);    //[ 'yellow', 'purple' ]

从中可以看出，负数索引是可以使用在splice()方法中的，并且原数组会被相应的修改掉。

问题4.indexOf()和lastIndexOf()方法的第二个可选参数可以是负值吗？

答：可以（自行验证，从前面几种方法可以看出，凡是涉及索引位置参数的地方，都可以使用负值）

问题5.filter()、map()方法会修改原数组吗？

 var numbers=[1,2,3,4,5,4,3,2,1];
 var mapResult=numbers.map(function(item,index,array){
     return item*2;
 })
 var filterResult=numbers.filter(function (item,index,array) {
 	return item<4;
 	
 })
  console.log(mapResult);//[ 2, 4, 6, 8, 10, 8, 6, 4, 2 ]
  console.log(filterResult);[ 1, 2, 3, 3, 2, 1 ]
  console.log(numbers);//[ 1, 2, 3, 4, 5, 4, 3, 2, 1 ]

问题6.哪些方法会改变原数组？哪些方法会返回操作后的原数组哪些方法会返回新创建的数组

改变原数组的方法：push()、pop()、shfit()、unshift()、reverse()、sort()、splice()

返回改变后的原数组的方法：reverse()、sort()

返回新创建数组的方法：concat()、slice()、splice()、filter()、map()

来自为知笔记(Wiz)