阅读 136

ES6高频知识点简述

目标:es6的目的是让javascript功能更加强大,可以使用javascript开发企业级大型软件

1.解构赋值

不使用变量交换两个变量的值的方法? 
使用es6中的解构赋值语法:[a,b]=[b,a]即可,传统方法是a=a+b;a=a-b;b=a-b;

2.异步编程Promise()

    解决传统回调地狱(callback hell)的Promise?在Promise实例中存在两个函数resolve()和reject(),分别代表请求成功和失败,其后还有一个then方法,表示在:

复制代码

3.let和cons来代替var

   构建块级作用域的let,定义常量的const,和es5中的var有什么区别呢?

4.有了模块的概念,impot/export

es6中的模块化解决方案,和java十分相似,有了export 和import来导出和导出当前代码块;

5.Class类的引入

javascript语言中,传统的生成实例对象的方法是通过构造函数,在构造函数的原型上扩展原型方法,这种方式不是面向对象的方法,不容易让人理解,es6中有了class类的概念,原来的构造函数相当于现在constructor()函数相当于原来的构造函数,在class内部定义的函数相当于在es5中的构造函数的原型上扩展的方法;代码如下:

es5构造函数:

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 2);复制代码

es6-Class类的方法:

//定义类
class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}复制代码

两者的调用方法都是相同的,都是通过new的方法来实例化对象;

6.es6中的箭头函数,箭头函数的this的指向问题?

7.es6中的默认形参

在es5中,如果一个形参传进来是没有的,我们需要给其一个默认值,原来的方法是:

function  purchase(name,num){
        name=name||"apple";
        num=num||1;   
        console.log(name,":",num);
}
purchase();   //apple:1
purchase("pear",5);  //pear:5
purchase("banana",0);  //banana:1复制代码

当其中的传入的形参name、num为false或者0时,就会直接使name和num的值分别为“Apple”和1(javascript是弱类型语言,直接将两者转为false了),这是不符合条件的,我们只能在函数内部做以下补充,但是这样写是十分繁琐的。             

function purchse(name,num){
     name=name||"apple";
  if(typeof num==="undefined"){
      num=1;
  }
  console.log(name,":",num);
}
purchase("banana",0);  //banana:0复制代码

 在es6中我们就可以直接这样来写,直接给形参添加默认值:

function  purchase(name="apple",num="1"){ 
        console.log(name,":",num);
}
purchase();   //apple:1
purchase("pear",5);  //pear:5
purchase("banana",2);  //banana:0复制代码

8.两种新的数据结构Set和Map

  • Set和数组基本差不多,但是Set中不能存储重复的值;Set数据结构还有很多方法,这里不再赘述;Set也有多种方法比如add(value),delete(value),has(value),clear(),Set有四种数据遍历的方法,分别是:
    • keys():返回键名的遍历器
    • values():返回键值的遍历器
    • entries():返回键值对的遍历器
    • forEach():使用回调函数遍历每个成员

const s = new Set();  //通过Set数据结构后,自动将其中的重复的值给过滤了,在数组去重的时候可以用这种解法
[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x)); 

for (let i of s) {
  console.log(i);
}
// 2 3 5 4复制代码

  • Map数据结构专门用来存储键值对形式的值,在es5中JavaScript 的对象(Object),本质上是键值对的集合(Hash 结构),但是传统上只能用字符串当作键。这给它的使用带来了很大的限制。Map数据结构中的键不再仅仅只是字符串了,可以为任何值,也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“值—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。Map有很多的方法,比如set,get,has,delete,clear,foreach等方法;

9.第七种数据类型Symbol

ES5 的对象属性名都是字符串,这容易造成属性名的冲突。比如,你使用了一个他人提供的对象,但又想为这个对象添加新的方法(mixin 模式),新方法的名字就有可能与现有方法产生冲突。如果有一种机制,保证每个属性的名字都是独一无二的就好了,这样就从根本上防止属性名的冲突。这就是 ES6 引入Symbol的原因。

ES6 引入了一种新的原始数据类型Symbol,表示独一无二的值。它是 JavaScript 语言的第七种数据类型,前六种是:undefinednull、布尔值(Boolean)、字符串(String)、数值(Number)、对象(Object)。

Symbol 值通过Symbol函数生成。这就是说,对象的属性名现在可以有两种类型,一种是原来就有的字符串,另一种就是新增的 Symbol 类型。凡是属性名属于 Symbol 类型,就都是独一无二的,可以保证不会与其他属性名产生冲突。



———未完待续2018.05.24


文章分类
阅读