8、ES6笔记之数组循环的多种方法

最新推荐文章于 2022-10-12 09:26:35 发布
最新推荐文章于 2022-10-12 09:26:35 发布
阅读量448 收藏
点赞数
文章标签： ES6笔记之数组的循环
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Candy_mi/article/details/94381808
版权

循环数组的多种方法

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>数组多种方法</title>
</head>

<body>

</body>

<script>
    // 数组的循环
    // 原来  for  while
    // es5   forEach() map()  filter()  some() every() reduce()  reduceRight()

    // forEach(fun(),this指向)   也可以直接用bind绑定this指向  如果是用箭头函数的写法 没办法改变this的指向的

    let arr = [1, 2, 3, 4, 5];
    // 1.forEach():代替普通的for循环   
    // arr.forEach(function(val,index,arr){
    //     console.log(val,index,arr)
    // }.bind(123))

    // 2. map():非常有用   数据交互的时候
    // arr.map(function(val,index,arr){
    //     console.log(val,index,arr)
    // })

    //3.filter()
    // arr.filter(function(val,index,arr){
    //     console.log(val,index,arr)
    // })

    // arr.some(function (val, index, arr) {
    //     console.log(val, index, arr)
    // })
</script>

<script>
    // map   正常情况下需要配合return 返回一个新数组   若是没有return,相当于forEach
    //平时只要是用map,最好是有return,可以重新整理数据

    {
        let arr = [{
                title: '新闻1',
                count: 100,
                hot: true
            },
            {
                title: '新闻2',
                count: 100,
                hot: true
            },
            {
                title: '新闻3',
                count: 100,
                hot: true
            },
            {
                title: '新闻4',
                count: 100,
                hot: true
            }
        ]

        let newarr = arr.map(function (val, index, arr) {
            let json = {};
            json.title = val.title;
            json.count = val.count;
            json.hot = val.hot ? '最热' : '普通'
            return json;
        })
        console.log(newarr)
        //返回的值
        // 0:{title: "新闻1", count: 100, hot: "最热"}
        // 1: {title: "新闻2", count: 100, hot: "最热"}
        // 2: {title: "新闻3", count: 100, hot: "最热"}
        // 3: {title: "新闻4", count: 100, hot: "最热"}


    }
</script>

<script>
    // filter  过滤  过滤一些不合格的数据
    {

        let arr = [{
                title: '新闻1',
                count: 100,
                hot: true
            },
            {
                title: '新闻2',
                count: 100,
                hot: false
            },
            {
                title: '新闻3',
                count: 100,
                hot: false
            },
            {
                title: '新闻4',
                count: 100,
                hot: true
            }
        ]

        //过滤掉不是热门的新闻
        let newarr = arr.filter(function (val, index, arr) {
            return val.hot == true;
        })
        console.log(newarr) //返回的事hot为true的数据


    }
</script>


<script>
    // some   类似查找  只有某一个元素符合条件，返回true

    {

        let arr = [{
                title: '新闻1',
                count: 100,
                hot: true
            },
            {
                title: '新闻2',
                count: 100,
                hot: false
            },
            {
                title: '新闻3',
                count: 100,
                hot: false
            },
            {
                title: '新闻4',
                count: 100,
                hot: true
            }
        ]

        //过滤掉不是热门的新闻
        let newarr = arr.some(function (val, index, arr) {
            return val.title == '新闻1';

        })
        console.log(newarr) //true


    }
</script>

<script>
    // every 数组里的所有元素都要符合条件才返回true
    {

        let arr = [1, 3, 5, 7, 9];

        //判断这个数组是不是都是奇数
        let newarr = arr.every(function (val, index, arr) {
            return val % 2 == 1;

        })
        console.log(newarr) //true
    }
</script>

<script>
    //  reduce(fun(前一个，当前，下标，所在数组))    

    {
        let arr = [1, 2, 3, 4, 5];
        // 利用他来求数组的和
        let sum = arr.reduce(function (prev, cur, index, arr) {
            return cur + prev;
        })
        console.log(sum) //15

        // 利用他来求阶乘
        let jc = arr.reduce(function (prev, cur, index, arr) {
            return prev * cur;
        })
        console.log(jc) //120

    }
</script>

<script>
    // reduceRight()  从右往左

    {
        let arr = [1, 2, 3, 4, 5];
        // 利用他来求数组的和
        let sum = arr.reduceRight(function (prev, cur, index, arr) {
            return cur + prev;
        })
        console.log(sum) //15

    }
</script>

<script>
    // for-of遍历
    // 新增 arr.keys()某项的下标   arr.entries()某项的值
    {
        let arr = [1, 2, 3, 4, 5];

        for (var value of arr) {
            console.log(value);
        }

        for (var index of arr.keys()) {
            console.log(index);
        }


        for (var item of arr.entries()) {
            console.log(item);
        }


        for (var [key, val] of arr.entries()) {
            console.log(key, val);
        }

    }
</script>

</html>

面壁思过程
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ES6学习总结之数组循环方法
sh435367384的博客
03-13 2642
数组循环之前循环:(1)for(let i = 0; i&lt;arr.length; i++){}(2)whileES6新增循环方法1.arr.forEach():用来代替普通for循环,接收两个参数（循环的回调函数，this的指向（可选，用的比较少））无返回值例：之前let arr = ['apple','banana','orange'];for(let i = 0;i&lt;arr.len...
ES6 中 数组新增的循环
ikEason_的博客
11-23 1207
ES6 数组循环 先说一下ES5循环： 1. for for(let i=0; i<arr.length; i++){ //循环体语句 } 2. while while(条件为真){ //循环体语句 } 然后来说ES6数组中新增的一些循环： forEach | map | filter | some() | every() | reduce() | reduceRight() | for…of… 语法一致 arr.forEach | map | filter |
ES6 数组循环
m0_64494670的博客
10-12 741
ES6 数组循环
ES6语法学习笔记之数组的各种循环方法
weixin_34408624的博客
01-30 428
一、回顾ES5中的一些循环方法 1.forEach() let arr = ['apple','orange','tomato','banana']; arr.forEach(function(val,index,arr){ console.log(val,index,arr); });//依次打印的是该数组每次循环的值，索引号和数组本身，这是es5里原本拥有的一个循环 复制代...
ES6数组常用方法总结
Sophiego的博客
07-16 7664
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
JS学习笔记之数组去重实现方法小结
12-03
本文将详细介绍五种不同的数组去重实现方法，并对每种方法的优缺点进行分析。 1. 利用ES6的Set ES6引入的Set数据结构类似于数组，但成员的值都是唯一的，没有重复的值。在数组去重中，Set非常实用。首先，创建一个...
JavaScript学习笔记之ES6数组方法_.docx
10-09
这个方法返回一个默认的遍历器对象，可以用于`for...of`循环，同时支持数组的扩展运算符`...`。 最后，需要注意的是，如果一个对象没有部署迭代器接口，那么扩展运算符将无法将它转换为数组。而`Array.from()`则...
es6尚硅谷笔记es6尚硅谷笔记
04-03
例如，在处理数组的循环中，var会导致所有的迭代变量共享同一个变量，而let则会在每次迭代时创建一个新的变量，确保每次循环的独立性。 ```javascript for (let i = 0; i ; i++) { setTimeout(function() { ...
es6学习笔记
08-12
本学习笔记将深入探讨ES6中的核心概念，帮助你全面掌握这一现代JavaScript语法。 1. **let 和 const 声明** 在ES6之前，我们主要使用`var`进行变量声明，但`let`和`const`的引入解决了作用域和提升（hoisting）的...
数组所有原型，数组方法
weixin_30367543的博客
07-17 164
push() pop() concat() constructor() copyWithin() entries() keys() values() every() fill() ...
Function- Array every()
hrbsfdxzhq01的博客
01-07 351
定义和用法 array.every(function(currentValue,index,arr), thisValue) every() 方法用于检测数组所有元素是否都符合指定条件（通过函数提供）。 every() 方法使用指定函数检测数组中的所有元素： 如果数组中检测到有一个元素不满足，则整个表达式返回 false ，且剩余的元素不会再进行检测。 如果所有元素都满足条件，则返回 ...
Es6循环 五种方式
egg_er的博客
04-30 4656
Es6循环 五种方式 使用 foreach 点击显示数组目标项索引 <button @click="show1">使用 foreach 点击显示数组目标项索引</button> <!-- 缺点： 即使找到了 我们想要的数据 ，也会强行把循环走完 ，且无法终止 --> var vm = new Vue({ el: '#app', data: { // 用于 foreach 以及 some
ES6 数组的循环
liyamay的博客
06-29 1162
ES6笔记一 最近在系统的学习ES6，自己做的笔记，如有错误，还望订正，谢谢。 这篇主要介绍数组循环 //案例一 热闹的数组循环 //1.数组的循环 //1.1 forEach() 等同于for循环 let arr1=['spring','summer','autumn','winter'] let a=arr1.forEach(function(...
es6中对数组进行遍历的方法有哪些？区别是什么？
weixin_43912756的博客
08-21 1124
1、for … of ：改变原数组 ES6引入了for...of循环，作为遍历所有数据结构的统一方法，包括：数组，Set和Map结构，某些类似数组的对象（比如arguments\DOM NodeList对象）、Generator对象，字符串 let arr = ['red', 'green', 'blue']; for (let i of arr) { console.log(i); // red green blue } // 遍历数组的键值 for (let i of arr.values())
ES6-循环
weixin_30561177的博客
08-24 116
forEach方法来遍历数组,不能使用break语句中断循环，也不能使用return语句返回到外层函数 myArray.forEach(function (value) { console.log(value); }); for-in循环,不建议用在数组遍历中 在这段代码中，赋给index的值不是实际的数字，而是字符串“0”、“1”、“2”，此时很可能在无意之间进行字符串...
es6之数组循环
08-09 5091
一、回顾es5数组循环 1.arr.forEach()循环 可以接受两个参数： arr.forEach(循环回调函数，this指向谁） arr.forEach(function(){ },arr) 使用箭头函数(不能改变this指向了） arr.forEach((val,index,arr)=>{ //回调函数中可以接受3个参数， 1.value值 2.索引 3.整个数组 }) 2...
Es5和Es6中数组循环的方法
maoxiaohei_的博客
04-26 819
JavaScript ES(6-11)全版本语法 每个前端都需要的基础课
ES6--数组循环
杨欢博的博客
10-19 2272
ES6中新增的数组循环方法 forEach | map | filter | some() | every() | reduce() | reduceRight() | for…of… forEach arr.forEach(function(val,index,arr){ console.log(this,val,index,arr) },123); //改变this指向，是什么数据类型，this就是什么 需要三个参数 第一个参数：循环出来的值 val 第二个参数：循环出来的值的索引 index
ES6常见的数组遍历方法(6种)
热门推荐
LaoYangSaid的博客
07-08 1万+
ES5常见的数组遍历(迭代)方法 forEach map filter some every reduce
ES6新增的数组方法
最新发布
10-27
ES6新增了许多数组方法，其中一些重要的方法包括： 1. map()方法：该方法创建一个新数组，其结果是该数组中的每个元素都调用一个提供的函数后返回的结果。 2. flat()方法：该方法用于将嵌套的数组“拍平”，即将多维...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值