js数组详解

时间  2019-12-07
标签 数组 详解 栏目 JavaScript 繁體版
原文   原文链接

数组初认识

Array是js中的引用数据类型，除了Object外，Array几乎是ECMAScript中最经常使用的数据类型了。前端

js中的数组与其余语言的不一样之处编程

  1. 能够保存任意的数据类型数组

  2. 数组长度动态调整数据结构

栈方法

ECMAScript中提供了让数组的行为相似于栈的方法，便可以让数组表现的如同栈的LIFO数据结构通常，方法分别是push，pop函数

push

用法：该方法接收任意数量的参数，把他们逐个添加到数组的末尾，并返回修改后数组的长度测试

DEMOthis

var nums=[];
    var len =nums.push(1,2,3);//一次性添加三个元素 返回修改后的数组长度3
        console.log(nums,'len='+len);
        len=nums.push(4);//添加一个元素 返回数组修改后的数组长度4
        console.log(nums,'len='+len);

测试
栈 pushspa

pop

用法：该方法删除数组最后一项，减小length的值，而且返回被删除的元素code

DEMO对象

var nums=[1,2,3,4];
    var returnNum=nums.pop();//删除最后一项 并返回
        console.log('len='+nums.length,'returnNum='+returnNum);

测试
栈 pop

栈常见应用之数制转换

进行数制之间的相互转换是是编程中常常碰见的问题，咱们能够利用数组栈的这个特性来完成这个操做
DEMO

//该函数接收一个整型数字，以及要转化的数制基数
     function mulBase(num,base){
        var numArr=[];
        do{
           numArr.push(num%base);//入栈
           num=Math.floor((num/base))
        }while(num>0);
        var converted='';
        while(numArr.length>0){
           converted+=numArr.pop();//出栈
        }
        return converted;
    }

测试
栈 进制转换

栈常见运用之回文判断

回文：回文是指这样的一种现象 一个单词、短语、或者数字，从前日后写和从后往前写都是同样的。例如单词"dad"、"racecar"。
DEMO
function isPalindrome(word){

var word=''+word;
var wordArr=[];
    for(var i=0;i<word.length;i++){
        wordArr.push(word.charAt(i));//入栈
    }
var reWord='';
    while(wordArr.length>0){
        reWord+=wordArr.pop();//出栈
    }
    return reWord == word?true:false;

}
测试
回文判断

队列方法

栈数据结构的访问规则是LIFO(后进先出),而队列数据结构的访问规则是FIFO(先进先出),即队列在末端添加项，在前端移除项。实现这一结构的方法是push(末端添加),shift(前端移除),前面已经说过push，接下来主要说shift

shift

shift方法可以移除数组的第一项而且返回该项，同时将数组的长度减一

DEMO

var arr=[1,2,3,4];
    var reNum=arr.shift();//1
        console.log(reNum,arr.length)//1,3

测试
shift测试

unshift

unshift与shift做用相反，在数组的前端添加任意个项，而且返回该数组的长度。

DEMO

var arr=[1,2,3,4];
var reLen=arr.unshift(0);//5
    reLen2=arr.unshift(-2,-1);//7
    console.log('reLen='+reLen,'reLen2='+reLen2,'arr='+arr)

测试
unshift测试

排序方法

数组中存在两个直接用来排序的方法：reverse和sort，其中reverse用来逆反数组，sort则默认按照字母顺序进行排序。

reverse

reverse 将对原来的数组进行反转，并返回改变后的数组，其会改变原数组的值。

DEMO

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

测试
reverse测试

sort

在默认状况下，sort方法按照升序排列数组项，为了实现排序，sort会调用每一个数组项的toString方法，而后比较获得的字符串，以肯定如何进行排序。故sort方法是经过字符串进行比较的，即便数组的每一项是数字类型亦是如此。

DEMO

var sortArr=[0,1,5,10,15];
        sortArr.sort();
        console.log(sortArr);//0,1,10,15,5

测试
sort排序
为了可以对数组进行咱们想要的排序，能够给sort传一个比较函数做为参数

var sortArr=[0,1,5,10,15];
        sortArr.sort(function(a,b){
            return a-b//升序
            /*
                return b-a//降序
            */
        });
        console.log(sortArr);//[0,1,5,10,15]

测试
sort从新排序

转换方法

全部对象都有toLocalString()、toString()、valueOf()方法。

toString

将一个值转换成一个字符串有两种方法，一是使用toString()方法，二是使用转型函数String() (固然还有添加空字符串的方式)

如下几点须要注意

  1. 几乎全部值都有toString方法，说明有的值是没有的，好比null、undefined
    推荐观看toString

var num=10;
    var boolean1=true;
    var str='谦龙';
    var obj={"name":"谦龙"};
    var arr=[1,2,3,4];
    var nul=null;
    var undefined1=undefined;
    
    console.log( num.toString())
    console.log( boolean1.toString())
    console.log( str.toString())
    console.log( obj.toString())
    console.log( arr.toString())
    console.log( nul.toString())
    console.log( undefined1.toString())

测试
toString各数据类型

  1. 对于字符串类型的数值也可使用toString方法，返回值是该字符串的副本

  2. toString方法接收一个参数，表示将要转换的数值的基数(默认是10)，注意只最数值起做用

DEMO

var num=10;
    var num2='10';
    console.log(num.toString()) // '10'
    console.log(num.toString(2))// '1010'
    console.log(num.toString(8))// '12'
    console.log(num.toString(16))//'a'
    console.log(num2.toString(2)) // '10'不是1010  只对数值起做用

测试
toString 数值

valueOf

返回指定对象的基元值。

推荐观看valueOf
DEMO

var arr=[1,2,3,4];
var bl=true;
 function fn(){console.log('谦龙')};
var num=10;
var str='谦龙';
var obj=/\d/;
console.log(arr.valueOf(),typeof( arr.valueOf()));
console.log(bl.valueOf(),typeof( bl.valueOf()));
console.log(fn.valueOf(),typeof( fn.valueOf()));
console.log(num.valueOf(),typeof( num.valueOf()));
console.log(str.valueOf(),typeof( str.valueOf()))
console.log(obj.valueOf(),typeof( obj.valueOf()));

测试
valueOf描述

toLocalString

toLocalString方法做用几乎和toString相同

join

将数组中的元素用不一样的分隔符链接成字符串（默认是"，"号）

DEMO

var arr=[1,2,3,4,5];
        console.log(arr.join());
        console.log(arr.join(''));
        console.log(arr.join('+'))

测试
join描述

操做方法

concat

concat方法能够基于当前数组中的全部项建立一个新的数组，具体来讲：

  1. 该方法会先建立一个当前数组的副本，而后将接收到的参数添加到这个数组的末尾，最后返回新构建的数组。

  2. 若是传递的是一个或者多个数组，则会将这些数组中的每一项都添加到结果数组中。

  3. 若是传递的不是数组，这些值就会被简单的添加到结果数组的末尾。
    DEMO

var sourceArr=[0];
    var reArr=sourceArr.concat(1,[2,3],[4,5]);
        console.log('sourceArr'+sourceArr,'reArr'+reArr);

测试
concat

slice

基于当前数组的一项或者多项建立一个新的数组，slice方法接受一个或者两个参数。一个参数时：返回该参数指定的位置到当前数组末尾的全部项。两个参数时：返回起始位置到结束位置之间的项（不包括结束位置而且该方法不影响原来的数组）

DEMO

var arr=[1,2,3,4,5];
    var arr2=arr.slice(0);// 0-末尾全部元素
    var arr3=arr.slice(0,3)// 0-3 不包括3的位置的元素
    var arr4=arr.slice(-3,-1);//即最后一个元素是-1 以此往左类推 因此获得的结果是[3,4]
    console.log(arr2);
    console.log(arr3);
    console.log(arr4);

测试
slice

splice

slice方式能够说是数组中功能最强大的方法，能够完成任意位置的插入，删除和替换操做

插入：能够向任意位置插入任意数量的项，提供三个参数--插入的起始位置、0（删除元素的个数）、插入的元素（若是要插入多个元素，再传入第四第五...个参数），返回被删除的项目（若是没有被删除的元素返回的是[]空数组）。
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(1,0,'谦龙','谦龙2','谦龙3');
    console.log(arr,reArr);

splice插入
删除：能够删除任意数量的项，须要指定2个参数，要删除的第一项的位置和要删除的项数。
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(0,2);
    console.log(arr,reArr);
    
    var arr=[1,2,3,4,5];
    var reArr=arr.splice(5,2);//注意这里的5不在数组的范围内
    console.log(arr,reArr)

splice删除

替换:能够向指定的位置插入任意数量的项，且同时删除任意数量的项，须要提供三个参数
DEMO

var arr=[1,2,3,4,5];
    var reArr=arr.splice(0,2,'谦龙');
    console.log(arr,reArr)

测试
splice删除替换

位置方法

数组中有两个位置方法：indexOf和lastIndexOf。都接收两个参数---要查找的项和（可选）表示查找起点的索引。其中indexOf从数组开头开始日后查找，lastIndexOf从后往前查找，返回值是项在数组中的位置或者-1（没有找到）

indexOf 和 lastIndexOf

DEMO

var arr=[1,2,3,'谦龙',4,5,'谦龙',6];
    console.log(arr.indexOf('谦龙'));//3
    console.log(arr.indexOf('帅哥'));//-1
   console.log(arr.lastIndexOf('谦龙'));//6

测试
位置方法

迭代方法

ECMAScript为数组定义了5个迭代的方法，每一个方法均可以接受两个参数，要在每一项运行的函数和（可选）运行该函数的做用域对象---影响的是this的值。而传入的函数有三个参数分别是：数组项的值，索引，数组自己。

forEach

对数组的每一项运行给定的函数，没有返回值。

DEMO

var arr=[1,2,3,4,5];
        arr.forEach(function(item,index,arr){
            console.log(item,index,arr);
        })

测试
forEach测试
特别注意：除了以上的基本用法，forEach中默认的this指的是window对象，因此其能够接受一个用来改变this的参数。
DEMO

var arr=[1,2,3,4];
arr.forEach(function(item,index,arr){
   console.log(this)
},arr);

测试
forEach this指向发生改变

map

对数组的每一项运行有返回值的函数，最后映射成一个新的数组。

DEMO

var arr=[1,2,3,4,5];
    arr.map(function(item,index,arr){
    console.log(this);
    return item*item;
    },arr)

测试
map测试

filter

有过滤筛选的含义，接收一个有返回值为弱==true的函数，最后返回一个过滤后的新数组。关于this指向的问题与上面的forEach和map是同样的

DEMO

var arr=[1,2,3,4,5,6,7];
    var newArr=arr.filter(function(item){
     if(item%2==0){
        return true;//返回值为布尔
      }
      //也能够直接写成 return item%2;
    })
    console.log(newArr)

测试
图片描述

every 和some

接收一个返回值为布尔值的函数，若是对于数组中的每一项，该函数都是返回true则，该方法返回true。注意该方法和前面的几个方法不一样，不会返回数组，而是返回一个布尔值。some也是如此

DEMO

var arr=[1,2,3,4,5];
        var b=arr.every(function(item){
            return item%2==0?true:false;
        });
        console.log(b) 
        
        ar arr=[1,2,3,4,5];
        var b=arr.some(function(item){
            return item%2==0?true:false;
        });
        console.log(b)

测试
every some应用

减少方法

ES5中对数组新增了两个"缩小"方法(ps:缩小是相对的)，这两个方法都会迭代数组中的每一项，而后构建一个最终的返回值。reduce从第0项开始，ruduceRight从末尾开始。

reduce

该函数接收一个函数参数，函数接受4个参数：以前值、当前值、索引值以及数组自己。initialValue参数可选，表示初始值。若指定，则看成最初使用的previous值；若是缺省，则使用数组的第一个元素做为previous初始值，同时current日后排一位，相比有initialValue值少一次迭代。

DEMO

var arr=[1,2,3,4];
    var sum=arr.reduce(function(pre,cur,index,arr){
        return pre+cur;
    });
    console.log(sum)

测试
reduece

// 初始设置
pre = initialValue = 1, cur = 2

// 第一次迭代
pre = (1 + 2) =  3, cur = 3

// 第二次迭代
pre = (3 + 3) =  6, cur = 4

// 第三次迭代
pre = (6 + 4) =  10, cur = undefined (退出)

reduceRight

该函数接收一个函数参数，函数接受4个参数：以前值、当前值、索引值以及数组自己。initialValue参数可选，表示初始值。若指定，则看成最初使用的previous值；若是缺省，则使用数组的第一个元素做为previous初始值，同时current日后排一位，相比有initialValue值少一次迭代。

DEMO

var arr=[1,2,3,4];
var reNum=arr.reduceRight(function(pre,cur,idnex,arr){
return pre+cur;
})
console.log(reNum)

测试
reduceRight测试

// 初始设置
pre = initialValue = 4, cur = 3

// 第一次迭代
pre = (4 +3) =  7, cur = 2

// 第二次迭代
pre = (7 + 2) =  9, cur = 1

// 第三次迭代
pre = (9 + 1) =  10, cur = undefined (退出)
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程