最近要经常写一些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