码迷,mamicode.com
首页 > 其他好文 > 详细

ES6语法~解构赋值、箭头函数

时间:2019-02-15 01:23:54      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:this   --   shell   重复   而且   style   ack   shel   script   

 

2015年6月17日 ECMAScript 6发布正式版本

 

打开VSCode终端powershell:ctrl+`

1、         定义变量:let

使用var 定义的变量没有{ }限制,在条件中定义的i,全局中都可以使用,造成变量污染,有变量提升预解析作用,只提升变量名,不提升值!降低js代码的可阅读性

相同作用域内,let不允许重复声明变量!!否则报错!!但可以更改变量值

 

 使用let定义的变量:不会有变量提升,必须先定义后使用,否则先使用会报错: ReferenceError

   在for循环条件中用let定义i,只能在{ }内使用,不会造成全局污染

 

2、         定义常量:const

const d =10; 不允许再为d重新赋值

const定义的常量必须在定义时给一个初始化的值,否则undefind无意义

利用const定义的常量,在相同作用域中,无法被重新赋值

const定义的常量有块级作用域{ } ,for循环中每一次循环都重新定义了一个作用域

 

 

3、         解构赋值:

定义:所谓的解构赋值,就是把某个对象中的属性,当作变量,给解放出来,今后就能够当作变量直接使用了;

语法:

let user = {  name: “zs”, age : 20, genter: ‘男’ }

let { name } = user  --à 把name解构出来做变量使用

let { name: username , age: userage } = user  -à这时name就不存在了,取而代之的是username, 且username/userage无法再被重新赋值!

 

使用时:直接用username、userage---àconsole.log(username)  //zs

 

4、         箭头函数--(只针对改造匿名函数)

(形参体列表)=> { 函数体代码 }

<1> 特点:

箭头函数,本质上就是一个匿名函数

箭头函数的特性: 箭头函数内部的 this, 永远和箭头函数外部的 this 保持一致;

btn.onclick = function() {

     setTimeout(() => {      //原本定时器内部的this指向window

        console.log(this)  //<button id="btn">点击<button>

        this.style.backgroundColor = "red"

     }, 1000)

}

 

 

<2> 箭头函数的三个变体:

正规:去掉function、函数名:

var 函数名 = (参数1,…) => {    }

函数名(参数1,…)----调用

如:var add = (x, y) => { return x+y }

add(1, 2)

 

 

①   变体1:如果箭头函数,左侧的形参列表中,只有一个参数,则,左侧小括号可以省略;

var  add  =  x  =>   { return x + 10}

console.log( add(1) )  //11

②    变体2:如果右侧函数体中,只有一行代码,则右侧的 { } 和return可以省略;

var  add  =  (x , y)  =>  x + y

console.log(add(1, 2))  //3

 

③    变体3:如果箭头函数左侧 只有一个形参,而且右侧只有一行代码,则两边的 () 和 {} 都可以省略

var  add  =  x  =>  x + 10

console.log(add(1))  //11

ES6语法~解构赋值、箭头函数

标签:this   --   shell   重复   而且   style   ack   shel   script   

原文地址:https://www.cnblogs.com/zixuan00/p/10381325.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!