ES6

深碍√TFBOYSˉ_ 2021-11-29 08:20 325阅读 0赞

> 转载地址 ： [https://www.jianshu.com/p/287e0bb867ae][https_www.jianshu.com_p_287e0bb867ae]

## 1.变量声明let ##

1.在ES6之前，我们都是用var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部  
(不在函数内即在全局作用域的最顶部)。  
这就是函数变量提升例如:

function aa() { 
        if(flag) { 
            var test = 'hello man'
        } else { 
            console.log(test)
        }
      }

以上的代码实际上是：

function aa() { 
        var test // 变量提升，函数最顶部
        if(flag) { 
            test = 'hello man'
        } else { 
            //此处访问 test 值为 undefined
            console.log(test)
        }
        //此处访问 test 值为 undefined
      }

所以不用关心flag是否为 true or false。实际上，无论如何 test 都会被创建声明。

接下来ES6主角let登场：let 是块级作用域。  
怎么理解这个块级作用域？

在一个函数内部  
在一个代码块内部

说白了只要在\{\}花括号内的代码块即可以认为 let 和 const 的作用域。

看以下代码：

function aa() { 
        if(flag) { 
           let test = 'hello man'
        } else { 
            //test 在此处访问不到
            console.log(test)
        }
      }

## 2.模板字符串 ##

用途，基本的字符串格式化。将表达式嵌入字符串中进行拼接。用$\{\}来界定

//ES5 
        var name = 'lux'
        console.log('hello' + name)
    //es6
        const name = 'lux'
        console.log(`hello ${ name}`) //hello lux

## 3.箭头函数 ##

箭头函数  
ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。  
箭头函数最直观的三个特点。

1.不需要 function 关键字来创建函数  
2.继承当前上下文的 this 关键字  
3.当你的函数有且仅有一个参数的时候，是可以省略掉括号的。当你函数返回有且仅有一个表达式的时候可以省略\{\} 和 return；

//例子
    	var f = v => v;
    
    // 等同于
    	var f = function (v) { 
    	  return v;
    };

## 4.解构赋值 ##

现阶段对结构赋值的理解：  
在等式左边如果不是写的是字符串的形式  
而是以数组或者对象的形式，那么即为解构赋值

//正常写法
       var a = 1
    //解构数组
       var[a]  =  [1]
    //解构对象
       var { log} = console

对象的解构赋值的内部机制，是先找到同名属性，然后再赋给对应的变量。

let {  foo: baz } = {  foo: 'aaa', bar: 'bbb' };
    	baz // "aaa"
    	
    	let obj = {  first: 'hello', last: 'world' };
    	let {  first: f, last: l } = obj;
    	f // 'hello'
    	l // 'world'

中括号中，冒号前面的是同名属性，冒号后面的才是真正的值，要理清楚这一逻辑。  
在等式右边，会匹配到与等式左边同名的属性，赋给左边的变量，  
无论这个右边的属性值是否被显示列出。

解构赋值对提取JSON对象中的数据，尤其有用。

var jsonData = { 
      id: 42,
      status: "OK",
      data: [867, 5309]
    };
    //普通写法
    let id = jsonData.id
    let status = jsonDataid.status 
    let num  = jsonDataid.num
    
    //ES6 写法
    let {  id, status, data: number } = jsonData;
    
    console.log(id, status, number);
    // 42, "OK", [867, 5309]

[https_www.jianshu.com_p_287e0bb867ae]: https://www.jianshu.com/p/287e0bb867ae