JavaScript数组笔记


数组

一、数组介绍与创建

1、什么是数组 ,数组的特点

数组是一个引用列表,数据的组合,每个数据使用逗号分隔

特点:紧密性,按顺序排列,可以重复,数据可以是任何类型

2、数组的构成

数组由索引(下标),元素,数组长度构成

索引:数组中的数据按照顺序排列,从0开始,这个就是数组的索引,也就是下标

元素:数组中的每个数据就叫做元素

数组长度:可以理解为元素的个数,数组最大下标+1就是数组的长度

3、数组的创建

  • 字面量创建
var arr=[1,2,3];//完成数组的创建,里面有3个元素
//arr是数组,下标从0开始,arr[下标]就是数组的元素,这里arr[0]就为1
  • 构造函数创建

var arr=new Array(10);//如果只有一个参数,并且参数是正整数,这个数就是数组的长度,而不作为数组的新元素;如果是数字,但不是正整数,都会报错,如果不是数字,则作为数组的第一个元素添加
console.log(arr);//[empty*10]
var arr1=new Array(1,2,3);//不止一个参数,作为元素添加
console.log(arr1);//[1,2,3]
var arr=Array(10);//与new Array 效果一致,不同在于这是把字符串转换数组类型,而new Array是构造函数实例化对象

二、数组方法

转换为数组的方法

//ES6   Array.from(要转换的列表)
//ES5   Array.prototype.slice.call(要转换的列表)
//         [].slice.call(要转换的列表)
//      Array.prototype.concat.apply([],要转换的列表)
//      [].concat.apply([],要转换的列表)

1、push()

往数组最后位置添加一个或多个元素,返回数组的新长度,改变原数组

var arr=[1,2,3,4];
var len=arr.push(5,6);
console.log(arr,len);//[1,2,3,4,5,6],新长度6

2、pop()

删除数组最后一个元素,返回被删除的元素,改变原数组

var arr=[1,2,3,4];
var arr1=arr.pop();
console.log(arr,arr1);//[1,2,3],删除元素4

3、unshift

往数组最前面添加一个或多个元素,返回数组新长度,改变原数组

var arr=[1,2,3,4];
var len=arr.unshift(5,6);
console.log(arr,len);//[5,6,1,2,3,4],新长度6

4、shift

删除数组的第一位,返回被删除的元素,改变原数组

var arr=[1,2,3,4];
var arr1=arr.shift();
console.log(arr,arr1);//[2,3,4],删除元素1

5、sort

排序,按照ASCII码排序,二位数按照第一位排序,在sort里面写匿名函数给入参数a,b;return a-b表示升序,return b-a表示降序,改变原数组

var arr=[2,4,1,3,5,11];
arr.sort();
console.log(arr);//[1,11,2,3,4,5]
var arr1=arr.sort(function(a,b){
        return a-b;
})
console.log(arr,arr1);//[1,2,3,4,5,11],[1,2,3,4,5,11]

6、reverse

反转,可以配合sort完成倒序,改变原数组

var arr=[2,3,1,5];
var arr1=arr.reverse();
console.log(arr,arr1);//[5,1,3,2],[5,1,3,2]
var arr2=arr.sort().reverse();
console.log(arr2);//[5,3,2,1]

7、splice

给数组中插入,删除,替换一个或多个元素,返回删除的元素组成的数组,改变原数组。

三个参数splice(起始位置,删除个数,添加元素);参数可以为负数表示倒数第几位;只有一个参数表示清空数组;没有第三个元素表示删除;第二个参数为0,表示插入,1以上表示替换

//清空数组
var arr=[1,2,3,4];
var arr1=arr.splice(0);
console.log(arr,arr1);//[],[1,2,3,4]
//删除元素
var arr=[1,2,3,4];
var arr1=arr.splice(1,2);
console.log(arr,arr1);//[1,4],[2,3]
//插入元素
var arr=[1,2,3,4];
var arr1=arr.splice(1,0,5);
console.log(arr,arr1);//[1,5,2,3,4],[]
//替换元素
var arr=[1,2,3,4];
var arr1=arr.splice(1,2,5);
console.log(arr,arr1);//[1,5,4],[2,3]

上面七种方法都会改变原数组,上面七种方法都会改变原数组

8、slice

截取数组,返回截取的新数组,不会改变原数组;slice(开始截取位置,结束位置前一位),如果没有 第二个参数,默认截取到尾部,可以完成数组浅复制

var arr=[1,2,3,4];
var arr1=arr.slice(1,3);
var arr2=arr.slice(2);
var arr3=arr.slice();//复制数组
console.log(arr,arr1,arr2,arr3);//[1,2,3,4],[2,3],[3,4],[1,2,3,4]
var arr=[1,2,3,4];
var arr1=arr.slice(1,3);
var arr2=arr.slice(2);
var arr3=arr.slice();//复制数组
console.log(arr,arr1,arr2,arr3);//[1,2,3,4],[2,3],[3,4],[1,2,3,4]

9、concat

连接两个或更多数组,返回连接的数组,可以完成数组 浅复制

var arr=[1,2];
var arr1=[3,4];
var arr3=arr.concat(arr1,5,6);
console.log(arr3);//[1,2,3,4,5,6]
var arr4=arr.concat();//浅复制

10、join

返回字符串,将数组元素以指定符号连接为字符串返回出来,默认”,”连接

var arr=[1,2,3,4];
var str=arr.join();
var str2=arr.join(".");
console.log(str,str2);//1,2,3,4    1.2.3.4

11、indexOf lastIndexOf

查找元素,找到返回元素的下标,没找到则返回-1

indexOf 从前往后查找 lastIndexOf 从后往前查找

var arr=[1,2,3,4];
var index=arr.indexOf(2);
var index1=arr.indexOf(5);
console.log(index,index1);//下标1  -1没找到
//判断元素2在数组中出现几次
var arr=[1,2,2,3,4,2,4,5,7,8,2,10];
var index=-1;
while(~(index=arr.indexOf(2,index+1))){
    console.log(index);//1,2,5,10
}

高阶函数方法

12、forEach()

遍历数组,没有返回结果,不会遍历空元素

var arr=[1,2,3,4];
var res=arr.forEach(function(item,index,arr){
    console.log(item,index,arr);//三个参数,分别为元素,下标,遍历的数组
    return item;
});
console.log(res);//undefined  没有返回值

13、map()

遍历数组,不会遍历空元素,有返回结果,返回的是与遍历数组相同长度的新数组,里面的元素根据map回调函数的return来决定,没有return则undefined作为元素返回

var arr=[1,2,3,4];
var arr1=arr.map(function(item,index,arr){
    //三个参数,分别为元素,下标,遍历的数组
    return item*10;
})
console.log(arr1);//[10,20,30,40]

14.some()

遍历数组,不会遍历空元素,返回布尔值,如果回调函数中有一个条件满足返回true,否则返回false

var arr=[1,2,3,4];
var bool=arr.some(function(item,index,arr){
    return item>3;
})
console.log(bool);//true  有一个元素4满足条件

15.every()

遍历数组,不会遍历空元素,返回布尔值,如果回调函数中全部满足条件返回true,否则返回false

var arr=[1,2,3,4];
var bool=arr.every(function(item,index,arr){
    return item>1;
})
console.log(bool);//false  有一个元素1不满足条件

16.filter()

过滤,遍历数组,不会遍历空元素,返回新数组,将遍历数组中满足条件的元素作为新数组元素添加

var arr=[1,2,3,4];
var arr1=arr.filter(function(item,index,arr){
    return item>2;
})
console.log(arr1);//[3,4]

17、reduce()

归并 arr.reduce(function(上次归并值,本次遍历的元素,索引值,数组),初始化值);返回最终归并值

如果没有设置初始化值,上次归并值初始值为数组的第0项,本次遍历将从下标1开始

如果设置了初始化值,上次归并值初始值就是初始化值,本次遍历将从下标0开始

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

18、delete

删除数组元素,不会造成数组的自动收缩,紧密,数组的长度不会发生改变

var arr=[1,2,3,4];
delete arr[2];
console.log(arr);//[1,2,empty,4]

三、数组遍历

1、for循环

使用for循环遍历数组,可以遍历到空元素

var arr=[1,2,,3];
for(var i=0;i<arr.length;i++){
   console.log(arr[i]);//1,2,undefined,3
}

2、for in循环

for in循环可以遍历到数组的可枚举属性,不能遍历空元素

var arr=[1,2,,3];
for(var prop in arr){
    console.log(arr[prop]);//1,2,3
}

3、forEach

forEach() 不遍历空元素,也不遍历属性

4、map

map不遍历空元素

四、数组去重

1、常规方法

var arr=[1,2,2,4,3,4,5,4,2,6,2,7];
var arr1=[];
for(var i=0;i<arr.length;i++){
    var bool=false;
    for(var j=0;j<arr1.length;j++){
        if(arr[i]===arr1[j]){
            bool=true;
            break;
        }
    }
    if(!bool){
        arr1.push(arr[i]);
    }
}
arr=arr1.splice(0);
arr1=null;
console.log(arr);//[1,2,4,3,5,6,7]

2、使用indexOf

var arr=[1,2,2,4,3,4,5,4,2,6,2,7];
var arr1=[];
for(var i=0;i<arr.length;i++){
    if(arr1.indexOf(arr[i])<0){
        arr1.push(arr[i]);
    }
}
arr=arr1.splice(0);
arr1=null;
console.log(arr);//[1,2,4,3,5,6,7]

3、使用delete和for in

var arr=[1,2,2,4,3,4,5,4,2,6,2,7];
for(var i=0;i<arr.length;i++){
    if(~arr.indexOf(arr[i],i+1)) delete arr[i];
}
var arr1=[];
for(var prop in arr){
    //利用for in不能遍历到数组空元素,所以空元素不会添加至arr1数组
    arr1.push(arr[prop]);
}
arr=arr1.splice(0);
arr1=null;
console.log(arr);//[1,3,5,4,6,2,7]

五、数组排序

1、冒泡排序

  • 从后向前循环

  • 内部从前向后循环到外层变量

  • 判断前前值是否大于后值,交换

var arr = [5,1,2,4,3,6];
function sort1(arr){
    var len=arr.length-1;
    while(len>0){
        for(var i=0;i<len;i++){
            if(arr[i]>arr[i+1]){
                var temp=arr[i];
                arr[i]=arr[i+1];
                arr[i+1]=temp;
            }
        }
        len--;
    }
    return arr;
}
console.log(sort1(arr));//[1,2,3,4,5,6]

2、选择排序

  • 遍历数组

  • 设置最新的索引值为当前的索引值

  • 从当前的下一项开始遍历到数组的尾部

  • 判断所有遍历的值中最小的值的索引值

  • 交换当前值和最小索引值的元素

var arr = [5,1,2,4,3,6];
function sort2(arr){
    var minIndex;
    for(var i=0;i<arr.length-1;i++){
        minIndex=i;
        for(var j=i+1;j<arr.length;j++){
            minIndex=arr[minIndex]<arr[j] ? minIndex : j;
        }
        var temp=arr[i];
        arr[i]=arr[minIndex];
        arr[minIndex]=temp;
    }
    return arr;
}
console.log(sort2(arr));//[1,2,3,4,5,6]
  • 3、快速排序

  • 删除数组中间的元素,并且将这个元素返回一个变量

  • 创建两个空数组,一个是left,一个是right,遍历这个数组,将小于中间元素的数据存入left,大于中间元素的数据存入right

  • 将left数组递归与中间元素和right数组递归的结果合并返回

  • 在函数最顶部,一定要写数组长度小于等于1返回该数组

  • 得到的数组重新赋值给原数组

var arr = [5,1,2,4,3,6];
function sort3(arr){
    if(arr.length<=1) return arr;
    var item=arr.splice(parseInt(arr.length/2),1)[0];
    var left=[],right=[];
    for(var i=0;i<arr.length;i++){
        if(arr[i]<item) left.push(arr[i]);
        else right.push(arr[i]);
    }
    return sort3(left).concat(item,sort3(right));
}
var arr=sort3(arr);
console.log(arr);//[1,2,3,4,5,6]

 

原创文章,作者:sunnyman218,如若转载,请注明出处:https://blog.ytso.com/tech/webdev/272535.html

(0)
上一篇 2022年7月9日 07:19
下一篇 2022年7月9日 07:19

相关推荐

发表回复

登录后才能评论