JavaScript的数组方法

js对数组的处理

1、push方法

• push方法会将一个或多个元素添加到数组尾部,返回数组的长度,会改变原数组

• arr.push(item1,item2,....itemx)

 // 1、push方法会将一个或多个参数添加到数组的尾部，返回的是数组的长度，但是会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.push(7,8,9)
        console.log(newarr)//8
        console.log(arr)//[1, 2, 3, 4, 5, 7, 8, 9]

2、unshift方法

• 会将一个或多个元素添加到数组的头部，返回新数组长度，原数组会被改变

• arr.unshift(item1,item2,....itemx)

// unshift方法会添加一个或多个元素到数组的前端，并返回数组的长度，会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.unshift(2)
        console.log(newarr)//6
        console.log(arr)//[2, 1, 2, 3, 4, 5]

3、pop方法

• 将数组最后一个元素删除，返回被删除的元素，会改变原数组

• 语法 array.pop()

// pop会删除数组的最后一个元素，返回被删除的元素，会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.pop()
        console.log(newarr)//5
        console.log(arr)//[1, 2, 3, 4]

4、shift方法

• 将数组的第一个元素删除，返回被删除的元素，会改变原数组

• 语法 array.shift()

 // shift会删除数组的第一个元素，返回被删除的元素，会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.shift()
        console.log(newarr)//1
        console.log(arr)//[2, 3, 4, 5]

5、slice方法

• 如果是一个参数的时候，以参数为数组下标截取后面的数组，如果是两个参数的时候，以第一个参数为起始值，第二个参数为数组末尾值，截取数组长度，不会改变原数组

• 语法array.slice(start,end)

// slice如果是一个参数的时候，以参数为数组下标截取后面的数组，不会改变原数组；如果为两个参数，第一个参数为开始，第二个参数结束来截取数组,返回被截取的数组
        var arr = ['a','b','c','d','e']
        var newarr = arr.slice(2)
        console.log(newarr)//['c', 'd', 'e']
        console.log(arr)//['a', 'b', 'c', 'd', 'e']
        var newarr2 = arr.slice(2,4)
        console.log(newarr2)//['c', 'd']

6、splice

• 第一个参数代表开始位置，第二个参数代表截取长度，第三个参数代表要插入的元素

• 用法：array.splice(start,length,itemx)

   // splice第一个参数代表开始的位置，第二个参数代表要替换几个元素，第三个要替换的元素
        var arr = ['红','黄','橙','绿','青']
        var newarr = arr.splice(1,2,'彩虹')
        console.log(arr)// ['红', '彩虹', '绿', '青']
        console.log(newarr)// ['黄', '橙']

7、reverse

• reverse会颠倒数组，会改变原数组

• 用法：arr.reverse()

// reverse会颠倒数组，会改变原数组
        var arr = ['红','黄','橙','绿','青']
        var newarr = arr.reverse()
        console.log(arr)//['青', '绿', '橙', '黄', '红']
        console.log(newarr)//['青', '绿', '橙', '黄', '红']

8、sort

• sort用于数组的排序，会改变原数组的顺序

• 用法：array.sort(sortfunction)

 // sort用于数组的排序，会改变原数组
        var arr = [6,5,4,3,2,1]
        var newarr = arr.sort(function(a,b){
            return a-b;//从小到大排序
            // return b-a;//从大到小排序
        })
        console.log(newarr)
        console.log(arr)

9、concat

• 是字符串的方法，同时也可以用于向数组后面添加一个或多个元素

• 用法：array.concat(arrr1,arr2,arr3)

// concat可以用于向数组后面添加新参数，不会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.concat([6,7,8])
        console.log(arr)
        console.log(newarr)
        // 字符串用法
        var arr1 = '小邓'
        var newarr1 = arr1.concat('你好')
        console.log(arr1)
        console.log(newarr1)

10、indexof

• 用于检索数组或字符串中是否存在指定的值，当只有一个参数时，会直接检索数组，有符合的元素返回元素的索引值，没有的话返回-1，当有两个参数时，第二个参数作为检测的数组的索引起始值

• 用法（searchval，start）

 // indexof 用于检索数组里面是否有这个值，只有一个参数的直接返回参数所在的索引值，没有的话返回-1，有第二个参数时会将第二个参数作为检索的索引值开始检测
        var arr = [1,2,3,4,5]
        console.log(arr.indexOf(5))//4
        console.log(arr.indexOf(2,3))//-1
        console.log(arr.indexOf(9))//没有的话返回-1
        // 字符串写法
        var arr1 = 'hello'
        console.log(arr1.indexOf('l'))//2

11、foreach

• 遍历数组

• 用法：array.foreach(function(item,index))

// foreach
        var arr = [1,2,3,4,5]
        var newarr = []
         arr.forEach((item,index,arr)=>{
           return newarr.push(item+1) 
        })
        console.log(newarr)// [2, 3, 4, 5, 6]
        console.log(arr)// [1, 2, 3, 4, 5]

12、map

• 用于对数组的每一项进行处理，会返回一个新数组，原数组不会发生改变

• 用法array.map(item,index)

  // map方法,用于对数组的每一项做处理，会返回一个新数组，原数组不会改变
        var arr = [1,2,3,4,5]
        var newarr = arr.map(item =>{
            // return item > 2;//[false, false, true, true, true]
            return item * 2;//[2, 4, 6, 8, 10]
        })
        console.log(arr)
        console.log(newarr)

13、filter

• 用于过滤数组的每一项是否符合要求，返回一个新数组，不会改变原数组

• 用法：array.filter(item,index)

 // filter 用于过滤数组的每一项是否符合要求，并返回新数组，不会改变原数组
        var arr = [1,2,3,4,5]
        var newarr = arr.filter(item =>{
            return item > 2;
        })
        console.log(newarr)//[3, 4, 5]
        console.log(arr)//[1, 2, 3, 4, 5]

14、some

• 用于判断数组中是否有某个值，如果有的话则为true否则为fasle

• 用法：array.some(item,index)

// some 用于数组中是否有某个值，如果有的话则返回true，否则则返回false
        var arr = [1,2,3,4,5]
        var newarr = arr.some(item =>{
            return item > 2;//true
            // return item > 6;//false
        })
        console.log(arr)
        console.log(newarr)

15、every

• 用于判断数组中的所有值是否都符合要求，如果是则返回true，否则则返回false

• 用法：array.every(item,index)

  // every
        var arr = [1,2,3,4,5]
        var newarr = arr.every(item =>{
            return item > 0;//ture
            return item > 3;//false
        })
        console.log(arr)
        console.log(newarr)

16、reduce

• 用于对数组的所有元素做指定的操作，total返回值会作为下次回调的起始值进行下一次的操作

• 用法：array.reduce(function(total, currentValue, currentIndex, arr), initialValue)

// reduce 对数组的所有元素做指定的操作，total返回值会作为下一次返回值进行下一次操作
        var arr = [1,2,3,4,5,6]
        var newarr = arr.reduce((total,num) =>{
            return total+num ;
        })
        console.log(arr)
        console.log(newarr)

17、find

• 用于查找数组中符合条件的元素，如果有符合的则返回符合要求的第一个值

var arr = [1,2,3,4,5]
        var newarr = arr.find(item =>{
            return item > 1;
        })
        console.log(newarr)//2
        console.log(arr)//[1, 2, 3, 4, 5]

18、findindex

• 用于查找数组中符合条件的值，如果有符合的则返回第一个元素的下标值

var arr = ['小红','小黄','red','green']
        var newarr = arr.findIndex(item =>{
            return item  =  '小红';
        })
        console.log(newarr)//0
        console.log(arr)//['小红', '小黄', 'red', 'green']