JS中数组那些事~

  今天闲的没事,看了一些关于数组的操作,好久木有用过,很多都已经忘记的差不多了,所以今天花了一个小时写了一些demo,准备备份一下方便以后使用~~~

  下面是一些工作当中,经常用到的数组的方法,小伙伴可以自行选择自己的喜好~~~

<!DOCTYPE html>
<html>
<head>
    <title>array</title>
</head>
<body>
    
</body>
<script type="text/javascript">
    
    var 
            arr  = [1,2,3,4,5],
            arr1 = [10,4,5,2,8,99];
            
            /*
                A instanceof B
                A是不是B造出来的
             */
            console.log(arr instanceof Array)  //true

            /*
                Array.isArray(a)
                变量a是否是数组
             */
            console.log(Array.isArray(arr))    //true
            console.log(Array.isArray(2))      //false

            /*
                toString()
                数组转为字符串,用“ , ”链接;
                join也能达到这种效果
             */
            console.log(arr.toString())

            /*
                数组.join('符号')
                将数组以符号链接形成字符串
             */
             console.log(arr.join('$'))
             console.log(arr.join(' '))


            /* push  在数组末尾添加
               pop   在数组末尾删除
            */
            arr.push('paoAfter')
            console.log(arr);
            arr.pop()
            console.log(arr);

            /* unshift  在数组最前面添加
               shift   在数组最前面删除
            */
          arr.unshift('paoUnshift')
          console.log(arr)
          arr.shift()
          console.log(arr)


          /* 数组的排序 */
          /*
              reverse
              数组翻转
           */
          console.log(arr.reverse())

          /*
              sort()  ????
              数组排序,从小到大
           */
           console.log(arr.sort())

           //利用回调函数对数组大小进行排序
           arr1.sort(function (a,b) {
                   return a - b;
           })
           console.log(arr1)


           /* 数组元素的操作 */
           /*
                   数组1.concat(数组2)
                   拼接两个数组
            */
           console.log(arr.concat(arr1))
           //数组去重1:
           Array.prototype.arrUnique = function () {
               // 先排序
               this.sort();
               // 定义一个新数组从排序后的数组的第一个开始接收值
               var arr = [this[0]];
               // 从第二个数值开始比较
               for (var i = 1; i < this.length; i++) {
                   //比较相邻的值不一样时,新数组接收值,达到去重效果
                   //原数组的第一个与新数组的最后一个相比较
                   if( this[i] !== arr[arr.length - 1]) {
                       arr.push(this[i])
                   }
               }
               return arr;
           }

           var arrnew = arr.concat(arr1).arrUnique()
           console.log(arrnew)


           // 数组去重2
           var r=[],
                    arr = ['apple', 'strawberry', 'banana', 'pear', 'apple', 'orange', 'orange', 'strawberry'];
                for(var i=0,len=arr.length;i<len;i++){
                    //如果新的数组中找不到arr数组中的元素,将数组元素存放在新数组中
                    if(r.indexOf(arr[i])===-1){
                        r.push(arr[i]);
                    }
                }

           /*
               slice 数组的截取
               数组.slice(开始的索引,结束的索引)
            */
           console.log(arr.slice(3))     //从索引值为3截取到最后
           console.log(arr.slice(0,3))   //从索引值为1到3截取
           console.log(arr.slice(-2))   //负数后几个

           /*
               数组.splice (开始索引值,删除几个,替换内容1,替换内容2,....)
               同slice有点雷同
            */
           console.log(arr.splice(3))     //从索引值为3截取到最后
           console.log(arr)

           console.log(arr.splice(0,3))   //从索引为0开始删除3个
           console.log(arr)

           console.log(arr1)
           console.log(arr1.splice(1,2,'a','b')) //从索引为1开始删除2个,并用‘a’,‘b’替换删除的内容
           console.log(arr1)

           /*
               数组.indexOf(元素)   (从左往右)
                数组中是否包含元素,如果包含,返回对应的索引;如果不包含,返回-1

                数组.lastIndexOf(元素)   (从右往左)
            */
               console.log(arr1.indexOf(2))   //index:0
            console.log(arr1.indexOf(990))   //-1;查不到


            console.log(arr1.lastIndexOf(2))   //index:0
            console.log(arr1.lastIndexOf(990))   //-1;查不到



            /*  数组迭代 */
            /*
                数组.map(function (item,index,array) { return newArr})
             */
                    var sporter =[{
                                                    name:'aa',
                                                    isHell:null
                                                    },{
                                                    name:'bb',
                                                    isHell:null
                                                    },{
                                                    name:'cc',
                                                    isHell:true
                                                }];
                    var arr2 = [];
                    sporter.map(function (item,index,array) {
                        if ( item.isHell ) {
                            arr2.push(item.name);
                        }
                    })
                console.log(arr2)
                // es6写法
                sporter.map( item => { 
                    if ( item.isHell ) {
                            arr2.push(item.name);
                        }
                })
                console.log(arr2)

                /*
                数组.filter(function (item,index,array) { return newArr})
                返回符合条件的元素为true的数组
             */
            var arr = sporter.filter( item => {return item.isHell});
            console.log(arr)

            var arr = sporter.filter( item =>  item.isHell);
            console.log(arr)

            console.log('-1' == false)  //false

            // 数组去重3
            var 
                    arr3 = [1,2,3,2,3,5,6,6];

            var arr  =    arr3.filter(function(item,index,self) {
                    console.log(item+'----------------'+self)
                        return self.indexOf(item) == index;
                    });
            console.log(arr)

            /*
                every()
                    数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true ;

                some()
                对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true;
             */
            var arr = sporter.every(function (item) {
                return item.isHell;
            })
            console.log(arr)

            var arr = sporter.some(function (item) {
                return item.isHell;
            })
            console.log(arr)

            /*
                forEach()
                和for循环一样,没有返回值
             */
            var arr = sporter.forEach(function(item) {
                item.sex = 'man'
            })
            console.log(arr)   //因为forEach没有返回值,所以是undefined

            /*
                数组.redval(a,b)
                这个方法一般用在累计累加上,实用技巧暂时还没发现。比如,数字数组求和,字符串数组连接上
             */
            // 数组求和,数组的拼接
            var sum=0,arr=[1,2,3,4,5,6];
            sum = arr.reduce(function (a,b) {
                return a + b;
            })

            /*
                数组.find(val)
                方法返回传入一个测试条件(函数)符合条件的数组第一个元素。
             */
            var 
                    arr4 = [1,2,3,4];
            var a    = arr4.find(function(val){
                        return val > 2;
                    })
                    console.log(a)

           /*
            
                   数组.findIndex(val)
                    findIndex:方法返回传入一个测试条件(函数)符合条件的数组第一个元素位置。
                    如果不存在,则返回-1;如果存在满足条件的,返回符合条件的第一个索引;
            */
           var a = arr4.findIndex(function(val) {
                   return val > 4;
           })
           console.log(a) //-1



           /* 数组的清空 */
           var arr5 = ['a','b','c',1];
           arr5.length = 0;  //伪数组无法清空
           console.log(arr5)

           arr5.splice(0);  //从索引为0开始截取到最后一个,伪数组无法清空
           console.log(arr5);

           arr5 = [];   //推荐使用,伪数组可用

           // 伪数组:就是长的像数组,不过没有数组的方法,不能添加删除元素
           fn(111,222,333);
           function fn() {
               arguments.length = 0; //无法清空
               console.log(arguments);

               arguments.splice(0)
               console.log(arguments);  //报错

               arguments = []
               console.log(arguments)
           }

</script>
</html>

好啦,有需要了解的

posted @ 2017-12-06 14:52  Mrspao  阅读(166)  评论(0编辑  收藏  举报