从简到难，重新学习ES6（中）

小染Jun
3,042 阅读5分钟

本文已参与「新人创作礼」活动， 一起开启掘金创作之路

开始

上次说了从简到难，重新学习ES6（上），这次继续讲（中）。

附上思维导图：

ES6(中)

class

ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对 象的模板。通过 class 关键字，可以定义类。基本上，ES6 的 class 可以看作只是 一个语法糖，它的绝大部分功能，ES5 都可以做到，新的 class 写法只是让对象 原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

  • class 声明类
  • constructor 定义构造函数初始化
  • extends 继承父类
  • super 调用父级构造方法
  • static 定义静态方法和属性
  • 父类方法可以重写

构造函数和class声明

//es5写法
function Phone(brand,price){
  this.brand = brand;
  this.price = price;
}

 // 添加方法
Phone.prototype.call = function(){
  console.log("我可以打电话！");
}
 // 实例化对象
var vivo = new Phone("华为",5999);
vivo.call();
console.log(vivo);

//es6写法
class Shouji {
  // 构造方法，名字是固定的，会自动调用
  constructor(brand,price){
    this.brand = brand;
    this.price = price;
  }
  // 打电话，方法必须使用该方式写，不能call:function(){}
  call(){
    console.log("我可以打电话！");
  }
}

let xiaomi = new Shouji("小米",3999)
xiaomi.call();

class静态成员

//ES6
class Phone {
  static brand = "苹果";
  static change(){
    console.log("我可以改变世界！");
  }
}
let huawei = new Phone();
console.log(huawei.brand);// undefined
console.log(Phone.brand);// 苹果
Phone.change();

class中的继承

// ES5构造函数继承
// 手机
function Phone(brand,price){
	this.brand = brand;
	this.price = price;
}
Phone.prototype.call = function(){
	console.log("我可以打电话！");
}
// 智能手机
function SmartPhone(brand,price,color,size){
	Phone.call(this,brand,price);
	this.color = color;
	this.size = size;
}
// 设置子级构造函数的原型
SmartPhone.prototype = new Phone;
SmartPhone.prototype.constructor = SmartPhone;
// 声明子类的方法
SmartPhone.prototype.photo = function(){
	console.log("我可以拍照！");
}
SmartPhone.prototype.game = function(){
	console.log("我可以玩游戏！");
}
const chuizi = new SmartPhone("锤子",2499,"黑色","5.5inch");
console.log(chuizi);
chuizi.call();
chuizi.photo();
chuizi.game();

// ES6中class类继承
class Phone{
	constructor(brand,price) {
		this.brand = brand;
		this.price = price;
	}
	call(){
		console.log("我可以打电话！");
	}
}

class SmartPhone extends Phone{
// 构造函数
	constructor(brand,price,color,size) {
		super(brand,price); // 调用父类构造函数
		this.color = color;
		this.size = size;
	}
	// 子类对父类方法重写
	// 直接写，直接覆盖
	// 注意：子类无法调用父类同名方法
	call(){
		console.log("我可以进行视频通话！");
	}
	photo(){
		console.log("我可以拍照！");
	}
	game(){
		console.log("我可以玩游戏！");
	}
}
const xiaomi = new SmartPhone("小米6",1999,"黑色","5.15inch");
console.log(xiaomi);
xiaomi.call()// 我可以进行视频通话！

class中的getter和setter设置

class Phone{
	get price(){
		console.log("价格属性被读取了！");
		// 返回值
		return 123;
	}
	set price(value){
		console.log("价格属性被修改了！");
	}
}
// 实例化对象
let s = new Phone();
console.log(s.price); // 返回值
s.price = 2999;

ES6 模块化

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

模块化的好处：

  • 防止命名冲突
  • 代码复用
  • 高维护性

模块化规范产品：

  • CommonJS => NodeJS、Browserify
  • AMD => requireJS
  • CMD => seaJS

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

  • export 命令用于规定模块的对外接口（导出模块）
  • import 命令用于输入其他模块提供的功能（导入模块）

image-20220203213515987

export

// m1.js
// 逐个导出
export let name = "张三";
export function hello(){
    console.log("我叫张三");
}

// m2.js
// 统一导出
let name = "李四";
function say(){
    console.log("我不叫李四");
}
export {
  name,
  say
}

// m3.js
// 默认导出，注意：只允许使用一次
export default{
    age : 18,
    sing : function(){
	console.log("我会唱歌");
    }
}

import

// 通用导入（*）

import * as m1 from "./js/m1.js";
console.log(m1.name)
m1.hello()

import * as m2 from "./js/m2.js";
console.log(m2.name)
m2.say()

//注意这里调用方法的时候需要加上default
import * as m3 from "./js/m3.js";
console.log(m3.default.age)
m3.default.sing()

// 解构赋值形式，按需导入

import {name,hello} from "./js/m1.js";
hello()

// 重名的可以使用别名
import {name as nickname,say} from "./js/m2.js";
console.log(nickname)

// 导入默认导出的模块，必须使用别名
import {default as m3} from "./js/m3.js";
console.log(m3.age)

// 默认导出
import m3 from "./js/m3.js";
m3.sing()

特殊情况：不需要导入数据，只需执行代码

// m4.js
for (let i = 0; i < 5; i++) {
  console.log(i);
}

// ---------------------------------------
// demo.js
import "./js/m4.js"

提示：在html文件使用ES6模块化要加入type="module"，示例：<script type="module"></script>。在node.js环境下，需在package.json加"type": "module"(默认是commonJs)，node的版本也要在v14.15.1以上。

数值扩展

Number.EPSILON

  • Number.EPSILON 是 JavaScript 表示的最小精度
  • EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

二进制、八进制和十六进制

  • ES6 提供了二进制、八进制和十六进制数值的新的写法，分别用前缀0b 和 0o和 0x表示

Number.isFinite() 与 Number.isNaN()

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

Number.parseInt() 与 Number.parseFloat()

  • ES6 将全局方法 parseInt 和 parseFloat，移植到 Number 对象上面，使用不变

Math.trunc

  • 用于去除一个数的小数部分，返回整数部分

Number.isInteger

  • Number.isInteger() 用来判断一个数值是否为整数

Math.sign

  • 判断一个数到底为正数 负数 还是零，返回1,0,-1

相关代码实现：

// Number.EPSILON
let equal = (a, b) => Math.abs(a-b) < Number.EPSILON;
console.log(0.1 + 0.2);// 0.30000000000000004
console.log(0.1 + 0.2 === 0.3); // false
console.log(equal(0.1 + 0.2, 0.3)); // true

// 声明二进制、八进制和十六进制
let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;

//Number.isFinite
console.log(Number.isFinite(100)); //false
console.log(Number.isFinite(100/0));// true

//Number.isNaN
console.log(Number.isNaN(123));// false

//Number.parseInt Number.parseFloat字符串转整数
console.log(Number.parseInt("521iloveyou")); //521

// Number.isInteger 
console.log(Number.isInteger(5));
console.log(Number.isInteger(2.5));

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

// Math.sign
console.log(Math.sign(100));// 1
console.log(Math.sign(0));// 0
console.log(Math.sign(-100));//-1

对象扩展

ES6 新增了一些 Object 对象的方法，常用的有：

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

代码演示：

// Object.is
console.log(Object.is(120,120)); //true

//NaN与任何数值做===比较都是false，跟他自己也如此
console.log(Object.is(NaN,NaN));//true
console.log(NaN === NaN);//false

// Object.assign
const config1 = {
    host : "localhost",
    port : 3306,
    name : "root",
    pass : "root",
    test : "test" // 唯一存在
}
const config2 = {
    host : "http://xiaodye.com",
    port : 6033,
    name : "xiaodye",
    pass : "123456",
}
// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的
console.log(Object.assign(config1,config2));
console.log(config1 === Object.assign(config1,config2));//true

// setPrototypeOf、 getPrototypeOf
const job = {
    name : "前端"
}
const langs = {
    lang : ['html','css','javaScript']
}
// 慎用
Object.setPrototypeOf(job,langs);
console.log(Object.getPrototypeOf(job));
console.log(job);

ES7 新特性

  • Array.prototype.includes

    • includes 方法用来检测数组中是否包含某个元素，返回布尔类型值

  • 指数操作符

    • 在 ES7 中引入指数运算符「**」，用来实现幂运算，功能与 Math.pow 结果相同
    • 幂运算的简化写法，例如：2的10次方：2**10

代码演示：

// includes
let arr = [1,2,3,4];
console.log(arr.includes(1));// true

// 指数操作符
console.log(Math.pow(2,10))// 1024
console.log(2**10);// 1024

最后

❤️如果发现文章有错误，还请指出❤️

avatar
文章
阅读
粉丝