zoukankan      html  css  js  c++  java
  • 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
    

    参考:

  • 相关阅读:
    bzoj 1914: [Usaco2010 OPen]Triangle Counting 数三角形【叉积+极角排序+瞎搞】
    poj 1286 Necklace of Beads【polya定理+burnside引理】
    poj 2154 Color【polya定理+欧拉函数】
    poj 2409 Let it Bead【polya定理+burnside引理】
    bzoj 3534: [Sdoi2014]重建【矩阵树定理】
    bzoj 1774: [Usaco2009 Dec]Toll 过路费【排序+Floyd】
    bzoj 4596: [Shoi2016]黑暗前的幻想乡【容斥原理+矩阵树定理】
    bzoj 4031: [HEOI2015]小Z的房间【矩阵树定理】
    poj Find a multiple【鸽巢原理】
    bzoj Strange Way to Express Integers【excrt】
  • 原文地址:https://www.cnblogs.com/jasonLiu2018/p/11113453.html
Copyright © 2011-2022 走看看