7.1.14、Map
ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合。但是“键” 的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map 也实现了 iterator 接口，所以可以使用『扩展运算符』和『for…of…』进行遍历。Map 的属性和方法：
- size：返回 Map 的元素个数
- set()：增加一个新元素，返回当前 Map
- get()：返回键名对象的键值
- has()：检测 Map 中是否包含某个元素，返回 boolean 值
- clear()：清空集合，返回 undefined
//创建一个空 map let m = new Map(); //创建一个非空 map let m2 = new Map([ ["name", "张三"], ["gender", "女"] ]); //属性和方法 //获取映射元素的个数 console.log(m2.size); //添加映射值 console.log(m2.set("age", 6)); //获取映射值 console.log(m2.get("age")); //检测是否有该映射 console.log(m2.has("age")); //清除 console.log(m2.clear());
7.1.15、class 类
ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是 一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已，它的一些如下：
class：声明类
constructor：定义构造函数初始化
extends：继承父类
super：调用父级构造方法
static：定义静态方法和属性
//父类 class Phone { //构造方法 constructor(brand, color, price) { this.brand = brand; this.color = color; this.price = price; } //对象方法 call() { console.log("我可以打电话!!!") } } //子类 class SmartPhone extends Phone { constructor(brand, color, price, screen, pixel) { super(brand, color, price); this.screen = screen; this.pixel = pixel; } //子类方法 photo() { console.log("我可以拍照!!"); } playGame() { console.log("我可以玩游戏!!"); } //方法重写 call() { console.log("我可以进行视频通话!!"); } //静态方法 static run() { console.log("我可以运行程序") } static connect() { console.log("我可以建立连接") } } //实例化对象 const Nokia = new Phone("诺基亚", "灰色", 230); const iPhone6s = new SmartPhone("苹果", "白色", 6088, "4.7inch", "500w"); //调用子类方法 iPhone6s.playGame(); //调用重写方法 iPhone6s.call(); //调用静态方法 SmartPhone.run();
7.1.16、数值扩展
7.1.16.1、二进制和八进制
ES6 新增了二进制和八进制的表示方法
let b = 0b1010//二进制 let o = 0o777;//八进制 let d = 100;//十进制 let x = 0xff;//十六进制 console.log(b); console.log(o); console.log(d); console.log(x);
7.1.16.2、Number.EPSILON
Number.EPSILON：它是 JavaScript 表示的最小精度，EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16
function equal(a, b) { if (Math.abs(a - b) < Number.EPSILON) { return true; } else { return false; } } console.log(0.1 + 0.2 === 0.3); console.log(equal(0.1 + 0.2, 0.3));
7.1.16.3、Number.isFinite
Number.isFinite：检测一个数值是否为有限数
console.log(Number.isFinite(100)); console.log(Number.isFinite(100 / 0)); console.log(Number.isFinite(Infinity)); console.log(Number.isFinite(-Infinity));
7.1.16.4、Number.isNaN
Number.isNaN：检测一个数值是否为 NaN
console.log(Number.isNaN(123)); • 1
7.1.16.5、Number.parseInt
Number.parseInt：将一个字符串转换为整数
console.log(Number.parseInt("123abc")); • 1
7.1.16.6、Number.parseFloat
Number.parseFloat：将一个字符串转换为浮点数
console.log(Number.parseFloat("3.1415926神奇")); • 1
7.1.16.7、Number.isInteger
Number.isInteger：判断一个数是否为整数
console.log(Number.isInteger(5)); console.log(Number.isInteger(2.5)); • 1 • 2
7.1.16.8、Math.trunc
Math.trunc：将数字的小数部分抹掉
console.log(Math.trunc(3.5)); • 1 • 2
7.1.16.9、Math.sign
Math.sign：判断一个数到底为正数、负数、还是零
console.log(Math.sign(100)); console.log(Math.sign(0)); console.log(Math.sign(-20000);
7.1.17、对象扩展
ES6 新增了一些 Object 对象的方法，例如：
Object.is：比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）
Object.assign：对象的合并，将源对象的所有可枚举属性，复制到目标对象
proto、setPrototypeOf、 setPrototypeOf可以直接设置对象的原型
7.1.17.1、Object.is
Object.is：判断两个值是否完全相等
console.log(Object.is(120, 120));// === console.log(Object.is(NaN, NaN));// === console.log(NaN === NaN);// ===
7.1.17.2、Object.assign
Object.assign：对象的合并，后边的对象会把前边对象的相同属性和方法覆盖，没有的属性和方法会合并
const config1 = { host: "localhost", port: 3306, name: "zhangsan", pass: "root", test1: "test1" }; const config2 = { host: "127.0.0.1", port: 3309, name: "lisi", pass: "root", test2: "test2" } console.log(Object.assign(config1, config2));
7.1.17.3、设置原型对象
- Object.setPrototypeOf：设置原型对象
- Object.getPrototypeof：获取原型对象
const school = { name: "MySchool" }; const cities = { xiaoqu: ["北京", "上海", "深圳"] }; Object.setPrototypeOf(school, cities); console.log(Object.getPrototypeOf(school)); console.log(school);
7.1.18、模块化
模块化是指将一个大的程序文件，拆分成许多小的文件，然后将小文件组合起来。
7.1.18.1、模块化的好处
- 防止命名冲突
- 代码复用
- 高维护性
7.1.18.2、模块化的产品
CommonJS => NodeJS、Browserify
AMD => requireJS
CMD => seaJS
7.1.18.3、模块化的语法
模块功能主要由两个命令构成：export 和 import。
- export 命令用于规定模块的对外接口
- import 命令用于输入其它模块提供的功能
7.1.18.4、模块化的暴露
m1.js
//方式一：分别暴露 export let school = "华北理工大学"; export function study() { console.log("我们要学习！"); }
m2.js
//方式二：统一暴露 let school = "华北理工大学"; function findJob() { console.log("我们要找工作！"); } export {school, findJob};
m3.js
//方式三：默认暴露 export default { school: "华北理工大学", change: function () { console.log("我们要改变自己！"); } }
7.1.18.5、模块化的导入
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 --> <script type="module"> // 引入 m1.js 模块内容 import * as m1 from "./m1.js"; // 引入 m2.js 模块内容 import * as m2 from "./m2.js"; // 引入 m3.js 模块内容 import * as m3 from "./m3.js"; m1.study(); m2.findJob(); m3.default.change(); </script> </body> </html>
7.1.18.6、解构赋值形式
index.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 在这里写JavaScript代码，因为JavaScript是由上到下执行的 --> <script type="module"> // 引入 m1.js 模块内容 import {school, study} from "./m1.js"; // 引入 m2.js 模块内容 import {school as s, findJob} from "./m2.js"; // 引入 m3.js 模块内容 import {default as m3} from "./m3.js"; console.log(school); study(); console.log(s); findJob(); console.log(m3); m3.change(); </script> </body> </html>
注意：针对默认暴露还可以直接 import m3 from "./m3.js"
7.1.19、浅拷贝和深拷贝
如何区分深拷贝与浅拷贝，简单点来说，就是假设B复制了A，当修改A时，看B是否会发生变化，如果B也跟着变了，说明这是浅拷贝；如果B没变，那就是深拷贝，深拷贝与浅拷贝的概念只存在于引用数据类型。
7.1.19.1、浅拷贝
var obj1 = { name: "张三", age: 20, speak: function () { console.log("我是" + this.name); } }; var obj2 = obj1; // 当修改obj2的属性和方法的时候，obj1相应的属性和方法也会改变 obj2.name = "李四"; console.log(obj1); console.log(obj2);
