商城项目05_ES6 - varlet const解析表达式模板字符串箭头函数map reduceObject优化

Posted 2023-01-31 所得皆惊喜

文章目录

• ①. let | const | var
• ②. 数组、对象解析表达式
• ③. 模板字符串
• ④. 箭头函数
• ⑤. map和reduce
• ⑥. 对象(Object)优化

写在最前面:
(1). ECMAScript6.0(以下简称ES6,ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本),是javascript语言的下一代标准,2015年6月正式发布,从ES6开始的版本号采用年号,如ES2015,就是ES6。ES2016就是ES7
(2). ECMAScript是规范,JS的规范的具体实现。

①. let | const | var

• ①. let是块级作用域,函数内部使用let定义后,对函数外部无影响

      <script>
        //1.var申明的变量有变量提升,如果不初始化会输出undefined,不会报错。
        console.log(num)//undefined
        var num = 10
        console.log(num)//10
        
        console.log(num2)//报错 (let申明的变量没有变量提升)
        let num2 = 10
        console.log(num2)//10
        
        //2.外部的num变量与内部let声明的变量是没有关系的
	    //利用let声明的变量会绑定在这个块级作用域,不会受外界的影响
        var num3=10
        if(true)
             //由于内部的num3和外部没有关系,这里的num3是let num3,所以这里会报错
             console.log(num3)
             let num3=5;
             console.log(num3)
        
        //3.let只能声明一次,声明多次相同变量会报错
        let a=5;
        let a=10;
      </script>

• ②. const定义的变量不可以修改,而且必须初始化

    <script>
        /*
        1、具有块级作用域
        2、声明常量必须赋值
        3、赋值后值不能修改(存储地址不可更改)
        */
        //例
        const ary = [100, 200];
        ary[0] = 'a'; 
        ary[1] = 'b'; 
        console.log(ary); // ['a', 'b'];
        ary = ['a', 'b']; // Assignment to constant variable
    </script>

• ③. var定义的变量可以修改,如果不初始化会输出undefined,不会报错

②. 数组、对象解析表达式

• ①. 解析表达式两种情况

1. 数组赋值:如果解构不成功,变量的值为undefined
2. 对象赋值

    <script>
        //1.数组赋值
        let [a, b, c, d] = [1, 2, 3];
        console.log(a)//1
        console.log(b)//2
        console.log(c)//3
        console.log(d);//undefined
        //如果解构不成功,变量的值为undefined
        //2.对象赋值
        let name,age="name":"xiaozhi","age":23
        console.log(name)
        console.log(age)
		// 起別名
        let person=name:"tangzhi",age:"24"
        let name:myName,age:myAge=person;
        console.log(myName);
        console.log(myAge);
    </script>

③. 模板字符串

• ①. 基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$来界定。

• ②. 在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定

• ③. 代码展示:

    <script>
        //1.基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$来界定。
        let name1="xiaozhi";
        console.log("name"+name1);
        let name='xiaozhi'
        console.log(`name:$name`);
        //2.在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定
        var test="hel\\
        a";
        let msg=`<div>
          <h1>xiaozhi</h1>      
        </div>`
        console.log(`$msg`);
        //3.对象初始化简写
        function person6(name,age) 
            return name:name,age:age;
        
        console.log(person6("tangzhi",25));//Object  name: "tangzhi", age: 25 
        console.log(JSON.stringify(person6("tangzhi",25)));//"name":"tangzhi","age":25
        
        //以上代码可以简写为:
        function person7(name,age)
            return name,age
        
        console.log("------------")
        console.log(JSON.stringify(person7("tangzhi",25)));//"name":"tangzhi","age":25

        //4.模板字符串中调用函数
        function fun() 
            return "我来了..."
        
        console.log(`我想说$fun()`)
    
       </script>

④. 箭头函数

• ①. 箭头函数的作用:定义匿名函数

• ②. 特点:

1. 箭头函数不绑定this关键字,箭头函数中的this指向定义它时所在的作用域中的this
2. 如果只有一个形参时、括号可以省略
3. 函数体中只有一句代码,且代码的执行结果就是你想返回的值,可以省略大括号
4. 注意:如果所定义的箭头函数外层没有函数则作用的是全局作用域(window)

• ③. 语法:

1. ( ) => //():代表是函数;=>:必须要的符号,指向哪一个代码块;:函数体
2. const fn = ( ) => //代表把一个函数赋值给fn

    <script>
      
        /*1.只有一个参数的时候*/
        var print1=obj => console.log(obj);
        print1("print1");//print1
        /*2.有两个参数的时候,且只有一行代码,return可以省略*/
        var print2=(a,b)=> a+b;
        console.log(print2(2, 3));//5
        /*3.当函数中有多行代码的时候,return不能省略*/
        var print3=(c,d)=>
            console.log("c是"+c);//c是4
            console.log("d是"+d);//d是5
            return c+d;
        
        console.log(print3(4,5));//9
        /*4.在json对象中使用箭头函数*/
        var name2="tangzhi";
        let  person=
            "name":"xiaozhi",
             eat1:function (foot = "鱼") 
                  //xiaozhi吃鱼
                  console.log(`$this.name吃$foot`);
             ,
             //注意:箭头函数不能使用this
             //xiaozhi吃meet
             eat2:foot=>console.log(`$person.name吃....$foot`),
             eat3(foot)
                 //xiaozhi吃虾
                 console.log(`$this.name吃$foot`);
             
        ;
        person.eat1("鱼");
        person.eat2("meet");
        person.eat3("虾");

        /*5.箭头函数加对象解构*/
        var person2=
            "name":"xiaozhi",
            "age":25
        ;
        //你好:xiaozhi
        var print5=(name)=>console.log("你好:"+name);
        print5(person2);
        
        //6.扩展运算符(...)用于取出参数对象所有可遍历属性然后拷贝到当前对象
        //1.深拷贝 Object  name: "TANGZHI", age: 25 
        let person1 =  name: "TANGZHI", age: 25 
        let someone =  ...person1 
        console.log(someone);

        //2.合并对象
        let age =  age: 15 ;
        let name =  name: "YANGXING" ;
        let person2 =  ...age, ...name 
        //Object  age: 15, name: "YANGXING" 
        console.log(person2);
    </script>

⑤. map和reduce

• ①. map接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回

• ②. reduce接收两个参数:

1. 带两个参数的一个函数(必须):从头开始每次用两个数组元素执行 第一个元素和第二个元素先执行执行完后返回一个结果又和第三个数组元素执行以此类推
2. 起始参数(非必须):即有该参数的话 将用该参数和数组第一个元素执行 返回结果再和第二个元素执行 以此类推

    <script>
        //map接收一个函数,将原数组中的所有元素用这个函数处理后放入新数组返回
        //举例:有一个字符串数组,希望转为int数组
        let arr = ['1','20','-5','3'];
        console.log("处理前数组的是:"+typeof arr[0]);//处理前数组的是:string
        /*使用map对数组进行处理*/
        arr=arr.map(s=>parseInt(s));
        console.log("处理后数组是:"+typeof arr[0]);//处理后数组是:number
    </script>

• ②. reduce()为数组中每一元素依次执行回调函数,不包括数组中被删除或从未被赋值的元素

       //reduce
        let arr2=[1,3,5,7]
        //1.没有初始值的情况下
        /*
        a:上一次调用函数的值或者初始值,如果没有指定初始值,默认从数组第一个元素开始
        b:数组中当前被处理的元素
        */
        let sum=arr2.reduce((a,b)=>
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a+b
        )
        /*
        上一次处理后:1 
        当前正在处理:3 
        上一次处理后:4 
        当前正在处理:5 
        上一次处理后:9 
        当前正在处理:7 
        当前计算结果是:16
        */
        console.log(`当前计算结果是:$sum`)

        //2. 指定初始值
        /*
        上一次处理后:100 
        当前正在处理:1 
        上一次处理后:101 
        当前正在处理:3 
        上一次处理后:104 
        当前正在处理:5 
        上一次处理后:109 
        当前正在处理:7
        */
        let sum2=arr2.reduce((a,b)=>
            console.log("上一次处理后:"+a);
            console.log("当前正在处理:"+b);
            return a+b
        ,100)

⑥. 对象(Object)优化

• ①. Object.keys(obj):获取对象的所有key形成的数组

• ②. Object.values(obj):获取对象的所有value形成的数组

• ③. Object.entries(obj):获取对象的所有key和value形成的二维数组。格式:[[k1,v1],[k2,v2],…]

• ④. Object.assign 方法的第一个参数是目标对象,后面的参数都是源对象

    <script>
     let obj=name:"tangzhi",age:24;
     //1.获取对象的所有key形成的数组
     console.log(Object.keys(obj));//Array [ "name", "age" ]
     //2.获取对象的所有value形成的数组
     console.log(Object.values(obj));//Array [ "tangzhi", 24 ]
     //3.获取对象的所有key和value形成的二维数组。格式:[[k1,v1],[k2,v2],…]
     console.log(Object.entries(obj));//Array [ [ "name", "tangzhi" ],[ "age", 24 ] ]
     
     let a =  name: "TANGZHI" ;
     let b =  age: 25 ;
     let c =  gender: "男" ;
     //Object  name: "TANGZHI", age: 25, gender: "男" 
     console.log(Object.assign(a, b, c));

    </script>