ES6 数组的扩展

forEach  数组遍历

var arr = ["足球","篮球","排球","乒乓球","羽毛球","橄榄球","网球"]
//es5写法
for(var i=0; i<arr.length; i++){
    console.log(arr[i]);
}
//es6写法
arr.forEach(function (item,index) {  
    console.log(`${item}的下标是${index}`)
})

map 映射

map方法表示的是映射，返回的是一个全新的数组，新数组的每一项都是原数组的映射

例：让下面的数组每一项值都乘以2

let  arr = [2,4,6,8,10];
let arr2 = arr.map(function (item,index) {
    return item*2
})
console.log(arr2)

filter 过滤

filter方法，过滤旧的数组，返回新的数组集合

1、将下面数组中的基数过滤掉

let arr = [2,45,7,965,4,78,7,115,748,78,4,8,12,478,12185]
let arr2 = arr.filter(function(item,index){
    return item % 2 == 0
})
console.log(arr2)

filter中的参数是函数，这个return为true的值会返回的到新的数组中

2、过滤JSON 返回分数大于60 的数据

let arr = [
    {"name":"张三","score":"80"},
    {"name":"李四","score":"90"},
    {"name":"王五","score":"85"},
    {"name":"赵六","score":"70"},
    {"name":"王麻子","score":"65"},
    {"name":"二流子","score":"55"},
]
let arr2 = arr.filter(function (item) {
    return item.score > 60
})
console.log(arr2)

reduce迭代遍历

reduce方法表示迭代遍历，每一项遍历都可以使用上一项遍历时候的结果

reduce函数里面有两个参数，分别用a,b去表示

var arr = ["足球","篮球","排球","乒乓球","羽毛球","橄榄球","网球"]
arr.reduce(function (a,b) {
    console.log(a,b)
})

左边表示a的值右边表示b的值，

• a除了第一项之外都是undefined，是因为a取决于上一次的计算结果，所以除了初始化的第一次知道自己是谁，剩下的都需要计算返回结果
• b就是依次从第二项开始遍历的结果

var arr = ["足球","篮球","排球","乒乓球","羽毛球","橄榄球","网球"]
arr.reduce(function (a,b) {
    console.log(a)
    return a+b
})

字符串的相加 就是拼接 ，所以返回的结果是

reduce的机理

• a表示遍历前一项的时候return 的值，b表示当前这一项的值。
• 系统会自动从下标为1的开始遍历，遍历下标为1项的时候，a的值是第0项
• 最后一项的return，就是最后结果的返回

应用实例

数组求和

var arr = [1,2,3,4,5,6,7,8,9,10];
var result = arr.reduce(function (a,b) {
    return a+b
})
console.log(result)

数组求最值

let arr = [2,45,7,965,4,78,7,115,748,78,4,8,12,478,12185]
let result = arr.reduce(function (a,b) {
    return a>b?a:b;
})
console.log(result)

综合应用 小案例

解构赋值

1、在不更改原对象的情况下，返回一个新对象，这个对象和xiaoli相同，仅仅让xiaoli的年龄变为23岁

var xiaoli = {
    "name" : "小李",
    "age" : "26岁",
    "sex" : "男",
    "family" : [
        {
            "name" : "父亲",
            "age" : "50岁"
        },
        {
            "name" : "母亲",
            "age" : "48岁"
        },
        {
            "name" : "妹妹",
            "age" : "22岁"
        }
    ]
}
var xiaoli2 = {
    ...xiaoli,
    "age":"23岁"
}
console.log(xiaoli2)

map 

2、在不更改xiaoli的情况下，让父亲的年龄变为48

var newxiaoli = {
    ...xiaoli,
    "family":xiaoli.family.map(function (item) {
        if(item.name == "父亲"){
            return{
                ...item,
                "age" :"48岁"
            }
        } else{
            return item;
        }
        
    })
}
console.log(newxiaoli)

filter 

3、在不更改xiaohong的情况下，让返回小红大于15岁的朋友

var xiaohong = {
    "name": "小红",
    "age": 14,
    "sex": "女",
    "friends": [
        {
        "name": "小明",
        "age": 10
        },
        {
        "name": "小刚",
        "age": 14
        },
        {
        "name": "小兰",
        "age": 16
        },
        {
        "name": "小马",
        "age": 17
        },
    ]
}
var newxiaohong = {
    ...xiaohong,
    "friends":xiaohong.friends.filter(function (item) { 
        return item.age > 15
    })
}
console.log(newxiaohong)

4、在不更改xiaohong的情况下，让小红增加一个朋友小王

var newxiaohong = {
    ...xiaohong,
    "friends":[
        ...xiaohong.friends,
        {
            "name":"小王",
            "age" : 26
        }
        
    ]
}
console.log(newxiaohong)

reduce

5、在不更改小红的情况下，增加一个朋友小花，年龄是所有朋友年龄最大的朋友的两倍

var newxiaohong = {
    ...xiaohong,
    "friends":[
        ...xiaohong.friends,
        {
            "name":"小花",
            "age" : xiaohong.friends.reduce(function (a,b) {
                return a.age>b.age?a : b
            }).age*2
        }
        
    ]
}
console.log(newxiaohong)

includes 包含

includes方法返回一个布尔值，表示某个数组是否包含了某一个值。

之前的判断值是否在数组中使用的是indexOf()方法   返回一个小标

var arr = ["苹果","橘子","香蕉"];
console.log(arr.includes("橘子"))
//true

find和findIndex  查找

find查找第一个

find方法的作用就是对数组的查找，查找的结果是找到符合的第一项为止，后面即便有多项符合也不找了

var arr = [1,2,3,4,5,6];
var result = arr.find(function(item){
  return item > 2
})
console.log(result)  //只返回3

findIndex返回第一个的下标

数组实例的findIndex方法的用法与find方法非常类似，返回第一个符合条件的数组成员的位置，如果所有成员都不符合条件，则返回-1。

var arr = [1,2,3,4,5,6];
var result2 = arr.findIndex(function(item){
    return item > 2
})
console.log(result2) //返回2  是3的下标

Array.from  转换类数组对象

Array.from方法用于将类数组对象转为真正的数组：类似数组的对象（array-like object）和可遍历（iterable）的对象

let arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
};
var arr = Array.from(arrayLike)
console.log(arr)

实际应用中函数的arguments和DomList更常用这个方法

function fun() {
  console.log(Array.from(arguments))
} 
fun(1,2,3,4,5)

Array.of  值转换为数组

Array.of(3, 11, 8) // [3,11,8]
Array.of(3) // [3]
Array.of(3).length // 1