【javaScript】数组常用方法 push() pop() unshift() shift() concat() join() reverse() sort() map()

数组常用API
push()
pop()
unshift()
shift()
concat()
join()
reverse()
sort()
map()
forEach()
slice()
splice()
filter()
find()
findIndex()
every()
some()
reduce()
indexOf()
includes()

<template>
    <div>
            Array.push()        // 在数组的末尾添加一个或多个元素    原数组改变，返回新数组
     <br>   Array.pop()         // 在数组的末尾减去一个元素          原数组改变，返回新数组
     <br>   Array.unshift()     // 在数组的开头添加一个或多个元素    原数组改变，返回新数组
     <br>   Array.shift()       // 在数组的开头删除一个元素          原数组改变，返回新数组
     <br>   Array.concat()      // 合并两个或多个数组                原数组不变
     <br>   Array.join()        // 数组转字符串                      原数组不变
     <br>   Array.reverse()     // 数组倒叙                          原数组会改变
     <br>   Array.sort()        // 按字符串UniCode码排序             原数组会改变
     <br>   Array.map()         // 遍历数组(currentValue,index,array)原数组不变
     <br>   Array.forEach()     // 遍历数组，不会返回新数组，比如在方法里进行某个操作可以使用，比如打印  原数组不变
     <br>   Array.slice()       // 对数组进行截取                    原数组不变
     <br>   Array.splice()      // 删除或修改数组                    原数组会改变      (区别，slice的两个参数指的是下标，splice的两个参数，第二个参数是长度)


     <br>   Array.filter()      // 过滤数组                          原数组不会变
     <br>   Array.find()        // 查找数组中的第一个值
     <br>   Array.findIndex()   // 查找数组中符合条件的第一个元素的索引 未找到返回-1

     <br>   Array.every()       // 返回布尔，数组中的每一项都符合，返回true，否则false
     <br>   Array.some()        // 返回布尔，数组中的只要符合一项，返回true，否则false
     <br>   Array.reduce()      //  接收参数作为累加器，两个入参，一个为回调函数，一个为是初始值（可不填）  (（pre,currentValue,index,arr）=>{  },initValue)
     <br>   Array.indexOf()     // 检测当前值在数组中第一次出现的索引，未找到返回-1
     <br>   Array.includes()     // 返回布尔，数组中是否包含一个指定的值
    </div>
</template>

<script>
    export default {
        name: "arrayDemo",
        mounted() {
            // this.pushDemo()
            // this.popDemo()
            // this.unshiftDemo()
            // this.shiftDemo()
            // this.concatDemo()
            // this.joinDemo()
            // this.reverseDemo()
            //this.sortDemo()
            //   this.mapDemo()
            // this.forEachDemo()
            //  this.sliceDemo()
            //   this.spliceDemo()
            //    this.filterDemo()
            //   this.findDemo()
            //    this.findIndexDemo()
            //   this.everyDemo()
            //     this.someDemo()
            //    this.indexOfDemo()
             //    this.includesDemo()
             //    this.reduceDemo()
        },
        methods:{
            pushDemo(){
                var a=[1,2,3,4,5]
                a.push(6,7,8)
                console.log(a) // [1,2,3,4,5,6,7,8]
            },
            popDemo(){
                var a=[1,2,3,4,5]
                a.pop()
                console.log(a) // [1,2,3,4]
            },
            unshiftDemo(){
                var a=[1,2,3,4,5,6]
                a.unshift(-1,0)
                console.log(a)  // [-1,0,1,2,3,4,5,6]
            },
            shiftDemo(){
                var a=[1,2,3,4,5]
                a.shift()
                console.log(a) // [2,3,4,5]
            },
            concatDemo(){
                var a=[1,2,3];
                var b=[4,5,6];
                var c=[7,8,9]
                a.concat(b.c)
                console.log(a) //[1,2,3]
                console.log(a.concat(b,c)) // [1,2,3,4,5,6,7,8,9]
            },
            joinDemo(){
                var a=[1,2,3,4,5]
                a.join()
                console.log(a)   // [1,2,3,4,5]
                console.log(typeof a.join()) // string
                console.log(a.join())        // 1,2,3,4,5
                console.log(a.join('-'))     // 1-2-3-4-5
            },
            reverseDemo(){
                var a=[1,2,3,4,5]
                a.reverse()
                console.log(a) // [5,4,3,2,1]
            },
            sortDemo(){
                var a=['a','n','d','i']
                a.sort()
                console.log(a) // ['a','d','i','n']
            },
            mapDemo(){
                var a=[1,2,3,4,5]
                var b=a.map((currentValue,index,array)=>{
                    return currentValue*2
                })
               console.log(a)   // [1,2,3,4,5]
               console.log(b)   // [2,4,6,8,10]
            },
            forEachDemo(){
             var a=[1,2,3,4,5]
             var b=a.forEach((currentValue,index,arr)=>{
                return currentValue*2
             })
             console.log(a) // [1,2,3,4,5]
             console.log(b) // undefined
             // map 可以返回新数组，forEach不会返回新数组
            },
            sliceDemo(){
             var a=[1,2,3,4,5,6,7]
             a.slice(3,6)  // 当参数为2个时，左闭右开截取
             a.slice(1)    // 当参数为1，正数时，截取从下标到末尾
             a.slice(-2)   // 当参数为负数，从末尾截取该数的绝对值
             console.log(a)
             console.log( a.slice(3,6)) // [4,5,6]  左闭右开  根据下标截取
             console.log(  a.slice(1))  // [2,3,4,5,6,7]       如果是正数，从当前坐标到末尾
             console.log( a.slice(-2))  // [6,7]               如果是负数，从末尾开始截取绝对值长度
            },
            spliceDemo(){
              var a=[1,2,3,4,5,6]
              var b=[1,2,3,4,5,6]
              var c=[1,2,3,4,5,6]
              var d=[1,2,3,4,5,6]
              var e=[1,2,3,4,5,6]

             // 当参数为2个,第一个为索引，第一个为长度
             a.splice(0,4)
             console.log(a)       // [5,6]
             // 当参数为1个,正数 删除该下标及到末尾的
             b.splice(3)
             console.log(b) // [1,2,3]
             // 当参数为1个，负数  删除从末尾开始的绝对值
             c.splice(-2)
             console.log(c) // [1,2,3,4]

             // 当参数为数值0时，清空数组
             d.splice(0)
             console.log(d) // []
             // 当参数为3个及以上，表示修改，第一个参数为起始位置，第二个参数为数量，第三个参数为需要修改的对象
             e.splice(2,3,6,6,6)
             console.log(e) // [1,2,6,6,6,6]



            },
            filterDemo(){
              var a=[1,2,3,4,5,6]
              var b=a.filter((currentValue,index,arr)=>{
                 return currentValue>3
              })
              console.log(b) // [4,5,6]

              // 数组去重例子
             var c=[1,2,2,'a','b','a',true,true]
             var d=c.filter((currentValue,index,arr)=>{
               return arr.indexOf(currentValue)===index
             })
             console.log(d) // [1,2,'a','b',true]
            },
            findDemo(){
             var a=[1,2,3,4,5,6,7,8];
             var b=a.find((currentValue,index,arr)=>{
              return currentValue>5
             })
             console.log(b) //6
            },
            findIndexDemo(){
             var a=['a','b','c','d','e']
             var b=a.findIndex((currentValue,index,arr)=>{
              return currentValue=="d"
             })
             console.log(b) //3
            },
            everyDemo(){
             var a=[2,4,6]
             var b=a.every((currentValue,index,arr)=>{
                return currentValue%2==0
             })
             console.log(b) //true
            },
            someDemo(){
             var a=[1,2,4,6]
             var b=a.some((currentValue,index,arr)=>{
              return currentValue%2===0
             })
             console.log(b) //true

            },
            indexOfDemo(){
             var a=['a','b','c','d','e','f']
             var b=a.indexOf('d')
             console.log(b) //3

            },
            includesDemo(){
             var a=[1,2,3,4,5,6,7]
             a.includes(5)
             console.log(a.includes(5))//true
            },
            reduceDemo(){
               var a=[1,2,3,4,5,6]
               // pre 是累加后的值，currentValue,index,arr里选择需要的值，initValue为初始值，如果不需要初始值，则不用写
               //  相加例子
               var arr=[1,2,3,4,5]
               var addArr=arr.reduce((pre,value)=>{return pre+value})
               console.log(addArr)  //15

               //再举个栗子
               var b=a.reduce((pre,currentValue,index,arr)=>{
                  console.log(pre,currentValue,index,arr)
                  return pre+currentValue
               },9)
               console.log(b) //30
            }

        }
    }
</script>

<style scoped>

</style>