day06: js复杂数据类型——数组、以及常用方法

数组为js非常重要的一种数据类型，js提供了很多数组的方法。对于数组的方法应重点掌握，做到理解性记忆

数组概述

1. 数组是js的一种数据类型 是复杂数据类型
2. 数组是有长度 获取数组的长度可以通过数组名.length
3. 数组是有序的数据集合，有序性体现数组有一个下标（索引），下标是js按照顺序自动生成的，从0开始。下标的范围是[0, 长度-1]
4. js中的数组不限制储存数据的类型

1. 数组创建

创建数组有两种方式：

		// 字面量方式
	    var arr1  = [1,5,8,7,3,6,4]
	    // 内置构造函数方式
        var arr2  = new Array(10)
        var arr3 =  new Array(10,20)
        console.log(arr1)
        console.log(arr2)
        console.log(arr3)
        

注意在构造函数方式创建，若只传入一个数 ‘10’ 会创建一个长度为十的空数据数组
更多使用字面量方式创建数组

2. 数组的增删改查基本操作

        var arr  = [1,5,8,7,3,6,4]
        // 可以通过数组下标来添加、修改数据
        arr[7] = 9  // 不推荐这样添加
        arr[0] = 2
        console.log(arr)
        // 可以通过数组下标来查看数据
        console.log(arr[0])
        // 可以通过delete来删除指定索引的值
        delete arr[0] // 不推荐这样删除
        console.log(arr)
        // 可以通过for循环来遍历数组
        for(var i = 0; i < arr.length; i++){
            console.log(arr[i])
        }

3. 数组的常用方法

1. 添加数据push(), unshift()

push(): 向数组的末尾添加内容
unshift(): 向数组的头部添加内容

     var arr  = [3,6,4]
     console.log('原数组:',arr)
     arr.push('end')
     arr.unshift('head')
     console.log('添加后:',arr)

2. 取出数据pop() shift()

pop(): 取出数组末尾内容
shift(): 取出数组头部内容

   // 返回值为取出的数据
   var end  = arr.pop()
   var head = arr.shift()
   console.log('取出的内容为:',head,end)
   console.log('取出后:',arr)

添加和取出相对应，可以配合来记忆

3. 删除(替换)数据splice()

splice() 开始索引(默认0), 插入个数(默认0), 插入的数据 | 返回值为数组

        var arr1  = [1,2,3,9,8,7]
        // 从零开始,删除两个
        arr1.splice(0,2)
        console.log(arr1)
        var arr2  = [1,2,3,9,8,7]

        // 从0开始，替换两个
        arr2.splice(0,2,2,3)
        console.log(arr2) 

![在这里插入图片描述](https://img-blog.csdnimg.cn/c60c7ef4a0ee47b0a4c7770c94d4381f.png

4. 反转数组reverse()

会将原数组反转，并且返回一个反转后的新数组

 var arr = [1,2,3,4,5]
         var newArr = arr.reverse()
         console.log('arr:',arr)
         console.log('newArr:',newArr)

5. 合并数组concat()

将数组进行合并，不改变参与合并的数组，返回一个新数组

        var arr = [1,2,3]
        var arr1 = [9,8,7]
        var newArr = arr.concat(arr1)

        console.log('arr',arr)
        console.log('arr1',arr1)
        console.log('newArr',newArr)

6. 数组转字符串join()

将数组用连接符拼接成字符串
默认以‘ ，’进行拼接，不改变原数组，返回字符串

        var arr = [1, 2, 3, 6, 5, 4]
        // 默认
        var str1 = arr.join()
        // 空字符连接
        var str = arr.join('')
        // ‘-’连接
        var str2 = arr.join('-')
        console.log('arr',arr)
        console.log('str',str)
        console.log('str',str1)
        console.log('str2',str2)

7. 查找数组数据indexOf()、lastIndexOf()、includes()

// indexOf() 返回数据在数组中第一次出现的索引,若无该数据则返回 -1
// lastIndexOf() 返回数据在数组中最后一次出现的索引,若无该数据则返回 -1
// includes() 查询数组是否有该数据，有为true，没有为false

        var arr = [1, 2, 3, 4, 5, 5, 4, 3, 1, 2, 0, 78]

        var flag1 = arr.indexOf(1)
        var flag2 = arr.lastIndexOf(1)

        var flag3 = arr.indexOf(8)
        var flag4 = arr.lastIndexOf(8)

        var flag5 = arr.includes(78)
        var flag6 = arr.includes(8)
                
        console.log(flag1, flag2, flag3, flag4, flag5, flag6)

—以下为数组的一些复杂方法—

以下方法的参数都是一个函数，我们可以在函数体内进行对数组的一些操作

8. 遍历数组forEach()

       // 8. forEach( item [每项内容] , index [每项下标] , arr [数组本身])  
        var arr = [1,2,3,6,5,4]
        console.log('forEach方法')
        arr.forEach(function (item, index, arr) {
            console.log(item)
            console.log(index)
            // console.log(arr)
            console.log('========================')
        })

9. 过滤数组filter()

可以自己设置过滤条件，当条件为true时返回该项数据

 // 9. filter 过滤方式, 返回值为过滤后的新数组
        var arr = [1,2,3,88,99,100]
        console.log('filter方法')
        var filter_arr = arr.filter(function (item, index, arr) {
            // 将每项内容大于50的输出 
            return item > 50
        })
        console.log(filter_arr)

10. 映射数组 map()

可以自己设置映射条件，当条件为true时返回该项数据

  // 10. map() 映射, 返回值为映射后的新数组。
        var arr = [1,3,5,7,9]
        console.log('map方法')
        var map_arr = arr.map(function (item, index, arr) {
            // 将每项内容扩大二倍返回给新数组
            return item * 2
        })
        console.log(map_arr)

11. 排序数组sort()

sort()方法有三种排序方式：
sort()
sort(function(a,b){a-b})
sort(function(a,b){b-a})

        /* 11.
            1. sort() 按位排序(字符串比较规则)  底层是冒泡排序
            2. sort(function(a,b){return a-b}) 升序排序
                    参数： a 为 后一项， b 为 前一项
                    当function返回值为负数会进行交换
            3. sort(function(a,b){return b-a}) 降序排序

        */
        var arr1 = [1, 21, 33, 65, 4, 8, 9, 10, -9, -1]
        var ret1 = arr1.sort()
        console.log('sort——按位排序 ' + ret1)
        var ret2 = arr1.sort(function (a, b) { return a - b })
        console.log('sort——升序排序 ' + ret2)
        var ret3 = arr1.sort(function (a, b) { return b - a })
        console.log('sort——降序排序 ' + ret3)
        console.log('\n')

12. 查找数组find()、findIndex()

// find(function(item, index){return condition}) 返回第一个匹配成功的数据, 若无匹配的数据返回undefined
// findIndex(function(item, index){return condition}) 返回第一个匹配成功的下标, 若无匹配的数据返回-1
根据return的条件判断，true就返回 ， false就未找到

        var arr = [1,2,3,44,55,66]
        var flag1 = arr.find(function(item,index){
                return item > 30
        })
        var flag2 = arr.find(function(item,index){
                return item > 70
        })
        console.log(flag1)
        console.log(flag2)

        var flag3 = arr.findIndex(function(item,index){
                return item > 30
        })
        var flag4 = arr.findIndex(function(item,index){
                return item > 70
        })
        console.log(flag3)
        console.log(flag4)

13. 判断数组every()、some()

every():判断每一项
some():判断某一项

		// 13. every , 返回值为boolean类型
        var arr = [1,2,3,4,6,50,55,99,88]
        console.log('every方法')
        var every_arr = arr.every(function (item, index, arr) {
            // 判断数组中每一项是否都大于50？ 
            return item > 50
        })
        console.log(every_arr)
        console.log('\n')
        // some , 返回值为boolean类型
        console.log('some方法')
        var some_arr = arr.some(function (item, index, arr) {
            // 判断数组中某一项是否大于50？ 
            return item > 50
        })
        console.log(some_arr)
        console.log('\n')

14. 计算reduce()

reduce(function(prev, cur){},init): 这里 init 可以传递初始值，若不传递则从数组第一项开始

        // 14. reduce , 用于累加或者累乘，返回值为数据
        console.log('reduce方法')
        //  默认初始值为数组第一项, prev上次运算结果,cur是当前项
        var reduce_arr = [10,20,30,40]
        var reduce_data = reduce_arr.reduce(function (prev , cur) {
            return prev+cur
        })
        console.log(reduce_data)
        console.log('\n')

👀补充reduce

📕 reduce是数组的一个方法，它可以对数组进行迭代，通过回调函数对数组每一次迭代进行处理，从而获取到我们想要的结果。
1、reduce方法的参数如下
ok ，结合代码来看看上面总结的是否正确

    list = [1, 2, 3, 4, 5]
    const init = 0
    list.reduce((pre, cur, index, arr) => {
        console.log(pre, cur, index , arr)
        return '我是返回给pre的值'
    })
    console.log('-------------分割线--------------')
    list.reduce((pre, cur, index, arr) => {
        console.log(pre, cur, index , arr)
        return '我是返回给pre的值'

    }, 0)

通过结果发现，第一次没有给初始值。pre将数组第一项当作默认值，cur从第二项开始所以只迭代了四次。每次迭代的返回值都传给了pre， index为当前迭代对象的下标 ，arr为原数组|第二次传递了初始值，迭代也发生了相应的改变

👌: 看到这相信已经明白了reduce的参数以及作用， 下面使用reduce来解决一些问题吧！

1、使用reduce进行数组求和

	list = [1, 2, 3, 4, 5]
    let res = list.reduce((pre, cur)=>{
        console.log('累计和：'+pre,'当前项：'+cur)
        return pre+cur
    })
    console.log('结果： '+res)

2、🤣看注释需求（题目有点长）

    /* 
        需求： 将以下数组type相同的项保留一个votes值最大的， 得到一个新数组
        比如：
            type为1的仅保留votes最大的100, type为2的仅保留votes最大的60...
    */
    var list = [
        { type: 1, des: "aaaa", votes: 80 },
        { type: 2, des: "dddd", votes: 60 },
        { type: 3, des: "dddd", votes: 70 },
        { type: 1, des: "aaaa", votes: 50 },
        { type: 3, des: "dddd", votes: 80 },
        { type: 8, des: "dddd", votes: 80 },
        { type: 9, des: "dddd", votes: 20 },
        { type: 1, des: "aaaa", votes: 100 },
        { type: 3, des: "dddd", votes: 30 },
    ]
    var newArr = list.reduce((pre, cur) => {
        // 查找每次迭代返回的数组中有没有和本次type相同的项
        let foundIndex = pre.findIndex(item => item.type === cur.type)
        console.log(foundIndex)

        
        if(foundIndex !== -1){
            // 如果有就进行votes的比较
            if(cur.votes > pre[foundIndex].votes){
                // 若本次的大于pre中的则进行替换
                pre[foundIndex] = cur
            }
        }else{
            // 若本次没有与当前type相等的就push进数组并且返回
            pre.push(cur)
        }

        return pre
    }, []) //注意,这里的初始值可以为一个空数组哦

    console.log(newArr)

🤷‍♂️reduce就到这里吧！

本文到这就结束啦，加油！