ES6（2）

Set

ES6 提供了新的数据结构 Set （集合）。它类似于数组，但成员的值都是唯

一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『 for…of… 』进

行遍历，集合的属性和方法：

1)

size 返回集合的元素个数

2)

add 增加一个新元素，返回当前集合

3)

delete

删除元素，返回 boolean 值

4)

has

检测集合中是否包含某个元素，返回 boolean 值

5)

clear

清空集合，返回 undefined

 <script>
    // 空的set集合
    const s1 = new Set()
    console.log(s1);
    //  但成员的值都是唯一的
    const s2 = new Set([1, 2, 3, 10, 20, 6, 1, 2, 3])
    console.log(s2);
    // 返回集合的大小
    console.log(s2.size);
    // 添加元素。返回当前集合
    console.log(s2.add(false))
    // 根据元素删除，返回boolean
    console.log(s2.delete(4));
    // 查询，返回boolean
    console.log(s2.has(4));
    console.log(s2.clear());
    console.log(s2);
  </script>

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”的

范围不限于字符串，各种类型的值（包括对象）都可以当作键。 Map 也实现了

iterator 接口，所以可以使用『扩展运算符』和『 for…of… 』进行遍历。 Map 的属

性和方法：

1)

size

返回 Map 的元素个数

2)

set

增加一个新元素，返回当前 Map

3)

get

返回键名对象的键值

4)

has

检测 Map 中是否包含某个元素，返回 boolean 值

5)

clear

清空集合，返回 undefined

 

<script>
    // 空的Map集合
    const m1 = new Map()
    console.log(m1);
    // 创建的时候赋值
    const m2 = new Map([
      ['name', '张三'],
      ['age', 18]
    ])
    // 返回结合的大小
    console.log(m2.size);
    //	set	增加一个新元素，返回当前 Map
    console.log(m2.set('sex','男'));
    //  get	返回键名对象的键值
    console.log(m2.get('name'));
    // 	has	检测 Map 中是否包含某个元素，返回 boolean 值
    console.log(m2.has('name'));
    // 	clear	清空集合，返回 undefined
    // console.log(m2.clear());
    // 返回迭代对象
    const mIterable = m2.entries()
    console.log(mIterable.next());
    console.log(mIterable.next());
    console.log(mIterable.next());
    console.log(m2);
  </script>

class 类

ES6 提供了更接近传统语言的写法，引入了 Class （类）这个概念，作为对

象的模板。通过 class 关键字，可以定义类。基本上， ES6 的 class 可以看作只是

一个语法糖，它的绝大部分功能， ES5 都可以做到，新的 class 写法只是让对象

原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

1)

class 声明类

2)

constructor 定义构造函数初始化

3)

extends 继承父类

4)

super 调用父级构造方法

5)

static 定义静态方法和属性

6)

父类方法可以重写

 

<script>
    // 声明类
    class Person{
      // 构造函数进行初始化数据
      constructor(name,age){
        this.name = name
        this.age = age
      }
      // 普通方法 没有办法被类直接调用
      // sayHi(){
      //   console.log(`${this.name}：Hi`);
      // }
      sayHi = ()=>{
        console.log(`${this.name}：Hi`);
      }
      // 静态方法和静态属性可以被类直接调用
      // 被static修饰的方法叫做静态方法
      // 被static修饰的属性 叫静态属性
      static idCard = 100001

      static drink = ()=>{
        console.log('喝水');
      }

    }

    // 创建对象
    const p = new Person('张三',18)
    console.log(p);
    p.sayHi()

    console.log(Person.idCard);
    Person.drink()
  </script>

 

类的继承

<script>
    // 声明类
    class Person {
      // 构造函数进行初始化数据
      constructor(name, age) {
        this.name = name
        this.age = age
      }
      // sayHi(){
      //   console.log(`${this.name}：Hi`);
      // }
      sayHi = () => {
        console.log(`${this.name}：Hi`);
      }

      static idCard = 100001

      static drink = () => {
        console.log('喝水');
      }
    }
    // 通过extends 继承 只能继承一个
    // 父类 叫基类
    // 子类 叫派生类
    class Student extends Person {
      constructor(name, age, id) {
        // 调用父类的构造方法
        super(name, age)
        this.id = id
      }
      // 子类可以重写父类的方法
      sayHi = () => {
        console.log(`${this.name}：hello`);
      }
    }

    // 创建对象
    const stu = new Student('张三', 18, 1001)
    console.log(stu);
    stu.sayHi()

    console.log(Student.idCard);
    Student.drink()
  </script>

数值扩展

Number.isFinite() 与 Number.isNaN()

Number.isFinite() 用来检查一个数值是否为有限的

Number.isNaN() 用来检查一个值是否为 NaN

<script>
    // 检查一个数值是否为有限的
    console.log(Number.isFinite(Math.PI));
    // Number.isNaN()
    console.log(Number.isNaN('我的'));
  </script>

Number.parseInt() 与 Number.parseFloat()

 <script>
    // number 浮点类型的数（小数），整数类型的 二进制 八进制....
    console.log(typeof Number.parseInt('123'));
    // 小数
    console.log(Number.parseFloat('15652.12'));
  </script>

Math.trunc

<script>
    console.log(Math.trunc(123456.2563));
  </script>

Number.isInteger

<script>
    // 判断一个数是不是整数
    console.log(Number.isInteger(Math.trunc(123.123)));
  </script>

对象扩展

ES6 新增了一些 Object 对象的方法

1)

Object.is 比较两个值是否严格相等，与『 === 』行为基本一致

2)

Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象

3)

proto 、 setPrototypeOf 、 setPrototypeOf 可以直接设置对象的原型

<script>
    const obj1 = {
      name: '张三',
      age: '18'
    }
    // 赋值  浅拷贝,引用地址一致
    const obj2 = obj1
    obj1.name = 'lisi'
    console.log(obj2 === obj1); // true
    console.log(obj2);
    // 1)	Object.is  等价于 === 
    console.log('Object.is     '+Object.is(obj1,obj2));

    const obj3 = {}
    // 深拷贝,引用地址不一样
    for (const key in obj1) {
      obj3[key] = obj1[key]
    }
    console.log(obj1 === obj3);  // false
    console.log('Object.is     '+Object.is(obj1,obj3));

    const obj4 = {
      sex:'男'
    }
    // 两个对象进行合并
    console.log(Object.assign(obj1,obj4));

    class Person{

    }

    const object = new Object()
    object.__proto__ = new Person()
    console.log(object);
  </script>

模块化

模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。

模块化的优势有以下几点：

1)

防止命名冲突

2)

代码复用

3)

高维护性

 

ES6 之前的模块化规范有：

1) CommonJS => NodeJS、 Browserify

2) AMD => requireJS

3) CMD => seaJS

 

模块功能主要由两个命令构成： export 和 import 。

 

export 命令用于规定模块的对外接口

 

import 命令用于输入其他模块提供的功能