ES6新增语法

Posted lk1234

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了ES6新增语法相关的知识,希望对你有一定的参考价值。

在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 变量,要想以数组的形式,存储实参,必须使用合并运算符。

以上是关于ES6新增语法的主要内容,如果未能解决你的问题,请参考以下文章

es6新增语法详解

es6新增在vue中常用语法

ES6新增语法——面向对象

ES6 数组新增语法

ES6新增语法——letconstvar的区别

ES6新增语法详述 𳞰