js对数组的操作总结,包括map.filter...的一些高阶函数操作

1近来空闲,总结一下js对数组的操作吧:

一:普通操作:

添加:push/unshift

push方法将数据添加到数组末尾,并返回数组的长度,它会改变原数组

unshift方法将数据添加到数组开头,并返回数组的长度,它会改变原数组

array_push() {
      let a = [1,2,3]
      let b = a.push(4)
      conrole.log(a,b) //[1,2,3,4]4
    },
array_unshift() {
      let a = [1,2,3]
      let b = a.push(4)
      conrole.log(a,b) //[4,1,2,3]4
    },

删除:delete/shift/pop

delete 删除数组中的所给下标的一项,不会改变数组长度,所删除的一项为empty,返回布尔值

shift 删除数组的第一项,并返回所删除项,如果原数组为空,则返回undefined 

pop 删除数组的最后一项,并返回所删除项,如果原数组为空,则返回undefined 

array_delete() {
      let a = [1,2,3]
      console.log(a,delete a[0]) //[empty, 2, 3] true
    },
array_shift() {
      let a = [1,2,3]
      let b = a.shift()
      console.log(a,b) //[2, 3] 1
    },
array_pop() {
      let a = [1,2,3]
      let b = a.pop()
      console.log(a,b) //[1, 2] 3
    },

数组合并:concat

concat 返回一个新数组,将新参数或新数组添加到原数组末尾,不改变原数组

array_concat() {
      let a = [1,2,3]
      let b = a.concat(6,7)
      let c = [4,5]
      let d = a.concat(c)
      console.log(a,b,d) //[1, 2, 3] (5) [1, 2, 3, 6, 7] (5) [1, 2, 3, 4, 5]
    },

数组的替换和截取:splice/slice

splice(start,num,val1,val2,...):从start位置开始删除num项(包含起始位置项),并从该位置起插入val1,val2,...,返回所删除项,改变原数组,参数均为非必选参数,如果参数1(此为数组下标)不选默认为从数组开头,参数2不写默认为删除开始位置后的所有项,val参数不写就不替换

slice(start,end):返回从原数组中指定开始下标到结束下标之间的项组成的新数组,不改变原数组,参数均为非必选参数,如果参数1(此为数组下标)不选默认为从数组开头,参数2不写默认为截取开始位置后的所有项

array_splice() {
      let a = [1,2,3]
      let b = a.splice(1,2,6,7)
      console.log(a,b) //[1, 6, 7]  [2, 3]
    },
array_slice() {
      let a = [1,2,3]
      let b = a.slice(1,2)
      console.log(a,b) //[1, 2, 3] [2]
    },

数组转化为字符串toString/join

toString 返回将数组转化为字符串的值,不改变原数组

join(separator):将数组的元素组起一个字符串,以separator为分隔符,省略的话则用默认用逗号为分隔符 

array_toString () {
      let a = [1,2,3,4]
      let b = a.toString ()
      console.log(a,b) //[1, 2, 3, 4] "1,2,3,4"
    },
array_join () {
      let a = [1,2,3,4]
      let b = a.join ('/')
      console.log(a,b) //[1, 2, 3, 4] "1/2/3/4"
    },

数组按一定顺序排列reverse/sort

reverse:将数组反序 ,改变原数组

sort(orderfunction):按指定的参数对数组进行排序 ,改变原数组

array_reverse () {
      let a = [1,2,3,4]
      let b = a.reverse ('/')
      console.log(a,b) //[4, 3, 2, 1] (4) [4, 3, 2, 1]
    },
array_sort () {
      let a = [1,6,3,4]
      let b = a.sort ()
      console.log(a,b) //[1, 3, 4, 6] (4) [1, 3, 4, 6]
    },

二:高阶操作:

map() 映射,返回新数组

map() 方法返回一个新数组,数组中的元素为原始数组元素调用函数处理后的值。方法按照原始数组元素顺序依次处理元素。不会对空数组进行检测。不会改变原始数组。

array_map () {
      let a = [1,2,3,4]
      let b = a.map( (item) => {
        return item * 10
      })
      console.log(a,b) //[1, 2, 3, 4] (4) [10, 20, 30, 40]
    },

线性数组和树状数组的互换

1.线性数组转换为树结构

let data = [
  { id: 0, parentId: null, name: '生物' },
  { id: 1, parentId: 0, name: '动物' },
  { id: 2, parentId: 0, name: '植物' },
  { id: 3, parentId: 0, name: '微生物' },
  { id: 4, parentId: 1, name: '哺乳动物' },
  { id: 5, parentId: 1, name: '卵生动物' },
  { id: 6, parentId: 2, name: '种子植物' },
  { id: 7, parentId: 2, name: '蕨类植物' },
  { id: 8, parentId: 4, name: '大象' },
  { id: 9, parentId: 4, name: '海豚' },
  { id: 10, parentId: 4, name: '猩猩' },
  { id: 11, parentId: 5, name: '蟒蛇' },
  { id: 12, parentId: 5, name: '麻雀' }
]
function transTree(data) {
    let result = []
    let map = {}
    if (!Array.isArray(data)) {//验证data是不是数组类型
        return []
    }
    data.forEach(item => {//建立每个数组元素id和该对象的关系
        map[item.id] = item //这里可以理解为浅拷贝,共享引用
    })
    data.forEach(item => {
        let parent = map[item.parentId] //找到data中每一项item的爸爸
        if (parent) {//说明元素有爸爸,把元素放在爸爸的children下面
            (parent.children || (parent.children = [])).push(item)
        } else {//说明元素没有爸爸,是根节点,把节点push到最终结果中
            result.push(item) //item是对象的引用
        }
    })
    return result //数组里的对象和data是共享的
}
console.log(JSON.stringify(transTree(data)))

2.将树结构转换为线性数组 

let node = {
    "id": 0,
    "parentId": null,
    "name": "生物",
    "children": [{
        "id": 1,
        "parentId": 0,
        "name": "动物",
        "children": [{
            "id": 4,
            "parentId": 1,
            "name": "哺乳动物",
            "children": [{
                "id": 8,
                "parentId": 4,
                "name": "大象"
            }, {
                "id": 9,
                "parentId": 4,
                "name": "海豚"
            }, {
                "id": 10,
                "parentId": 4,
                "name": "猩猩"
            }]
        }, {
            "id": 5,
            "parentId": 1,
            "name": "卵生动物",
            "children": [{
                "id": 11,
                "parentId": 5,
                "name": "蟒蛇"
            }, {
                "id": 12,
                "parentId": 5,
                "name": "麻雀"
            }]
        }]
    }, {
        "id": 2,
        "parentId": 0,
        "name": "植物",
        "children": [{
            "id": 6,
            "parentId": 2,
            "name": "种子植物"
        }, {
            "id": 7,
            "parentId": 2,
            "name": "蕨类植物"
        }]
    }, {
        "id": 3,
        "parentId": 0,
        "name": "微生物"
    }]
}
function transArr(node) {
    let queue= [node]
    let data = [] //返回的数组结构
    while (queue.length !== 0) { //当队列为空时就跳出循环
        let item = queue.shift() //取出队列中第一个元素
        data.push({
            id: item.id,
            parentId: item.parentId,
            name: item.name            
        })
        let children = item.children // 取出该节点的孩子
        if (children) { 
            for (let i = 0; i < children.length; i++) {
                queue.push(children[i]) //将子节点加入到队列尾部
            }
        }
    }
    return data
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值