js函数总结

Posted 2022-03-05 jasonliu2018

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

参考：

• JavaScript中reduce()方法不完全指南 | Aotu.io「凹凸实验室」
• JavaScript——slice和splice的区别 - 小　伍 - 博客园
• JS简要学习笔记——容易搞混的splice,slice和split_慕课手记
• 向数组中插入一个元素 | le0zh‘s blog
• JavaScript 数组：对比 slice 与 splice - 众成翻译
• 使用slice和concat对数组的深拷贝和浅拷贝 - 白杨-M - 博客园