es6的新特性（let、const、模板字符串和解构赋值）

大家好，我是IT修真院郑州分院第八期的学员，今天给大家分享一下，题目ES6有哪些新特性？

---

一、背景介绍

ECMAScript 6.0（以下简称 ES6）是 JavaScript 语言的下一代标准，已经在 2015 年 6 月正式发布了。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现。日常场合，这两个词是可以互换的。

---

二、知识剖析

1.let和const声明

ES6 新增了let命令，用来声明变量。它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效。let命令声明的变量一定要在声明后使用，否则报错。

const声明一个只读的常量。一旦声明，常量的值就不能改变。如果 const 的是一个对象，对象所包含的值是可以被修改的。const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。

2.let和var的区别

1）新增块级作用域（只要在{}花括号内的代码块即可以认为 let 的作用域）；

2）暂时性死区（使用let命令声明变量之前，该变量都是不可用的）；

3）不存在变量提升（let 的作用域是在它所在当前代码块，但不会被提升到当前函数的最顶部）；

4）不允许重复声明变量。

 

3.模板字符串

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

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

在ES5时我们通过反斜杠(\)来做多行字符串或者字符串一行行拼接。ES6反引号(``)直接搞定：

//ES5
var roadPoem = 'Then took the other, as just as fair,\n\t'
                + 'And having perhaps the better claim\n\t'
                + 'Because it was grassy and wanted wear,\n\t'
                + 'Though as for that the passing there\n\t'
                + 'Had worn them really about the same,\n\t'
//ES6
 var roadPoem = `Then took the other, as just as fair,
                 And having perhaps the better claim
                 Because it was grassy and wanted wear,
                 Though as for that the passing there
                 Had worn them really about the same,`

4.解构赋值

ES6 允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构

解构赋值有：数组、对象、字符串、数值、布尔值和函数的解构赋值。

---

三、常见问题

解构赋值的使用方法？

---

四、解决方案

//数组的解构赋值
  let [a,b,c]=[1,2,3];
  console.log(a);//1
  console.log(b);//2

//数组嵌套
  let [foo,[[bar],baz]]=[1,[[2],3]];
  console.log(bar);//2

//对象的解构赋值
  let{foo,bar}={bar:'bbb',foo:'aaa'};
  console.log(foo);//aaa
  console.log(bar);//bbb

  let{first:f,last: g}={first:'hello',last:'world'};
  console.log(f);//hello
  console.log(g);//world
 
//字符串的解构赋值
  let [a,b,c,d,e]='hello';
  console.log(a+b+c+d+e);//hello

//对属性解构赋值
  let {length:len}="hello";
  console.log(len);//5

//解构赋值时，如果等号右边是数值和布尔值，则会先转为对象
let {toString: s} = true
console.log(s ===Boolean.prototype.toString);//true

//函数的解构赋值
function add([x,y]){
  return x+y;
}
console.log(add([1,2]));//3

//函数参数可以设置默认值
function add({x=1,y=2}={}){
  return x+y;
}
console.log(add({x:3,y:8}));//11
console.log(add({}));//3

---

五、编码实战

腾讯视频  PPT

---

六、扩展思考

---

七、参考文献

ECMAScript 6 入门

ES6这些就够了

---

八、更多讨论

1.讨论一：const声明的变量可以重新赋值么？

const实际上保证的，并不是变量的值不得改动，而是变量指向的那个内存地址不得改动。对于简单类型的数据（数值、字符串、布尔值），值就保存在变量指向的那个内存地址，因此等同于常量。但对于复合类型的数据（主要是对象和数组），变量指向的内存地址，保存的只是一个指针，const只能保证这个指针是固定的，至于它指向的数据结构是不是可变的，就完全不能控制了。

2.讨论二：let声明的全局变量window声明可以用么？

在浏览器环境指的是window对象，在Node指的是global对象。ES5之中，顶层对象的属性与全局变量是等价的。　　

3.讨论三：ES6有几种声明变量的方式？

ES5 只有两种声明变量的方法：var命令和function命令。ES6除了添加let和const命令，后面章节还会提到，另外两种声明变量的方法：import命令和class命令。所以，ES6 一共有6种声明变量的方法。

顶层对象的属性与全局变量挂钩，被认为是JavaScript语言最大的设计败笔之一。

ES6为了改变这一点，一方面规定，为了保持兼容性，var命令和function命令声明的全局变量，依旧是 顶层对象 的属性；另一方面规定，let命令、const命令、class命令声明的全局变量，不属于顶层对象 的属性。也就是说，从ES6开始，全局变量将逐步与顶层对象的属性脱钩。 

 

获得更多IT技能，请移步官网 点击链接直达：官网