JS常用数组操作全解析

其他 2018-07-23 09:54:37 阅读次数: 0
concat() 方法用于连接两个或多个数组。
let arr1 = [1, 3, 4, 5]
let arr2 = ['11', '1']
let arr3 = [{ a: 1 }, { b: 2 }]
let all = arr1.concat(arr2).concat(arr3)
console.log(all) // [1, 3, 4, 5, "11", "1", {…}, {…}]
concat()方法，不会改变原数组本身
join(separator)把数组中每一项提取出来并用指定字符分割组成字符串
let arr1 = [1, 3, 4, 5, [1, 2, 3]]
let arr2 = ['11', '1']
let arr3 = [{ a: 1 }, { b: 2 }]
let all = arr1.concat(arr2).concat(arr3)
let str = all.join('v')
console.log(str) // 1v3v4v5v1,2,3v11v1v[object Object]v[object Object]

separator为join方法暴露的参数，默认为’,’。**注意：**join可以提取String和Number但是无法解析对象中的数据

pop()删除数组最后一项，并返回被删除项，如果数组长度为0，则返回undefined
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.pop()
console.log(str)    // 4
console.log(arr1)   // [0, 1, 2, 3]

**注意：**pop()会改变源数组

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.push([5, 6])
console.log(str)    // 6
console.log(arr1) // [0, 1, 2, 3, 4, Array(2)]

**注意：**push()后向数组末尾添加指定数据，无论他什么类型，即使是NaN也会切只会占据数组中一个位置

reverse()颠倒数组中元素位置
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.reverse()
console.log(str)    // [4, 3, 2, 1, 0]
console.log(arr1)   // [4, 3, 2, 1, 0]

注意：此操作会改变源数组

shift()删除数组第一个元素，并返回被删除元素
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.shift()
console.log(str)    // 0
console.log(arr1)   // [1, 2, 3, 4]

注意：此操作会改变源数组

slice(start, end)从已有数组中选定一个范围组成子数组
let arr1 = [0, 1, 2, 3, 4]
let arr2 = arr1.slice(1, 3)
let arr3 = arr1.slice(-1)
let arr4 = arr1.slice(1, -3)
console.log(arr1)   // [0, 1, 2, 3, 4]
console.log(arr2)   // [1, 2]
console.log(arr3)   // [4]
console.log(arr4)   // [1]

注意： start为必填项，确定开始位置，正数为顺序查询，负数为倒序查询；end为选填项，确定结束位置，默认为至最后一项

sort(sortby)对数组进行排序
**普通数组**
sortNumber (a, b) {
    return a - b
},
learnArray () {
    let arr1 = ['10', '131', '234', '111', '20', '002', '0071']

    console.log(arr1.sort())    // ["002", "0071", "10", "111", "131", "20", "234"]
    console.log(arr1.sort(this.sortNumber)) // ["002", "10", "20", "0071", "111", "131", "234"]
}

**数组中的对象未处理前无法排序**
learnArray () {
    let arr = []
    for (let i = 0; i < 5; i++) {
        arr.push({i: i * Math.random()})
        console.log(arr[i], arr[i].length)
    }

    console.log(arr.sort())
    // 0:{i: 0}
    // 1:{i: 0.16355624558752946}
    // 2:{i: 1.7387739842785384}
    // 3:{i: 0.3757190308241345}
    // 4:{i: 3.160518025347579}
}


**经过特殊处理后的数组**
sortNumber (a, b) {
    let obj1 = a['i']
    let obj2 = b['i']
    return obj2 - obj1
},
learnArray () {
    let arr = []
    for (let i = 0; i < 5; i++) {
        arr.push({i: i * Math.random()})
        console.log(arr[i], arr[i].length)
    }

    console.log(arr.sort())
    // 0:{i: 3.8106310267596397}
    // 1:{i: 1.3285710809611437}
    // 2:{i: 1.0776123310362173}
    // 3:{i: 0.9429327310688747}
    // 4:{i: 0}
    console.log(arr.sort(this.sortNumber))
    // 0:{i: 3.8106310267596397}
    // 1:{i: 1.3285710809611437}
    // 2:{i: 1.0776123310362173}
    // 3:{i: 0.9429327310688747}
    // 4:{i: 0}
}

**注意：**sort()接受一个函数作为排序条件，默认按照字母顺序排列，函数的返回值应该是一个比较的结果，正数（正序）、负数（倒序）、或NAN（走默认排序），比较对象应该为由数字、字母任意组成的字符串，如果为sort传递了排序条件，默认排序会继承

splice(index,howmany,item1,.....,itemX)从数组中添加/删除元素
let arr = []
let arr1 = arr.splice(0, 0, 1)
console.log(arr)        // [1]
console.log(arr1)       // []

index为起始位置，howmany为要删除项目数量，可以为0，item要添加的元素，splice方法会返回被删除的元素，并会改变原数组

toString将数组转换为对象并返回

结果与没有参数的join()方法一致，不会改变源数组

unshift在数组开头添加一个元素，并返回新长度

unshift会改变源数组，可以通过arr.unshift()拿到arr的长度

forEach
let arr1 = [1, 2, 3, {a: 1}, 5]
arr1.forEach((item, index) => {
    if (item.a) {
        item.a += 1
    } else {
        item += 1
    }
})
console.log(arr1)
// 0:1
// 1:2
// 2:3
// 3:{a: 2}
// 4:5

forEach遍历出来的对象会被直接更改，原因是JS中对象传值是引用传递，传递的是内存地址，修改后会改变内存地址对应储存的值。而非对象只是进行了值传递，函数中可以用这个值，但是无法修改。

**注意：**forEach很容易修改原始数组的值

map
let arr1 = [1, 2, 3, {a: 1}, 5]
let arr2 = arr1.map((item, index) => {
    let imap
    if (item.a) {
        imap = item.a + 1
    } else {
        imap = item + 1
    }
    return imap
})
console.log(arr1)
// 0:1
// 1:2
// 2:3
// 3:{a: 1}
// 4:5
console.log(arr2)
// 0:1
// 1:2
// 2:3
// 3:2
// 4:5

map需要有一个返回值，并且有新数组来接收最终数据，一般情况下map不会改变原始数组

every
isBelowThreshold(currentValue) {
  return currentValue < 40
}

let array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.every(isBelowThreshold)) // true

every会将数组中每一项作为参数，传递给指定函数，返回值均为true则最终结果为true，相当于&&

some
isBelowThreshold(currentValue) {
  return currentValue > 39
}

let array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.some(isBelowThreshold)) // true

every会将数组中每一项作为参数，传递给指定函数，返回值有一项为true则最终结果为true，相当于||

filter
isBelowThreshold (currentValue) {
    return currentValue > 20
},

learnArray () {
    let array1 = [1, 30, 39, 29, 10, 13]

    console.log(array1.filter(this.isBelowThreshold)) // [30, 39, 29]
}

filte同样会建数组中每一项作为参数，传递给函数进行过滤

reduce
getSum (total, num) {
    return Math.round(total) + Math.round(num)
},
learnArray () {
    let numbers = [15.5, 2.3, 1.1, 4.7]
    console.log(numbers.reduce(this.getSum)) // 24
}

reduce可以看做是一个累加器，从做开始依次执行，值得注意的是第一次执行是total作为初始值，之后执行total即使上一次累加的结果

concat() 方法用于连接两个或多个数组。
let arr1 = [1, 3, 4, 5]
let arr2 = ['11', '1']
let arr3 = [{ a: 1 }, { b: 2 }]
let all = arr1.concat(arr2).concat(arr3)
console.log(all) // [1, 3, 4, 5, "11", "1", {…}, {…}]
concat()方法，不会改变原数组本身
join(separator)把数组中每一项提取出来并用指定字符分割组成字符串
let arr1 = [1, 3, 4, 5, [1, 2, 3]]
let arr2 = ['11', '1']
let arr3 = [{ a: 1 }, { b: 2 }]
let all = arr1.concat(arr2).concat(arr3)
let str = all.join('v')
console.log(str) // 1v3v4v5v1,2,3v11v1v[object Object]v[object Object]

separator为join方法暴露的参数，默认为’,’。**注意：**join可以提取String和Number但是无法解析对象中的数据

pop()删除数组最后一项，并返回被删除项，如果数组长度为0，则返回undefined
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.pop()
console.log(str)    // 4
console.log(arr1)   // [0, 1, 2, 3]

**注意：**pop()会改变源数组

push()方法可向数组的末尾添加一个或多个元素，并返回新的长度。
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.push([5, 6])
console.log(str)    // 6
console.log(arr1) // [0, 1, 2, 3, 4, Array(2)]

**注意：**push()后向数组末尾添加指定数据，无论他什么类型，即使是NaN也会切只会占据数组中一个位置

reverse()颠倒数组中元素位置
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.reverse()
console.log(str)    // [4, 3, 2, 1, 0]
console.log(arr1)   // [4, 3, 2, 1, 0]

注意：此操作会改变源数组

shift()删除数组第一个元素，并返回被删除元素
let arr1 = [0, 1, 2, 3, 4]
let str = arr1.shift()
console.log(str)    // 0
console.log(arr1)   // [1, 2, 3, 4]

注意：此操作会改变源数组

slice(start, end)从已有数组中选定一个范围组成子数组
let arr1 = [0, 1, 2, 3, 4]
let arr2 = arr1.slice(1, 3)
let arr3 = arr1.slice(-1)
let arr4 = arr1.slice(1, -3)
console.log(arr1)   // [0, 1, 2, 3, 4]
console.log(arr2)   // [1, 2]
console.log(arr3)   // [4]
console.log(arr4)   // [1]

注意： start为必填项，确定开始位置，正数为顺序查询，负数为倒序查询；end为选填项，确定结束位置，默认为至最后一项

sort(sortby)对数组进行排序
**普通数组**
sortNumber (a, b) {
    return a - b
},
learnArray () {
    let arr1 = ['10', '131', '234', '111', '20', '002', '0071']

    console.log(arr1.sort())    // ["002", "0071", "10", "111", "131", "20", "234"]
    console.log(arr1.sort(this.sortNumber)) // ["002", "10", "20", "0071", "111", "131", "234"]
}

**数组中的对象未处理前无法排序**
learnArray () {
    let arr = []
    for (let i = 0; i < 5; i++) {
        arr.push({i: i * Math.random()})
        console.log(arr[i], arr[i].length)
    }

    console.log(arr.sort())
    // 0:{i: 0}
    // 1:{i: 0.16355624558752946}
    // 2:{i: 1.7387739842785384}
    // 3:{i: 0.3757190308241345}
    // 4:{i: 3.160518025347579}
}


**经过特殊处理后的数组**
sortNumber (a, b) {
    let obj1 = a['i']
    let obj2 = b['i']
    return obj2 - obj1
},
learnArray () {
    let arr = []
    for (let i = 0; i < 5; i++) {
        arr.push({i: i * Math.random()})
        console.log(arr[i], arr[i].length)
    }

    console.log(arr.sort())
    // 0:{i: 3.8106310267596397}
    // 1:{i: 1.3285710809611437}
    // 2:{i: 1.0776123310362173}
    // 3:{i: 0.9429327310688747}
    // 4:{i: 0}
    console.log(arr.sort(this.sortNumber))
    // 0:{i: 3.8106310267596397}
    // 1:{i: 1.3285710809611437}
    // 2:{i: 1.0776123310362173}
    // 3:{i: 0.9429327310688747}
    // 4:{i: 0}
}

**注意：**sort()接受一个函数作为排序条件，默认按照字母顺序排列，函数的返回值应该是一个比较的结果，正数（正序）、负数（倒序）、或NAN（走默认排序），比较对象应该为由数字、字母任意组成的字符串，如果为sort传递了排序条件，默认排序会继承

splice(index,howmany,item1,.....,itemX)从数组中添加/删除元素
let arr = []
let arr1 = arr.splice(0, 0, 1)
console.log(arr)        // [1]
console.log(arr1)       // []

index为起始位置，howmany为要删除项目数量，可以为0，item要添加的元素，splice方法会返回被删除的元素，并会改变原数组

toString将数组转换为对象并返回

结果与没有参数的join()方法一致，不会改变源数组

unshift在数组开头添加一个元素，并返回新长度

unshift会改变源数组，可以通过arr.unshift()拿到arr的长度

forEach
let arr1 = [1, 2, 3, {a: 1}, 5]
arr1.forEach((item, index) => {
    if (item.a) {
        item.a += 1
    } else {
        item += 1
    }
})
console.log(arr1)
// 0:1
// 1:2
// 2:3
// 3:{a: 2}
// 4:5

forEach遍历出来的对象会被直接更改，原因是JS中对象传值是引用传递，传递的是内存地址，修改后会改变内存地址对应储存的值。而非对象只是进行了值传递，函数中可以用这个值，但是无法修改。

**注意：**forEach很容易修改原始数组的值

map
let arr1 = [1, 2, 3, {a: 1}, 5]
let arr2 = arr1.map((item, index) => {
    let imap
    if (item.a) {
        imap = item.a + 1
    } else {
        imap = item + 1
    }
    return imap
})
console.log(arr1)
// 0:1
// 1:2
// 2:3
// 3:{a: 1}
// 4:5
console.log(arr2)
// 0:1
// 1:2
// 2:3
// 3:2
// 4:5

map需要有一个返回值，并且有新数组来接收最终数据，一般情况下map不会改变原始数组

every
isBelowThreshold(currentValue) {
  return currentValue < 40
}

let array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.every(isBelowThreshold)) // true

every会将数组中每一项作为参数，传递给指定函数，返回值均为true则最终结果为true，相当于&&

some
isBelowThreshold(currentValue) {
  return currentValue > 39
}

let array1 = [1, 30, 39, 29, 10, 13]

console.log(array1.some(isBelowThreshold)) // true

every会将数组中每一项作为参数，传递给指定函数，返回值有一项为true则最终结果为true，相当于||

filter
isBelowThreshold (currentValue) {
    return currentValue > 20
},

learnArray () {
    let array1 = [1, 30, 39, 29, 10, 13]

    console.log(array1.filter(this.isBelowThreshold)) // [30, 39, 29]
}

filte同样会建数组中每一项作为参数，传递给函数进行过滤

reduce
getSum (total, num) {
    return Math.round(total) + Math.round(num)
},
learnArray () {
    let numbers = [15.5, 2.3, 1.1, 4.7]
    console.log(numbers.reduce(this.getSum)) // 24
}

reduce可以看做是一个累加器，从做开始依次执行，值得注意的是第一次执行是total作为初始值，之后执行total即使上一次累加的结果

实践应用
let old = [
    {
        id: 1,
        name: 'css',
        type: 'html'
    },
    {
        id: 3,
        name: 'javacript',
        type: 'code'
    },
    {
        id: 5,
        name: 'css',
        type: 'html'
    }
]

有一个数组，期望把相同name的对象合并，并且把对应的id放到一个数组

方法一、

let arr = []
old.forEach((item) => {
    let str = JSON.stringify(old)
    if (str.indexOf(item.type) === -1) {
        let obj = {
            id: [item.id],
            name: item.name,
            type: item.type
        }
        arr.push(obj)
    } else {
        arr.forEach((items) => {
            if (items.type === item.type) items.id.push(item.id)
        })
    }
})

需要n^2次的循环，不推荐

方法二、

let isEqual = (a, b) => a.name === b.name && b.type === b.type // 判断条件
let create = e => { // 创建新对象
    e.id = [e.id]
    return e
}

let getNew = old => old.reduce((acc, cur) => {
    let hasItem = acc.some(e => {
    let temp = isEqual(e, cur)
    if (temp) e.id.push(cur.id)

    return temp
})

if (!hasItem) acc.push(create(cur))
    return acc
}, [])

循环次数减少了一半，推荐

猜你喜欢

转载自blog.csdn.net/nick_yangxiaotong/article/details/81048045
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022