ES6基本常见语法

 

特色：写法更加优雅，更加像面像对象的编程，其思想和 ES5 是一致的。

箭头函数、this

ES6中可以使用 => 作为函数表达形式，极简风格，参数＋ => ＋函数体。

var foo = function(){return 1;}; 

//等价于 let foo = () => 1;

let nums = [1,2,3,5,10];

 let fives = []; 

nums.forEach(v => { 

    if (v % 5 === 0) fives.push(v);

 }); 

console.log(fives); //[5,10]

箭头函数中的 this 指的不是window，是对象本身。    在es5中默认this指向window

function aa(){

 this.bb = 1;

 setTimeout(() => {

 this.bb++; //this指向aa 

console.log(this.bb);

 },500); }

 aa(); //2

声明变量的关键字var、let、const

*ES6 推荐在函数中使用 let 定义变量

*const 用来声明一个常量 (值类似值不能改变，引用类型地址不能改变)

*let 和 const 只在最近的一个块中（花括号中）有效（块级作用域）

var a = 1;

 { let a = 2;

 console.log(a); //2 

}

 console.log(a); //1

 

const A = [1,2]; 

A.push = 3; 

console.log(A); //[1,2,3] 

A = 10; //Error 这里地址改变了

 

class：// 在ES6中使用class 实现继承，子类必须在constructor方法中调用super方法，否则新建实例时会报错。 这是因为子类没有自己的this对象，而是继承父类的this对象，然后对其进行加工。如果不调用super方法，子类就得不到this对象。

ES6中增加了类的概念，其实ES5中已经可以实现类的功能了，只不过使用Class实现可以更加清晰，更像面向对象的写法。

class Animal { 

constructor(){ 

console.log('我是一个动物');

 }

 } 

class Person extends Animal { 

constructor(){ 

super(); 

console.log('我是一个程序员'); 

}

 } 

let aa = new Person(); //我是一个动物 //我是一个程序员      继承了父类  先执行父类再执行子类

 

super关键字的理解

super不仅仅是一个关键字，还可以作为函数和对象。两种情况下，用法完全不同

函数：在子类继承父类中，super作为函数调用，只能写在子类的构造函数（constructor）里面，super代表的是父类的构造函数，

难点理解

第一种情况： super作为函数调用时，代表父类的构造函数。

函数执行时supre()代表的是子类，super()里面的this指向子类的实例对象this。

注意，super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于

A.prototype.constructor.call(this)

作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。

第二种情况： super作为对象使用时，分为在普通方法中使用和在静态方法中使用，在普通方法中，指向父类的原型对象；在静态方法中，指向父类（就是static里面的方法）。

在普通方法找中使用：super指向父类的原型，即A.prototype，可以访问到（父类）原型上的方法和属性

ES6 规定，在子类普通方法中通过super调用父类的方法时，方法内部的this指向当前的子类实例。

ES6 规定，通过super调用父类的方法时，super会绑定子类的this。

上面代码中，super.print()虽然调用的是A.prototype.print()，但是A.prototype.print()会绑定子类B的this，导致输出的是2，而不是1。也就是说，实际上执行的是super.print.call(this)。

由于绑定子类的this，所以如果通过super对某个属性赋值，这时super就是this，赋值的属性会变成子类实例的属性。

  super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。 

上面代码中，super.x赋值为3，这时等同于对this.x赋值为3。而当读取super.x的时候，读的是A.prototype.x，继承的是父类中有的格式，也就是this.x=1,没有super.x=1,所以返回undefined。

 

解构

解构赋值是ES6中推出的一种高效、简洁的赋值方法

Rest + Spread

//rest

//9

spread

代码中的...y, 意思就是： 从我开始不管后面有多少参数，请帮我把它们组成数组给我后面的参数

对象字面量扩展     

1.可以在对象字面量里面定义原型 

2.定义方法可以不用function关键字

3.直接调用父类方法

 

模版字符串

ES6中提供了用反引号｀`来创建字符串，里面可包含${…}(模板占位符)等

在项目开发中，拼接字符串是不可缺少的，动态创建dom元素以及js操作数据都要拼接字符串， 在es6出来之前，我们都通常用引号(''或"")和加号(+)来拼接字符串，麻烦不说而且还容易出错，

 

1. menuUl+="<li><i class='"+menudata[i].icon+"'></i><p onclick=\"click()\">"+ menudata[i].text +"</p></li>";

传统拼接字符串的缺点：

  * 不能多行拼接

  * 不能在拼接中插入变量

  * 不能进行简单的运算

  * 不能处理引号之间的嵌套问题（单套双或者双套单，不能单套单或双套双）

  * 麻烦，拼接过多一稍微写错就报错或显示不出来。

模板字符串就是使用两个反撇号把任何变量以及字符串都包含起来。

特性：

1 模板字符串可以引入变量，就是在字符串中用${变量名} 

⚠️ ${} 模板占位符 在字符串中，javascript将模板占位符里的值插入其中，如果值是数组或者对象，他会调用toString()方法转化为字符串。如果是函数，则会使用标签模板。

2 模板字符串可以进行简单的运算，通过${运算}

3 模板字符串可以进行嵌套，反撇号中再可用反撇号

4 模板字符串可以多行拼接，就是字符串可以换行

⚠️ 模板字符串中所有的空格、新行、缩进，都会原样输出在生成的字符串中

        

 

5 模板字符串主要就是简单方便，和其他的引号和加号都互不干扰，就那刚才的代码就可以这样写：

这样看起来就整洁，可维护。

 

es6 模板字符串的优点：

1 .可以多行拼接

2 .可以在拼接中插入变量

3 .可以进行简单的运算

4 .可以互相嵌套

5 .简单，方便，整洁

标签模板（了解即可）

在模板字符串开始的反撇号前附加一个额外的标签

对于标签模板，我基本上操作的很少，这是两个例子我是在mdn上看到的，掌握了要领，以后开发就方便了。

所谓的标签模板，就是添加额外的标签，这个标签其实就是一个函数方法的调用，这个方法es6没有实行，交给了开发者去编写操作，提高了拓展性。

就拿show说：

stringArr代表的就是一个数组，${}前后方的值，打印一下stringArr就可以得知。

在标签函数的第一个参数中，存在一个特殊的属性raw ，raw是es6的一个关于字符串的方法，我们可以通过它来访问模板字符串的原始字符串，而不经过特殊字符的替换。

使用String.raw() 方法创建原始字符串和使用默认模板函数和字符串连接创建是一样的。

根据方法里写法可知，标签模板就是遍历数组，将对应的已知的值stringArr和字符串模板values的值依次打印出来。

Iterators（迭代器）

ES6 中可以通过 Symbol.iterator （）给对象设置默认的遍历器，直到状态为true退出。也就是遍历结束

 

Generators

ES6中非常受关注的的一个功能，能够在函数中间暂停，一次或者多次，并且之后恢复执行，在它暂停的期间允许其他代码执行，并可以用其实现异步。

Run-Stop-Run…

generator能实现好多功能，如配合for…of使用，实现异步等等，我在这里就不多说了。

 

for…ofes6 && for…ines5

二者区别

1.for...in循环出的是key下标 ，for...of循环出的是value

2.for of 只能用于数组遍历，for in遍历数组还可以用于对象属性的遍历

 

总结

一、最原始的写法for循环。

二、forEach方法。

三、for...in循环。

for...in循环可以遍历数组的键名。

for...in循环有几个缺点。

• 数组的键名是数字，但是for...in循环是以字符串作为键名“0”、“1”、“2”等等。
• for...in循环不仅遍历数字键名，还会遍历手动添加的其他键，甚至包括原型链上的键。
• 某些情况下，for...in循环会以任意顺序遍历键名

总之，for...in循环主要是为遍历对象而设计的，不适用于遍历数组。

四、for...of循环。

for...of循环相比上面几种做法，有一些显著的优点。

 

• 有着同for...in一样的简洁语法，但是没有for...in那些缺点。
• 不同于forEach方法，它可以与break、continue和return配合使用。
• 提供了遍历所有数据结构的统一操作接口。

下面是一个使用 break 语句，跳出for...of循环的例子。

 

Map + Set + WeakMap + WeakSet

Set 对象是一组不重复的值，重复的值将被忽略，值类型可以是原始类型和引用类型

        eakSet是一种弱引用，同理WeakMap

 

Proxies

Proxy可以监听对象身上发生了什么事情，并在这些事情发生后执行一些相应的操作。

 

Symbols

Symbol 是一种新的数据类型，它的值是唯一的，不可变的。ES6 中提出 symbol 的目的是为了生成一个唯一的标识符，不过你访问不到这个标识符.

Promises

ES6 对 Promise 有了原生的支持，一个 Promise 是一个等待被异步执行的对象，当它执行完成后，其状态会变成 resolved 或者 rejected

Promises是处理异步操作的一种模式，之前在很多三方库中有实现，比如jQuery的 deferred 对象。当你发起一个异步请求，并绑定了.when(), .done()等事件处理程序时，其实就是在应用promise模式

 

总之，ES6还是有很多棒棒的语法，有利于精简代码，高效开发；只不过一些低级别浏览器不支持，可以用Babel等工具把ES6转化成ES5，但是有些语法还是不够完善；