Javascript使用模板字符串，find，findIndex，some，every查找数据以及map，filter过滤数据，reduce求和或平均值

最新推荐文章于 2023-04-14 21:22:35 发布
最新推荐文章于 2023-04-14 21:22:35 发布
阅读量663 收藏
点赞数
分类专栏： JS & Jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/smartsmile2012/article/details/95979540
版权 
<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>

        /******************* es6 中模板字符串的使用 *****************************/
        //es6 使用``(windows键盘英文输入法下tab键上面那个键)来定义一个字符串。

        let str = '中国';
        const message = `我的祖国是 ${str}` //我的祖国是 中国
        console.log(message)

        function fn1() {
            return 'i am fn1'
        }

        var fn2 = function () {
            return 'i am fn2'
        }
        console.log(`${fn1()} xxx ${fn2()}`) //i am fn1 xxx i am fn2

        //换行
        let str2 = `我的祖国
是中国，
现住地
深圳`
        console.log(str2)

        let str3 = "我的祖国\n"
            + "是中国\n"
            + "现住地\n"
            + "深圳\n"
        console.log(str3)

        //日期转换成 yyyy-MM-dd hh:mm:ss
        let dt = new Date().toLocaleString('cn', { hour12: false });
        console.log(dt);

        //数组转字符串
        let arr = [1, true, "hello"];
        console.log(arr.toString())

        const bruce = { name: '张三' }
        function update(birthYear, occupation) {
            this.birthYear = birthYear;
            this.occupation = occupation;
        }

        //call 第一个参数为想要绑定的值 剩下的参数为调用函数传递的参数
        update.call(bruce, 1949, 'dsadsad')
        console.log(bruce);  //{name: "张三", birthYear: 1949, occupation: "dsadsad"}

        //apply 第一个参数为想要绑定的值 剩下的参数为调用函数传递的参数(数组方式)
        update.apply(bruce, [1949, 'dsadsad'])
        console.log(bruce);  //{name: "张三", birthYear: 1949, occupation: "dsadsad"}

        const arr1 = [2, 3, -5, -11, 9];
        console.log(Math.min.apply(null, arr1)); // -11
        console.log(Math.max.apply(null, arr1)); //9

        //查找数据
        let peoples = [
            { id: 1000, name: '张三', age: 21 },
            { id: 1001, name: '李四', age: 18 },
            { id: 1002, name: '王五', age: 20 },
            { id: 1003, name: '赵六', age: 21 },
        ]

        console.log(peoples.find(p => p.id === 1002)); //{id: 1002, name: "王五", age: 20}
        console.log(peoples.find(p => p.id === 5000)); //undefined

        console.log(peoples.findIndex(p => p.id === 1002)); //2
        console.log(peoples.findIndex(p => p.id === 5000)); //-1

        let arr2 = [1, 2, 3].map(function (item) {
            return `<li>${item}</li>`      //['<li>1</li>','<li>2</li>','<li>3</li>']
        })
        console.log(arr2.join(''))         //<li>1</li><li>2</li><li>3</li>
        console.log("---------------------------------------------------")

        //some找到第一个符合条件的元素后，就会停止查找，返回true
        console.log(peoples.some(p => p.age === 21)); //true

        //every集合中的所有元素都符合条件，才返回true，发现第一个不符合条件后，则停止查找，返回false
        console.log(peoples.every(p => p.age === 21)); //true

        /********************  map 和filter 功能 **************************/
        console.log(peoples.map(p => p.name))  //["张三", "李四", "王五", "赵六"]
        console.log(peoples.map(p => p.age + 10)) //[ 31, 28, 30, 31 ]
        peoples.map(function (item, index, arr) {
            console.log('value值为：', item); //10 20 30
            console.log('index值为：', index); //0 1 2
        })

        //符合条件的所有元素
        console.log(peoples.filter(p => p.age === 18)); //[{ id: 1001, name: "李四", age: 18 }]

        console.log("---------------------------------------------------")
        const users = peoples.map(item => ({
            userId: item.id,
            userName: item.name,
            userAge: item.age,
        })
        );
        console.log(users)

        //reduce 计算数组元素相加后的总和
        /*
            arr.reduce(callback,[initialValue])
            callback （执行数组中每个值的函数，包含四个参数）
            previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
            currentValue （数组中当前被处理的元素）
            index （当前元素在数组中的索引）
            array （调用 reduce 的数组）
            initialValue （作为第一次调用 callback 的第一个参数。初始值）
         */
        var items = [10, 120, 1000];
        var reducer = function add(sumSoFar, item) { return sumSoFar + item; };
        console.log(items.reduce(reducer, 0));  //1130
        console.log(items.reduce((a, x) => a += x)); //1130
        console.log(items.reduce((a, x) => a += x, 0)); //1130
        console.log(items.reduce((a, x) => a += x, 10)); //1140

        //求平均值
        console.log(items.reduce((a, b) => a + b) / items.length);  //376.6666666666667

        //求上面peoples集合平均年龄
        var pItems = peoples.map(p => p.age);
        console.log(pItems.reduce((a, b) => a + b) / pItems.length); //20

        //循环集合数据
        for (let item of peoples) {
            console.log(item)
        }
        console.log("---------------------------------------------------")
        Object.keys(peoples).forEach(p => console.log(peoples[p]))
        //console.log(peoples.filter(p => p.age.match(/^2/)));

        //js类的使用
        class Point {
            constructor(x, y) {
                this.x = x;
                this.y = y;
            }
            toString() {
                return '(' + this.x + ', ' + this.y + ')';
            }
            add() {
                return this.x + this.y
            }
        }
        var point = new Point(1, 2);
        console.log(point)
        console.log(point.add())

        console.log("---------------------------------------------------")

        //map存储键值对
        let userMaps = new Map([
            [1, 'one'],
            [2, 'two'],
            [3, 'three'],
            [1, 'one'],
            [3, 'three'],
        ]);

        console.log(userMaps)

        //try...catch....finally
        try {
            foo.bar()
        } catch (e) {
            console.log(e.message)
        } finally {
            console.log('出错与否最后都要执行')
        }

        //正则表达式

        const input = "i am going to shenzhen";
        const reg = /\w{3,}/ig  //i忽略大小写 g全局搜索
        console.log(reg.test(input)) //匹配包含三个或三个以上字母的  true
        console.log(input.match(/\w{3,}/ig)) //匹配包含三个或三个以上字母的  ["going", "shenzhen"]
        console.log(input.replace(/\w{3,}/ig, '***')) //i am *** to ***
    </script>
</head>
<body>

</body>
</html>

 

smartsmile2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
js数组中indexOf和findIndex的区别
Java_monkey_的博客
02-25 3192
1. indexOf 语法 arr.indexOf(searchElement[, fromIndex]) 参数 searchElement 要查找的元素 fromIndex可选 开始查找的位置。如果该索引值大于或等于数组长度，意味着不会在数组里查找，返回-1。如果参数中提供的索引值是一个负值，则将其作为数组末尾的一个抵消，即-1表示从最后一个元素开始查找，-2表示从倒数第二个元素开始查找 ，以此类推。 注意：如果参数中提供的索引值是一个负值，并不改变其查找顺序，查找顺序仍然是从前向后查询.
js中findIndex()、find()、indexOf()、includes()方法
最新发布
qq_53979100的博客
04-19 1569
find方法和findIndex方法一样，返回满足条件的值，并且不检测剩余值，只不过findIndex返回的是下标，find方法是返回满足条件的那一个元素，具体怎么使用看场景需要。find方法用来查找满足条件的第一项，找到了就返回那一项对应的值，找不到返回undefined。findIndex方法常用来查找满足条件的第一项索引，找到了就返回该索引，找不到返回-1。indexOf方法可用来查找满足条件的第一项索引，找到了就返回该索引，找不到返回-1。注：start搜索的起始位置默认为0，可选。
js中find、findIndex、indexOf的用法和区别
tyxjolin的专栏
04-14 4541
其中，find、findIndex和indexOf是常用的数组方法，它们都可以用来查找数组中特定的元素或值。当找到符合条件的元素时，find方法会返回该元素的值。不同的是，findIndex方法返回符合条件的元素在数组中的索引，而不是元素的值。find方法返回符合条件的元素的值，findIndex方法返回符合条件的元素在数组中的索引，而indexOf方法返回指定元素在数组中的索引。find和findIndex方法只会查找数组中第一个符合条件的元素，而indexOf方法也只会查找数组中第一个符合条件的元素。
JS中find方法的使用
热门推荐
m0_59168984的博客
11-26 11万+
JS中find方法的使用
Gradle技术之一 Groovy语法精讲
九路
11-18 453
Gradle技术之一 Groovy语法精讲 gradle脚本是基于groovy语言开发的，想要学好gradle必须先要对groovy有一个基本的认识 1. Groovy特点 groovy是一种DSL语言，所谓的DSL语言，就是专门针对某一特定领域的语言，专精而不专广 是一种基于JVM的开发语言，也是编译成class字节码文件 结合和Python,Ruby,PHP等语言的特性，写脚本非常强大 Groovy可以与Java完美结合，而且可以使用Java所有的类库 语法上支持动态类型，闭包等新语言的特性 支持面向
JavaScript之Array 中every，some，map，filter， reduce
01-08
在JavaScript中，数组方法`every()`、`some()`、`map()`、`filter()`和`reduce()`是处理数组数据的常用工具，它们提供了强大的功能，能够帮助开发者高效地操作数组中的元素。 1. `every()` `every()`方法用于测试...
filter-map-e-reduce:我对过滤器映射的了解，并使用javascript进行归约
05-12
在"filter-map-e-reduce:我对过滤器映射的了解，并使用javascript进行归约"这个主题中，作者可能深入探讨了如何结合使用这三种方法来解决实际问题。通过阅读相关代码（可能存在于"filter-map-e-reduce-master"压缩包...
无循环 JavaScript(map、reduce、filter和find)
10-20
无循环编程通常通过使用数组方法，如`map`、`reduce`、`filter`和`find`来实现。这些方法允许我们以更简洁的方式处理数组中的数据，减少了代码重复和潜在的错误。 1. **map** 方法： `map`函数接受一个函数作为...
find_and_replace:用于查找和替换字符串中的单词的 JavaScript 页面
06-03
在JavaScript编程中，字符串操作是日常开发中必不可少的一部分。`find_and_replace`是一个示例项目，专注于演示如何在文本字符串中查找并替换特定的单词。这个项目可能包含一个名为`find_and_replace.html`的文件，...
js代码-数组的迭代方法测试 every() filter() forEach() map() find() findIndex() some()
07-15
例如，`every()`和`some()`可以用来做条件检查，`filter()`和`map()`常用于数据转换和过滤，而`forEach()`和`findIndex()`则用于执行通用的迭代任务或定位特定元素。了解并熟练掌握这些方法，能显著提升JavaScript...
JS字符串方法和检索
weixin_44422254的博客
07-21 1万+
提取字符串的某个部分并在新字符串中返回被提取的部分。该方法设置两个参数起始索引（开始位置），终止索引（结束位置）。如果省略第二个参数，则该substr()将裁剪字符串的剩余部分。方法向后搜索（从末尾到开头），意思是如果第二个参数是。所有字符串方法都会返回新字符串。，则从位置15开始搜索，一直搜索到字符串的开头。方法不会改变调用它的字符串。它返回的是新字符串。方法不能采用强大的搜索值（正则表达式）。返回的是字符串中指定文本首次出现的位置。返回字符串中指定文本最后一次出现的位置。...
es6的数组操作
weixin_30537391的博客
09-17 271
　　　　　　//foreach 迭代 var arr = [1, 2, 3]; var sum = 0; arr.forEach(function(value, index, array) { console.log(value); con...
JavaScript：Array数组
尊哥的博客
10-29 437
一、概念 Array 对象用于在变量中存储多个值 二、属性 constructor 返回数组对象原型创建的函数： var fruits= ['apple','orange','banana']; fruits.constructor; // function Array() { [native code] } length 返回数组的长度 var cars = ["Saab", "Volvo", "BMW"]; cars.length; // 3 prototype 允许您向对象添
find(), findIndex(),indexof使用方法和区别
qq_38577700的博客
10-22 1142
老祖宗说的好 学而时习之 不亦说乎 还得边记录边复习呀 find() find()方法，用于找出第一个符合条件的数组成员。它的参数是一个回调函数，所有数组成员依次执行该回调函数，直到找出第一个返回值为true的成员，然后返回该成员。如果没有符合条件的成员，则返回undefined。 [1, 2, 5, -1, 9].find((n) => n < 0) //找出数组中第一个小于 0 的成员 // -1 findIndex() findIndex()方法的用法与find()方法非常类似，返
JavaScript查找数组内的元素的方法 filter() find includes findIndex lastIndexOf indexOf
seimeii的博客
03-23 1042
JavaScript查找数组内的元素的方法 filter() find includes findIndex lastIndexOf indexOf
str.count 统计
吴明文的博客
01-04 2492
str.count 统计 字符串方法 str.count()，Python 官方文档描述如下： help(str.count) Help on method_descriptor: count(...) S.count(sub[, start[, end]]) -> int Return the number of non-overlapping occurrences of substring sub in string S[start:end]. Optio
js findIndex方法
Polohert的博客
04-24 3万+
findIndex用法
JS 数组 API 源码浅析
weixin_34092455的博客
03-01 279
这是《JS 深入浅出》第八课的部分讲义 今天的课的主要内容有 数组的七个 API 的实现 Underscore 源码如何读（函数节流防抖、数组去重都能在源码里看到） join 先从最简单的数组操作开始： var array = ['a','b','c'] array.join('-') // 结果是 'a-b-c' 复制代码我们画一下内存图： array.join 实际上是 Array.p...
使用JavaScript实现功能丰富的datagrid数据表格
本文介绍如何使用原生JavaScript实现一个简单的Datagrid数据表格，该表格具有多项功能，包括排序、编辑、拖拽、分页、单选、多选、文字渲染、列显示隐藏以及分组。虽然这个示例不涉及与后台接口的交互，但可以通过...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

smartsmile2012

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值