数组方法及操作

高阶函数

1、map/reduce
map:如果我们有一个函数f(x)=x²,要把这个函数作用在一个数组[1,2,3,4,6,5]上,就可以使用map实现。

    'use strict';
    
    function pow(x) {
      return x * x
    }
    
    var arr = [1,2,3,4]
    var results = arr.map(pow) 
    // [1,4,9,16]
    

map() 作为高阶函数,实质是对数组中的每一项做计算,然后重新保存到新的数组中。

reduce:和map一样也是作用在数组的每一项上,但是函数必须接受2个参数,将上一个元素的计算结果累计到下一个元素中。效果其实就是:

    [x1,x2,x3,x4].reduce(f) = f(f(f(x1,x2),x3),x3)

对于数组:


    var arr = [1,2,3,7,4]
    function sum(x,y) {
      return x + y
    }
    arr.reduce(sum)
    // 17
    function h(x,y){
      return x * y
    }
    arr.reduce(h)
    //  168

2、filter
filter也是一个常用的操作,它用于把Array的某些元素过滤掉,然后返回剩下的元素。
和map()类似,Array的filter()也接收一个函数。和map()不同的是,filter()把传入的函数依次作用于每个元素,然后根据返回值是true还是false决定保留还是丢弃该元素。
例如,在一个Array中,删掉偶数,只保留奇数,可以这么写:

    var arr = [1, 2, 4, 5, 6, 9, 10, 15];
    var r = arr.filter(function (x) {
        return x % 2 !== 0;
    });
    // [1, 5, 9, 15]

filter()接收回调函数可以有多个参数,f(element, index, self){}

element: 当前元素

index: 当前元素索引值

self: 数组本身

filter去重

    'use strict'
    
    var
    r,
    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
    
    r = arr.filter(function (element, index, self) {
        return self.indexOf(element) === index;
    });
    
    console.log(r);

3、sort()
算法排序:对于两个元素x和y,如果认为x < y,则返回-1,如果认为x == y,则返回0,如果认为x > y,则返回1
如果对数组直接进行排序,发现结果:

    // 看上去正常的结果:
    ['Google', 'Apple', 'Microsoft'].sort(); // ['Apple', 'Google', 'Microsoft'];
    
    // apple排在了最后:
    ['Google', 'apple', 'Microsoft'].sort(); // ['Google', 'Microsoft", 'apple']
    
    // 无法理解的结果:
    [10, 20, 1, 2].sort(); // [1, 10, 2, 20]

这是因为Array的sort()方法默认把所有元素先转换为String再排序,apple在最后,是因为a的ASCI码在大学字母后面,结果'10'排在了'2'的前面,因为字符'1'比字符'2'的ASCII码小。

幸运的是,sort()方法也是一个高阶函数,它还可以接收一个比较函数来实现自定义的排序。

要按数字大小排序,我们可以这么写:

    'use strict'
    
    var arr = [1,4,11,6,3,6,]
    arr.sort(function(x, y) {
        return x - y
    })
    console.log(arr)  //[1, 3, 4, 6, 6, 11]
    
    arr.sort(function(x, y) {
        return y - x
    })
    console.log(arr)  //[11, 6, 6, 4, 3, 1]

如果需要忽略大小写进行字符串排序,我们需要在函数中将x, y 统一转换为大写或小写进行比较,返回的才能正确

使用方法

1、两个或多个数组合并去重

    var arr0 = [1,2,3,4,5]
    var arr1 = [2,4,6,8,0]
    var arr2 = [5,6,7,8,9]
    
    function arrFilter() {
        var arr = Array.prototype.slice.apply(arguments)
        
        arr = arr.reduce(function(x, y){
            return x.concat(y)
        })
        arr = arr.filter(function(ele, index, self){
            return self.indexOf(ele) === index
        })
        return arr
    }
    
    console.log(arrFilter(arr0,arr1,arr2))
   //[1, 2, 3, 4, 5, 6, 8, 0, 7, 9]

2、两个或多个数组选择没有重复的元素组成一个新数组

    var arr0 = [1,2,3,4,5]
    var arr1 = [2,4,6,8,0]
    var arr2 = [5,6,7,8,9]
    
    function newArr() {
        var arr = Array.prototype.slice.apply(arguments)
        var newArr = []
        arr = arr.reduce(function(x, y){
            return x.concat(y)
        })
        
        arr = arr.filter(function(ele, index, self){
            var length = self.length
            var canReturn = self.includes(ele, index+1) || self.indexOf(ele) !== index
            return !canReturn
        })
        return arr
    }
    console.log(newArr(arr0,arr1,arr2))
    // [1, 3, 0, 7, 9]

3、includes() 判断一个数组是否包含一个指定的值,返回布尔值

    let a = [1,2,3]
    a.includes(2)  //true
    a.includes(4)  //false

语法:

    arr.includes(searchElement)
    arr.includes(searchElement, fromIndex)

searchElement: 需要查找的元素
fromIndex|可选: 从该索引处开始查找searchElement。如果为负值,则按升序从array.length + fromIndex的索引开始搜索。默认为0。

    [1, 2, 3].includes(2);     // true
    [1, 2, 3].includes(4);     // false
    [1, 2, 3].includes(3, 3);  // false
    [1, 2, 3].includes(3, -1); // true
    [1, 2, NaN].includes(NaN); // true

如果fromIndex 大于等于数组长度 ,则返回 false 。该数组不会被搜索。

4、树节点过滤

var tree = [{
  id: 1,
  text: '中国',
  children: [
    {
      id: 2,
      text: '浙江',
      children: [
        {
          id: 3,
          text: '杭州',
        },
        {
          id: 4,
          text: '丽水',
          children: [
            {
              id: 5,
              text: '庆元'
            },
            {
              id: 6,
              text: '龙泉'
            }
          ]
        },
        {
          id: 7,
          text: '温州',
          children: [
            {
              id: 8,
              text: '泰顺'
            }
          ]
        },
      ]
    },
    {
      id: 9,
      text: '重复测试',
      children: [
        {
          id: 10,
          text: '温州'
        }
      ]
    }
  ]
}]

function filter(arr, val) {
  let node = []
  arr.map(item => {
    if (item.text.indexOf(val) >= 0) {
      node.push(item)
      return
    }
    if (item.children && item.children.length > 0) {
      let child = filter(item.children, val)
      if (child.length > 0) {
        item.children = child
        node.push(item)
      }
      return
    }
    return
  })
  return node
}

console.log(filter(tree, '温州'))
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,884评论 6 492
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,347评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 157,435评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,509评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,611评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,837评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,987评论 3 408
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,730评论 0 267
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,194评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,525评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,664评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,334评论 4 330
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,944评论 3 313
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,764评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,997评论 1 266
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,389评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,554评论 2 349