ES6的新语法

ES6的一些新语法

ES6语法新增的变量的定义

1. let 定义变量

   1. let 定义的变量，不会进行预解析

   2. let 不能重复定义变量名称,一个变量名称只能定义一次

   3. 定义的变量,如果是定义在 { } 中,只能在 { } 中被执行被调用

   4. let 在不同 { } 中,是不同作用域中定义let 变量

   5. 此时,变量的名称与 其他 { } 中的变量名称,或者{ }之外的变量名称,是可以重复

   6. let 定义的变量,与 forEach() 中的变量类似，每次执行都会定义出一个新的,相互之间不影响的变量

   7.         // console.log(int1);   //  var 关键词定义的变量,可以预解析,结果 undefined
              // console.log(int2);   //  let 关键词定义的变量,不能徐解析,结果 报错
              // var int1 = 100;
              // let int2 = 100;
              
      	    // 使用 var 关键词 来定义变量
              // 变量名称可以重复
              var int = 100;
              var int = 200;
              console.log(int);
            
      
              // 使用 let 关键词 来定义变量
              // 变量名称不能重复
              // 只要是已经定义的,不管是var 还是 let 定义的,都不能重复
      
              // let int = 300;
      
                 let int1 = 100;
              // let int1 = 200;
      

2. const定义的变量,一旦赋值,不能改变

   1. 对const定义的变量,重复赋值,会报错

   2. 定义变量的名称,不能重复

   3.         const arr = [1,2,3,4,5,6];
              // 给数组中第1个单元,修改存储的数据
              // const arr 中存储的数组的地址是不改变的,可以执行的
              arr[0] = '北京';
      
              console.log(arr);
      
              // 修改对象中,单元存储的数据,不是修改 obj中存储的内存地址,是可以执行的
              const obj = {name:'张三'};
              obj.name = '李四';
              console.log(obj);
      

箭头函数

        // const fun = function(){}     普通函数
	    // const fun = ()=>{}           箭头函数

	// 将匿名函数的部分,从 function(){} 写成 ()=>{} 的形式

如果函数只有一个参数,可以不写()

        // const fun = function(e){}     普通函数
        // const fun = e => {}           箭头函数

如果执行体中只有一行代码,可以不写{}

        // const fun = e=>{console.log(e)}    普通箭头函数
        // const fun = e=> console.log(e)     不写{}箭头函数

箭头函数的this指向

        //    父级程序的this指向
        //    如果父级程序有this指向(父级程序也是函数),this指向的就是父级程序的this指向
        //    如果父级程序没有this指向(数组,对象....),this指向的是window

改变this指向

call()方法

// 语法: 函数.call(参数1,其他参数....可以是多个或者没有 )
// 作用: 调用并且执行函数,同时,将函数的this指向,定义为指定的内容(参数1)
//       参数1,是改变的this的指向
//     	 其他参数,是原始函数的实参,原始函数有几个形参,此时就要对应的输入几个实参,没有形参,就没有实参

apply()方法

        // 语法: 函数.apply(参数1,参数2)  只有两个参数
        //       参数1:改变的this的指向内容
        //       参数2:原始函数的实参,必须是一个数组的形式,将实参定义成数组的单元
        // 其他用法和作用于 .call是相同的

bind()方法

        // 语法: const 变量 = 函数.bind(参数1);
        // 不是立即执行函数
        // 生成一个新的函数,这个新的函数是改变this指向之后的新的函数
        // 参数1,定义的要改变的的this指向
        // 其他参数,一般不定义,是使用函数原有的形参

立即执行函数

立即执行函数,并没有真正的定义真个函数

没有办法正常的再次调用这个函数

(封装的函数)()

        // 立即执行,在定义的同时,立即执行函数
        ( function fun1(){console.log(123)} )()

!封装的函数()

        !function fun1(){console.log(123)}()

~封装的函数()

        ~function fun1(){console.log(123)}()

数组的结构语法

就是数组的另一种使用调用方法

可以不通过 []语法,不通过索引下标,来调用使用数组中的数据

        const arr = ['北京','上海','广州','重庆','天津'];

		// 将 arr 中的数据,调用出来,给 左侧内容进行一一对应的赋值
		let [str1,str2,str3,str4,str5] = arr;

		// 结构多层的数组
        // 二维数组
        const arr2 = ['北京','上海',['a','b','c']];
        // s1对应北京,s2,对应上海,s3,对应['a','b','c']
        // let [s1,s2,s3] = arr2
        // 接续把 s3 对应的数组  ['a','b','c'] 解析
        // s1对应北京,s2对应上海,[]对应['a','b','c']
        // s3对应a s4对应b s5对应c
        let [s1,s2,[s3,s4,s5]] = arr2
        console.log(s1,s2,s3,s4,s5);

对象的解构

解构语法

​ 将对象中,属性是name的属性值,调用,赋值给name变量名称

​ {}中定义的属性,一定是对象中具有的属性

​ 变量名称,就是name也就是属性名称

       const obj = {
            name:'张三',
            age:18,
            sex:'男',
            addr:'北京',
            phone:123456,
        }
       
       // let {name} = obj;
        // console.log(name);

解构语法之定义其他名称

​ 在对象obj中,找name属性,将对应的数值数据,赋值给变量别名userName

​ 通过userName来调用使用数据

​ 只能一次解构一个数据,不能一次性的做一一对应的赋值

        // let {phone:userName} = obj;
        // console.log(userName);

展开运算符

…数组

将数组中的数据,展开来使用

在函数的实参中使用

        // 有多个形参
        function fun(num1,num2,num3,num4,num5){
            console.log(num1,num2,num3,num4,num5)
        }
        // 执行时就要输入多个实参
        fun(100,200,300,400,500);
        
        // 现在有一个数组,存储多个数据
        const arr = [1,2,3,4,5];
        fun(arr[0],arr[1],arr[2],arr[3],arr[4]);
        // 展开运算符,将数组中的数据展开使用
        // 将arr中的数据,展开,对形参进行一一对应的赋值
        // 通过数组,给多个形参赋值更简单
        fun(...arr);

合并运算符

​ …

​ 在函数的形参中使用

​ 作用:将赋值的所有的实参,都是以数组的形式,存储在形参中

        // 只有一个形参,形参只能存储一个实参 
        function fun(arr){
            console.log(arr);
        }
        // 即时输入多个参数,只有一个形参,也只能存储第一个实参
        fun('a','b','c','d');
        
        // 合并运算符
        // 不管实参有几个,都以数组的形式,存储在形参中
        function fun1(...arr){
            console.log(arr);
            // 调用存储在形参arr中的实参,必须用过[]语法,索引下标
            // 或者 循环遍历 获取
        }
        // 输入的所有的实参,都会以数组的数据的形式,存储在形参arr中
        fun1('a','b','c','d','e',1,2,3,4,5)

在 普通函数中,JavaScript定义了一个专门的变量,叫 arguments

如果你没有定义形参,所有的实参都会以数组的形式存储在这个变量中

作用于合并运算符相同

     // 没有形参,JavaScript自动在arguments中,以数组的形式存储实参
        function fun3(){
            console.log(arguments);
        }
        
        fun3(1,2,3,4,5,6,7);

但是 箭头函数中 没有 arguments 这个变量

必须使用 …形参 合并运算符的形式 来存储实参

        const fun5 = (...arr)=>{
            console.log(arr);
        }

        fun5(1,2,3,4,5);

新手上路 多多关注！！！😄