??···從2016年開始，阮一峰博客的ES6第二版的發(fā)布，已經(jīng)過去兩個年頭
在這兩年中ES6已經(jīng)應(yīng)用在前端的各個語法當中。
??作為React框架的基本語言便是ES6，所以掌握ES6的基本語法,對程序員而言已經(jīng)迫在眉睫，畢竟影響著各位的飯碗。
下面我們看下ES6的新數(shù)組操作方法：
- forEach 是Array新方法中最基本的一個，就是遍歷，循環(huán)。
var arr = ["aa","ddd","sada"]
arr.forEach(function(item,index){
console.log(item+"--"+index)
})
//(打印結(jié)果) 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)
//(打印結(jié)果) [ 2, 4, 6, 8, 10, 22, 44, 690, 6642 ]
- filter為“過濾”、“篩選”之意。指數(shù)組filter后，返回過濾后的新數(shù)組。用法跟map極為相似：
var arry2 = [1,2,3,4,5,11,22,345,3321]
var arr3 = arry2.filter(item=>{
return item%2==0
})
//(打印結(jié)果) [ 2, 4, 22 ]
- reduce是JavaScript 1.8中才引入的，中文意思為“減少”、“約簡”。不過，從功能來看，我個人是無法與“減少”這種含義聯(lián)系起來的，反而更接近于“迭代”、“遞歸(recursion)”
var arry2 = [1,2,3,4,5,11,22,345,3321]
var list = arry2.reduce((previous, current, index, array)=>{
return previous + current;
})
//previous 計算結(jié)果的值 默認第返回第一個值
//current 當前值
// index 下標
// array 整個數(shù)組
1--2
2--3
3--4
.....
最終返回一個結(jié)果（一般用于計算總和，和排除對象中的值
下面做一下練習(xí)：
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的分數(shù)
// [ { name: 'li', sore: '80' }, { name: 'll', sore: '160' } ]
改變對象里面的數(shù)值
//把小李的年齡改為99 面試經(jīng)常問到
var xiaoming = {
"name":"小明",
"age" : 12,
"friends" :[
{
"id":1,
"name":"小紅",
"age":13
},
{
"id":2,
"name":"小里",
"age":14
},
{
"id":3,
"name":"小吃",
"age":19
}
]
}
var ol = {
...xiaoming, //展開數(shù)組
"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
})
}
//得到新數(shù)組類似于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
}
]
}
