2

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






素素
37 声望0 粉丝