谷粒商城学习——P31-33函数优化&ES6箭头函数&对象优化&map和reduce

函数参数默认值

在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：

function add(a, b) {
            // 判断b是否为空，为空就给默认值1
            b = b || 1;
            return a + b;
}

es6可以直接给参数写上默认值，没传就会自动使用默认值

function add2(a, b = 1) {
            return a + b;
}

类似java的...不定参数

function fun(...values) {
            console.log(values.length)
}

箭头函数

 

 

<script>
    // 以前
    var print = function (obj1,obj2) {
        console.log(obj1,obj2);
    }
    print("hello1","hello2");//输出“hello1 hello2”
    //箭头函数
    var print = (obj1,obj2) => console.log(obj1,obj2);
    print("hello2","hello3");//输出“hello2 hello3”
</script>

可以看出，箭头函数，省略了function，用=>代替了{}。当一个参数时，可省略参数的()

箭头函数的解构

<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }
    //以前
    function hello(person) {
        console.log("hello," + person.name+person.age);
    }
    hello(person);//输出“hello,jack21”
    //箭头函数+解构
    var hello2 = (person) => console.log("hello," + person.name + person.age);
    hello2(person);//输出“hello,jack21”
    //箭头函数+解构
    var hello3 = ({name,age}) => console.log("hello," + name + age);
    hello3(person);//输出“hello,jack21”
</script>

 所谓解构，就是传参可以不传对象只传属性名（属于名必须属于对象），且用对象的{}括起来

对象优化新增的api

<script>
    const person = {
        name: "jack",
        age: 21,
        language: ['java', 'js', 'css']
    }

    console.log(Object.keys(person)); //["name", "age", "language"]
    console.log(Object.values(person)); //["jack", 21, Array(3)]
    console.log(Object.entries(person)); //[Array(2), Array(2), Array(2)]
</script>

类似Map用法没什么值得说的

assign合并assign(dest,...src)：将多个src对象的值拷贝到dest中，（第一层深拷贝，第二层浅拷贝？？？不知道深浅啥意思）

<script>
    //2）、声明对象简写
    const age = 23
    const name = "张三"
    const person1 = {age: age,name: name}
    // 简写：属性名和属性值的变量名相同时，可以只写属性名
    const person2 = {age,name} 
    console.log(person2);
</script>

对象函数的属性简写

初觉花里胡哨的，不想写。再想想，想到和java语法一样了就豁然开朗了

<script>
    //3）、对象的函数属性简写
    let person3 = {
        name: "jack",
        // 以前：
        eat: function(food) {
            console.log(this.name + "在吃" + food);
        },
        //箭头函数this不能使用，要使用的话需要使用：对象.属性
        eat2: food => console.log(person3.name + "在吃" + food),
        //箭头函数想使用this，就和java语法一样了
        eat3(food) {
            console.log(this.name + "在吃" + food);
        }
    }
    person3.eat("香蕉");
    person3.eat2("苹果")
    person3.eat3("橘子");
</script>

对象（深拷贝）与合并对象

个人浅见，就是一个语法，花括号中的任意多个参数合并为一个对象。let newObj={agr,agr2,agr3,.....}

...对象是取对象的所有参数

<script>
    let age1 = { age: 15 }
    let name1 = { name: "Amy" }
    let p2 = {name:"zhangsan"}
    p2 = { ...age1, ...name1,'lisi':'lisi' } 
    console.log(p2)//{age: 15, name: "Amy", lisi: "lisi"}，原对象的值会被覆盖
</script>

 

map和reduce

<script>
        //map,将数组中的每个元素处理后，返回新的数组
         let arr = ['1', '20'];
         arr = arr.map(item=> item*2);
         console.log(arr);//[2, 40]
        //reduce() 为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，
        //reduce感觉没卵用啊
        let result = arr.reduce((a,b)=>{
            console.log("上一次处理后："+a);
            console.log("当前正在处理："+b);
            return a + b;
        },100);
        console.log(result)
</script>