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

Posted 2021-02-09 zixuan00

 

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