一、函数扩展
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.οnclick=function () {
console.log(this);//box2
};
box3.οnclick=function () {
console.log(this);//Fun3
}.bind(this);
box4.οnclick=()=>{
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
由于空位的处理规则不一致,所以尽量避免出现空位
es5和es6的函数区别,数组区别
最新推荐文章于 2023-10-21 21:40:00 发布