js 数组常用方法和对应案例总结

一、改变数组本身的方法

（1）.push() 后增     句末添加，返回长度，改变原数组

push()方法可以向数组后添加一个新元素，并返回新数组的长度

var a = [1,2,3]

var b = a.push[4]

console.log(a)   //[1,2,3,4]   改变原数组

console.log(b)   // 4     返回长度

（2）.unshift() 前增   头部添加，返回长度，改变原数组

unshift方法可以向数组前添加一个或多个元素，并返回新数组的长度

var a = [2,3,4]

var b = a.unshift(0,1)

console.log(a)  // [0,1,2,3,4]

console.log(b)  // 5   返回新数组长度

（3）.pop() 后删   尾部删除，返回被删除的元素，改变原数组

pop()方法用于删除并返回最后一个元素

var a = [1,2,3]

var b = a.pop()

console.log(a)  // [1,2]    改变原数组

console.log(b)  // 3    删除最后一项 3

（4）.shift() 前删  删除头部元素，返回被删除元素，改变原数组

shift()方法用于删除并返回数组首个元素

var a = [1,2,3]

var b = a.shift()

console.log(a)  //  [2,3]

console.log(b)  //   1

（5）.splice() 删除/增加   

从指定索引的位删除或新增元素，返回被删除元素组成的数组，改变原数组

splice(index,num,item1,item2...)   

index是splice方法开始处理的索引位置，num是指定删除的项数，从item1开始 后面都是新增的元素

var a = [1,2,3]

var b = a.splice(1,1,3,[2,3,4],5)

console.log(a)  //  [1,3,[2,3,4],5,3]

console.log(b)  //  [2]   返回被删除元素组成的<数组>

（6）.sort数组排序     默认升序排序

          按照ascii码排序   改变原数组，返回排序后的数组

var a = ['a','b','d','c']

var b = a.sort()

console.log(a)   // ['a','b','c','d'] 

console.log(b)   // ['a','b','c','d'] 

（7）.reverse() 反转数组    返回反转后的数组，改变原数组

var a = [1,3,4,5,6]

var b = a.reverse()

console.log(a)  // [6,5,4,3,1]

console.log(b)  // [6,5,4,3,1]

二、不改变数组本身，返回新数组

（1）.concat()  拼接

         合并两个或多个数组，返回新数组，不改变原数组

var a = [1,2,3]

var b = [4,5]

var c = a.concat(b)

console.log(a)  // [1,2,3]

console.log(b)  // [4,5]

console.log(c)  // [1,2,3,4,5]

（2）.slice 剪切     .slice(startIndex,endIndex)    

        返回从startIndex（包括startIndex）到结束（不包括）之前的元素组成的数组

var a = [1,2,3]

var b = a.slice(0,1)

var c = a.slice()   // 不填参数表示剪切整个数组

console.log(a)    // [1,2,3]

console.log(b)    // [1]

console.log(c)    // [1,2,3]

console.log(a===c)  // false    返回的是新数组 a!== c


//负数情况

var d = a.slice(-2,2)     //  如果 start 为负，将它作为 length + start处理，
                          //  此处相当于a.slice(1,2)   
                          //  [2]


       
var e = a.slice(0,-2)    // 如果 end 为负，就将它作为 length + end 处理
                         // 此处相当于a.slice(0,1)    
                         // [1]


var f = a.slice(1)      // 如果省略 end ，那么 slice 方法将一直复制到源数组结尾
                        // [2,3]


                   

三、循环遍历相关方法

（1） .forEach()   数组遍历，没返回值

forEach((item, index) => {

})

forEach()方法主要有三个参数，分别是数组内容(item)、数组索引(index)、整个数组(arr)

var array = ['a','b','c','d']

array.forEach((item,index,arr)=>{

     console.log('item:',item);
	 console.log('index:',index);
	 console.log('arr:',arr);

})

 

（2） .map()   数组遍历，有返回值，【返回格式化后的数组】，原数组不变

map()方法主要有三个参数，分别是当前值(current)、当前值索引(index)、整个数组(arr)

var a = [1,2,3,4,5,6,7]

var b = a.map((cur)=>{

  return cur + 1

})

console.log(b)   //  [2, 3, 4, 5, 6, 7, 8]

（3）.filter() 过滤

        .filter()方法返回数组中 【满足条件的元素】组成的新数组，原数组不变

filter()方法主要有三个参数，分别是当前值(current)、当前值索引(index)、整个数组(arr)

var a = [1,2,3,4,5,11]

var b = a.filter((cur,idx,arr)=>{
  
  return cur > 10

})

console.log(b)   // [11]

console.log(a)   // [1,2,3,4,5,11]

（4） .every()    返回布尔值

          如果遇见任何一项不符合立即返回false，也不再继续遍历后续项

          对数组的每一项都运行给定的函数，若每一项都返回 ture,则返回 true

var a = [1,2,3,4,5,6,7,8,9]

var b = a.every((cur,idx,arr)=>{

  return cur > 6 

})

console.log(b)  // false


var c = a.every((cur,idx,arr)=>{

  return cur < 10 

})


console.log(c)  // true

（5） .some   返回布尔值

数组的每一项都运行给定的函数，若存在一项或多项返回ture,则返回 true

var a = [1,2,3,4,5,6]

var b = a.some((cur)=>{

    return cur > 5 

})

console.log(b)   // true

四、其他方法

（1）.join()  将数组转化为字符串    不改变原数组，返回转换后的字符串

         arr.join(' 间隔符号 ')

var a = [1,2,3,4,5]

var b = a.join(',')


console.log(b)   // 1,2,3,4,5

console.log(a)   // [1,2,3,4,5]

（2）.split()  把一个字符串分割成字符串数组

split( separator , limit )  

separator :  分隔符   

 limit ：返回数组的长度 小于等于 limit

 

 

（3）indexOf()和lastIndexOf()    不会改变原数组，返回找到的index,否则返回-1

         indexOf(某元素,startIndex) 从startIndex开始，

查找某元素在数组中的位置，若存在，则返回第一个位置的下标,否则返回-1

lastIndexOf(某元素，startIndex) 和indexOf()相同，区别在于从尾部向首部查询

案例（1）：数组去重

var Arr = [1,2,3,3,2,1]

var newArr = []

for(i=0; i<arr.lenght; i++){

    if(newArr.indexOf(Arr[i]) == -1){

        newArr.push(Arr[i])
    }
}


console.log(newArr)   // [1,2,3]

案例（2）：使用indexOf()来判断字符串中是否包含某个值

if(this.demo.indexOf('keyword') == -1){

  '如果demo中不存在keyword执行的操作'

}else{

  '如果demo中存在keyword执行的操作'

}