js数组基础知识

断了今生、忘了曾经 提交于 2019-11-26 18:27:18

    通过这篇文章是想通过这个方法让自己的基础知识更牢固一些,让自己能够在脑海中形成一种基础知识的框架。同时也适合那些刚学js的人看。

    数组:Array.prototype.pop(),删除数组末尾元素,返回删除的元素,对原数组改变      

       <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.pop());//返回的是7
        console.log(arr);//返回["1","2","3","5"]
    </script>

            Array.prototype.shift(),删除数组第一个元素,返回删除的元素,对原数组改变   

    <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.shift());//返回的是1
        console.log(arr);//返回["2","3","5","7"]
    </script>

            Array.prototype.push(),向数组末尾添加一个或者多个元素,返回数组的长度,对原数组改变

    <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.push("a"));//返回的是长度6
        console.log(arr.push("b"));//返回的是长度7
        console.log(arr);//对原数组改变 返回的是["1","2","3","5","7","a","b"]
    </script>

            Array.prototype.unshift(),向数组开头添加一个或者多个元素,返回数组的长度,对原数组改变

    <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.shift("a"));//返回的是长度6
        console.log(arr.shift("b"));//返回的是长度7
        console.log(arr);//对原数组改变 返回的是["a","b","1","2","3","5","7"]
    </script>

 

            Array.prototype.slice(start,end),start代表开始下标,end代表结束下标,返回数组中从start到end(不包括end)的数组元素。对原数组不改变。要是想获取数组末尾的元素可以通过arrayObject.slice(-1)方法

    <script>
        var arr = ["1","2","3","5","6","7"];
        arr.slice(2);
        console.log(arr.slice(2),arr);
        console.log(arr.slice(2,5),arr);
    </script>

         Array.prototype.splice()可以向数组中添加或者删除元素,splice和slice不同,splice对数组改变,splice(index,howmany,item,....,itemx),要是splice的参数为三个或者三个以上,当howmany=1的时候,这个是向下标为index的元素替换成(item,...itemx)元素,原数组改变,返回被替换的数组元素,当howmany=0的时候,是将下标为index的位置添加(item,...itemx)元素,原数组改变,返回空数组元素。当splice的参数为两个的时候,splice(start,length),第一个代表元素起始下标,第二个代表长度。当splice参数为一个的时候splice(start),start代表起始下标。我觉得只要掌握正数的情况就差不多了,不要纠结参数是负数的情况,要是自己喜欢钻研的话可以自己试一试。

     

        <script>
		var  arr = ["1","2","3","5","6","7"],
		    _arr = ["1","2","3","5","6","7"],
		    item = ["1","2","3","5","6","7"],
		   _item = ["1","2","3","5","6","7"],
		   arrObj = ["1","2","3","5","6","7"];
		console.log(arr.splice(2,1,"9"),arr);
		console.log(_arr.splice(2,0,"9"),_arr);
		console.log(item.splice(2,2),item);
		console.log(_item.splice(2,1),_item);
		console.log(arrObj.splice(2),arrObj);
	</script>

 

  

 


 

因为splice对原数组改变,所以为了更好的显示出不同参数的情况,写了5个参数名不同内容相同的数组。有一个方法比较常用的技巧就是删除方法,就是splice(start,1),第二个参数传1   Array.prototype.concat(),用于连接两个或者多个数组,对原数组不改变,arrayObject.concat(arrayx,arrayx,...,arrayx)
    <script>
        var  arr = ["1","2","3"],
            _arr = ["a","b","c"];
            console.log(arr.concat(_arr),arr,_arr);
    </script>

 

            

      Array.prototype.sort(),用于对数组的元素进行排序,arrayObject.sort(sortby),sortby可选,该参数必须是函数,要是没有传参数,则是按照字符编码的顺序进行编码,

    <script>
         var arr = ["2","6","1","5","3","9","12","8"];
         console.log(arr.sort());
         console.log(arr.sort(function(a,b){
              return a-b
         }));
    </script>

     Array.prototype.reverse(),用于颠倒数组中元素的顺序arrayObject.reverse()

 

     <script>
        var arr = ["a","b","c","d","e","f"];
        console.log(arr.reverse());
    </script>

     Array.prototype.join(),把数组中所有的元素放入一个字符串,arrayObject.join(separator),返回一个字符串,该字符串是通过把arrayObject的每一个元素转换成字符串,然后把这些字符串连接起来,在两个元素之间插入separator字符串生成的

  

    <script>
        var arr = ["i","w","a","n","t","y","o","u"];
        console.log(arr.join(""));
        console.log(arr.join(" "));
        console.log(arr.join(","));
    </script>

        Array.prototype.forEach(function(element,index){}),调用数组的每一个元素,并将元素传递给回调函数,forEach()对于空数组是不会执行回调函数的,element代表数组中的每一个元素,相当于arrayObject[i],index就是索引,相当于i;

      

    <script>
        var arr = ["a","b","c","d","e","f","g","h"];
        arr.forEach(function(element,index){
             console.log("数组元素:"+element+"索引:"+index);
        })
    </script>

 

   Array.prototype.map(element,index,array),方法返回一个由原数组中的每个元素调用一个指定方法后的返回值组成的新数组。map方法在调用的时候会给回调函数传递三个参数,被正在遍历的元素,元素索引,和原数组本身。

<script>
        var arrObject = ["1","2","3","5"];
        console.log(arrObject.map(function(x){
              return x*x
        }))
        console.log(arrObject.map(function(x){
              return x+x
        }))
        var arr = ["1", "2", "3"];
        arr.map(parseInt);
        console.log(arr.map(parseInt));
        //为什么会打印出[1,NaN,NaN]呢,而不是["1", "2", "3"]呢
        //通常在使用parseInt的时候都只传一个参数,而实际上parseInt有两个参数,第二个参数代表进制数,比如parseInt("123",10),        就代表把字符串123转换成十进制的number数字类型。map方法在调用的时候会给回调函数传递三个参数,被正在遍历的元素,元素索引,和原数组本身。        也就是说parseInt把map方法传进来的第二个参数元素索引当成进制数了,所以比如说当map遍历第二个元素的时候实际上parseInt是这样显示的,parseInt(element,2),        也就是当成二进制来计算了,通常parseInt里面不写进制数,默认的十进制。也就是这样显示的parseInt(element,10);要想返回十进制的数字应该这样操作
        function returnInt(param){
             return parseInt(param,10)
        }
       console.log(arr.map(returnInt));
    </script>

     Array.prototype.indexOf(),Array.proype.lastIndexOf(),返回数组元素在数组中的索引,找到了返回索引值,否则返回-1,lastIndexOf()则是从数组末尾开始返回索引值

     

        <script>
              var arr = ["hello world","i want you","persistence will succeed"];
              console.log(arr.indexOf("hello world"));
              console.log(arr.indexOf("persistence will succeed"));
              console.log(arr.indexOf("hello"));
        </script>

    Array.prototype.filter(function(currentValue,index,arr),thisValue),function(currentValue,index,arr)必选,currentValue表示当前元素的值,index表示当前元素的索引,arr表示为原数组,数组中的每一个函数都会执行这个函数,thisValue可选,对象执行回调的时候使用,用作this的值,省略后this的值是undefined。该方法对原数组不改变

 

    <script>
        var arr = [98,20,32,69,81,25,18];
        console.log(arr.filter(function(x){
             return x > 50
        }))    
        console.log(arr.filter(function(x){
             return x > 90
        }))
    </script>

Array.prototype.every(function(currentValue,index,arr),thisValue),数组中的每一项满足条件才返回true,否则返回false;

     <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.every(function(x){
              return x > 5;
        }))//返回的是false
        console.log(arr.every(function(x){
             return x > 0;
        }))//返回的是true
    </script>

Array.prototype.some(function(currentValue,index,arr),thisValue),只要数组中的一项满足条件就返回true,否则返回false

     <script>
        var arr = ["1","2","3","5","7"];
        console.log(arr.some(function(x){
              return x > 5;
        }))//返回的是true
        console.log(arr.some(function(x){
             return x > 0;
        }))//返回的是true
    </script>

Array.prototype.reduce(function(previousValue,currentValue,currentIndex,array){}),Array.prototype.reduceRight(function(previousValue,currentValue,currentIndex,array){}),数组中的迭代,previousValue代表上一次调用回调函数的返回值,currentValue代表当前正在被调用的回调函数的返回值,currentIndex表示正在被调用的回调函数的索引,array表示被调用的数组,reduce()表示从左向右迭代,reduceRight()表示从右向左迭代

   <script>
        var arr = [1,2,3,4,5];
        console.log(arr.reduce(function(pre,curr){
              return pre+curr;
        }))//返回的是数组中相加的和,15
        console.log(arr.reduceRight(function(pre,curr){
             return  pre*curr;
        }))//返回的是数组中相乘的积,120
    </script>

     利用空余时间,写完了数组中的基础知识,感觉概念瞬间清晰了许多,让写作成为一种习惯,让优秀也成为一种习惯。

     我希望回头时看我走过的每一段路,每一天我都付出了我的全部。——科比布莱恩特

 

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!