最近要经常写一些Js代码，总看到同事能使用js高级函数写出比较简洁的js代码，挺羡慕的，于是就花了一些专门时间来学习。
forEach、map、reduce
我就不喜欢一上来就给出语法来，先来一个例子：
- 问题：给定数组 arr = [1,2,3,4] ，求数组的和
forEach 实现
var arr = [1,2,3,4],
sum = 0;
arr.forEach(function(e){sum += e;}); // sum = 10 just for demo
仅仅得到一个sum值
map 实现
var arr = [1,2,3,4],
sum = 0;
arr.map(function(obj){
sum += obj;
return obj*2;
});//return undefined array. sum = 10 just for demo
可以得到sum值，同时返回与原始数组相同长度的新数组，如果map中的函数没有return，返回的数组中的元素全是undefined。
map=映射，map就是通过对原数组每个元素调用参数函数进行处理，保存处理的结果为新数组。
reduce实现
var arr = [1,2,3,4];
arr.reduce(function(pre,cur){return pre + cur}); // return 10
reduce本意为减少，
实例中的三个方法的总结：
- forEach 方法是将数组中的每一个值取出来，再做一些程序员想让他们做的事情
- map 方法 是将数组中的每一个值取出来，放入一个方法中做一些程序员想让他们做的事情后，再返回一个新的数组
- reduce 方法 将数组中的每一个值与前面的被返回相加的总和(初试值为数组的第一个值或者initialValue)
slice、splice、split、concat、join
这其中的slice和splice真的太像太像了，很容易搞混。
slice
slice是指定在一个数组中的元素创建一个新的数组，即原数组不会变。
设计领域说的切片一般就是指slice，想象一下对一份设计稿进行切片，不会修改原始设计稿。
2个参数分别为起点与结束点，重要的是新数组的元素到结束点之前结束，即不包括结束点。
var color = new Array('red','blue','yellow','black');
var color2 = color.slice(1,2);
alert(color); //输出 red,blue,yellow,black
alert(color2); //输出 blue;注意：这里只有第二项一个值
由于它有不改变原数组的特性，slice(0)可以拷贝一个简单数组，不过要注意是浅拷贝而不是深拷贝，在数组元素为对象的情况下，修改新数组中此对象的元素值，原数组中此对象也对应修改。
var color = new Array('red','blue','yellow','black');
var color2 = color.slice(1,2);
alert(color); //输出 red,blue,yellow,black
alert(color2); //输出 blue;注意：这里只有第二项一个值
var a1=[["1","2","3"],"2","3"];
var a2 = a1.slice(0);
a2[0][0]=9;
a1[0][0]; //输出9
splice
splice能够实现对数组元素的删除、插入、替换操作，返回值为被操作的值。替换其实就是先删除，再插入。
splice本意是胶接，粘接（注意胶接/粘接的对象就是片状物）。这里引申为删除、插入、替换，有点不好记，可以理解高级版的slice切片，不仅可以切（删除），还是进行自由组合式的插入与替换。
三个参数：
1、起点，从数组第几个开始（从0开始算，包含它）
2、长度，对数组删除的长度（可以为0，即不删除）
3、添加的内容，可以是多个（先删除后添加，先添加后删除不符合直觉。）
返回值是被删除的元素，改变原数组。
也可以理解为粘接两个数组，即原始数组与新添加的多个内容组成的数组；不只是首尾粘接(第一参数>=原始数组长度，第2参数为0的情况)， 还可以在原始数组的中间粘接，这种粘接就要先断开连接，一种情况是只断开一个位置，那么就只有插入功能，如果断开两个位置，那么这个位置的之间的就可以不要了（即删除），再插入新的数组（等同于替换）。所以实现删除、插入、替换操作的函数被命名为splice也不要奇怪。因为是粘接，改变原数组也不奇怪。
-
splice删除： color.splice(1,2) （删除color中的第1、2两项，返回包含第1、2两项的数组）；
-
splice插入： color.splice(1,0,'brown','pink') （在color键值为1的元素前插入两个值）；
-
splice替换： color.splice(1,2,'brown','pink') （在color中替换1、2元素——其实就是先删除再在相同的位置添加）；
var color = new Array('red','blue','yellow','black');
var color2 = color.splice(2,3,'brown','pink');
alert(color); // red,blue,brown,pink
alert(color2); // yellow,black
split
split() 方法比较简单，适用于字符串，用于把一个字符串分割成字符串数组
str="hello!how!are!you?"
arr2=str.split("!");
alert(arr2); //hello,how,are,you?
alert(arr2.length) //4
concat
concat()是拼接两个数组，具体是先给当前数组创建一个副本，然后将接收到的参数添加到这个副本（数组）的末尾，最后返回一个新的数组。
可以理解为特殊的splice，只能首尾粘接，另外要强调的是不会修改原数组。
注意使用slice和concat对对象数组的拷贝，整个拷贝还是浅拷贝。
join
join() 方法用于把数组中的所有元素放入一个字符串，元素是通过指定的分隔符进行分隔的。默认使用逗号作为分隔符。
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
console.log(arr.join());
输出：George,John,Thomas
向数组中插入一个元素
向现有数组中插入一个元素是经常会见到的一个需求。你可以：")向现有数组中插入一个元素是经常会见到的一个需求。你可以：
使用push将元素插入到数组的尾部；
var arr = [1, 2, 3, 4, 5];
arr.push(6);
使用unshift将元素插入到数组的头部；
var arr = [1, 2, 3, 4, 5];
arr.unshift(0);
使用splice将元素插入到数组的中间；（这个其实头部，中间，尾部都可以）。
var items = ['one', 'two', 'three', 'four'];
items.splice(items.length / 2, 0, 'hello');
这三个方法都修改原数组，如果仅仅是插入到尾部或者头部，还有更快的方法：
arr[arr.length] = 6; // 43% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1
[0].contact(arr); //98% faster in Chrome 47.0.2526.106 on Mac OS X 10.11.1
网友评论