ES6新增的一些特性

Posted 2021-01-25 houjl

1、let关键字，用来代替 var的关键字，特点： 1、变量不允许被重复定义 2、不会进行变量声明提升 3、保留块级作用域中i的

2、const定义常量，特点：1、常量值不允许被改变 2、不会进行变量声明提升

3、箭头函数

　　与普通函数的区别：1、书写上用=>代替了function

　　　　　　　　　2、普通函数的this指向window 而ES6箭头函数里面的this指向定义时的那个对象 而不是运行时的那个对象

//普通函数
var test = function(x){
return x+2;
}
使用箭头函数：
var test = x=>x+2;

4、字符串模板``

ES6中允许使用反引号 ` 来创建字符串，此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。看一下实例就会明白了：

//产生一个随机数
let num = Math.random();
//将这个数字输出到console
console.log(`your num is ${num}`);

5、ES6中字符串和数组新增了那些方法

字符串
1、字符串模板
2、includes
3、startswith
4、endsWith 等
数组
1、Array.of
2、Array.from 等


将伪数组转为数组： var list = Array.from(document.getElementsByTagName("li"));

6、第七种数据类型Symbol

var s1 = Symbol();
var s2 = Symbol();
var s3 = Symbol("abc");
var s4 = Symbol("abc")

s1不等于s2 s3不等于s4

Symbol函数会生成一个唯一的值
可以理解为Symbol类型跟字符串是接近的
但每次生成唯一的值，也就是每次都不相等，至于它等于多少，并不重要
这对于一些字典变量，比较有用

7、ES6中set集合和Map集合

set:
　　set是ES6提供的一种新的数据结构，类似于数组，但是成员的值是唯一的没有重复的，接受的参数是一个数组方法有：
　　add():添加
　　delete():删除
　　size:长度
　　has():查找
　　clear：清除所有
map：
　　map类似于对象，也是键值对的集合， 但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键方法有：
　　set():设置
　　get():获取
　　delete():删除
　　has():查找
　　clear():清除所有

8、Promise规范

1、什么是promise?
　　异步操作的同步代码
2、promise的基本使用
　　通过new promise创建一个promise对象，里面有一个参数，参数是一个回调函数，回调函数中有2个参数，resolve，reject resolve()当
　　异步执行成功的时候调用的方法，reject()当异步失败的时候调用的方法。
　　除此之外promise有一个then方法，当成功的时候执行第一个回调函数，当失败的时候执行第二个回调函数。第二个回调函数也可以通过
　　promise对象.catch调用
3、Promise.all():当所有的异步代码都执行完毕以后才会执行.then中的操作
4、Promise.race():只要有一个promise执行完毕后就会执行.then操作

5、如何实现多个异步同步执行
var p1 = new Promise(function(resolve,reject){ 
　　setTimeout(function(){
　　　　 console.log(‘1‘); 
　　　　 resolve() 
　　},3000) 
}) 
function p2(){
　　 return new Promise(function(resolve,reject){ 
　　　　setTimeout(function(){ 
　　　　　　console.log("2"); 
　　　　　　resolve(); 
　　　　},2000) 
　　　}) 
} 
function p3(){ 
　　return new Promise(function(resolve,reject){ 
　　　　setTimeout(function(){
　　　　　　 console.log("3"); 
　　　　　　 resolve(); 
　　　　},1000) 
　　}) 
} 
function p4(){ 
　　return new Promise(function(resolve,reject){ 
　　　　　setTimeout(function(){ 
　　　　　　　　console.log("4"); 
　　　　　　　　resolve(); 
　　　　　　},500) 
　　}) 
} 
p1.then(function(){ 
　　return p2() 
}) 
.then(function(){ 
　　return p3(); 
}) 
.then(function(){ 
　　return p4(); 
})

9、类的支持

　　ES6中添加了对类的支持，引入了class关键字。JS本身就是面向对象，ES6中提供的类实际上只是JS原型模式包装。现在有了class,对象的创建，继承更直观，父类方法的调用，实例化，静态方法和构造函数更加形象化。 

以前编写一个构造函数（类）
function Pad(color){
this.color = color;
}
现在的写法跟Java更接近了
class Iphone{
constructor(color, size){
this.color = color;
this.size = size;
}
playgame(){
//.............
}
toString(){
return `这台手机的颜色是${this.color} 屏幕大小是${this.size}`;
}
}
我们定义了一个类，名字叫Iphone
通过类生成一个实例：
var iphone = new Iphone("白色", 5);

其中constructor被称之为构造方法，在我们new 一个对象的时候，自动被调用
不过本质上，JS依然使用了原型来实现，也就是说，这不过是一个新的写法而已 跟以前的构造函数没有区别。
要注意的是，使用了class来定义类，必须先定义再使用