处理数组常用的内置对象

183 阅读9分钟

处理数组的常用内置对象

常用的处理数组内置对象总结了

1. push()数组后添加元素

2. unshift()数组前添加元素

3. pop()数组后删除元素

4. shift()数组前删除元素

5. splice()数组的元素添加、删除、替换

6. slice()数组的截取

7. split()字符串转化为数组

8. indexOf()搜索数组或字符串中的元素有就返回索引,无则返回-1

9. lastIndexOf()从最后开始搜索数组或字符串中的元素有就返回索引,无则返回-1

10. toString()讲数组转化为字符串,每个元素由逗号隔开

11. join()讲数组转化为字符串,并可以选择指定义符号或无符号进行隔开

12. concat()拼接数组

13. sort()数组中的元素排序

14. reverse()数组实行翻转

15. forEach()迭代遍历数组

16. map() 迭代遍历数组返回新数组

16. filter()数组元素的筛选返回成新数组

17. some()数组元素的判断是否存在数组中返回布尔值

-------------------------------------------------------------------------------

数组增添push()与unshift()-------改变原数组

1. push()数组元素最后添加数组元素

        var arr = [1, 2, 3, 4, 5]
        console.log(arr)
        arr.push("我是push新增在数组最后的元素")
        console.log(arr)
打印出:
(5[1, 2, 3, 4, 5]
(6[1, 2, 3, 4, 5, "我是push新增在数组最后的元素"]

2. unshift()数组元素开头添加数组元素

        var arr1 = [1, 2, 3, 4, 5]
        console.log(arr1)
        arr1.unshift("我是unshift在数组前新增的元素")
        console.log(arr1)
打印出:
(5) [1, 2, 3, 4, 5]
(6["我是unshift在数组前新增的元素", 1, 2, 3, 4, 5]

数组删除pop()与shift()--------改变原数组

1.pop()删除数组最后一个元素

        var arr2 = [1, 2, 3, 4, 5, "我是最后一个数组元素"]
        console.log(arr2)
        arr2.pop()
        console.log(arr2)
打印结果:
(6[1, 2, 3, 4, 5, "我是最后一个数组元素"]
(5[1, 2, 3, 4, 5]

2.shift()删除数组开始第一个元素

        var arr3 = ["我是数组前一个元素", 1, 2, 3, 4, 5]
        console.log(arr3)
        arr3.shift()
        console.log(arr3)
打印结果:
(6) ["我是数组前一个元素", 1, 2, 3, 4, 5]
(5[1, 2, 3, 4, 5]
-------------------------------------------------------------------------

实现增添、删除和替换操作splice()-------改变原数组

splice(参数1,参数2,参数3)

参数1:数组索引,从什么地方开始

参数2:选取的个数/0

参数3:值或空值

1、实现增与push一样的数组最后添操作

        var arr4 = ["马云", "刘强东", "王兴", "张一鸣"]
        console.log(arr4)
        arr4.splice(arr4.length, 0, "马化腾") 
        console.log(arr4)
打印结果:
(4["马云", "刘强东", "王兴", "张一鸣"]
(5["马云", "刘强东", "王兴", "张一鸣", "马化腾"]

原理是splice()参数1为数组长度为4,但数组索引为3,参数2为0就参数1中选索引前面元素,参数3为添加的元素。因为索引为4时无元素且大于数组索引,索引实现了在数组后添加元素效果

2、实现与unshift()一样的数组开头添加操作

        var arr4 = ["马云", "刘强东", "王兴", "张一鸣"]
        console.log(arr4)
        arr4.splice(0, 0, "马化腾")
        console.log(arr4)
打印结果:
(4)["马云", "刘强东", "王兴", "张一鸣"]
(5["马化腾", "马云", "刘强东", "王兴", "张一鸣"]

原理是splice()参数1为0代表索引为0,参数2为0就参数1中选索引前面元素,参数3位添加的元素,因为索引为0时前面无元素,就实现了数组前添加元素效果。

3、实现与pop()一样的数组最后删除操作

        var arr4 = ["马云", "刘强东", "王兴", "张一鸣"]
        console.log(arr4)
         arr4.splice(arr4.length-1, 1)
        console.log(arr4)
打印结果:
(4["马云", "刘强东", "王兴", "张一鸣"]
(3["马云", "刘强东", "王兴"]

原理是splice()参数1为数组长度-1代表选中数组最后一个元素本身,参数2为1带表选中当前索引元素,参数三为空代表将当前数组最后一个元素替换成空或删除。

4、实现与shift()一样的数组数组开头删除操作

        var arr4 = ["马云", "刘强东", "王兴", "张一鸣"]
        console.log(arr4)
        arr4.splice(0, 1)
        console.log(arr4)
打印结果:
(4["马云", "刘强东", "王兴", "张一鸣"]
(3["刘强东", "王兴", "张一鸣"]

原理是splice()参数1为0代表数组开头第一个元素,参数2为1代表选中当前数组索引元素,参数3为空代表当前第一个元素替换成空或删除。

5、实现替换操作splice(3, 1, "我被替换了")

        var arr4 = ["马云", "刘强东", "王兴", "张一鸣"]
        console.log(arr4)
        arr4.splice(3, 1, "我被替换了")
        console.log(arr4)
打印结果:
(4["马云", "刘强东", "王兴", "张一鸣"]
(4["马云", "刘强东", "王兴", "我被替换了"]

原理是splice()参数1为数组索引的任意存在的数,参数2为1代表选中当前替换的元素,参数3为你要替换的内容。

6、返回原数组splice(0)

---------------------------------------------------------------------------

数组与字符串截取操作slice() ------不改变原数组返回新数组

参数1:是数组索引或字符串从哪里开始截取,本身会算进去

参数2:是你要截取到的数组索引,当前索引本身是不会算进去的

如果参数为负值就是从数组背后算起。

1、截取数组slice()

        let arr5 = [1, 2, 3, 4, 5]
        let str = "12345"
        console.log(arr5)
        let arr6 = arr5.slice(1, -1)
        console.log(arr5)
        console.log(arr6)
打印结果:
(5) [1, 2, 3, 4, 5]
(5) [1, 2, 3, 4, 5]
(3) [2, 3, 4]
-------------------------------------------------------------

字符串转化为数组

split("字符串中针对什么元素进行分割成数组")------------不改变原数组

        let str1 = "小强&小明"
        let str2 = "abcdef"
        let arr11 = str1.split("&")
        let arr12 = str2.split("")
        console.log(arr11)
        console.log(arr12)
打印结果:
(2["小强", "小明"]
(6["a", "b", "c", "d", "e", "f"]

注意:split("哈哈")当你要分割的字符串中没有你写的指定元素分割符,那么它会返回整个字符串,不写默认将每个字符串分割成数组元素。

-------------------------------------------------------------

数组转换为字符串

toString()----------不改变原数组

         let arr9 = [1, 2, 3, 4, 5]
         let str = arr9.toString()
         console.log(str)
         console.log(arr9)
   打印结果:
   1,2,3,4,5
   (5) [1, 2, 3, 4, 5]

返回的字符串间隔用逗号分割

join()-------------不改变原数组

         let arr9 = [1, 2, 3, 4, 5]
         let str = arr9.join("+")
         console.log(str)
打印结果:
1+2+3+4+5
        
--------------------------------------------------------------------------

字符串拼接

concat(arr,arr1,arr2,arr3.....) ----------不改变原数组返回新数组

        let arr7 = [1, 2, 3, 4, 5]
        let arr8 = [6, 7, 8, 9]
        let concat1 = arr7.concat(arr8)
        console.log(concat1)
    
打印结果:
(9) [1, 2, 3, 4, 5, 6, 7, 8, 9]
------------------------------------------------------------------------

数组和字符串查找

indexOf(查找的元素,从数组哪个索引开始)-------------返回查找字符串或数组元素索引

参数1:查找的元素 参数2:从数组哪个索引开始,包括数组索引本身

    let arr10 = [1, 2, 3, 4, 5, 1, 3]
    let x = arr10.indexOf(1, 1)
    let y = arr10.indedOf(6,1)
    console.log(x)
    console.log(y)
打印结果:
5
-1
    

注意:在数组或字符串中如果找到就返回索引号,如果没找到就返回-1

lastIndexOf(查找的元素,从数组哪个索引开始(一般为负数))------------返回查找字符串或数组元素的索引

        let arr10 = [1, 2, 3, 4, 5, 1, 3]
        let x = arr10.lastIndexOf(3, -1)
        let y = arr10.lastIndexOf(6, 0)
        console.log(x)
        console.log(y) 
打印结果:
6
-1

注意:lastIndexOf()为逆向查找但它返回的数组索引是正向索引,一般参数2为负数,-1代表最后元素的第一个。

------------------------------------------------------------

数组排序

sort()--------------改变原数组

1.正向排序(从小到大)sort(function(a,b){return a-b})

2.逆向排序(从大到小)sort(function(a,b){return b-a})

        let arr13 = [32, 44, 23, 54, 90, 12, 9]
        let arr14 = [32, 44, 23, 54, 90, 12, 9]
        arr13.sort((a, b) => {
            return a - b
        })
        arr14.sort((a, b) => {
            return b - a
        })
        console.log(arr13)
        console.log(arr14)
打印结果:
(7) [9, 12, 23, 32, 44, 54, 90]
(7) [90, 54, 44, 32, 23, 12, 9]

注意:sort()里边不写函数参数返回值是会以第一数字从小到大排序

-----------------------------------------------------------------------

数组翻转

reverse()-----------------改变原数组

     let arr15 = [1, 2, 3, 4, 5, 6, 7]
     arr15.reverse()
     console.log(arr15)
    打印结果:
    (7) [7, 6, 5, 4, 3, 2, 1]
----------------------------------------------------------------------

迭代遍历

一、forEach(function(value,index,arr){})

  1. 参数1:数组叠代遍历的值
  2. 参数2:数组迭代遍历的索引
  3. 参数3:返回原数组
     let arr = ["小明", "小张", "小强"]
        arr.forEach(function (value, index, arr1) {
            console.log("数组当前项的的值:" + value + "\n数组当前的索引" + index)
            console.log(arr1)
        })
打印结果:
数组当前项的的值:小明
数组当前的索引0
(3["小明", "小张", "小强"]

 数组当前项的的值:小张
数组当前的索引1
(3["小明", "小张", "小强"]

数组当前项的的值:小强
数组当前的索引2
(3["小明", "小张", "小强"]

二、map(function(v,i){ return 内容})

  1. 参数1:数组叠代遍历的值
  2. 参数2:数组迭代遍历的索引
  3. 参数3:返回原数组
   let str = "GET-ELementS-By-clASS-NaMe"
        str = str.toLowerCase()
        let arr = str.split("-")
        console.log(arr)
        let newArr = arr.map((v, i) => {
            if (i !== 0) {
                return v[0].toUpperCase() + v.substr(1)
            }
            else {
                return v
            }
        })
        str = newArr.join("")
        console.log(Boolean("0"))
    </script>

筛选方法

一、filter(function(value,index,arr){return 筛选条件})

1. 参数1:数组叠代遍历的值

2. 参数2:数组迭代遍历的索引

3. 参数3:返回原数组

  let arr = [22, 4, 66, 88]
        let newArr = arr.filter(function (value, index, arr1) {
            console.log("第一个参数返回的是数组当前索引的值:" + value)
            console.log("第二个参数返回的是当前索引" + index)
            console.log("第三个参数反回的是当前数组" + arr1)
            return value <= 25
        })
         console.log(newArr)
打印结果:
(2)[22, 4]

注意:filter()是利用return 加后面的筛选条件来进行返回,返回的对象是一个数组,它是将数组全部迭代遍历一遍,符合条件的就添加到返回的数组中去。

--------------------------------------------------------------

检查数组中的是否有满足条件的方法

some(function(value,index,arr){return 筛选条件})

1. 参数1:数组叠代遍历的值

2. 参数2:数组迭代遍历的索引

3. 参数3:返回原数组

 var arr = ["肖航", "pink", "哈哈哈"]
        var flag = arr.some(function (value, index, arr1) {
            return value === "pink"
        })
        console.log(flag)

打印结果:
true

注意:some()是利用return 加后面的筛选条件来进行返回,返回的是一个Boolean值true/false,它遍历数组,如果有符合条件的值就终止遍历返回true,否则返回false。