···从2016年开始,阮一峰博客的ES6第二版的发布,已经过去两个年头
在这两年中ES6已经应用在前端的各个语法当中。
作为React框架的基本语言便是ES6,所以掌握ES6的基本语法,对程序员而言已经迫在眉睫,毕竟影响着各位的饭碗。
下面我们看下ES6的新数组操作方法:
- forEach 是Array新方法中最基本的一个,就是遍历,循环。
var arr = ["aa","ddd","sada"]
arr.forEach(function(item,index){
console.log(item+"--"+index)
})
//(打印结果) aa--0 ddd--1 sada--2
- Map对象就是简单的键值对映射。其中的键和值可以使任意值。
var arry2 = [1,2,3,4,5,11,22,345,3321]
var arr2 = arry2.map(item=>{
return item*2
})
console.log(arr2)
//(打印结果) [ 2, 4, 6, 8, 10, 22, 44, 690, 6642 ]
- filter为“过滤”、“筛选”之意。指数组filter后,返回过滤后的新数组。用法跟map极为相似:
var arry2 = [1,2,3,4,5,11,22,345,3321]
var arr3 = arry2.filter(item=>{
return item%2==0
})
//(打印结果) [ 2, 4, 22 ]
- reduce是JavaScript 1.8中才引入的,中文意思为“减少”、“约简”。不过,从功能来看,我个人是无法与“减少”这种含义联系起来的,反而更接近于“迭代”、“递归(recursion)”
var arry2 = [1,2,3,4,5,11,22,345,3321]
var list = arry2.reduce((previous, current, index, array)=>{
return previous + current;
})
//previous 计算结果的值 默认第返回第一个值
//current 当前值
// index 下标
// array 整个数组
1--2
2--3
3--4
.....
最终返回一个结果(一般用于计算总和,和排除对象中的值
下面做一下练习:
var liy = [
{"name":"小孔","sore":"60"},
{"name":"li","sore":"80"},
{"name":"ll","sore":"160"}
]
var cc = liy.filter(item=>{
return item.sore>60
})
console.log(cc) //返回大于60的分数
// [ { name: 'li', sore: '80' }, { name: 'll', sore: '160' } ]
改变对象里面的数值
//把小李的年龄改为99 面试经常问到
var xiaoming = {
"name":"小明",
"age" : 12,
"friends" :[
{
"id":1,
"name":"小红",
"age":13
},
{
"id":2,
"name":"小里",
"age":14
},
{
"id":3,
"name":"小吃",
"age":19
}
]
}
var ol = {
...xiaoming, //展开数组
"friends":xiaoming.friends.map(item=>{
//如果是小里返回
if(item.name=="小里"){
return{
...item,
"age":99
}
}
//否则返回
return item
})
}
//筛选>13的返回一个新的对象
var superold = {
...xiaoming,
"friends":xiaoming.friends.filter(item=>{
return item.age>13
})
}
//得到新数组类似于push 往里面添加新的对象
var xiaoming2 = {
...xiaoming ,
"friends":[{
"name": "张开",
"age":90
},...xiaoming.friends]
}
//让张王ID自增加+1
var xiaoming3= {
...xiaoming,
"friends":[
...xiaoming.friends,{
id:xiaoming.friends.reduce((a,b)=>{
console.log(a,b,"222")
return a.id > b.id ? a : b
}).id+1,
"name": "张王",
"age":77
}
]
}