ES6中数组新增的方法

最新推荐文章于 2023-08-03 17:25:39 发布

qq_58590962

最新推荐文章于 2023-08-03 17:25:39 发布

阅读量256

点赞数

分类专栏： es6

本文链接：https://blog.csdn.net/qq_58590962/article/details/118210696

版权

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

摘要由CSDN通过智能技术生成

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.