js函数总结

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

参考:

原文地址:https://www.cnblogs.com/jasonLiu2018/p/11113453.html