es6总结

let和const

• 定义函数时，用const定义函数
• let和const都不具备变量声明提升的能力

变量的自动解构和剩余参数

只有数组和对象能够自动解构

数组的结构
var [a,b,c] = [1,2,3];
console.log(a);
console.log(b);
console.log(c);

对象的解构
var {a,b,c} = {"a":1,"b":2,"c":3};
console.log(a);
console.log(b);
console.log(c);

对象的结构往往用在函数的形参列表中，调用函数的时候，传的对象（实参）就能够自动解构。

function People({name,age,sex,yuwen,shuxue,yingyu}){

this.name = name;
this.age = age;
this.sex = sex;
this.yuwen = yuwen;
this.shuxue = shuxue;
this.yingyu = yingyu;

}
var xiaoming = new People({

"name" : "小明",
"age" : 12,
"sex" : "男",
"yuwen" : 34,
"shuxue" : 44,
"yingyu" : 66

});

console.log(xiaoming);

剩余参数【rest运算符】

左边迎接的人群，比来宾少，有些来宾就接不到：
var [a,b,c] = [1,2,3,4,5,6,7];
console.log(a); //1
console.log(b); //2
console.log(c); //3

我们可以在c变量之前加上...运算符，表示c现在接受所有剩余的参数。
var [a,b,...c] = [1,2,3,4,5,6,7];
console.log(a);
console.log(b);
console.log(c); //[3,4,5,6,7]

注意：...【rest运算符】只能出现在最后一项。

强制解构【扩展运算符】

rest运算符是放在左边的【将零散的转为数组（对象）】，扩展运算符是放在右边的【将数组（对象）的转化为零散】

用处：
数组赋值====

let arr1=['aa','bb','cc'];
let arr2=[...arr1]; //这个数组将变为零散量。
console.log(arr2);
arr2.push('dd');

做函数的参数====

function jspang(...arg){
    console.log(arg[0]);
    console.log(arg[1]);
    console.log(arg[2]);
    console.log(arg[3]);
 
}
jspang(1,2,3);

...运算符也可以作用于对象，通常用于一个情况：创建obj1的副本，仅仅改变obj1的某一（些）个属性。

var obj1 = {
    "a" : 1,
    "b" : 2,
    "c" : 3
};

var obj2 = {
    ...obj1 ,
    "b" : 8
};

console.log(obj2); //{"a" : 1,"b" : 8,"c" : 3}

强制解构还可以用于类数组对象，可以将类数组对象变为真的数组：

const fun = function(){

   console.log(arguments); //[Arguments] { '0': 1, '1': 2, '2': 3, '3': 4, '4': 5, '5': 6, '6': 7, '7': 8 }

    **//下面的语句是一个奇淫技巧，是最快的将类数组对象变为数组的方法**
    var arr = [...arguments]; //类数组对象；这里...是对对象扩展拿到零散量，再将零散量用[]括起来变成数组
    console.log(arr);        //[ 1, 2, 3, 4, 5, 6, 7, 8 ]
    console.log(Array.isArray(arr)); //true
}
fun(1,2,3,4,5,6,7,8);

数组的新方法

forEach方法

    arr.forEach(function(数组内容，数组下标){})

    var arr = ["白板","幺鸡","二条","三万","四筒"];
    arr.forEach((item,index)=>{
        console.log(`${index}:${item}`);
    })

    结果：
    0:白板
    1:幺鸡
    2:二条
    3:三万
    4:四筒

注意：参数是个函数，这个函数中有两个参数，分别是item和index，是遍历到的这一项的内容和下标。

map()方法

Map()返回一个新的数组，新数组的每一项是原数组的映射。

    var arr =[1,2,3,4,5,6,7,8];
    const strArr = arr.map((item)=>{
        return item*2;
    })
    console.log(strArr);
    
    结果：
    [ 2, 4, 6, 8, 10, 12, 14, 16 ]

    

注意点：

• map方法中参数是函数；
• 函数必须要有一个 return
• map()出的数组，一定和原数组长度相同！
• 函数里面的的return就是新数组中这一项的数值。

filter()方法

从一个数组中，过滤一些项组合成为新数组，此时使用filter()函数。它返回一个符合条件的新的数组

把arr数组中所有的偶数都提炼出来组合成为新的数组：

var arr = [3,43,25,43,543,645,765,7,23,432,4,324,23,43,45];
const arr1 = arr.filter((item)=>{
    return item % 2 ===0;
})
console.log(arr1);
 结果：
 [ 432, 4, 324 ]
 
 

注意：

• filter()中参数有一个函数，这个函数return为true的项会被加入到新的数组中。

reduce()方法

reduce表示迭代遍历，每一项的遍历都可以使用遍历上一项的时候的结果。
reduce可以理解为“降阶”。

reduce里面的函数有两个参数，分别是a、b。

我们来探究a、b什么意思。所以我们直接输出a：
var arr = ["白板","幺鸡","二条","三万","四筒"];
arr.reduce(function(a,b){
    console.log(a);
});

结果：

白板
undefined
undefined
undefined

注意：结果中少了最后一项

arr.reduce(function(a,b){
console.log(b);
});

结果：

 
幺鸡
二条
三万
四筒

注意：这里又少了第一项

小结：

reduce的机理：

• a就表示遍历前一项的时候return的值，b表示这一项【当前】的值。【a缺尾，b缺头】
• 系统会自动从下标为1的项开始遍历，遍历下标为1的项的时候，a的值是第0项。【这里是为什么没有最后一项的原因】
• 最后的一项的return，就是总return。

arr.reduce(function(prev,cur,index,arr){
...
}, init);

arr 表示原数组；
prev 表示上一次调用回调时的返回值，或者初始值 init; 【一般一个数组中只有第一项会返回正常值，undefined，并且还没有最后一项】
cur 表示当前正在处理的数组元素【不会有第一项的值】；
index 表示当前正在处理的数组元素的索引，若提供 init 值，则索引为0，否则索引为1；
init 表示初始值。

例子1：求数组的和

var arr = [3,4,5,2,2];
var sum = arr.reduce((a,b)=>{
    console.log('上一次return的值');
    console.log(a);
    console.log('当前遍历的值');
    console.log(b);
    return a+b;
})
console.log(sum);

结果：

上一次return的值
3
当前遍历的值
4
上一次return的值
7
当前遍历的值
5
上一次return的值
12
当前遍历的值
2
上一次return的值
14
当前遍历的值
2

console.log(sum);// 16

例子2：求数组的最大值

var arr = [4,43,5,436,45,623,4,324,23,443,53,65,46,45,6,234,324];
var result = arr.reduce(function(a,b){
    return a >= b ? a : b;
});
console.log(result);  //623

reduce的哲学意义，就是把一个数组揉吧揉吧，每一项都参与参与，得出唯一的一个数字。

小结：

reduce() 是数组的归并方法，与forEach()、map()、filter()等迭代方法一样都会对数组每一项进行遍历，但是
reduce() 可同时将前面数组项遍历产生的结果与当前遍历项进行运算.

（重要）综合运用map、filter、reduce、结构

• 删除用filter
• 改变用map
• 增加用...

var xiaoming = {
    "name" : "小明",
    "age" : 12,
    "sex" : "男",
    "friends" : [
        {
            "name" : "小红",
            "age" : 13
        },
        {
            "name" : "小强",
            "age" : 14
        },
        {
            "name" : "小刚炮",
            "age" : 18
        }
    ]
}

● 题目1：不允许更改小明！返回一个新对象，这个对象和小明相同，仅让小明的年龄变为15岁！


答案：
var xiaoming = {
    "name" : "小明",
    "age" : 12,
    "sex" : "男",
    "friends" : [
        {
            "name" : "小红",
            "age" : 13
        },
        {
            "name" : "小强",
            "age" : 14
        },
        {
            "name" : "小刚炮",
            "age" : 18
        }
    ]
}

var xiaoming2 = {
    ...xiaoming , 
    "age" : 15
}

● 题目2：不允许更改小明！让小强的age变为22。
var xiaoming2 = {
    ...xiaoming , 
    "friends" :  xiaoming.friends.map(function(item){
        //如果这一项的name是小强，此时返回别的项都不改，只改变age项
        if(item.name == "小强"){
            return {
                ...item ,
                "age" : 22
            }
        }

        //反之，返回原来的项
        return item;
    });
}




● 题目3：不允许更改小明！让小明的只有15岁以下的朋友。
var xiaoming2 = {
    ...xiaoming ,
    "friends" : xiaoming.friends.filter(function(item){
        return item.age < 15;
    })
}



● 题目4：不允许更改小明！小明增加一个朋友，老王，88岁
var xiaoming2 = {
    ...xiaoming ,
    "friends" : [...xiaoming.friends , {
        "name" : "老王" ,
        "age" : 88
    }]
}


var xiaoming2 = {
    ...xiaoming ,
    "friends" : [{
        "name" : "老王" ,
        "age" : 88
    },...xiaoming.friends ]
}

● 题目5：不允许更改小明！增加一个朋友并且自动编号：
var xiaoming2 = {
    ...xiaoming ,
    "friends" : [
        ...xiaoming.friends,
        {
            "id" : xiaoming.friends.reduce(function(a,b){
                return a.id > b.id ? a : b;
            }).id + 1 ,
            "name" : "老王" ,
            "age" : 88
        }
    ]
}

不更改原来的对象，返回一个新对象，新对象是原来对象的增、删、改某些属性，这叫做函数式编程，也叫作兰姆达式编程。

includes()方法

Array.prototype.includes方法返回一个布尔值，表示某个数组是否包含给定的值。之前我们判断数组中是否存在一项，此时用indexOf() != -1（IE8开始兼容）。如果要IE6、7兼容，必须一项一项遍历比较。
ES6中，有了更简单的比较方法：

var arr = ["三星","oppe","苹果"];
console.log(arr.includes("vivo"));  //false
console.log(arr.includes("苹果"));  //true


console.log(arr.indexOf('苹果'));  //2

注意，includes是全等比较，带着类型比较的：

var arr = ["三星","oppe","苹果",7];
console.log(arr.includes("7")); //false