ES6新增语法

Posted 2021-02-28 lk1234

在ES6中新增了两个关键词定义变量：let、const

一、let定义变量

特点：

1.Let定义的变量名称不可以重复使用

2.定义的变量，与forEach()循环类似，将会建立互不影响并且独立的存储不同数据的变量。

3.定义在{}中的let变量只能在{}和循环中使用

使用场景:定义基本数据类型；在循环中使用,定义循环变量

二、const定义变量

特点：

1.定义的变量名称不能重复。

2,存储的数据不能被改变。

3,定义在{}和循环中的变量,只能在{}和循环中使用。

使用场景:定义引用数据类型,定义常量。

三、箭头函数

箭头函数主要有三种形式，如下表：

一般function函数	箭头函数
function(){}	()=>{}
function(e){}	e =>{}
function(){一行}	()=>一行

箭头函数的特点：1,this指向与一般的function函数不同（如下表）：

	函数类型	this指向
一般function()函数	声明式 function fun(){}	this指向window
	赋值式 var fun = function(){}
	forEach()循环
	定时器,延时器 setInterval(function(){}
	对象中的函数 const obj = {fun:function(){}}	this指向,obj对象
	事件处理函数 标签.addEventListener(事件类型,function(){})	this指向,标签对象
箭头函数	箭头函数的this指向,是父级程序的this指向；如果父级程序有this指向,指向向的就是父级程序的this指向；如果父级程序没有this指向(对象,数组是没有this),指向的是window。

2,箭头函数,无法改变this指向

三、改变this指向

 1.函数.call(参数1,其他参数...)

会立即执行函数,并且改变函数的this指向为参数1表示的内容，其他参数是原始函数的实参,多个实参使用逗号间隔。

2.函数.apply(参数1,[数组参数])

会立即执行函数,并且改变函数的this指向为参数1表示的内容， 数组参数,是原始函数的参数,多个参数以数组的单元的形式存储。

3.函数.bind(参数1)

不会立即执行函数,而是生成一个新的函数，新函数,参数,程序内容,都与原始函数相同，只是this改变为参数1表示的内容

四、解构

1.数组的解构

将数组的数值,一一对应的赋值给变量

let [变量1,变量2,变量3] = [1,2,3];

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

        let [str1,str2,str3,str4,str5] = arr;

        console.log(str1,str2,str3,str4,str5)；

2.多维数组的解构

let [变量1,变量2,[变量3,变量4,变量5]] = [1,2,[‘a‘,‘b‘,‘c‘]];

const arr2 = [‘北京‘,‘上海‘,[‘a‘,‘b‘,‘c‘]];

        let [s1,s2,[s3,s4,s5]] = arr2

        console.log(s1,s2,s3,s4,s5);

3.对象的解构

（1）按照定义的属性,从对象中获取数据,赋值给定义的属性，属性就是定义的变量名称。let {属性} = 对象

 const obj = {

            name:‘张三‘,

            age:18,

            sex:‘男‘,

            addr:‘北京‘,

            phone:123456,

        }

         let {name} = obj;

         console.log(name);

（2）按照定义的属性,从对象中获取数据,赋值给定义的别名，别名是定义的变量名称 。let {属性:别名} = 对象。

const obj = {

            name:‘张三‘,

            age:18,

            sex:‘男‘,

            addr:‘北京‘,

            phone:123456,

        }

         let {phone:userName} = obj;

         console.log(userName);

　　

（3）多维对象解构。let {属性:{属性:别名}} = {属性:{属性:数据}}

const obj2 = {

            name1:{

                name2:‘张三‘

            }

        }

        let {name1 : {name2}} = obj2;

        console.log(userName); 

五、合并,展开运算符 

1.合并（…）

定义在形参中 function fun (...arr){}，将所有的实参,都以数组单元的形式存储在形参中，可以通过操作数组的方法来获取实参。

function fun1(...arr){

            console.log(arr);

        }

fun1(‘a‘,‘b‘,‘c‘,‘d‘,‘e‘,1,2,3,4,5);

2.展开（…数组）

定义在实参中 funciton fun (形参1,形参2,形参3,形参4){}   fun(...数组);将数组中的数据,展开,一一对应的赋值给形参。

function fun(num1,num2,num3,num4,num5){

            console.log(num1,num2,num3,num4,num5)

        }

fun(100,200,300,400,500);

【注】普通函数 function 中 有 javascript 专门定义好的变量 arguments，如果没有定义形参,arguments会以数组的形式来存储所有的实参；箭头函数中,没有 arguments 变量，要想以数组的形式,存储实参,必须使用合并运算符。