09JavaScript-ES6（4）

2020-11-25 本文已影响0人东邪_黄药师

Set

ES6 提供了新的数据结构 Set（集合）。它类似于数组，但成员的值都是唯一的，集合实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历，集合的属性和方法：

size 返回集合的元素个数
add 增加一个新元素，返回当前集合
delete 删除元素，返回 boolean 值
has 检测集合中是否包含某个元素，返回 boolean 值
clear 清空集合，返回 undefined

//声明一个 set
        let s = new Set();
        let s2 = new Set(['大事儿','小事儿','好事儿','坏事儿','小事儿']);

        //元素个数
        // console.log(s2.size);//4
        //添加新的元素
        // s2.add('喜事儿'); //5
        //删除元素
        // s2.delete('坏事儿'); //4
        //检测
        // console.log(s2.has('糟心事'));//返回的是一个布尔值
        //清空
        // s2.clear();
        // console.log(s2); //清空所以

        //for 0f 来遍历
        for(let v of s2){
            console.log(v);
        }

Set案例

1数组去重

 let arr = [1,2,3,4,5,4,3,2,1];
 let result = [...new Set(arr)];
 console.log(result); //12345

2.交集

let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
       // 简化前
        let result = [...new Set(arr)].filter(item => {
            let s2 = new Set(arr2);// 4 5 6
            if(s2.has(item)){
                return true;
            }else{
                return false;
            }
        });
        // 简化后
        let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(result); //45

3.并集

let arr = [1,2,3,4,5,4,3,2,1];
let arr2 = [4,5,6,5,6];
let union = [...new Set([...arr, ...arr2])];
console.log(union); //123456

1. 差集

     let arr = [1,2,3,4,5,4,3,2,1];
        let arr2 = [4,5,6,5,6];
        let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
        console.log(diff); //123

Map

ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键”
的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了
iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属
性和方法：

size 返回 Map 的元素个数

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

get 返回键名对象的键值

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

clear 清空集合，返回 undefined

 //声明 Map
        let m = new Map();

        //添加元素
        m.set('name','尚硅谷');
        m.set('change', function(){
            console.log("我们可以改变你!!");
        });
        let key = {
            school : 'ATGUIGU'
        };
        m.set(key, ['北京','上海','深圳']);

        //size
        // console.log(m.size);

        //删除
        // m.delete('name');

        //获取
        // console.log(m.get('change'));
        // console.log(m.get(key));

        //清空
        // m.clear();

        //遍历
        for(let v of m){
            console.log(v);
        }

        // console.log(m);

数值扩展

1. 二进制和八进制
  ES6 提供了二进制和八进制数值的新的写法，分别用前缀 0b 和 0o 表示。
2 Number.isFinite() 与与 Number.isNaN()
Number.isFinite() 用来检查一个数值是否为有限的
Number.isNaN() 用来检查一个值是否为 NaN
1. Number.parseInt() 与与 Number.parseFloat()
  ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变。
1. Math.trunc
  用于去除一个数的小数部分，返回整数部分。
1. Number.isInteger
  Number.isInteger() 用来判断一个数值是否为整数

  //1. 二进制和八进制
        let b = 0b1010;
        let o = 0o777;
        let d = 100;
        let x = 0xff;
        console.log(x);

        //2. Number.isFinite  检测一个数值是否为有限数
        console.log(Number.isFinite(100)); //true
        console.log(Number.isFinite(100/0)); //false
        console.log(Number.isFinite(Infinity)); //false
        
        //3. Number.isNaN 检测一个数值是否为 NaN 
         console.log(Number.isNaN(123)); //false

        //4. Number.parseInt Number.parseFloat字符串转整数
        console.log(Number.parseInt('5211314love')); //5211314
        console.log(Number.parseFloat('3.1415926神奇')); //3.1415926

        //5. Number.isInteger 判断一个数是否为整数
        console.log(Number.isInteger(5)); //true
        console.log(Number.isInteger(2.5)); //false

        //6. Math.trunc 将数字的小数部分抹掉  
         console.log(Math.trunc(3.5)); //3 

        //7. Math.sign 判断一个数到底为正数(1) 负数(-1) 还是零(0)
        console.log(Math.sign(100)); //1
        console.log(Math.sign(0)); //0
        console.log(Math.sign(-20000)); //-1

对象扩展

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

Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
Object.assign 对象的合并，将源对象的所有可枚举属性，复制到目标对象
proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型

  //1. Object.is 判断两个值是否完全相等 
        console.log(Object.is(120, 120));//true
        console.log(Object.is(NaN, NaN));//true
        console.log(NaN === NaN);  // false

        //2. Object.assign 对象的合并
        const config1 = {
            host: 'localhost',
            port: 3306,
            name: 'root',
            pass: 'root',
            test: 'test'
        };
        const config2 = {
            host: 'http://atguigu.com',
            port: 33060,
            name: 'atguigu.com',
            pass: 'iloveyou',
            test2: 'test2'
        }
        console.log(Object.assign(config1, config2));

        //3. Object.setPrototypeOf 设置原型对象  Object.getPrototypeof
        const school = {
            name: '阿里巴巴'
        }
        const cities = {
            xiaoqu: ['北京','上海','深圳']
        }
        Object.setPrototypeOf(school, cities);
        console.log(Object.getPrototypeOf(school));
        console.log(school);

模块化

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

模块化规范产品

ES6 之前的模块化规范有：

1) CommonJS => NodeJS、Browserify
2) AMD  => requireJS
3) CMD  => seaJS

ES6 模块化语法

模块功能主要由两个命令构成：export 和 import。
⚫ export 命令用于规定模块的对外接口
⚫ import 命令用于输入其他模块提供的功能

暴露数据的几种方式

1分别暴露

export let school = '尚硅谷';
export function teach() {
    console.log("我们可以教给你开发技能");
}

2统一暴露

let school = '尚硅谷';

function findJob(){
    console.log("我们可以帮助你找工作!!");
}
export {school, findJob};

3默认暴露

export default {
    school: 'ATGUIGU',
    change: function(){
        console.log("我们可以改变你!!");
    }
}

引入数据的几种方式

1. 通用的导入方式

 //引入 m1.js 模块内容
 import * as m1 from "./src/js/m1.js";
//引入 m2.js 模块内容
import * as m2 from "./src/js/m2.js";
//引入 m3.js 
import * as m3 from "./src/js/m3.js";

1. 解构赋值形式

 import {school, teach} from "./src/js/m1.js";
 import {school as guigu, findJob} from "./src/js/m2.js";
 import {default as m3} from "./src/js/m3.js";

1. 简便形式针对默认暴露

 import m3 from "./src/js/m3.js";
 console.log(m3);