ES6新特性

列举:

  • 模块化
  • 箭头函数
  • 模板字符串
  • 延展操作符
  • 对象属性简写
  • Promise
  • Let与Const
  • Map和Set

1、类

//类的定义
class Animal {
    //ES6中新型构造器
    constructor(name) {
        this.name = name;
    }
    //实例方法
    sayName() {
        console.log('My name is '+this.name);
    }
}
//类的继承
class Programmer extends Animal {
    constructor(name) {
        //直接调用父类构造器进行初始化
        super(name);
    }
    program() {
        console.log("I'm coding...");
    }
}
//测试我们的类
var animal=new Animal('dummy'),
wayou=new Programmer('wayou');
animal.sayName();//输出 ‘My name is dummy’
wayou.sayName();//输出 ‘My name is wayou’
wayou.program();//输出 ‘I'm coding...’

2、模块化

  模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。
导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

export var name = 'Rainbow'

  上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

var name = 'Rainbow';
var age = '24';

export {
  name,
  age
};
导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

import myModule from 'myModule';
import { name ,age } from 'test';

3、箭头函数

  =>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个 this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如 var self = this;或 var that =this这种引用外围this的模式。但借助 =>,就不需要这种模式了。
箭头函数的结构

  箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

() => {
    alert()
}

setTimeout(() => {
    // to do
}, 500)

4、模板字符串

ES6支持 模板字符串,使得字符串的拼接更加的简洁、直观。

平常:var str = ‘hello, '+ name + ', my name is ' + myName;

let str = `hello, ${name}, my name is ${myName}`;

  在ES6中通过 ${}就可以完成字符串的拼接,只需要将变量放在大括号之中。

5、对象属性简写

  1. 不使用ES6
    const name = 'Ming',
    age = '18',
    city = 'Shanghai';
    const student = {
      name: name,
      age: age,
      city: city
    };
    console.log(student);

    对象中必须包含属性和值,显得非常冗余。

  1. 使用ES6
    const name = 'Ming',
    age = '18',
    city = 'Shanghai';
    const student = {
      name,
      age,
      city
    };
    console.log(student);

6、Promise对象

Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

  1、不使用ES6
    嵌套两个setTimeout回调函数:

setTimeout(function() {
  console.log('Hello');
  setTimeout(function() {
    console.log('Hi')
  },
  1000)
},
1000);

  2、使用ES6

var waitSecond = new Promise(function(resolve, reject) {
  setTimeout(resolve, 1000)
});
waitSecond.then(function() {
  console.log("Hello");
  return waitSecond
}).then(function() {
  console.log("Hi")
});

7、支持let与const

  const与let都是块级作用域

  1. 使用var定义的变量为函数级作用域:
{
  var a = 10
}
console.log(a);
  1. 使用let与const定义的变量为块级作用域
{
  let a = 10
}
console.log(a); // 报错

具体区别:参考  https://www.cnblogs.com/yjf713/p/12974535.html

8、Map和Set
Map
  Map解决的是Object的键值对中键只能是字符串的问题。

  Map是Es6提供的新的数据结构,是键值对的集合。Map的“键”不限于字符串。各种类型的值(包括对象)都可以当做键。

Set

  Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化

  Set本身是一个构造函数,用来生成 Set 数据结构。

  Set函数可以接受一个数组(或者具有 iterable 接口的其他数据结构)作为参数,用来初始化

weakSet

  WeakSet 的成员只能是对象,而不能是其他类型的值。

  WeakSet 是一个构造函数,可以使用new命令,创建 WeakSet 数据结构。

weakMap

  weakMap结构与Map结构类似,也是用于生成键值对的集合。

  weakMap只接受对象作为键名(null除外),不接受其他类型的值作为键名

可参考:https://es6.ruanyifeng.com/#docs/set-map

 

posted @ 2020-07-25 22:43  柠檬IT  阅读(144)  评论(0编辑  收藏  举报