es6新特性总结及使用说明

目录

简介

新特性说明

let语法

const语法 

解构赋值

模板字符串

对象简写

对象操作--深拷贝

箭头函数

小结

---

简介

        1. ECMAScript 6.0是 JavaScript 语言的下一代标准， 2015 年 6 月发布。 ES6 设计目标是达到 JavaScript 语言可以用来编写复杂的大型程序，成为企业级开发语 言 。ECMAScript 和 JavaScript 的关系是：ECMAScript 是 JavaScript 的规范/规则，JavaScript 是 ECMAScript 的一种实现。

---

新特性说明

        下面将会使用代码和文字来对es6常见新特性进行说明。

let语法

        在js中，var语法较为松散，不利于标准化开发，于是就有了语法严格的let语法，let语法主要有以下3特点：

1. let声明的变量有严格的作用域
2. let只能声明一次，var可以声明多次
3. let不存在变量提升，var存在变量提升

---

const语法 

        const的作用就是定义常量，这个和常量主要有以下2个注意点

1. 常量定义时，必须要进行赋值
2. 常量的值不能进行修改，如果是引用，那么引用不能修改

---

解构赋值

        解构赋值是对赋值运算符的扩展。是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值，主要有2种形式，数组解构和对象解构。

1. 数组结构模板就是 [a,b,c] = [1,2,3,4]，如果这样写，a=1,b=2,c=3。
2. 对象结构模板就是 {name,age} = dog，dog是一个对象，如果dog有name和age属性，那么就会赋值给前面的{}里面的name和age，如果没有，那么前面的值就是undefined

---

模板字符串

        我们使用模板字符串技术可以替代掉以前的大量拼接字符串的操作，我们使用``来代替''，模板字符串主要有以下特点

1. 使用``来将字符串进行包裹，可以直接当作普通字符串使用‘
2. 在字符串里面进行换行操作，最终输出也会有换行，也就是会保留/n
3. 可以直接在字符串中插入变量，使用${}实现
4. 在${}中可以使用函数

---

对象简写

        我们定义对象属性和函数一般都是key:value，key:function形式，我们可以使用es6的新特性来进行简写。

1. 属性简写：如果前面定义了一个变量name = 'jack'，当我们创建对象时，正常的写法是name:name，比较奇怪，于是我们就可以直接写为name
2. 函数简写：正常情况下，我们定义函数是 函数名:function(){}，我们在es6中可以简写为 函数名(){};

---

对象操作--深拷贝

        我们知道，对数组和对象进行深拷贝是比较麻烦的操作，在es6中我们可以直接使用语法特性来完成操作。

1. 数组深拷贝：语法为 数组名 = [...要拷贝的数组名]
2. 对象深拷贝：语法为 对象名 = {...要拷贝的对象名}

---

箭头函数

        es6中引入了箭头函数，箭头函数相比普通函数，写法更加的简洁，写法一般为(参数)=>{代码}，主要有以下特点

1. 基本语法：(参数列表) => {函数体}
2. 箭头函数没有参数或有多个参数，要用 () 括起来,箭头函数只有一个参数, 可以省略()
3. 箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块
4. 函数体只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回
5. 箭头函数多用于匿名函数的定义
6. this始终表示定义箭头函数的对象

this问题探讨

        在常规函数中，关键字 this 表示调用该函数的对象，可以是窗口、文档、按钮或其他任何东西。对于箭头函数，this 关键字始终表示定义箭头函数的对象。

    点我调用f1
    点我调用f2

         可以发现普通函数的this是调用函数者，而箭头函数this表示的是定义函数的对象。

---

小结

        es6的新特性很多，这里仅仅介绍了一些常用的，其中使用最多的是箭头函数，当然Promise这个非常重要的没有介绍，由于这个内容很多，单独写一篇文章介绍。如果想要了解更多es6的新特性，请自行网上进行查阅。