ES6学习笔记(二)

// console.log(nokia.name); // undefined

// // nokia.change();

// // 报错：Uncaught TypeError: nokia.change is not a function

// Phone.prototype.color = “黑色”;

// console.log(nokia.color); // 黑色

// console.log(Phone.name);

// Phone.change();

// 注意：实例对象和函数对象的属性是不相通的

// ES6写法

class Phone {

// 静态属性，只有类有，实例对象是没有的

static name = “手机”;

static change() {

console.log(“我可以改变世界！”);

}

}

let nokia = new Phone();

console.log(nokia.name);

console.log(Phone.name);

Phone.change();

[](()ES5构造函数实现继承

// 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(“我可以玩游戏！”);

}

con 《大厂前端面试题解析+Web核心总结学习笔记+企业项目实战源码+最新高清讲解视频》无偿开源 徽信搜索公众号【编程进阶路】 st chuizi = new SmartPhone(“锤子”, 2499, “黑色”, “5.5inch”);

console.log(chuizi);

chuizi.call();

chuizi.photo();

chuizi.game();

[](()ES6class类继承

注意：super只能用在子类的构造函数中，不能用于普通函数，且类的方法只能用 name(){};，不支持name:function(){};

// ES6class类继承

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;

}

photo() {

console.log(“我可以拍照！”);

}

game() {

console.log(“我可以玩游戏！”);

}

}

const chuizi = new SmartPhone(“小米”, 1999, “黑色”, “5.15inch”);

console.log(chuizi);

chuizi.call();

chuizi.photo();

chuizi.game();

[](()class中的getter和setter设置

// class中的getter和setter设置

class Phone {

get price() { //当price这个属性被读取，会执行这个函数

console.log(“价格属性被读取了！”);

// 返回值

return 123;

}

set price(value) {//当price这个属性被修改，会执行这个函数

console.log(“价格属性被修改了！”);

}

}

// 实例化对象

let s = new Phone();

console.log(s.price); // 返回值

s.price = 2999;

[](()17 、数值扩展

---

[](()Number.EPSILON：

Number.EPSILON 是 JavaScript 表示的最小精度；

EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16；

[](()二进制和八进制：

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

[](()Number.isFinite() 与 Number.isNaN() ：

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

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

[](()Number.parseInt() 与 Number.parseFloat()：

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

[](()Math.trunc：

[](()用于去除一个数的小数部分，返回整数部分；

[](()Number.isInteger：

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

// 数值扩展

// 0. Number.EPSILON 是 JavaScript 表示的最小精度

// EPSILON 属性的值接近于 2.2204460492503130808472633361816E-16

function equal(a, b) {

return Math.abs(a - b) < Number.EPSILON;

}

console.log(“0、Number.EPSILON 是 JavaScript 表示的最小精度”);

// 箭头函数简化写法

equal = (a, b) => Math.abs(a - b) < Number.EPSILON;

console.log(0.1 + 0.2);

console.log(0.1 + 0.2 === 0.3); // false

console.log(equal(0.1 + 0.2, 0.3)); // true

// 1. 二进制和八进制

console.log(“1、二进制和八进制”);

let b = 0b1010;

let o = 0o777;

let d = 100;

let x = 0xff;

console.log(x);

// 2. Number.isFinite 检测一个数值是否为有限数

console.log(“2、Number.isFinite 检测一个数值是否为有限数”);

console.log(Number.isFinite(100));

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

console.log(Number.isFinite(Infinity));

// 3. Number.isNaN 检测一个数值是否为 NaN

console.log(“3. Number.isNaN 检测一个数值是否为 NaN”);

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

// 4. Number.parseInt Number.parseFloat字符串转整数

console.log(“4. Number.parseInt Number.parseFloat字符串转整数”);

console.log(Number.parseInt(‘5211314love’));

console.log(Number.parseFloat(‘3.1415926神奇’));

// 5. Number.isInteger 判断一个数是否为整数

console.log(“5. Number.isInteger 判断一个数是否为整数”);

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

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

// 6. Math.trunc 将数字的小数部分抹掉

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

console.log(Math.trunc(3.5));

// 7. Math.sign 判断一个数到底为正数 负数 还是零

console.log(“7. Math.sign 判断一个数到底为正数 负数 还是零”);

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

console.log(Math.sign(0));//0

console.log(Math.sign(-20000));//-1

[](()18 、对象扩展

---

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

1. Object.is比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

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

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

// 对象扩展

// 1. Object.is 比较两个值是否严格相等，与『===』行为基本一致（+0 与 NaN）；

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

// 注意下面的区别

console.log(Object.is(NaN, NaN));

console.log(NaN === NaN);

// NaN与任何数值做===比较都是false，跟他自己也如此！

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

const config1 = {

host: “localhost”,

port: 3306,

name: “root”,

pass: “root”,

test: “test” // 唯一存在

}

const config2 = {

host: “http://zibo.com”,

port: 300300600,

name: “root4444”,

pass: “root4444”,

test2: “test2”

}

// 如果前边有后边没有会添加，如果前后都有，后面的会覆盖前面的

console.log(Object.assign(config1, config2));

// 3. proto、setPrototypeOf、 getPrototypeOf 可以直接设置对象的原型；

const school = {

name: “尚硅谷”

}

const cities = {

xiaoqu: [‘北京’, ‘上海’, ‘深圳’]

}

// 并不建议这么做

Object.setPrototypeOf(school, cities);

console.log(Object.getPrototypeOf(school));

console.log(school);

[](()19 、模块化

---

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

[](()模块化的优势有以下几点：

1. 防止命名冲突；

2. 代码复用；

3. 高维护性；

[](()ES6 之前的模块化规范有：

1. CommonJS => NodeJS、Browserify；

2. AMD => requireJS；

3. CMD => seaJS；

[](()ES6 模块化语法

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

1. export 命令用于规定模块的对外接口（导出模块）；

2. import 命令用于输入其他模块提供的功能（导入模块）；

[](()ES6导出模块语法汇总

[](()m.js（逐个导出）

export let school = “尚硅谷”;

export function teach(){

console.log(“我们可以教你开发技术！”);

}

[](()n.js（统一导出）

// 统一暴露（导出）

let school = “尚硅谷”;

function findJob(){

console.log(“我们可以帮你找到好工作！”);

}

export {school,findJob}

[](()o.js（默认导出）

export default{

school : “尚硅谷”,

change : function(){

console.log(“我们可以帮你改变人生！”);

}

}

[](()ES6导入模块语法汇总

[](()使用模块化的另一种方式

[](()将js语法整合到一个文件app.js：

// 通用方式

// 引入m.js模块内容

import * as m from “./m.js”;

console.log(m);

console.log(m.school);

m.teach();

[](()使用模块化的另一种方式.html：

[](()20 、Babel对ES6模块化代码转换

---

Babel 是一个 JavaScript 编译器；Babel 能够将新的ES规范语法转换成ES5的语法；

因为不是所有的浏览器都支持最新的ES规范，所以，一般项目中都需要使用Babel进行转换；步骤：使用Babel转换JS代码——打包成一个文件——使用时引入即可；

[](()步骤

第一步：安装工具babel-cli（命令行工具） babel-preset-env（ES转换工具） browserify（打包工具，项目中使用的是webpack）；

第二步：初始化项目

npm init -y

[](()第三步：安装

npm i babel-cli babel-preset-env browserify

第四步：使用babel转换

npx babel js（js目录） -d dist/js（转化后的js目录） --presets=babel-preset-env

[](()第五步：打包

npx browserify dist/js/app.js -o dist/bundle.js

第六步：在使用时引入bundle.js

[](()21 、ES6模块化引入NPM包

---

第一步：安装jquery

npm i jquery

第二步：在app.js使用jquery

//入口文件

//修改背景颜色为粉色

import $ from ‘jquery’;// 相当于const $ = require(“jquery”);

$(‘body’).css(‘background’,‘pink’);