ES6中数组新增的方法

最新推荐文章于 2024-04-06 07:30:00 发布

原创最新推荐文章于 2024-04-06 07:30:00 发布 · 305 阅读

1 ·

CC 4.0 BY-SA版权

es6 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了ES6中数组新增的方法，包括forEach用于遍历数组，filter创建符合特定条件的新数组，map对每个元素进行操作生成新数组，reduce将数组聚合为单一结果，以及.find、.from、some和every等方法的用法。通过实例展示了这些方法在实际编程中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

forEach方法:

用于遍历数组

数组.forEach（function(item,index){}）

	// 传统for循环遍历
    let arr1 = [1, 2, 3]
    for (i = 0; i < arr1.length; i++) {
        console.log(arr1[i]); //123
    }
    //Es6的forEach遍历
    let arr2 = [1, 2, 3]
    arr2.forEach((item, index) => { 参数,索引值
        console.log(item, index); //123  012
    })

forEach函数中，如果内部有return 只终止当前次的循环

let arr = [1, 2, 3]
    arr.forEach((item, index) => {
        if (index == 0) { //终止第一次循环
            return
        }
        console.log(item, index); //23 12
    })

案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>forEach</title>
</head>
<body>
    <p>
        <button id="bt1">显示所有留言</button>
    </p>
    <p>
        姓名：<input type="text" id="uname">
        <button id="bt2">显示指定姓名 的留言</button>
    </p>
    <ul id="mes"></ul>
</body>
<script>
    // 过滤：返回符合要求的内容，留言板的内容
    function Message(id, mes, title, author) {
        this.id = id
        this.mes = mes
        this.title = title
        this.author = author
    }
    let messages = [
        new Message(1, "今天星期一", "日期", "王一"),
        new Message(2, "今天星期二", "日期", "王二"),
        new Message(3, "今天星期三", "日期", "王三"),
        new Message(4, "今天星期四", "日期", "王四"),
        new Message(5, "今天星期五", "日期", "王五")
    ]
    // 点击（显示所有留言 按钮bt1）时，把所有留言messages[0][1]..[5]放入到<ul></ul>中
    let bt1 = document.getElementById("bt1")
    let mes = document.getElementById("mes")
    // <li>（谁）author （说的内容）mes</li>
    bt1.onclick = function () {
        let str = ""
        // for (let n = 0; n < messages.length; n++) {
        //     str += `<li>${messages[n].author}说${messages[n].mes}</li>`
        // }
        messages.forEach((item, index) => {
            str += `<li>${item.author}说${item.mes}</li>`
        })
        mes.innerHTML = str
    }
</script>
</html>

在这里插入图片描述

filter方法：

用于过滤符合要求的元素，返回给一个新的数组

let arr = [1, 2, 3, 4, 5, 6]
    let result = arr.filter((item, index) => {
        if (item % 2 == 0) { //如果是偶数返回出去
            return item; //或者return true
        }
    })
    console.log(result); //2 4 6

以上代码可以简写成下面：

	let arr = [1, 2, 3, 4, 5, 6]
    let result = arr.filter(item => item % 2 == 0) 
    console.log(result); // [2,4,6]

留言板案例：

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>es6模块化</title>
</head>
<body>
    <p>
        <button id="bt1">显示所有留言</button>
    </p>
    <p>
        姓名：<input type="text" id="uname">
        <button id="bt2">显示指定姓名 的留言</button>
    </p>
    <ul id="mes"></ul>
</body>
<script>
    // 过滤：返回符合要求的内容，留言板的内容
    function Message(id, mes, title, author) {
        this.id = id
        this.mes = mes
        this.title = title
        this.author = author
    }
    let messages = [
        new Message(1, "今天星期一", "日期", "王一"),
        new Message(2, "今天星期二", "日期", "王二"),
        new Message(3, "今天星期三", "日期", "王三"),
        new Message(4, "今天星期四", "日期", "王四"),
        new Message(5, "今天星期五", "日期", "王五")
    ]
    // 点击（显示所有留言 按钮bt1）时，把所有留言messages[0][1]..[5]放入到<ul></ul>中
    let bt1 = document.getElementById("bt1")
    let mes = document.getElementById("mes")
    // <li>（谁）author （说的内容）mes</li>
    bt1.onclick = function () {
        let str = ""
        // for (let n = 0; n < messages.length; n++) {
        //     str += `<li>${messages[n].author}说${messages[n].mes}</li>`
        // }
        messages.forEach((item, index) => {
            str += `<li>${item.author}说${item.mes}</li>`
        })
        mes.innerHTML = str
    }
    // 点击（显示指定姓名 的留言 按钮bt2）时，获取输入信息，过滤符合要求的mes，然后遍历成字符串，放入到<ul></ul>中
    let uname = document.getElementById("uname");
    let bt2 = document.getElementById("bt2");
    bt2.onclick = function () {
        let name = uname.value //拿到输入的name 
        //.filter 过滤数组  数组.filter（function（item,index）{将符合要求的 返回出来，放到一个新数组里}） 通常用一个变量来保存
        let result = messages.filter((item, index) => {
            if (item.author == name) {
                return true
            }
        })
        // 再遍历一遍result,把过滤后的内容输出到页面
        let str = ""
        result.forEach((item, index) => {
            str += `<li>${item.author}说${item.mes}</li>`
        })
        mes.innerHTML = str == "" ? "对不起,没有相关用户" : str
    }
</script>
</html>

map方法：

给数组的每一个元素特殊处理后，返回给一个新的数组

	let arr = [1, 2, 3, 4, 5]
    // 每一个元素+10
    let x = arr.map((item, index) => {
        item += 10
        return item //需要返回一个新数组
    })
    // 以上可以简写：let x = arr.map(item =>+= 2)
    console.log(x); //[11 12 13 14 15]

案例：替换电影图片xxx为www

let movies = [
        { id: 1, name: "变形金刚1", imgUrl: "xxx.douban.com/1.jpg" },
        { id: 2, name: "变形金刚2", imgUrl: "xxx.douban.com/2.jpg" },
        { id: 3, name: "变形金刚3", imgUrl: "xxx.douban.com/3.jpg" }
    ]
    // img.src=imgUrl  www
    movies.map(item => {
        item.imgUrl = item.imgUrl.replace("xxx", "www")
        return item
    })
    console.log(movies);

在这里插入图片描述

reduce方法：

map filter 1对1关系
reduce 多对一只返回一个结果遍历功能

	// 第一个参数：prev 上一次操作的结果 return
    // 第二个参数：当前次被处理元素
    // 第三个参数：当前元素的索引值
    // 第四个参数：Array 当前被处理的数组
    // 在默认情况下 第一次的返回结果就是第一个元素
    let arr = [1, 2, 3, 4, 5]
    let result = arr.reduce((pre, item, index, array),参数2 => {
        console.log("pre=" + pre) // 1 3 3 3
        console.log("item=" + item) // 2 3 4 5
        return 3
    })
    console.log("result=" + result) // 3

案例:数组求和

	// 数组求和
	let arr = [1, 2, 3, 4, 5]
    let result = arr.reduce((pre, item) => {
        return pre + item //返回每一次的pre+item结果。第一次1+2 第二次3+3 第三次6+4 第四次10+5 
    })
    console.log(result); //15
</script>

参数2：第一次的返回结果，可以为任意类型

	// 数组求和
    let arr = [1, 2, 3, 4, 5]
    let result = arr.reduce((pre, item, index, array) => {
        console.log("pre=" + pre); //原本1 1 1 1      加参数2之后 10 1 1 1 1
        console.log("item=" + item); //原本2 3 4 5    加参数2之后  1 2 3 4 5
        return 1
    }, 10)

reduce 数组的去重

// reduce 数组的去重
    let arr = ["百度", "腾讯", "阿里", "京东", "字节跳动", "百度", "cc视频", "职坐标", "职坐标", "阿里"]
    let result = arr.reduce((pre, item) => {
        // 判断当前元素是否存在pre中
        // ES6 includes（） 有T 没有F
        if (!pre.includes(item)) {
            pre.push(item)
        }
        return pre
    }, []) //第一次遍历时的pre=[] 空数组
    console.log(result);

统计每一个元素出现的次数

	// 统计每一个元素出现的次数
    let arr = ["百度", "腾讯", "阿里", "京东", "字节跳动", "百度", "cc视频", "职坐标", "职坐标", "阿里"]
    let result = arr.reduce((pre, item) => {
        if (item in pre) {
            pre[item]++
        } else {
            pre[item] = 1
        }
        return pre
    }, {}) //第一次遍历时pre为{} 对象
    console.log(result); //{百度: 2, 腾讯: 1, 阿里: 2, 京东: 1, 字节跳动: 1, …}

ES6数组中.find方法

 	// .find（function（item,index）{}）方法 用于查找第一个符合要求的元素
    let arr = [1, 3, 4, 5, 6, 6, 1, 4, 5, 6]
    let result = arr.find((item, index) => {
        return item == 3
    })
    // findIndex（）返回第一个符合要求的元素和索引值
    console.log(result);

ES6数组中.from方法

// .from（）方法 将集合转化为数组 数组类的方法 构造函数的方法 Array.from（）静态方法
    let bts = document.getElementsByTagName("button")
    console.log(bts) //HTMLCollection(3) [button, button, button] 集合
    bts = Array.from(bts)
    console.log(bts) //[button, button, button] 数组array

    // 分发事件
    bts.forEach((item, index) => {
        item.onclick = function () {
            console.log(this);
        }
    })

some和every方法

用来判断返回true 或 false

	// 假设：所有学生的年龄大于12岁
    // every方法 依次拿出数组中的元素，做比较判定，如果有一个是假的，就返回false
    // some方法 一真即真
    let Students = [
        {
            name: "王一",
            age: 11
        },
        {
            name: "王二",
            age: 12
        },
        {
            name: "王三",
            age: 13
        }
    ]
    let result1 = Students.every((item, index) => {
        return item.age > 12
    })
    let result2 = Students.some((item, index) => {
        return item.age > 12
    })
    console.log(result1);//false
    console.log(result2);//true