无事来学学--ES6语法部分了解和ES5区别｜8月更文挑战

---

theme: qklhk-chocolate

这是我参与8月更文挑战的第4天，活动详情查看：8月更文挑战”

ES6( ECMAScript 6.0) ，

概念 ES6 主要是为了解决 ES5 的先天不足，比如 JavaScript 里并没有类的概念，但是目前浏览器的 JavaScript 是 ES5 版本，大多数高版本的浏览器也支持 ES6，不过只实现了 ES6 的部分特性和功能。

ES6与js关系的关系：前者是后者的规范，后者是前者的一种实现

ES5和ES6的主要区别

箭头函数和字符串嵌入：

constgreetings=(name)=>{returnhello ${name};}

甚至：

constgreetings=name=>hello ${name};

常量声明(Const):

如同其它编程语言中的常量一样，但又有不同。这里的const代表了constant reference。也就是说，你可以修改其指向的对象的值。但是你不能修改其reference的值。

constNAMES=[];NAMES.push("Jim");console.log(NAMES.length===1);// trueNAMES=["Steve","John"];// error

块作用域变量：

ES6中的新关键字let允许允许开发者将变量的作用域限定在块级别。不会像var一样变量提升。

参数默认值

允许在函数定义的时候指定默认的值。

// Basic syntaxfunctionmultiply(a,b=2){returna*b;}multiply(5);// 10

类定义和继承

• ES6开始支持定义类(使用class关键字)，构造函数(使用constructor关键字)，和extend关键字来实现继承。

• for-of操作

• for...of语句用来迭代访问一个对象的所有属性。

• Spread操作符：用于对象合并

constobj1={a:1,b:2}constobj2={a:2,c:3,d:4}constobj3={...obj1,...obj2}

• Promise: Promises提供了一个处理异步操作的方法。你可以用回调函数来实现，但是Promise更加简洁和可读。

```java

constisGreater=(a,b)=>{returnnewPromise((resolve,reject)=>{if(a>b){resolve(true)}else{reject(false)}})}isGreater(1,2).then(result=>{console.log('greater')}).catch(result=>{console.log('smaller')}) ```

模块的export和import。

``` constmyModule={x:1,y:()=>{console.log('This is ES5')}}exportdefaultmyModule;

importmyModulefrom'./myModule'; ```

Let和Const
ES6 新增加了两个重要的 JavaScript 关键字: let 和 const。

let 声明的变量只在 let 命令所在的代码块内有效。而js中var可以多次声明 const 声明一个只读的常量，一旦声明，常量的值就不能改变。

常用的对象解构

//对象解构 let user ={name:'12312',age:12}

//传统js let name1=user.name let age1=user.age console.log(name1,age1)

//ES6语法 let {name,age}=user console.log(name,age)

3.模板字符串 相当于加强版的字符串，用反引号 `,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

`` let name = "Mike"; let age = 27; let info =My Name is ${name},I am ${age+1} years old next year.` console.log(info);

``` 4.ES6对象 ES6允许对象的属性直接写变量，这时候属性名是变量名，属性值是变量值。

const age = 12; const name = "Amy"; //ES6 const person = {age, name}; person //{age: 12, name: "Amy"} //等同于 const person = {age: age, name: name} 5.对象的拓展运算符

拓展运算符(…)用于取出参数对象所有可遍历属性然后拷贝到当前对象。

对象的复制

let person = {name: "Amy", age: 15}; let someone = { ...person }; //someone{name: "Amy", age: 15}

对象的合并

``` let age = {age: 15}; let name = {name: "Amy"}; let person = {...age, ...name};

//person; {age: 15, name: "Amy"} ```

6.箭头函数

箭头函数提供了一种更加简洁的函数书写方式。多用于匿名函数的定义，基本语法是：*参数 => 函数体

//传统方式定义函数 var f1 =function(a){ return a } console.log(f1(3)) //es6使用箭头函数定义 var f1=a =>a console.log(f1(3))

当箭头函数没有参数或者有多个参数，要用 () 括起来。 var f = (a,b) => a+b; f(6,2); //8

当箭头函数函数体有多行语句，用 {} 包裹起来，表示代码块，当只有一行语句，并且需要返回结果时，可以省略 {} , 结果会自动返回。

var f = (a,b) => { let result = a+b; return result; } f(6,2); // 8