【JS算法】数组的各种方法在增删改查的重要作用（写后台管理的心得总结）

目录

添加数据 push()、unshift()、splice()

删除数据 pop()、shift()、slice()、splice()

修改数据 filter()、reverse()

查找数据 every()、some()、indexOf、lastIndexOf()、map()、forEach()

---

添加数据 push()、unshift()、splice()

 push()、unshift()、splice()

push():在数组末尾插入数据

下面的例子都是将新的属性添加到原来的数据中： 

 this.spu.spuSaleAttrList.push(newSaleAttr)

row.spuSaleAttrValueList.push(newSaleAttrValue)

 

unshift():在数组开头插入数据

 

删除数据 pop()、shift()、slice()、splice()

pop()、shift()、splice()

pop():从数组末尾删除数据

 

shift():删除数组开头的数据 

 

slice():传入索引值，将数组里对应索引范围内的元素作为新数组返回。

slice(开始截取的索引，结束截取的索引)

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

 负数是从末尾开始

var arr = [1,2,3,4,5];
console.log(arr.slice(-3)) //[3, 4, 5]

 

splice():

splice既可以添加数据也可以删除数据：

number.splice(5,3)代表删除了从数组索引5开始的3个元素。

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

number.splice(5,0,2,3,4) 代表把2、3、4插入数组里。

splice方法接收的第一个参数，表示想要删除或者插入的元素的索引值。第二个参数是删除元素的个数（这个例子中，我们的目的不是删除元素，所以传入0）。第三个参数往后，就是想要添加到数组里的值（2、3、4）。

var arr = [1,2,3];
arr.splice(3,0,4) //从索引3开始删除0个添加数字4
console.log(arr); //[1,2,3,4]

 

修改数据 filter()、reverse()

filter():对数组中的每个元素运行给定函数，返回该函数会返回true的元素组成的数组。

 this.attrInfo.attrValueList = this.attrInfo.attrValueList.filter(item=>{
     //过滤掉属性值不为空的
     if(item.valueName!=""){
       //删除掉flag属性
          delete item.flag
          return true
      } 
})

 

reserve(): 颠倒数组中元素的顺序，原先第一个元素现在变成最后一个，同样原先最后一个元素变成了第一个。

 

查找数据 every()、some()、indexOf、lastIndexOf()、map()、forEach()

every():every方法会迭代数组中的每一个元素，对数组中的每个元素运行给定函数，如果该函数对每个元素都返回true，则返回true。

下面的例子是让输入的值不能和已有的值相等:  

//输入的值不能重复
let result = row.spuSaleAttrValueList.every(item=>item.saleAttrValueName!=inputValue)
if(!result) 
  return

//计算出还没选择的销售属性
  unSelectSaleAttr(){
       //当前spu拥有的属于自己的销售属性spu.spuSaleAttrList  颜色
       //数组的过滤方法，可以从已有的数组当中过滤出用户需要的元素，并返回一个新的数据
        let result = this.saleAttrList.filter(item=>{
            //every会返回一个布尔值
            return this.spu.spuSaleAttrList.every(item1=>{
               return item.name !=item1.saleAttrName
            })
        })
         return result
}

 

some():some方法的行为和every方法相反，对数组中的每个元素运行给定函数，如果任何一个元素返回true，则返回true。

下面的例子是让输入的值不能和已有的值相等，相等则return。 

//输入的值不能重复
let result = row.spuSaleAttrValueList.some(item=>item.saleAttrValueName==inputValue)
if(result) 
  return

 

indexOf():返回第一个与给定参数相等的数组元素的索引，没有找到则返回-1。

var arr = [1,2,3,5,6,7];
console.log(arr.indexOf(6)) //4 返回索引位置。
console.log(arr.indexOf(8)) //-1

 数组去重

var arr1 = [1,3,4,5,5,6,1,2,3,5,4,4,8,8,9,6];
        function find() {
            var newArr = [];
            for (var i = 0; i < arr1.length; i++) {
                if (newArr.indexOf(arr1[i]) == -1) {
                    newArr.push(arr1[i]);
                }
            }
            document.write(newArr);
        }
        find(arr1);

 

 

lastIndexOf():返回在数组中搜索到的与给定参数相等的元素的索引里最大的值。

与indexOf相反，indexOf是首次出现而lastIndexOf是最后出现。 

var arr = [1, 2, 2, 3, 3, 4,4];
console.log(arr.lastIndexOf(3)) //4 返回索引位置。
console.log(arr.lastIndexOf(8)) //-1

 

map()：对数组中的每个元素运行给定函数，返回每次函数调用结果组成的数组。

this.spu.spuImageList = this.spuImageList.map(item=>{
    return {
         imageName:item.name,
         imageUrl:(item.response && item.response.data)||item.url
    }
})

 

forEach():它和使用for循环的结果相同。对数组中的每个元素运行给定函数，这个方法没有返回值。

listArr.forEach(item => {
     item.name = item.imgName
     item.url = item.imgUrl
});