ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

JavaScript数组笔记

2022-06-11 09:35:14  阅读：192  来源： 互联网

标签：arr console log JavaScript 笔记 数组 var arr1


数组

一、数组介绍与创建

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]

 

标签：arr,console,log,JavaScript,笔记,数组,var,arr1
来源： https://www.cnblogs.com/chen52125/p/16365251.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有