JavaScript数组知识点总结回顾

简介

数组对应数据结构线性表的顺序存储结构，即数组中的元素在内存中是按照物理位置一个挨着一个连续存储的。通常来说数组的大小是固定的，我们在创建数组的时候就确定了数组的元素个数，但是js的数组是天生动态的，数组容量大小可以动态扩展。

数组方法

join()

这个数组的方法是将数组拼接成以某个字符串作为分隔符的字符串。这个方法接收一个字符串参数，作为分隔符。

let arr=[1,2,3];
let resultStr=arr.join('-');
console.log(resultStr);//打印字符串“1-2-3”

reverse()

此方法是数组的元素顺序颠倒，

let arr=[1,2,3];
arr.reverse();
console.log(arr);//arr->[3,2,1]

sort()

数组的sort()方法可以为数组进行排序，它接收一个回调函数作为参数，用来判断数组元素的大小关系，如果不带参数调用，那么如果是字符串默认数组元素按字母表顺排序，如果是数字则按大小顺序排列。

//数字排序
let num=[2,1,3];
num.sort();
console.log(num);//[1,2,3]
//字符串排序
let str=['A','D','C'];
str.sort();
console.log(str);//['A','C','D']
//自定义排序(字符串元素的长度排序)
let customer=['lxy','ldwx','waaa','ym','xj','ljp'];
customer.sort((a,b)=>{ 
  if(a.length==b.length)
    return 0;//这里如果返回0表示两个元素相等
  else if(a.length>b.length)
    return 1;//返回一个大于0的值，表示第一个会回调参数a应该排在b之后
  else
    return -1;//返回一个小于0的值，表示第一个会回调参数a应该排在b之前
})
console.log(customer);//[ 'ym', 'xj', 'lxy', 'ljp', 'ldwx', 'waaa' ]

concat()

数组的concat()方法用来将数组合并返回一个新的数组，它接收任意多个参数，如果参数是数组，那么将参数数组中的元素合并到原数组，如果参数是单个元素，那么把参数直接放入原数组。需要注意的是，此方法不会递归的将数组扁平化，如果数组的元素还是数组，不会做特殊处理。

let arr=[1,2,3];
let newArr1=arr.concat(4,5,6);//newArr1->[1,2,3,4,5,6]
console.log(newArr1);
let newArr2=arr.concat([4,5,6]);//newArr2->[1,2,3,4,5,6]
console.log(newArr2);
let newArr3=arr.concat([4,5,6],7,8);//newArr3->[1,2,3,4,5,6,7,8]
console.log(newArr3);
let newArr4=arr.concat([4,[5,6]],7,8);//newArr4->[1,2,3,4,[5,6],7,8]
console.log(newArr4);

slice()

此方法会截取数组中指定范围的元素并返回一个新的数组。不会对原数组进行修改。它可以接收1到2个数字参数，如果只传递一个参数，则表明截取数组指定位置到最后一个元素之间的元素。

let arr=[1,2,3,4,5,6]
let a=arr.slice(0,2);
console.log(a)//[1,2]
let b=arr.slice(1);
console.log(b)//[2,3,4,5,6]

splice()

splice()方法可以用来在数组中删除可插入元素，删除操作也可以当做对数组的分割，因为删除操作会返回被删除的数组。

第一个参数表示要插入或者删除的起始位置。

第二个参数指定了应该从数组中删除的元素的个数。

如果省略第二个参数，从起始点开始到数组结尾的所有元素都将被删除。

splice（）返回一个由删除元素组成的数组，或者如果没有删除元素就返回一个空数组。

let arr=[1,2,3,4,5,6,7,8,9,10];
//删除
let res=arr.splice(0,5);//arr->[6,7,8,9,10],res->[1,2,3,4,5]，删除0<=index<5的所有元素
let res=arr.splice(5);//arr->[1,2,3,4,5],res->[6,7,8,9,10],删除index>=5之后的所有元素

splice（）的前两个参数表示了需要删除的数组元素。其后的任意多个的参数指定了需要插入到数组中的元素，从第一个参数指定的位置开始插入。

//插入
let res=arr.splice(5,0,11);//从第index=5处插入一个元素11，arr->[1,2,3,4,5,11,6,7,8,9,10]
let res=arr.splice(5,0,11,12,13);//从第index=5处插入一个元素11，arr->[1,2,3,4,5,11,12,13,6,7,8,9,10],res->[]
//删除&插入
let res=arr.splice(5,1,11,12,13);//从第index=5处先删除一个元素，再插入元素arr->[1,2,3,4,5,11,12,13,7,8,9,10],res->[6]

push()和pop()

这两个方法代表从数组的末尾插入和删除数组元素。

let arr=[1,2,3];
arr.push(4);//a->[1,2,3,4]
arr.pop();//a->[1,2]

unshift()和shift()

这两个方法代表从数组的开头插入和删除数组元素。

let arr=[1,2,3];
arr.unshift(4);//a->[4,1,2,3]
arr.shift();//a->[1,2]

forEach()

此方法用来遍历数组的每一个元素。

let arr=[1,2,3];
arr.forEach((item,index)=>{
  console.log(item);
})

需要注意的是，使用这个方法遍历数组无法像使用for循环一样通过break和continue语句控制迭代流程。forEach循环一般一定为遍历完所有元素后才会停止，但是我们可以通过抛出异常来打断遍历过程。

let arr=[1,2,3,4,5,6,7,8,9,10];
function forEach(arr,fn){
    try{
        arr.forEach(fn)
    }catch(e){
        //如果是用来打断遍历的异常，不再抛出
        if(e===forEach.breakError) return;
        throw e;
    }
}
//打断遍历的方法
forEach.break=function(){
    this.breakError=new Error("breakForEach");
    throw this.breakError;
};
forEach(arr,(item)=>{
    if(item===5)
      forEach.break();
    console.log(item)  
})

map()

此方法可以遍历数组并返回一个与原数组的每个元素一一对应的映射数组。此方法不修改原始数组。

let arr=[1,2,3];
res=arr.map((item)=>{
    return item+1;
})
console.log(res)//[2,3,4];

filter()

此方法用于对数组进行过滤并返回过滤后的数组，回调函数返回true或者1代表取这个元素的值，返回false或者0的话会将此元素过滤掉。此方法不修改原始数组。

let arr=[1,2,3,4,5,6,7,8,9];
let res=arr.filter((item,index)=>{
    if(item>5)
      return false;
    else
      return true;
})
console.log(res)//[1,2,3,4];

every()和some()

这两个数组的方法分别用来判断数组对某一条件是否满足。

every()方法接收一个函数作为参数，对数组的每个元素调用它，只有每个函数都返回true，every方法才返回true，否则返回fasle。

let arr1=[1,2,3,4,5];
let arr2=[6,7,8,9];
//数组arr1是否所有元素都大于3
let res1=arr1.every((item)=>{
  if(item>3)
    return true;
  else
    return false;
})
let res2=arr2.every((item)=>{
  if(item>3)
    return true;
  else
    return false;
})
//res1=false,res2=true

some()方法也接收一个回调函数作为参数，对数组的每一个元素调用它，只要存在一个函数调用返回true，some方法就返回true。

let arr1=[1,2,3,4,5];
let arr2=[6,7,8,9];
//数组arr1中是否存在大于7的元素
let res1=arr1.some((item)=>{
  if(item>7)
    return true;
  else
    return false;
})
let res2=arr2.some((item)=>{
  if(item>7)
    return true;
  else
    return false;
})
//res1=false,res2=true

reduce()和reduceRight()

这两个数组的方法是用来计算数组中数据的累计计算结果的，最终会返回一个值。

reduce方法接收连个参数，第一个参数是对数组元素进行处理的回调函数，这个回调函数有四个回调参数，依次分别为目前为止的累计结果、当前元素、当前元素的索引、原始数组；第二个参数是传递给回调函数的初始值，是可选的参数，如果不传，会把数组的第一个元素当做初始值。

let arr=[1,2,3,4,5,6,7,8,9];
//数组所有元素求和
let result=arr.reduce((sum,cur,index,array)=>{
                         return sum+cur
                      },0);
console.log(result);//45

reduceRight和reduce基本一致，只是它的执行方向与reduce相反，它是从后向前执行的。

indexOf()和lastIndexOf()

indexOf和lastIndexOf方法用来查找元素在数组中第一次出现的位置和最后一次出现你的位置。如果元素不存在返回-1；

let arr=[1,2,3,1,4,5];
let index1=arr.indexOf(1);//0
let index2=arr.lastIndexOf(1);//3
let index2=arr.indexOf(7);//-1

类数组对象

一些JavaScript中的对象因为和数组的结构类似，可以使用索引获取元素（属性），并且有length属性表示长度，我们可以像操作数组一样操作它们。比如函数的参数argument、常用的input的file类型得到的files和一些DOM方法（如document.getElementsByTagNam()）返回的类数组对象。这里以file类型的input标签的onchange时间回调的files为例：

let input=document.getElementById('file');
input.onchange=funtion(){
    //使用数组的forEach方法遍历类数组对象
    Array.prototype.forEach.call(this.files,(file)=>{
         console.log(file);
    });
    //过滤获取所有图片文件 
    let images=Array.prototype.filter.call(this.files,(file)=>{
          let type=file.type;
          if(type.indexOf('image/')!=-1){
             return true;
          }else{
             return false;
          }
    })
}

最后

以上内容是自己在阅读了《JavaScript权威指南》之后对数组知识的总结回顾。如有错误，还望指正，如果感觉对你有帮助，欢迎点赞😌😌😌。