js数组常用操作

最新推荐文章于 2023-05-16 18:02:49 发布

俊哥哥来也

最新推荐文章于 2023-05-16 18:02:49 发布

阅读量216

点赞数

分类专栏：前端文章标签： javascript 前端

本文链接：https://blog.csdn.net/jj2320711457/article/details/112613947

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>

<script>
    let arr = [1, 2, 3, 4, 5, 6]

    let objArr = [{
            name: "张三",
            age: 11,
        },
        {
            name: "李四",
            age: 12,
        },
        {
            name: "王五",
            age: 13,
        }
    ]

    1、判断数组是否存在某个元素
        1、indexOf 如果存在会返回该元素的索引，否则会返回-1
            console.log(arr.indexOf(1)) // 0

        2、includes（只能查找基本数据类型的数据）存在返回true，否则返回false
            console.log(arr.includes(8)) // true

        3、find 可以查找指定的值，如果找到了会返回当前值，找不到会返回undefined（可以查找所有类型）
            console.log(
                objArr.find((item, index) => {
                    if (item.name == "王五") {
                        console.log("index", index) //2
                    }
                    return item.name == "王五"
                })) // {name: "王五", age: 10}

        4、findIndex findIndex 与 find 的区别是返回索引值 查找不到时返回 -1 参数也是 : 当前值，索引，操作数组
            console.log(
                objArr.findIndex((item) => {
                    return item.name == "王五"
            })) //2   

    2、将一个或者一组值转化为数组Array.of()
        console.log(Array.of(1)) //[1]

    3、检测变量是否为数组类型Array.isArray()
        console.log(Array.isArray([1])) // true
        console.log(Array.isArray(1))   //fasle

    4、数组转化为字符串
        基本数据类型使用toString()-----默认使用逗号
            console.log(arr.toString()) //1,2,3,4,5,6

        使用特定的符号将数组进行分割
            console.log(arr.join("-")) //1-2-3-4-5-6

        对象或者引用数据类型使用JSON.stringify()
            console.log(JSON.stringify(objArr)) //[{"name":"张三","age":10},{"name":"李四","age":10},{"name":"王五","age":10}]

    5、获取数组第一个元素Array.shift()
        console.log(arr.shift()) //1

    6、获取数组最后一个元素Array.pop()
        console.log(arr.pop()) //6

    7、从已有的数组中返回选定的元素 slice(start,end) 类似于字符串的substring
        start 必填 指定从何处开始选取 可为负数（-1代表最后一个元素，以此类推）
        end 选填 指定从何处结束选取 不填时，默认从start到数组最后，也可以为负数（-1代表最后一个元素，以此类推）
        console.log(arr.slice(-1)) //6
        console.log(arr.slice(0,1)) //1

    8、添加、删除、替换数组中的元素 Array.splice(参数一,参数二,参数三(可选))

        添加: 添加元素到指定索引位置  --返回值为添加元素的后的新数组
            参数一：指定要添加的索引位置
            参数二：第二个参数要为零
            参数三：指定添加的元素

        在索引为零的位置添加一个"00"的字符串
            arr.splice(0,0,"00") //["00", 1, 2, 3, 4, 5, 6]

        替换: 替换指定索引的元素 --返回值为替换元素的后的新数组
            参数一：指定要替换的索引位置 
            参数二：第二个参数要为一
            参数三：指定替换的元素

        将索引为零的元素替换为"00"
            arr.splice(0,1,"00") //["00", 2, 3, 4, 5, 6]

        刪除: 删除指定索引的位置 --返回值为删除的元素
            参数一：删除位置的索引
            参数二：代表从该索引处往后要删除的数量

            删除指定索引的元素，可以使用Array.splice("需要删除的索引值",1) 
            arr.splice(0,1)
            console.log("arr",arr) //[2,3,4,5,6]

    9、数组排序

        1、reverse 反转数组顺序
            console.log(arr.reverse()) //[6, 5, 4, 3, 2, 1]

        2、sort 默认从小到大排序
            console.log([3, 4, 2, 1, 7, 6].sort()) // [1, 2, 3, 4, 6, 7]

        sort每次使用两个值进行比较 Array.sort((a,b)=>a-b
        返回负数 a 排在 b前面，从小到大
        返回正数 b 排在a 前面
        返回 0 时不动
        console.log([1, 2, 3, 4, 5].sort((a, b) => {
            console.log(a, b)
            //  2 1
            //  3 2
            //  4 3
            //  5 4
        })) // [1, 2, 3, 4, 5]

    数组循环
    1、for 循环来遍历数组 -->可以使用break中断
        for (let index = 0; index < arr.length; index++) {
            console.log(arr[index], index)
        }
        for (let index = 0; index < objArr.length; index++) {
            console.log(objArr[index], index)
        }

    2、forEach 函数作用在每个数组元素上，但是没有返回值 -->不能使用break终止
        objArr.forEach((item, index) => {
            console.log(item, index)
        })

    3、for/in  遍历时的 key 值为数组的索引 -->可以使用break终止循环
        for (key in objArr) {
            console.log(objArr[key], key)
            if (objArr[key].name == '李四') {
                break
            }
        }

    4、for/of  与 for/in 不同的是 for/of 每次循环取其中的值而不是索引。 -->可以使用break终止循环
        for (key of objArr) {
            console.log(key)
            if (key.name == '李四') {
                break
            }
        }

    5、filter 过滤元素 返回过滤之后的新数组
        console.log(objArr.filter((item, index) => {
            return item.name == '张三' || item.name == '王五'
        })) // [{name: "张三", age: 11},{name: "王五", age: 13}]

    6、map 映射可以在数组的所有元素上应用函数，用于映射出新的值。
        console.log(
            objArr.map((item, index) => {
                return item.name
            })
        ) // ["张三", "李四", "王五"]

</script>

</html>

俊哥哥来也

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js数组常用操作

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body></body>
复制链接

扫一扫

专栏目录