--1:数组扩展运算符
扩展运算符(spread)是三个点(...),他好比rest参数的逆运算,用来将一个数组转为用逗号分隔的参数序列。
例如:
let arr=[1,2,3]
console.log(...arr)//[1,2,3]
cosnole.log(...[1,2,3])//[1,2,3]
console.log(1,..[2,3,4],5,6)//[1,2,3,4,5,6]
console.log(document.querySelectAll('div'))//[<div>,<div>,<div>]
扩展运算符的应用:
1:该运算符主要用于函数调用。
例如:
function add(x,y,z){
return x+y+z;
}
const arr=[6,6,6];
add(...arr);//18
以上例子中扩展运算符将数组arr转为参数序列。
2:替代函数的apply()方法。
例如:
//es5写法
Math.max.apply(null,[1,5,9,3]);//9
//es6写法
Math.max(...[1,5,9,3]);//8
//等同于
Math.max(1,5,9,3)
以上代码中由于js不提供求数组元素最大值的方法,我们只能通过Math.max函数求数组元素的最大值。
但max()方法不能接受一个数组作为参数,因此需要使用apply()方法,在es6中我们则可以直接使用扩展运算符将数组转为参数序列。
例2:
通过push将一个数组添加到另一个数组的末尾
//es5写法:
var arr1=[1,2,3],
arr2=[4,5,6];
Array.prototype.push.apply(arr1,arr2)
//es6写法:
arr1.push(...arr2)
上面例子中由于push()方法的参数不能是数组,所以只好通过apoly()方法变通使用push()方法。而在es6中我们可以方便的通过扩展运算符直接将数组传给push
3:复制数组
数组是符合类型的数据,直接复制的话,只是复制了指向底层数据结构的指针,而不是克隆一个新的数组。改变其中任意一个数组都会同时改变另一个数组。
在es5中我们只能通过concat()变通方法来复制数组
var arr=[1,2,3]
var arr2=arr.concat();
在es6中我们则可以通过扩展运算符方便的复制数组
var arr3=[...arr]
4:合并数组
在es5中我们想要合并需要使用concat()方法
var arr1=[1,2,3],
arr2=[4,5,6],
arr3=[7,8,9];
arr1.concat(arr2,arr3);
在es6中我们直接使用扩展运算符即可合并数组
arr1=[...arr1,...arr2,...arr3]
--ES6给数组扩展了4个很强大的方法:
1:map--映射(一个对一个)
//例一:将一个成绩数组转换为及格/不及格
let arr=[20,98,75,16,49,89,22];
let arr2=[];
arr.map((item)=>{
arr2.push(item>=60?'及格':'不及格');
})
console.log(arr);
console.log(arr2);//['不及格','及格','及格','不及格','不及格','及格','不及格']
//例二:将数组元素*2
let result=arr.map((item)=>item*2);
console.log(result);//[40,196,150,32,98,178,44]
2:reduce--汇总(多个变成1个)
//例一:算一组数的总数
let arr=[159,859,999,1515,455,36,585];
let result=arr.reduce((tmp,item,index)=>{
console.log('tmp'+tmp);//第一次159 第二次为第一次tmp+item结果1018
console.log('item'+item);//第一次859 第二次999
console.log("=====");
return tmp+item
})
console.log(result);
//例二:算个平均数
const {log}=console;
let abs=[5,9,8,2,6,4,5,7,8,6];
let abs_result=abs.reduce((tmp,item,index)=>{
if(index==abs.length-1){//如果是最后一次那么求和完成再除以多少个计算出平均值
return (tmp+item)/abs.length;
}else{
return tmp+item;
}
})
log('平均值'+abs_result);
3:filter--过滤器
//例1:过滤所有不能被3整除的数
let arr=[56,78,58,26,48,255,989];
let result=arr.filter(item=>{
return item%3==0;
})
console.log('过滤数组,保留能被3整除的'+result);//[78,48,255]
//例2:过滤数组内价格小于1000的
let goods=[
{title:'荣耀magic2',price:3799},
{title:'红米7',price:899},
{title:'小米9',price:2888},
{title:'荣耀手环',price:369}
]
let buy=goods.filter(item=>{
return item.price>1000;
})
console.log(buy)//array类型,包含2个数组项
console.log('要购买的:');
buy.forEach(item=>{
console.log(item.title)
})
//打印:荣耀magic2,小米9
4:forEach--循环(迭代/遍历)
//例一:输出打印数组所有元素
let arr=[58,98,65,235,254,68980,4586,9898];
arr.forEach((item,index)=>{
console.log('key:'+index+'value:'+item)
})
//例二:求最大值
let max=arr[0];
let result=arr.forEach((item,index)=>{
max=item>max?item:max;
if(index==arr.length-1){
return max;
}
})
console.log('最大值:'+max);
--Array.from方法用于将两类对象转换为真正的数组:类似数组的对象(array-like object)和可遍历(iterable)的对象(包括es6新增的数据结构set和map)。
例如:
let pet={
'0':"dog",
'1':"this is a dog",
length:2
}
//转换为真正的数组
let arr3=Array.from(pet);
console.log(arr3)//["dog", "this is a dog"]
//创建一个Set
let set=new Set();
set.add(1);
set.add(2);
console.log(set);
//通过Array.from()方法将Set转换为arr
let arr=Array.from(set);
console.log(arr);
//这就提供了数组去重的另一个方法!
let arr1=[1,5,6,8,9,6,1,5,6];
arr1=Array.from(new Set(arr1));
console.log(arr1);//[1, 5, 6, 8, 9]
--Array.of方法用于将一组值,转换为数组。
这个方法的主要目的是弥补构造函数Array()的不足。
因为参数个数的不同,会导致Array()的行为有差异。
例如:
Array();//[]
Array(3);//[,,,]
Array(1,2,3);//[1,2,3]
当Array只有一个参数时,实际上指的是数组的长度。当参数大于1个时,参数时数组的元素。
Array.of()基本上可以用来替代Array()或者new Array(),并且不存在由于参数不同而导致的重载,它的行为非常统一。
例如:
Array.of();//[]
Array.of(undefined);//[undefined]
Array.of(1);//[1]
Arrat.of(1,2,3);//[1,2,3]