JavaScript个人学习笔记---数组拓展应用

最新推荐文章于 2024-11-02 19:19:35 发布
最新推荐文章于 2024-11-02 19:19:35 发布
阅读量336 收藏
点赞数
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/JiangyeMx/article/details/122239408
版权

目录

一，forEach

二，Filter

三，Map

四，Every

五，Some

六，Reduce

七，ReduceRight

总结

一，forEach

forEach方法是在Array.prototype上定义的方法，任意数组实例都可以直接调用该方法；

作用：循环遍历数组

形式：forEach（function（elem,index,self）{}，形参2）；elem:数组的元素；index:索引值；self：数组本身；

实例：

    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>

    <script>
        var person = ['a','b','c','d','e'];
        var li = document.getElementsByTagName('li');
        function deal(elem,index,self) {
            li[index].innerText = elem;

        }
        person.forEach(deal);




    </script>

实例解析：person.forEach(deal);语句首先会进行一个for循环，循环次数为person的长度（即调用该方法数组的长度），在每一次循环过程中都会把当前索引值对应的数组属性，索引值，数组本身拿出来作为参数传入deal函数中，在执行deal函数；实现的最终效果就是把person数组中的每一项属性一一赋给li数组的每一项的innerText；

源码实现：

        Array.prototype.myforEach = function (func) {
            var len = this.length;
            for(var i = 0; i < len ; i++){
                func(this[i],i,this);

            }
        };

ps:在forEach()方法中通常传入的参数为一个，即想要执行的函数，但有一个不太常用的参数有时也会需要了解一下，第二个参数可以改变func函数的this指针，在常用的forEach中由于func是作为一个参数，并没有人去调用它，所以他的this指针是指向window的，当传入第二个参数后，就可以改变func函数的this指针了。

源码实现：

        Array.prototype.myforEach = function (func) {
            var len = this.length;
            var _this = arguments[1];//令_this为调用myforEach方法时传入的第二个参数，arguments[]是实参列表
            for(var i = 0; i < len ; i++){
                //apply(a,[]);会改变this指针，传入的第一个参数的指针就是this指向的指针
                //appli(),call()都可以改变this指针，区别在与传入的参数形式不同，apply以数组形式传入
                func.apply(_this,[this[i],i,this]);

            }
        };

此时封装的方法与系统提供的forEach（）方法一致；

二，filter

filter的含义为过滤，所以数组中的该方法所实现的功能也是过滤某一些元素；使用filter方法会返回一个新的数组且不改变原数组；

形式：filter（function（）{}，形参2）；其中形参2与forEach作用一样，用于改变传入的函数的this指针的指向；

实例：

        var person = ['a','b','c','d','e'];
        var newArr = person.filter(function(elem,index,self){
            if(elem == 'a'){
                return true;
            }else{
                return false;
            }

        },obj);
        console.log(newArr);

 filter通过传入函数返回的值是true还是false来决定这个元素是否返回到新数组中；原理与forEach类似都会有一次遍历数组的过程；

源码实现：

        var person = ['a','b','c','d','e'];

        Array.prototype.myFilter = function (func) {
            var arr = [];
            var len = this.length;
            var _this = arguments[1] || window;
            for(var i = 0; i < len; i++){
                func.apply(_this,[this[i],i,this]) && arr.push(this[i]);
                //该语句的另一种写法为：
                // if(func.apply(_this,[this[i],i,this])){
                //     arr.push(this[i])  
                // }
                //或者使用三目运算符：
                // func.apply(_this,[this[i],i,this]) ? arr.push(this[i]) : null;
            }
            return arr;
        };
        var newArr = person.myFilter(function(elem,index,self){
            if(elem == 'a'){
                return true;
            }else{
                return false;
            }

        },obj);
        console.log(newArr);

 效果系统提供的filter方法效果一致。

三，Map

映射作用，返回的是一个新的数组，不改变原数组；

形式：map（functio（）{}，形参2），其中形参2与forEach作用一样，用于改变传入的函数的this指针的指向；

例子：

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        var newArr = person.map(function(elem,index,self){
            elem.age +=10;
            return elem;

        })
        console.log(newArr);

 通过map方法队员组中每一个对象元素中的age属性实现+10的操作；

源码实现：

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        Array.prototype.myMap = function (func) {
            var arr = [];
            var len = this.length;
            var _this = arguments[1] || window;
            for(var i = 0; i < len ; i ++){
                if(func.apply(_this,[this[i],i,this])){
                    arr.push(this[i]);
                }
            }
            return arr;
        };
        var newArr = person.myMap(function(elem,index,self){
            elem.age +=10;
            return elem;

        })
        console.log(newArr);

四，Every 

基于遍历使用；判断该数组是否都符合条件，如果全部都符合返回true，若有一个不符合返回false，并且在遇到第一个不符合的元素时返回false后，程序就会停止；逻辑类似于&&运算符；

形式：every（function（elem，index，self）{}，形参2）

实例：

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        var newArr = person.every(function(elem,index,self){
            if(elem.age > 18){
                return true;
            }else{
                return false;
            }

        })
        console.log(newArr);

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        var newArr = person.every(function(elem,index,self){
            if(elem.age >= 10){
                return true;
            }else{
                return false;
            }

        })
        console.log(newArr);

 

 源码实现：

        Array.prototype.myEvery = function (func){
            var flag = true;//作为判断标识
            var len = this.length;
            var _this = arguments[1] || window;
            for(var i = 0; i < len; i ++){
                if(!func.apply(_this,[this[i],i,this])){
                    flag = false;
                    break;//遇到不符合条件的即停止循环
                }
            }
            return flag;
        };

五，Some

同样基于遍历使用；功能与every类似，遍历数组中是否有任意一个符合条件的元素，如果有返回true，否则返回false；逻辑与 || 运算符类似；与every一样在遍历到符合条件的元素就会直接停止程序。

形式：some（function（）{}，形参2）；

实例：

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        var newArr = person.some(function (elem,index,self){
           if(elem.age == 21){
               return true;
           }    
        },obj)
        console.log(newArr);

 源码实现：

        var person = [{name:'jiangyr',age:21},{name:'xiaoming',age:25},{name:'lilei',age:10},{name:'hanmeimei',age:15}];
        Array.prototype.mySome = function (func) {
            var flag = false;
            var len = this.length;
            var _this = arguments[1] || window;
            for(var i = 0; i < len; i ++ ){
                if(func.apply(_this,[this[i],i,this])){
                    flag = true;
                    break;
                }
            }
            return flag;
        }
        var newArr = person.mySome(function (elem,index,self){
            console.log(index);
           if(elem.age == 25){
                
                return true;
            }    
        },obj)
        console.log(newArr);

 六，Reduce

基于遍历使用；提供一个初始值，接收上一个元素执行回调函数（即传入的函数）的返回值，最后返回的是该初始值；

形式：reduce（function(previousValue，elem,index,self){}，形参2）；previousValue为初始值，传入的形参2会给function函数的precious参数赋初值；

如果不给previous赋初值，reduce会跳过索引值0，从索引值1开始执行；

        var arr = [1,2,3,4,5];
        var newArr = arr.reduce(function(pre,elem,index,self){
            console.log(index);
            return pre + elem;
        })//未传入参数2，previousValue没有赋初值
        console.log(newArr);

 实例：设计一个方法，根据cookie的特性（以键值对的形式存在）把获得的cookie字符串改成对象的形式


        var cookirStr = '_uuid=15DF509A-17F4-BF86-2C15-8C1F51BA099667377infoc; buvid3=749757B2-7573-4313-9F9D-2F692BCC979618551infoc; sid=jhlw4mkk; buvid_fp=749757B2-7573-4313-9F9D-2F692BCC979618551infoc; blackside_state=1; rpdid=|(u)~J|uR~~k0JuYu)uuYuku; LIVE_BUVID=AUTO2116181473568425; Hm_lvt_8a6e55dbd2870f0f5bc9194cddf32a02=1629384131,1630056390,1630062379,1630586535; fingerprint=448629250f67bb8a62d1ed190ea185c2; buvid_fp_plain=749757B2-7573-4313-9F9D-2F692BCC979618551infoc; DedeUserID=24455019; DedeUserID__ckMd5=2f4b078f15ab828b; bili_jct=03c0ee3e3a62758313ed936fb251b501; video_page_version=v_old_home; CURRENT_QUALITY=116; i-wanna-go-back=-1; b_ut=5; CURRENT_BLACKGAP=0; PVID=1; bp_video_offset_24455019=605949795895365900; bp_t_offset_24455019=605949795895365862; CURRENT_FNVAL=2000; innersign=0; b_lsid=B428FA27_17E1BF4258A'
        function perseCookieStr(str){  
            //设计一个cookie字符串以自身键值对的特性转化为对象的属性名属性值的形式的方法
            var obj = {};//返回的是一个对象
            var arr = str.split('; '); //首先以'; '的形式进行分割并放入数组arr中.
            arr.reduce(function(pre,cur,index,self){
                //此时arr数组中的元素形式应该为_uuid=15DF509A-17F4-BF86-2C15-8C1F51BA099667377infoc形式,在遍历时在将该元素以'='分割，形成新的数组 此时该数组应该为[_uuid,15DF509A-17F4-BF86-2C15-8C1F51BA099667377infoc]
                var temArr = cur.split('=');
                pre[temArr[0]] = temArr[1];//将temArr数组的第一位作为对象的属性名，第二位作为其属性值
                return pre;//作为返回值传给下一个pre
            },obj)
            return obj;
        }
        var cookieObj = perseCookieStr(cookirStr);
        console.log(cookieObj);

 源码实现：

        Array.prototype.myReduce = function (func,preValue) {
            var len = this.length;
            var nextValue = preValue;
            var _this = arguments[2] || window;
            for(var i = 0;i < len ; i ++ ){
                nextValue =  func.apply(_this,[nextValue,this[i],i,this]);//每次执行后更新nextValue,作为下一次执行时的previous：
            }
        }

七，ReduceRight

功能与reduce一致，不过reduce从索引0开始遍历，而reduceRight从最后一位索引开始遍历

源码实现：

        Array.prototype.myReduceRight = function (func,preValue) {
            var len = this.length;
            var nextValue = preValue;
            var _this = arguments[2] || window;
            for(var i = len;i >= 0 ; i ++ ){//只需要修改一下循环的顺序即可
                nextValue =  func.apply(_this,[nextValue,this[i],i,this]);//每次执行后更新nextValue,作为下一次执行时的previous：
            }
        }

小结

以上的方法都是对数组进行一次遍历，然后根据回调函数对数组元素进行相应的操作，底层思想是一样的，只是实现功能不同；以上方法仅对数组可用，对于类数组不可用；

可以使用扩展运算符或者Array.form()方法把类数组变成数组；

        var divArr = document.getElementsByTagName('div');
        var arr = [...divArr];//三个点就是扩展运算符
        var arr2 = Array.from(divArr);

JiangyeMx
关注
JavaScript学习笔记--进阶之路
JackieDYH的博客
03-16 1566
了解js特性&事件使用 20200316 1、JavaScript简介 历史： 第一个浏览器 就是文本和图片 网景公司 增强用户的使用体验 急需一门语言 实现用户和网页之间的交互 诞生：为了实现用户和网页的交互而出现 1、开发一门新语言 2、使用已经成熟的语言（java<sun> python c ------） ​ 这个时候使用的是java ---...
三目运算符判断多个条件
李白爱睡觉的博客
07-27 5937
标题在antd-vue的表格中，遇到需要根据后端返回的数字显示对应状态的问题，可以使用filter过滤器，也可以使用三目运算符： 三目运算符： function test(num){ return num == 10 ? 10 :(a ==20 ? 20 :'未知') } console.log(test(11111))//未知 console.log(test(10))//10 console.log(test(20))//20 ...
es6学习之路（6）：数组的扩展
wocaonima332的博客
02-17 378
1. Array.from() Array.from方法用于将两类对象转为真正的数组：类似数组的对象（ array-like object ）和可遍历（ iterable ）的对象（包括 ES6 新增的数据结构 Set 和 Map ）。 下面是一个类似数组的对象，Array.from将它转为真正的数组。 let arrayLike = { '0': 'a', '1': 'b', '2
c语言倒序输出字符串数组初始化,定义一个字符数组，，并初始化为“hello world!”，编写程序逆序输出此字符数组。...
weixin_39830175的博客
05-17 819
满意答案4j4c1r9o7x2013.10.14采纳率：52%等级：7已帮助：461人2．编写程序，以(999)99999-999的形式输入电话号码字符串。 要求：利用strtok()函数获取区号，电话号码的前五位是主机号，后三位是分机号，需将电话号码的八位数连接成一个字符串。程序将区号转化为整型，将电话号码字符串转化为长整型，并打印转化后的区号和电话号码。使用指针操作完成题目。 ⑴程序...
小白JavaScript学习笔记----JavaScript 进阶
weixin_51877011的博客
05-05 1961
垃圾回收机制(Garbage Collection) 简称 GCJS中内存的分配和回收都是自动完成的，内存在不使用的时候会被垃圾回收器自动回收。正因为垃圾回收器的存在，许多人认为JS不用太关心内存管理的问题但如果不了解JS的内存管理机制，我们同样非常容易成内存泄漏（内存无法被回收）的情况不再用到的内存，没有及时释放，就叫做内存泄漏面向过程就是分析出解决问题所需要的步骤，然后用函数把这些步骤一步一步实现，使用的时候再一个一个的依次调用就可以了。举个栗子：蛋炒饭。
小白JavaScript学习笔记----JavaScript基础
weixin_51877011的博客
04-06 1531
小白JavaScript学习笔记1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)node.js运行表3. JavaScript的组成（有什么？规定了js基础语法核心知识。比如：变量、分支语句、循环语句、对象等等。
小白JavaScript学习笔记----web APIs
weixin_51877011的博客
04-24 2376
DOM文档对象模型）是用来呈现以及与任意 HTML 或 XML文档交互的API白话文：DOM是浏览器提供的一套专门用来操作网页内容的功能**DOM作用:**开发网页内容特效和实现用户交互Web API阶段我们学习那两部分？DOMBOMDOM 是什么？有什么作用？DOM 是文档对象模型操作网页内容，可以开发网页内容特效和实现用户交互标准属性: 标签天生自带的属性 比如class id title等, 可以直接使用点语法操作比如： disabled、checked、selected。
JavaScript 学习笔记---JavaScript基础
weixin_62108620的博客
07-25 255
JavaScript基础阶段
JavaScript学习笔记（六）--数组
jingjing的博客
08-09 377
数组初始化 我们都知道，数组是用于保存多个值的集合，在数组中，值被称为元素，值可以是任意的数据类型。在Javascript中，创建数组通常有两种方式：字面量和构造函数。 字面量 数组的元素可以是任意的数据类型，也可以是函数。 var arr = []; var arr = [8,1,3]; var arr = [[8,1,3],[2,3,4]]; var arr = [true,function()]; 构造函数 可以使用Object系统内置的Array对象构造函数，也可以使用自定义构造函数。 v
JavaScript-学习笔记.pdf
08-04
以上是JavaScript学习笔记中提到的一些核心知识点，通过对这些知识点的理解和熟练应用，可以为进一步学习和掌握JavaScript打下坚实的基础。在实际开发过程中，结合具体的项目需求，这些知识会得到更深入的拓展和应用...
JavaScript基础学习笔记
10-25
JavaScript 基础学习笔记 本资源摘要信息基于黑马视频记录的学习笔记，涵盖了 JavaScript 基础知识点，包括 HTML、CSS、JavaScript、DOM、事件处理等内容。 HTML 和 CSS 基础 * HTML 结构：head、body、title、...
11-字符串--highgh的博客--JavaScript的学习笔记
highgh的博客
11-05 230
1.字符串简介 字符串就是"人类的自然语言" 字符串要用引号包裹，双引号或者单引号均可 数字11和字符串’11’在语义上是不同的，前者表达—个数量,后者是一个文本 要将一个变量的值“插入”到字符串中，要“斩断链接” let year = 2020; let str = "北京冬季奥运会在" + year + "年召开" console.log(str); //北京冬季奥运会在2020年召开 2.模板字符串 语法： `字符串 ${变量/表达式} 字符串` （键盘tab上面那个键） 作用：
一些常用的react hooks以及各自的作用
weixin_48602044的博客
11-01 284
关于react hooks的一些知识与应用
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
weixin_52173250的博客
10-30 1135
CesiumJS 案例 P12：添加指定长宽的图片图层并居中显示（圆点分别为图片图层的中心点、左上角顶点、右上角顶点、左下角顶点、右下角顶点）
JavaScript 生成二维码
qq_30049249的博客
11-02 130
我试过了，这一款js库支持中英文混合。进入网站后，可以直接点击运行哟～
基于Mysql、JavaScript、PHP、ajax开发的MBTI性格测试网站（前端+后端）
2302_79553009的博客
10-29 1443
本项目旨在构建一个基于MBTI（迈尔斯-布里格斯性格分类指标）理论的在线平台——“16Personalities”。该平台利用PHP、MySQL、JavaScript等技术栈开发，旨在帮助用户更好地理解和运用MBTI理论来评估个人性格类型，并应用于职业规划、团队建设和人际交往等多个方面。用户端功能 包括账号注册与登录、在线性格测试、性格类型浏览、团队评估及在线交友等模块。用户可以通过完成性格测试来获得详细的MBTI性格分析，并通过平台提供的功能与其他具有不同性格类型的用户互动。
echarts 遍历多个图表，并添加resize缩放
licongmingli的博客
10-30 225
遍历echarst多个图表，并添加独立的缩放函数
基于SpringBoot+Vue的快递物流信息查询系统设计与实现【前后端分离】
最新发布
m0_67428300的博客
11-02 807
随着电子商务的快速发展，快递物流系统的重要性愈发突出。针对用户对快递信息的实时查询需求，本系统结合Spring Boot和Vue技术，设计并实现了一个高效、易用的快递物流信息查询系统。系统实现了用户信息管理、订单查询、物流跟踪等功能，用户可通过简单操作即可查询快递状态，实现信息的实时展示。本快递物流信息查询系统基于Spring Boot与Vue的开发，前后端分离架构提升了系统的扩展性和开发效率。
JavaScript的第十一天
全栈学习ing
10-31 733
在使用offset系列时需注意该属性为css属性，一般用于和javascript结合使用来获取信息，所以在使用该属性时只能获取值而不能改变值。最近的具有定位属性的祖先元素顶部边缘左侧边缘。
使用json-c解析和处理数组示例
在编程中，JSON（JavaScript Object Notation）是一种轻量级的数据交换格式，被广泛用于服务器与客户端之间的数据传输。JSON-c是一个针对C语言的JSON解析器和生成器，它提供了处理JSON数据的API，包括解析JSON文本、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值