学习es6第三天之函数扩展和数组扩展

本文主要介绍了ES6中函数和数组的新特性,包括rest参数、箭头函数、Array.from、Array.of等,详细解释了这些特性的使用方法及注意事项。
一、函数扩展
    1. rest参数
        es6引入了rest参数(形式:'...args'),主要用于接受函数多余的参数,因此我们就不需要arguments这个对象了,rest参数对应的是一个数组,将多余的参数放进这个数组
        注意:rest参数必须是尾参数,rest参数后边不能再有别的参数,否则会报错
        数组的解构赋值与rest参数配合
    2. 箭头函数
        es6规定允许使用箭头(=>)定义函数
            let f2=b=>console.log(b);
            (b=>console.log(b))(3);//3
        如果箭头函数不需要参数或有多个参数,需要使用一个小括号将参数包裹
        无参:
            let f2=()=>console.log(5);
        很多参数:
            let f4=(a,b,c)=>console.log(a+b+c);
        如果箭头函数函数体内有多条语句,需要使用大括号括起来,并且使用return语句返回内容
        大括号被编译器解析为代码块,所以如果箭头函数只返回一个对象,使用小括号将该对象括起来,就不会被解析为代码块
        箭头函数与变量解构结合使用
        箭头函数可以用于简化回调函数
            let arr=[5,6,7,8].map(x=>x*x);
        rest参数与箭头函数结合
        注意事项:
            1) 函数体内的this对象,指向定义时所在的对象,而不是调用时所在的对象,箭头函数本身没有自己的this,所以箭头函数通过call,bind,apply调用时传的this也是没有效果的
                使用箭头函数作为事件处理函数,this不会指向事件源,而是指向箭头函数定义时所在的对象
                     function Fun3() {
                            this.a=1;
                            this.b=2;
                            box2.onclick=function () {
                                console.log(this);//box2
                            };
                            box3.onclick=function () {
                                console.log(this);//Fun3
                            }.bind(this);
                            box4.onclick=()=>{
                                console.log(this);//Fun3
                            }
                        }
                     var obj2=new Fun3();
            2) 箭头函数不可以作为构造函数,就是说不可以使用new命令调用箭头函数,会报错
            3) 箭头函数中没有arguments对象,不可以被调用,如果需要,使用rest参数
        箭头函数的嵌套:
            let fun=()=>({f:()=>({s:()=>console.log(11)})});
            fun().f().s();//11
二、数组扩展
    1. Array.from()
        用于将两类对象转为数组:类数组对象(array-like-object)和可遍历对象(iterable)
            let divs=document.getElementsByTagName('div');
            var fArr=Array.from(divs);
            var arr2=Array.from(arguments);
        from方法还可以接受第二个参数,作用类似于map方法,用来对每一个元素进行处理,将处理结果放进返回的数组中,映射
            from方法可以将各种值转为数组,还有map功能,只要我们有一个原始的数据结构,就可以先对他进行处理转为一个标准的数组,然后就可以使用数组的各种方法
        from可以将字符串转为数组,然后返回字符串的长度,因为from可以处理各种Unicode编码字符,可以避免js将大于\uffff的Unicode字符算作两个字符的bug
    2. Array.of()
        用于将一组值转换为数组,这个方法的主要目的是弥补数组构造函数Array()的不足之处,因为Array()函数会因为参数个数的不同处理有所差异
        Array() 构造函数只有参数多于2的时候才能创造一个正常的数组
        Array.of() 可以替代array(),Array.of 总是返回参数值组成的新数组,如果没有参数就是一个空数组
    3. copyWithin()
        数组实例对象的方法,在当前数组内部,将指定位置的成员复制到其他位置(会覆盖原有的成员),然后返回当前数组,这个方法会修改当前数组
        语法:
            [1,2,3,4].copyWithin(target,start,end);
            target:必须写,从这个位置开始替换
            start:可选,从该位置开始读取,默认是0,负值表示倒着数 ,包括当前位置
            end:可选,到该位置结束,默认等于数组长度,负值表示倒序,不包含该位置
    4. find()和findIndex()
        数组实例的方法find,用于找出第一个符合条件的成员,参数是一个回调函数,所有元素依次执行该回调,直到找到第一个返回值为true的成员,将该成员返回,如果没有找到返回undefined
        find() 方法还可以接收三个参数,依次是当前的值,下标,原数组
        数组实例的方法findIndex(),用法与find一样,返回第一个符合条件的元素的下标,如果没有符合的元素,返回-1
    5. fill()
        使用给定的值,填充一个数组,fill方法用于空数组初始化非常方便,数组中已有的元素全都会抹掉
        fill方法还可以接收第二个和第三个参数,用于指定填充的位置
    6. includes()
        该方法返回一个布尔值,表示某个数组是否包含给定的值,与字符串的includes方法类似
        第二个参数表示开始搜索的起始位置,默认是0,如果是负数表示倒序,如果超出数组长度范围,就会认为从0开始
    7. 数组的空位
        数组的空位指的是数组的某个位置上没有任何值,new Array(3)//[,,];
        注意:空位不是undefined,如果一个位置是undefined,就表示该位置有值
        在es5当中,对空位的处理很不一致,大多数情况会直接跳过忽略空位
            forEach(),filter(),every(),some()等都会跳过空位
            map() 会跳过空位,但是会保留这个值
            join() 和 toString() 会将空位视为undefined,而undefined 和 null 会被处理为空字符串
        但是在es6中,所有的空位都是undefined
        由于空位的处理规则不一致,所以尽量避免出现空位
无界云图(开源在线图片编辑器源码)是由四川爱趣五科技推出的一款类似可画、创客贴、图怪兽的在线图片编辑器。该项目采用了React Hooks、Typescript、Vite、Leaferjs等主流技术进行开发,旨在提供一个开箱即用的图片编辑解决方案。项目采用 MIT 协议,可免费商用。 无界云图提供了一系列强大的图片编辑功能,包括但不限于: 素材管理:支持用户上传、删除批量管理素材。 操作便捷:提供右键菜单,支持撤销、重做、导出图层、删除、复制、剪切、锁定、上移一层、下移一层、置顶、置底等操作。 保存机制:支持定时保存,确保用户的工作不会丢失。 主题切换:提供黑白主题切换功能,满足不同用户的视觉偏好。 多语言支持:支持多种语言,方便全球用户使用。 快捷键操作:支持快捷键操作,提高工作效率。 产品特色 开箱即用:无界云图采用了先进的前端技术,用户无需进行复杂的配置即可直接使用。 免费商用:项目采用MIT协议,用户可以免费使用商用,降低了使用成本。 技术文档齐全:提供了详细的技术文档,包括技术文档、插件开发文档SDK使用文档,方便开发者进行二次开发集成。 社区支持:提供了微信技术交流群,用户可以在群里进行技术交流问题讨论。 环境要求 Node.js:需要安装Node.js环境,用于运行打包项目。 Yarn:建议使用Yarn作为包管理工具,用于安装项目依赖。 安装使用 // 安装依赖 yarn install // 启动项目 yarn dev // 打包项目 yarn build 总结 无界云图是一款功能强大且易于使用的开源在线图片编辑器。它不仅提供了丰富的图片编辑功能,还支持免费商用,极大地降低了用户的使用成本。同时,详细的文档活跃的社区支持也为开发者提供了便利的二次开发集成条件。无论是个人用户还是企业用户,都可以通过无界云图轻
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值