js数组方法大全

<template>
  <view>
  </view>
</template>
<script>
export default{
methods:{
// 创建数组
// 创建空数组
onCreateEmptyArray () {
 let arr1 = []
 let arr2 = new Array()
 let arr3 = Array.of()//es6新增
 console.log("arr1:",arr1,"arr2:",arr2,"arr3:",arr3)
  },
 // 创建非空数组
 onCreateFullArray(){
  var arr5 = [20];   // 创建一个包含1项数据为20的数组
  var arr6 = ["lily","lucy","Tom"];   // 创建一个包含3个字符串的数组
  // 如果只传一个数值参数，则表示创建一个初始长度为指定数值的空数组
   var arr7 = new Array(20);  
  console.log("arr7:",arr7)
  // 如果传入一个非数值的参数或者参数个数大于 1，则表示创建一个包含指定元素的数组。
  var arr8 = new Array("lily","lucy","Tom");   // 创建一个包含3个字符串的数组
  var arr9 = new Array( 23 ); // ["23"]
  console.log("arr8:",arr8,"arr9:",arr9)
  let arr10 = Array.of(1, 2);//[1,2]
  console.log("arr10:",arr10)
  },
    
    
    
  // 将数组转换为字符串：join方法
  onTransArray(){
   var arr = [1,2,3];
   console.log('没有分隔符',arr.join(""))//123
  console.log("默认用逗号作为分隔符:",arr.join())//1,2,3
 console.log("参数任意参数作为分隔符:",arr.join("-"))//1-2-3
 console.log("arr:",arr)//join方法不会修改原数组[1,2,3]
  },
    
    
 // 删除数组第一项：shift;删除数组最后一项：pop
 onDeleteItem(){
   let arr1 = ['a','b','c']
   let arr2 = [1,2,3]
   let shiftArr1 = arr1.shift()//返回值是删除的内容
   let popArr2 = arr2.pop()//返回值是删除的内容
   console.log("shiftArr1",shiftArr1)
   console.log("popArr2",popArr2)
   console.log("arr1",arr1)//会修改原数组
   console.log("arr2",arr2)//会修改原数组
  },
    
    
  //给数组第一项unshift或者最后一项push添加内容
   onAddItem(){
      let arr1 = ['a','b','c']
      let arr2 = [1,2,3]
      let unshiftArr1 = arr1.unshift("d","f")//返回值是新数组的长度
      let pushArr2 = arr2.push(4,5)//返回值是新数组的长度
      console.log("unshiftArr1",unshiftArr1)
      console.log("pushArr2",pushArr2)
      console.log("arr1",arr1)//会修改原数组
      console.log("arr2",arr2)//会修改原数组
    },
      
      
  // 连接数组concat，只能把数组拆分一次
      onConcatArray(){
        var arr = [1,3,5,7];
        var arrCopy = arr.concat(9,[11,13]);
        var arrCopy1 = arr.concat([9,10,11])//[1,3,5,7,9,10,11],相当于合并数组
        console.log("arrCopy:",arrCopy);   //[1, 3, 5, 7, 9, 11, 13]传入的不是数组，则直接把参数添加到数组后面，
        console.log("arr:",arr);   // [1, 3, 5, 7](原数组未被修改)
        var arrCopy2 = arr.concat([9,[11,13]]);//连接二维数组
        console.log(arrCopy2);   //[1, 3, 5, 7, 9, Array[2]]
      },
        
        
        // 截取数组slice
        onSliceArray(){
          var arr = [1,2,3,4]
          var sliceArray = arr.slice(1)//只有一个参数，结束位置是当前数组末尾，返回截取的新数组
          var sliceArray1 = arr.slice(1,3)//两个参数，包含开始不包含结束，[2,3]
          var arrCopy3 = arr.slice(1,-2);//相当于arr.slice(1,4),当出现负数时，将负数加上数组长度的值（6）来替换该位置的数
          console.log(sliceArray,sliceArray1,arrCopy3,arr)//不修改原数组
        },
          
          
         //删除、插入和替换一体的splice方法
        onSpliceArray (){
          //删除元素
          var arr = [1,3,5,7,9,11];
          var arrRemoved = arr.splice(0,2);//可以删除任意数量的项，和slice用法一样：要删除的第一项的位置和要删除的项数。[1，3]
          console.log(arr);   //[5, 7, 9, 11]修改原数组
        //添加元素
	    //可以向指定位置插入任意数量的项，只需提供 3 个参数：起始位置、 0（要删除的项数）和要插入的项。
	    //例如，splice(2,0,4,6)会从当前数组的位置 2 开始插入 4 和 6。
				
          var array1 = [22, 3, 31, 12];
          array1.splice(1, 0, 12, 35);  //返回值是一个空数组[]
          console.log(array1); // [22, 12, 35, 3, 31, 12]，会修改原数组
          // 替换元素
          const array2 = [22, 3, 31, 12];
          array2.splice(1, 1, 8);   //返回值是被替换元素形成的数组[3]
          console.log(array2);  // [22, 8, 31, 12]，修改原数组
        },
          
          
          // 查找某个元素在数组中的索引indexOf 和 lastIndexOf
          onIndexofArray()
  /*
	接收两个参数：要查找的项和（可选的）表示查找起点位置的索引。
	lastIndexOf：从数组的末尾开始向前查找。
这两个方法都返回要查找的项在数组中的位置，或者在没找到的情况下返回-1。
	*/
            var arr = [1,3,5,7,7,5,3,1];
            console.log(arr.indexOf(5));   //2
            console.log(arr.lastIndexOf(5));   //5
            console.log(arr.indexOf(5,2));   //2
            console.log(arr.lastIndexOf(5,4));   //2
            console.log(arr.indexOf("5"));   //-1
          },
            
            
            
    //遍历数组的三个方法
     // 一 forEach 
            onForEachArray(){
    // 对数组进行遍历循环，对数组中的每一项运行给定函数。这个方法没有返回值。
    // 参数都是 function 类型，默认有传，。
   // 参数分别为：遍历的数组内容；第对应的数组索引，数组本身
              var arr = [11, 22, 33, 44, 55];
              arr.forEach(function(x, index, a){
                console.log(x +  '|' + index +  '|'  + (a === arr));
              });
            },
              // 二 map方法
              onMapArray(){
     /*map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。
	map() 方法按照原始数组元素顺序依次处理元素。参数是function类型
	该方法不会改变原数组*/
       var arr = [1, 2, 3, 4, 5];
       var arr2 = arr.map(function(item){
      return item*item;
         });
       console.log(arr2);  //[1, 4, 9, 16, 25]
       },
      // 三 filter方法
      onFilterArray(){
      /*“过滤”功能，数组中的每一项运行给定函数，返回满足过滤条件组成的数组。
			filter方法的参数是一个函数，函数的参数有两个，分别是每项的值和对应的下标*/
        var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 
        var arr2 = arr.filter(function(x, index) {
          return index >1 && x <= 8;
        });
        console.log("----",arr2);  //[3, 4, 5, 6, 7, 8]
      },
        
        
        
        //向数组中填充元素的fill方法，es6新增
        onFillArray(){
          //一个参数，会将原数组所有项替换成参数
          let arr = [1, 2, 3, 4, 5];
          let newArr = arr.fill(1);//[1,1,1,1,1];返回值就是新数组
          console.log(arr);//[1,1,1,1,1];
          //三个参数
          let arr1 = [1, 2, 3, 4 , 5];
          arr1.fill(0, 1, 3);
          console.log(arr1);//[1,0,0,1,1];
        },
          
          
          //every和some
          onJudgeAnswer(){
            //every方法，只要有一个item判断是false，就会返回false；所有是true才返回true
            let arr1 = [3,4,5]
            let res1 = arr1.every(function(item){
              return item > 2
            })
            console.log("res1",res1)
            //some方法，只要有一个item判断是true，就会返回true；所有是false才返回false
            let arr2 = [3,4,5]
            let res2 = arr2.every(function(item){
              return item > 2
            })
            console.log("res2",res2)

          },
            
            
            
            //判断一个数组是否包含一个指定的值的方法include
            onIncludeItem(){
              // 参数有两个，其中第一个是（必填）需要查找的元素值，第二个是（可选）开始查找元素的位置
              const array1 = [22, 3, 31, 12];
              const includes = array1.includes(31);
              console.log(includes); // true
              const includes1 = array1.includes(31, 3); // 从索引3开始查找31是否存在
              console.log(includes1); // false
            }
},
  mounted() {
    this.onCreateEmptyArray()
    this.onCreateFullArray()
    this.onTransArray()
    this.onAddItem()
    this.onConcatArray()
    this.onSliceArray()
    this.onSpliceArray()
    this.onForEachArray()
    this.onMapArray()
    this.onFilterArray()
    this.onFillArray()
    this.onJudgeAnswer()
  }
}
  </script>