您的位置: 首页  >  IT文章  >  ES6新增常见特性

ES6新增常见特性

分类: IT文章 • 2022-02-15 19:50:16

ES6新增常见特性

一：声明属性let const

var let const 区别

1.var声明变量会发生变量提升，let、const不会发生变量提升
2.var允许重复声明变量，let不可以
3.const声明变量不可以被改变

二：字符串模板

用反引号创建字符串，其中可用${'变量'}

console.log(`your name is ${name}`);

三：解构赋值对数组和对象的优化

四：箭头函数

与普通函数的区别
1、书写上用=>代替了function
2、普通函数的this指向window 而ES6箭头函数里面的this指向定义时的那个对象 而不是运行时的那个对象

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

五：新增了class

ES6中添加了对类的支持，引入了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来定义类，必须先定义再使用

六：ES6中的set方法

一般用于数组去重

var arr = [1,2,3,3,4,5];
var newarr = new Array.from(set arr)
console.log(new arr)//[1,2,3,4,5]

七：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操作

如何实现多个异步同步执行
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(); 
})

八：ES6新增的Set、Map方法

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

九：for ...of...

for of 和for in区别

for in 可以用来遍历数组，但是会有以下几个问题

　　1.index索引为字符串型数字，不能直接进行几何运算

　　2.遍历顺序有可能不是按照实际数组的内部顺序

　　3.使用for in会遍历数组所有的可枚举属性，例如下面例子上的原型方法method和name属性都会被遍历出来
Array.prototype.method  = function(){
    console.log(this.length)
}

var myArray = [1,2,3,4,5]

myArray.name = "数组"
  for (var key in myArray) {
            console.log(key)
        }

输出结果：

如果我们不想要method和name呢，这样的话我们可以使用ES6的for of

十：symbol函数

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

相关推荐