JS 数组及数组常用方法

数组及数组常用方法

数组是对象数据类型，它属于特殊的对象

let ary=[12,23,34,45];
console.log(typeof ary);
console.dir(ary);
/*  
 数字作为索引（KEY 属性名）
 length代表长度

 ary[0] 根据索引获取指定项的内容
 ary.lenght 获取数组的长度
 ary.length-1 最后一项的索引
*/

常用方法（背！！！！）

• 方法的作用和含义
• 方法的实参（类型和含义）
• 方法的返回值
• 原来的数组会不会发生改变

实现数组增删改的方法

这一部分方法都会修改原有的数组

push()

/*   push：向数组末尾增加内容
  @params 
     多个任意类型
  return
       新增后数组的长度 */
let ary=[10,20];
let res=ary.push(30,'AA');
//基于原生JS操作键值对的方法，也可以向末尾追加新一项的内容
ary[ary.length]=40;
console.log(res,ary);

unshift()

/*   push：向数组开始位置增加内容
  @params 
     多个任意类型
  return
       新增后数组的长度 */
       let ary=[10,20];
let res=ary.unshift(30,'AA');
/*  基于原生ES6展开运算符，把原有的ARY克隆了一份，在新的数组中创建第一项，
其余的内容使用原始ARY中的信息即可，也算实现了向开始追加的效果 */
ary=[100,...ary];
console.log(res,ary);
//=>4 (4) [30, "AA", 10, 20]

shift()

/*   shift()：删除数组中的第一项
  @params 
  return
       删除的那一项
        */
  let ary=[10,20,30,40];
  let res=ary.shift( );
  console.log(res,ary); //=> 10  [20, 30, 40]
      

pop()

/*   pop()：删除数组中的最后一项
  @params 
  return
       删除的那一项
        */
 let ary=[10,20,30,40];
  let res=ary.pop( );
  console.log(res,ary);//40 [10,20,30]
  //基于JS也能达到
ary.length--;
console.log(res,ary);//40 [10,20,30]

splice()

 /*   splice()：实现数组的增加、删除、修改  
  @params 
   n,m都是数字 从索引n开始删除m个元素（m不写，是删除到末尾）
  return
       把删除的部分用新数组存储起来返回
        */
         let ary=[10,20,30,40,50,60,70,80,90];
  let res=ary.splice(2,4);
  console.log(res,ary); // => [30, 40, 50, 60]  [10, 20, 70, 80, 90]
  res=ary.splice(0);//清空原数组 返回一个新的数组
  console.log(res,ary); 
  //删除最后一项和第一项
   ary.splice(ary.length -1);
 ary.splice(0,1);
 

数组的查询与拼接

slice();

    /*  slice：实现数组的查询
  @params 
    n，m都是数字 从索引n开始，找到索引韦m的地方（不包含m这一项）
  return
       把找到的内容以一个新的数组的形式返回
    */
   let ary=[10,20,30,40,50,60,70,80,90];
   let res=ary.slice(1,3);
    console.log(res ); //=>[20,30,40,50]
    //数组的克隆
    res =ary.slice(0);
    console.log(res);

concat()

     /*  cancat：实现数组的拼接
  @params 
    多个任意类型值
  return
      拼接后的数组（原来的数组不变）
    */
   let ary1=[10,20,30];
   let ary2=[40,50,60];
   let res=ary1.concat("新年快乐",ary2);
   console.log(res);

把数组转换为字符串

原有的数组不变
tostring

        /* toString：把数组转换成字符串
  @params 
     
  return
      转换后的字符串，每一项用逗号分隔 （原来数组不变）
    */
   let ary=[10,20,30];
   let res=ary.toString();
   console.log(res);//'10,20,30'
   console.log([].toString());//''
   console.log([12].toString())//'12'

join()

   /* join：把数组转换成字符串
  @params 
     指定的分隔符（字符串格式）
  return
      转换后的字符串 （原来数组不变）
    */
   let ary=[10,20,30];
   let res=ary.join('');
   console.log(res);//'102030'

   res=ary.join('|');
  console.log(res);//'10|20|30'

   res=ary.join('+');
   console.log(res);//'10+20+30'
   console.log(eval(res));//60 eval把字符串变为JS表达式执行
   

检测数组中是否包含某一项

indexOf/lastIndexOf/includes

/* 
indexOf/lastIndexOf/includes：检测当前数组中第一次或者是最后一次出现位置的索引值
索引值在（IE6~8中不兼容）
  @params 
     要检索的这一项内容
  return
     这一项出现的位置索引值（数字），如果数组中没有这一项，返回的结果是-1
    */
   let ary=[10,20,30,10,20,30];
   console.log(ary.indexOf(20));//1
   console.log(ary.lastIndexOf(20));//4
   //想验证ary中是否包含新年快乐
   if(ary.indexOf('zhufeng')===-1){
     //不包含
   }
   也可以直接使用es6新提供的includes方法判断
 if(ary.includes('zhufengpeixun')){
   //如果存在返货true
 }

数组的排序或者排列

reverse()

/* 
 reverse：把数组倒过来排序
 
  @params 
     
  return
     排列后的新数组
     原来数组改变
    */
   let ary=[12,15,9,28,10,22];
   ary.reverse();
   console.log(ary);//=>[22,10,28,9,15,12]

sort

/* 
sort：实现数组的排序
 
  @params 
      可以没有，也可以是一个函数
  return
     排序后的新数组 原来数组改变
    */
 let ary=[7,8,5,2,4,6,9];
 ary.sort();
 console.log(ary);//=>[2,4,5,6,7,8,9]
// SORT方法中如果不传递参数，是无法处理10以上数字排序的（他默认按照每一项第一个
//字符来排，达不到真正排序的效果）
//  ary=[12,15,9,28,10,22];
//  ary.sort();
//  console.log(ary);//[10,12,15,22,28,9]

//想要实现多位数正常排序，需要给sort传递一个函数，函数中返回a-b 实现升序，返回b-a实现降序

ary=[12,15,9,28,10,22];
ary.sort((a,b)=>{return a-b;});
console.log(ary)

遍历数组中每一项的方法

forEach

  /* 
forEach：遍历数组中的每一项内容
 
  @params 
      回调函数
  return
     原来数组不变
    */
let ary=[12,15,9,28,10,22];
// for(let i=0;i<ary.length;i++){
//       //i:当前循环这一项的索引
//       //ary[i]:根据索引获取循环的这一项
//       console.log('索引：'+'内容：'+ary[i]);
// }
ary.forEach((item,index) => {
  //数组中有多少项，函数就会被默认执行多少次
  //每一次执行函数：item是数组中当前要操作的这一项，index是当前的索引
  console.log('索引：'+index+'内容：'+item);
});

map
filter
find
reduce
some
every
…