第2章 ECMAScript 6 新特性

最新推荐文章于 2024-08-28 17:14:46 发布

Muko_0x7d2

最新推荐文章于 2024-08-28 17:14:46 发布

阅读量337

点赞数 9

分类专栏： ECMA新特性文章标签： es6

本文链接：https://blog.csdn.net/2203_75300307/article/details/141643358

版权

ECMA新特性专栏收录该内容

3 篇文章 0 订阅

订阅专栏

2.1 let 关键字用来声明变量

使用 let 声明的变量有几个特点：

不允许重复声明
块儿级作用域：只能在代码块里面有效
不存在变量提升：不允许在声明这个变量之前使用这个变量
不影响作用域链：

{
        let school = '深圳大学';
        function fun() {
        console.log(school);
        }
        fun();
        // 运行结果：正常输出“深圳大学”
        // 虽然函数fun的作用域里面没有school这个变量
        // 但是不影响作用域链，fun()从上一级里面去寻找这个school变量
}

2.1.1 let 实践案例

在这里插入图片描述

<script>
    // 获取div元素对象
    let items = document.getElementsByClassName('item');
    
    // 遍历并绑定事件
    for(let i = 0; i < items.length; i++) {
        items[i].onclick = function() {
            // 修改当前元素的背景颜色
            // this.style.background = 'pink';
            items[i].style.background = 'pink';
        }
    }
</script>

如果for循环里面不用let的话，var相当于在全局变量中存储
即var i，i此时遍历2次后再自增则为3，但是items里面只有三个元素，下标只到2，所以就会报错

2.1.2 应用场景

以后声明变量使用 let 就对了

2.2 const 关键字

const 关键字用来声明常量，const 声明有以下特点：

声明必须赋初始值
标识符一般为大写，如：let SCHOOL = '深圳大学'
不允许重复声明
值不允许修改
块儿级作用域

注意: 对象属性修改和数组元素变化不会出发 const 错误，如下：

const TEAM = ['123','456','789'];
TEAM.push = ('666')
// 常量所指向的地址没有发生变化，所以不会报错

应用场景：声明对象类型使用 const，非对象类型声明选择 let

2.3 变量的解构赋值

ES6 允许按照一定模式从数组和对象中提取值，对变量进行赋值，这被称为解构赋值

2.3.1 数组的解构

const F4 = ['小沈','刘无','赵四','宋三'];
let [xiao, liu, zhao, song];
// 相当于
let xiao = '小沈', liu = '刘无', zhao = '赵四', song = '宋三';

2.3.2 对象的解构

在对象的解构赋值中，解构的对象变量名要和被解构的变量名一致

// 1. 对象的解构赋值
const ZHAO = {
    name: '赵三三',
    age: '不详',
    xiaopin: function () {
        console.log("我可以说相声")
    }
}
let {name, age, xiaopin} = ZHAO;
// 相当于
let name = ZHAO.name;
let age = ZHAO.age;
let xiaopin = ZHAO.xiaopin();

// 2. 频繁使用对象方法
const ZHAO = {
    xiaoping: function () {
        console.log("我可以说相声");
    }
}
ZHAO.xiaoping();  // 一般调用
// 解构调用
let {xiaopin} = ZHAO;
xiaopin();

2.4 模板字符串

模板字符串（template string）是增强版的字符串，用反引号（`）标识，特点：

字符串中可以出现换行符

let str = `<ul>
            <li>赵毅</li>
            <li>赵三</li>
            <li>赵二</li>
            <li>赵五</li>
</ul>`;

可以使用 ${xxx} 形式输出变量

let star = '王某';
let result = `${star}在前几年离开了开心麻花`;

注意：当遇到字符串与变量拼接的情况使用模板字符串

2.5 简化对象写法

ES6 允许在大括号里面，直接写入变量和函数，作为对象的属性和方法。这样的书写更加简洁。

let name = '向上';
let slogon = '永远追求行业更高标准';
let improve = function () {
    console.log('可以提高你的技能');
}

//属性和方法简写
let xiang = {
    name,
    slogon,
    improve,
    change () {  // 这里简写了，change = function () {}
        console.log('可以改变你');
    }
};

注意：对象简写形式简化了代码，所以以后用简写就对了

2.6 箭头函数

ES6 允许使用「箭头」（=>）定义函数。

// 通用写法
// 声明一个函数
let fn = (a, b) => {
    return a + b;
}
// 调用函数
let result = fn(1, 2);
console.log(result);

2.6.1 this的指向

this是静态的，this始终指向函数声明时所在作用域下的this的值

// 声明普通函数
function getName () {
    console.log(this.name);
}
// 声明箭头函数
let getName2 = () = > {
    console.log(this.name);
}

// 设置window对象的name属性
window.name = '深圳大学';
const school = {
    name: "SZU"
}

// 直接调用，this指向window
getName();  // 控制台打印“深圳大学”
getName2();  // 控制台打印“深圳大学”

// call方法调用（call方法可以改变函数内部this的值）
getName.call(school);  // 此时this指向school，所以控制台打印“SZU”
getName2.call(school);  // 此时this依旧指向window，所以控制台打印“深圳大学”

2.6.2 不能作为构造实例化对象

let Person = (name, age) => {
    this.name = name;
    this.age = age;
}
let me = new Person('xiao', 30);
console.log(me);
// 报错：Person is not a constructor

2.6.3 不能使用arguments变量

let fn = () = > {
    console.log(arguments);
}
fn(1, 2, 3);
// 报错：arguments is not defined

2.6.4 箭头函数的简写

// 1. 省略小括号，当形参有且只有一个的时候
let add = n => {
    return n + n;
}

// 2. 省略花括号，当代码体只有一条语句的时候，此时return必须省略
// 而且语句的执行结果就是函数的返回值
let pow = n => n * n;

注意：箭头函数不会更改this指向，用来指定回调函数会非常合适

2.6.5 箭头函数的实践

2.6.5.1 需求1

点击div 2s后颜色变成“粉色”

// 获取元素
let ad = document.getElementById('ad');
// 绑定事件
ad.addEventListener("click", function() {
    // 保存this的值
    // let _this = this;
    // 定时器
    setTimeout(() => {
        // 修改背景颜色 this
        // 此时箭头函数this指向ad元素，因为是在ad下定义的箭头函数
        // _this.style.background = 'pink';
        this.style.background = 'pink';
    }, 2000);
});

2.6.5.2 需求2

从数组中返回偶数的元素

const arr = [1, 6, 9, 10, 100, 25];
// 一般方法
const result = arr.filter(function(item) {
    if(item % 2 === 0) {
        return true;
    } else {
        return false;
    }
});

// 箭头函数方法
const result = arr.filter(item => item % 2 === 0);

2.6.6 箭头函数总结

箭头函数适合与this无关的回调：定时器，数组的方法回调
箭头函数不适合与this有关的回调：事件回调，对象的方法

2.7 函数参数的默认值设置

ES6允许给函数参数赋值初始值

2.7.1 形参初始值具有默认值的参数，一般位置要靠后（潜规则）

function add(a, b, c = 10) {
    return a + b + c;
}
let result = add(1, 2);
console.log(result);  // 控制台输出13

2.7.2 与解构赋值结合

function connect({host = "127.0.0.1", username, password, port}) {
    console.log(host)
    console.log(username)
    console.log(password)
    console.log(port)
}
connect({
    host: 'baidu.com',
    username: 'root',
    password: 'root',
    port: 3306
})

2.8 rest 参数

ES6 引入rest参数，用于获取函数的实参，用来代替arguments

// ES5 获取实参的方式
function data() {
    console.log(arguments);
}
data('白纸', '阿娇', '思慧');
// 控制台输出为一个对象

// rest参数
function data(...args) {
    console.log(args);
}
data('白纸', '阿娇', '思慧');
// 控制台输出为一个数组,可以用数组的api如：filter some every map等

// rest 参数必须要放到参数最后
function fn(a, b, ...args) {
    console.log(a);
    console.log(b);
    console.log(args);
}

fn(1, 2, 3, 4, 5, 6);
// 控制台输出：1, 2, [3, 4, 5, 6]

2.9 spread 扩展运算符

扩展运算符（spread）也是三个点（…）。它好比 rest 参数的逆运算，将一个数组转为用逗号分隔的参数序列，对数组进行解包。

/**
* 展开数组
*/ 
let tfboys = ['盖文','赵信','皇子'];
function fn(){
    console.log(arguments);
}
fn(...tfboys)
// 控制台输出为：'盖文','赵信','皇子'

2.9.1 数组的合并

const kuaizi = ['a', 'b'];
const fengh = ['c', 'd'];
const zuhe = [...kuaizi, ... fengh];
console.log(zuhe);
// 控制台输出：['a', 'b', 'c', 'd']

2.9.2 数组的克隆

const szh = ['E', 'G', 'M'];
const syc = [...szh];
console.log(syc);
// 控制台输出：['E', 'G', 'M']

2.9.3 将伪数组转为真正的数组

const divs = document.querySelectorAll('div');  // 这里拿到的div是object
const divArr = [...divs];  // 这里转为了真正的数组
console.log(divArr);

2.10 Symbol

2.10.1 Symbol 基本使用

ES6 引入了一种新的原始数据类型 Symbol，表示独一无二的值。它是JavaScript 语言的第七种数据类型，是一种类似于字符串的数据类型。

Symbol 特点:

Symbol 的值是唯一的，用来解决命名冲突的问题
Symbol 值不能与其他数据进行运算
Symbol 定义的对象属性不能使用 for…in 循环遍历，但是可以使用Reflect.ownKeys 来获取对象的所有键名

// 创建Symbol
let s2 = Symbol('水果干');
let s3 = Symbol('水果干');
console.log(s2 === s3);
// 控制台打印：false（因为编码不同）

// Symbol.for 创建（for获取唯一值，所以这里s4等于s5）
let s4 = Symbol.for('水果干');
let s5 = Symbol.for('水果干');
console.log(s4 === s5);
// 控制台打印：true

JavaScript数据类型记忆方法：USONB

u: undefined
s: string, symbol
o: object
n: null, number
b: boolean

注: 遇到唯一性的场景时要想到 Symbol

2.10.2 对象添加Symbol类型的属性

向对象中添加方法 up down，但是该对象中的属性很多，你不确定有没有已经有up 和 down的方法，这个时候可以用Symbol来添加唯一的方法，就不会重复了

let game = {...

// 声明一个对象
let methods = {
    up: Symbol(),
    down: Symbol()
};

game[methods.up] = function() {
    console.log("我可以改变形状");
}

game[methods.down] = function() {
    console.log("我可以快速下降！！");
}

console.log(game);

另外一个方法

let youxi = {
    name: "狼人杀",
    [Symbol('say')]: function() {
        console.log("我可以发言")
    },
    [Symbol('zibao')]: function() {
        console.log("我可以说话")
    }
}

2.10.3 Symbol的内置属性

指向语言内部使用的方法。可以称这些方法为魔术方法，因为它们会在特定的场景下自动执行。

方法	描述
Symbol.hasInstance	当其他对象使用 instanceof 运算符，判断是否为该对象的实例时，会调用这个方法
Symbol.isConcatSpreadable	对象的 Symbol.isConcatSpreadable 属性等于的是一个布尔值，表示该对象用于 Array.prototype.concat()时，是否可以展开。
Symbol.species	创建衍生对象时，会使用该属性
Symbol.match	当执行 str.match(myObject) 时，如果该属性存在，会调用它，返回该方法的返回值。
Symbol.replace	当该对象被 str.replace(myObject)方法调用时，会返回该方法的返回值。
Symbol.search	当该对象被 str.search (myObject)方法调用时，会返回该方法的返回值。
Symbol.split	当该对象被 str.split(myObject)方法调用时，会返回该方法的返回值。
Symbol.iterator	对象进行 for…of 循环时，会调用 Symbol.iterator 方法，返回该对象的默认遍历器
Symbol.toPrimitive	该对象被转为原始类型的值时，会调用这个方法，返回该对象对应的原始类型值。
Symbol. toStringTag	在该对象上面调用 toString 方法时，返回该方法的返回值
Symbol. unscopables	该对象指定了使用 with 关键字时，哪些属性会被 with环境排除。

2.11 迭代器

遍历器（Iterator）就是一种机制。它是一种接口，为各种不同的数据结构提供统一的访问机制。任何数据结构只要部署 Iterator 接口，就可以完成遍历操作。

2.11.1 ES6 创造了一种新的遍历命令

for…of 循环，Iterator 接口主要供 for…of 消费

for…of遍历键值 for…in遍历键名

// 声明一个数组
const xiyou = ['唐僧', '孙悟空', '猪八戒', '沙僧'];

// 使用 for...in 遍历数组输出键名
for (let v in xiyou) {
    console.log(v);
}
// 输出：0,1,2,3

// 使用 for...of 遍历数组输出键值
for (let v of xiyou) {
    console.log(v);
}
// 输出：唐僧, 孙悟空, 猪八戒, 沙僧

2.11.2 原生具备 iterator 接口的数据(可用 for of 遍历)

Array、Arguments、Set、Map、String、TypedArray、NodeList
对象里面有Symbol.iterator属性就可以进行遍历了

2.11.3 工作原理

创建一个指针对象，指向当前数据结构的起始位置
第一次调用对象的 next 方法，指针自动指向数据结构的第一个成员
接下来不断调用 next 方法，指针一直往后移动，直到指向最后一个成员
每调用 next 方法返回一个包含 value 和 done 属性的对象

// 原理
let iterator = xiyou[Symbol.iterator]();

// 调用对象的next方法
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

注: 需要自定义遍历数据的时候，要想到迭代器。

例子：

// 迭代器案例：遍历这个自定义对象
// 声明一个对象
const banji = {
    name: "终极一班",
    stus: [
        'xiaoming',
        'xiaoning',
        'xiaotian',
        'knight'
    ],
    [Symbol.iterator]() {
        // 索引变量
        let index = 0;
        //
        let _this = this;
        return {
            next: function () {
                if (index < _this.stus.length) {
                    const result = { value: _this.stus[index], done: false };
                    // 下标自增
                    index++;
                    // 返回结果
                    return result;
                } else {
                    return {value: undefined, done: true};
                }
            }
        };
    }
}

2.12 生成器

生成器函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同

在这里插入图片描述

function * gen(){

    yield '一只没有耳朵';

    yield '一只没有尾巴';

    yield '真奇怪';

}

let iterator = gen();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

代码说明：

“ * ”的位置没有限制
生成器函数返回的结果是迭代器对象，调用迭代器对象的 next 方法可以得到yield 语句后的值
yield 相当于函数的暂停标记，也可以认为是函数的分隔符，每调用一次 next方法，执行一段代码
next 方法可以传递实参，作为 yield 语句的返回值，默认返回yield后面的值

2.12.1 整体传参与next方法传参

在这里插入图片描述

2.12.2 定时器案例

异步编程：1s 后控制台输出111 ，2s后输出222 ， 3s后输出333

// 回调地狱：回调函数里面套回调函数
setTimeout(() => {
    console.log(111);
    setTimeout(() => {
        console.log(222);
        setTimeout(() => {
            console.log(333);
        }, 3000);
    }, 2000);
}, 1000);


// 下面用生成器函数完成异步编程
function one() {
    setTimeout(() => {
        console.log(111);
        iterator.next();  // 往下执行
    }, 1000)
}

function two() {
    setTimeout(() => {
        console.log(222);
        iterator.next();
    }, 2000)
}

function three() {
    setTimeout(() => {
        console.log(333);
        iterator.next();
    }, 3000)
}

function * gen() {
    yield one();
    yield two();
    yield three();
}

// 调用生成器函数
let iterator = gen();
iterator.next();

2.12.3 模拟获取数据

模拟获取用户的数据，然后获取用户对应的订单数据，然后获取订单对应的商品数据

function getUsers() {
    setTimeout(() => {
        let data = '用户数据';
        // 调用next方法，并且将数据传入
        iterator.next(data);
    }, 1000);
}

function getOrders() {
    setTimeout(() => {
        let data = '订单数据';
        iterator.next(data);
    }, 1000);
}

function getGoods() {
    setTimeout(() => {
        let data = '商品数据';
        iterator.next(data);
    }, 1000);
}

function * gen() {
    let users = yield getUsers();
    let orders = yield getOrders();
    let goods = yield getGoods();
}

// 调用生成器函数
let iterator = gen();
iterator.next();

2.13 Promise

Promise 是 ES6 引入的异步编程的新解决方案。语法上 Promise 是一个构造函数，用来封装异步操作并可以获取其成功或失败的结果。

Promise 构造函数: Promise (excutor) {}
Promise.prototype.then 方法
Promise.prototype.catch 方法

2.13.1 Promise的基本使用

// 实例化 Promise 对象
const p = new Promise(function (resolve, reject) {
    setTimeout(function () {
        //
        // let data = '数据库中的用户数据';
        // resolve
        // resolve(data);

        let err = '数据读取失败';
        reject(err);
    }, 1000);
});

// 调用 promise 对象的 then 方法
p.then(function (value) {
    // 成功调用第一个value
    console.log(value);
}, function (reason) {
    // 失败调用第二个reason
    console.log(reason);
})

2.13.2 Promise 封装读取文件

// 1. 引入 fs 模块
const fs = require('fs');

// 2. 调用方法读取文件
fs.readFile('./resources/为学.md', (err, data) => {
    // 如果失败
    if (err) throw err;
    // 如果没有出错，则输出内容
    console.log(data.toString());
});

// 3. 使用 Promise 封装
const p = new Promise(function(resolve, reject) {
    fs.readFile("./resources/为学.md", (err, data) => {
        // 判断如果失败
        if(err) {
            // 调用reject，修改promise的状态为失败
            reject(err);
        }
        // 如果成功
        // 调用resolve，修改promise的状态为成功
        resolve(data);
    });
});

// 通过then方法来处理失败或成功的结果
p.then(function(value){
    console.log(value.toString());
}, function(reason) {
    console.log("读取失败！！");
});

2.13.3 Promise 封装AJAX请求


const p = new Promise((resolve, reject) => {
    // 1. 创建对象
    const xhr = new XMLHttpRequest();

    // 2. 初始化
    xhr.open("GET", "https://api.apiopen.top/getJoke");

    // 3. 发送
    xhr.send();

    // 4. 绑定事件，处理响应结果
    xhr.onreadystatechange = function () {
        // 判断
        if (xhr.readyState === 4) {
            // 判断响应状态码 200-299（成功）
            if (xhr.status >= 200 && xhr.status < 300) {
                // 表示成功
                resolve(xhr.response);
            } else {
                reject(xhr.status);
            }
        }
    }
});

// 指定回调
p.then(function(value){
    // 成功则输出返回的数据
    console.log(value);
}, function(reason){
    // 失败则输出报错的信息
    console.error(reason);
});

2.13.4 Promise.prototype.then方法

调用then方法，then方法的返回结果是Promise对象，对象状态由回调函数的执行结果决定
1. 如果回调函数中返回的结果是非Promise类型的属性，状态为成功，返回值为对象的成功的值

// 创建 promise 对象
const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('用户数据');
        // reject('出错啦');
    }, 1000)
});

const result = p.then(value => {
    console.log(value);
    // 1. 非Promise类型的属性
    // return 'iloveyou';
    // 2. 是Promise对象
    // return new Promise((resolve, reject) => {
    //     // resolve('ok');
    //     reject('error');
    // });
    // 3. 抛出错误
    // throw new Error('error');
    throw '出错啦';
}, reason => {
    console.warn(reason);
});

// 因为then方法返回一个Promise对象的特性，then方法是可以链式调用的
// 链式调用
p.then(value => {

}).then(value => {

});
// 链式调用一形成，杜绝回调地狱

console.log(result);

2.13.5 Promise实践练习 - 多个文件内容获取

获取多个文件内容，将他们合在一起并输出

// 引入fs模块
const fs = require("fs");

// 回调地狱写法
// fs.readFile('./resources/为学.md', (err, data1) => {
//     fs.readFile('./resources/插秧诗.md', (err, data2) => {
//         fs.readFile('./resources/观书有感.md', (err, data3) => {
//             let result = data1 + '\r\n' +data2 + '\r\n' + data3;
//             console.log(result);
//         });
//     });
// });

// 使用Promise实现
const p = new Promise((resolve, reject) => {
    fs.readFile("./resources/为学.md", (err, data) => {
        resolve(data);
    });
});

p.then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/插秧诗.md", (err, data) => {
            resolve([value, data]);
        });
    })
}).then(value => {
    return new Promise((resolve, reject) => {
        fs.readFile("./resources/观书有感.md", (err, data) => {
            // 压入
            value.push(data);
            resolve(value);
        });
    })
}).then(value => {
    console.log(value.join('\r\n'));
});

2.13.6 Promise对象catch方法

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        // 设置p对象的状态为失败，并设置失败的值
        reject("出错啦!");
    }, 1000)
});

// p.then(function(value){}, function(reason){
//     console.error(reason);
// });

// 只需要一个错误的参数即可，相当于then方法的语法糖
p.catch(function(reason) {
    console.warn(reason);
});

2.14 Set

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

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

2.14.1 集合方法实践

//创建一个空集合
let s = new Set();

//创建一个非空集合
let s1 = new Set([1, 2, 3, 1, 2, 3]);

//集合属性与方法
//返回集合的元素个数
console.log(s1.size);
//添加新元素
console.log(s1.add(4));
//删除元素
console.log(s1.delete(1));
//检测是否存在某个值
console.log(s1.has(2));
//清空集合
console.log(s1.clear());

2.14.2 集合案例实践

// 实际案例
let arr = [1, 2, 3, 4, 5, 4, 3, 2, 1];
// 1. 数组去重
let result = [...new Set(arr)];
console.log(result);

// 2. 交集
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);

// 3. 并集
let union = [...new Set([...arr, ...arr2])];
console.log(union);

// 4. 差集
let diff = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)));
console.log(diff);

2.15 Map

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

Map 的属性和方法：

size：返回 Map 的元素个数
set：增加一个新元素，返回当前 Map
get：返回键名对象的键值
has：检测 Map 中是否包含某个元素，返回 boolean 值
clear：清空集合，返回 undefined

2.15.1 Map方法实例

//创建一个空 map
let m = new Map();
//创建一个非空 map
let m2 = new Map([
    ['name', '333'],
    ['slogon', '不断提高行业标准']
]);

// 添加元素
m2.set('change', function () {
    console.log("我们可以改变你！")
});
// 声明一个对象
let key = {
    school: 'abc'
};
m2.set(key, ['a', 'b', 'c']);

//属性和方法
//获取映射元素的个数
console.log(m2.size);
//添加映射值
console.log(m2.set('age', 6));
//获取映射值
console.log(m2.get('age'));
//检测是否有该映射
console.log(m2.has('age'));
//清除
console.log(m2.clear());

2.16 Class 类

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

知识点：

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

2.16.1 class介绍与constructor实例

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

// 添加方法：通过原型对象去添加方法，这样子来做到重用
Phone.prototype.call = function() {
    console.log("我可以打电话");
}

// 实例化对象
let Huawei = new Phone('华为', 5999);
Huawei.call();
console.log(Huawei);

// ES6 写法
class Shouji {
    // 构造方法 名字不能修改
    constructor(brand, price) {
        this.brand = brand;
        this.price = price;
    }

    // 方法必须使用该语法，不能使用ES5的对象完整形式
    call() {
        console.log("我可以打电话！！");
    }
}

let onePlus = new Shouji("1+", 1000);

console.log(onePlus);

2.16.2 class 静态成员

实例对象与函数对象的属性是不相通的
函数对象的属性是属于函数对象的，并不属于实例对象，这样的属性我们称为静态成员

function Shouji() {

}

Shouji.name = '手机';
Shouji.change = function() {
    console.log("222");

}
Phone.prototype.size = '5.5inch';

let mamba = new Shouji();

console.log(mamba.name);  // 打印：undefined
mamba.change();  // 报错：未定义该函数
console.log(mamba.size);  // 打印：5.5inch

对于类来说，静态属性是属于类的，并不属于实例对象

class Phone {
    // 静态属性
    static name = '手机';
    static change() {
        console.log("111");
    }
}

let nokia = new Phone();
console.log(nokia.name);  // 打印：undefined
console.log(Phone.name);  // 打印：手机

2.16.3 ES5构造函数继承

// 手机
function Phone(brand, price) {
    this.brand = brand;
    this.price = price;
}

Phone.prototype.call = function() {
    console.log("我可以");
}

// 智能手机
function SmartPhone(brand, price, color, size) {
    // 改变this指向为SmartPhone
    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.playGame = function() {
    console.log("玩游戏");
}

const chuizi = new SmartPhone('锤子', 2222, '黑色', '5.5inch');

console.log(chuizi);

2.16.4 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);  // Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
    }

    // 方法
    photo() {
        console.log("拍照");
    }
    
    playGame() {
        console.log("玩游戏");
    }
}

const xiaomi = new SmartPhone('小米', 3333, '黑色', '4,7inch');

console.log(xiaomi);
xiaomi.photo();
xiaomi.playGame();
xiaomi.call();

2.16.5 子类对父类方法的重写

在js中的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);  // Phone.call(this, brand, price);
        this.color = color;
        this.size = size;
    }

    // 方法
    photo() {
        console.log("拍照");
    }
    
    playGame() {
        console.log("玩游戏");
    }

    // 重写父类同名方法
    call() {
        console.log("视频通话");
    }
}

const xiaomi = new SmartPhone('小米', 3333, '黑色', '4,7inch');

console.log(xiaomi);
xiaomi.photo();
xiaomi.playGame();
xiaomi.call();  // 这里调用的是子类的call方法

2.16.6 class中getter和setter设置

当值被获取时，执行get对应的函数
当值被修改时，执行set对应的函数

// get 和 set
class Phone {
    // 类可以没有构造函数
    get price() {
        console.log("价格属性被读取了");
        return 'hello';
    }

    set abb(newVal) {
        console.log('价格属性被修改了');
    }
}

// 实例化对象
let s = new Phone();

// 因为s.price被获取了，所以执行get对应的函数；控制台打印：价格属性被读取了，并且返回'hello'
console.log(s.price);  

// 因为s.price值被修改了，所以执行set对应的函数；控制台打印：价格属性被修改了
s.price = 'free';

2.17 数值扩展

Number.EPSILON 是js表示的最小精度
EPSILON 属性的值接近于 2.220446…

应用：

function equal(a, b) {
    if (Math.abs(a - b) < Number.EPSILON) {
            return true;
    } else {
        return false;
    }
}
console.log(0.1 + 0.2 === 0.3);  // false
console.log(equal(0.1 + 0.2, 0.3));  // true

2.17.1 二进制和八进制

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

let b = 0b1010;
let o = 0o777;
let d = 100;
let x = 0xff;

2.17.2 Number.isFinite() 与 Number.isNaN()

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

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

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

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

2.17.3 Number.parseInt() 与 Number.parseFloat()

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

console.log(Number.parseInt('131234神奇'));  // 打印：131234
console.log(Number.parseFloat('1.31234神奇'));  // 打印：1.31234

2.17.4 Number.isInteger

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

console.log(Number.isInteger(5)); // 打印：true
console.log(Number.isInteger(2.5)); // 打印：false

2.17.5 Math.trunc

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

console.log(Math.trunc(2.3)); // 打印：2

2.17.6 Math.sign

用来判断一个数到底是为正数（1）、负数（-1）还是0（0）

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

2.18 对象扩展

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

2.18.1 Object.is

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

console.log(Object.is(NaN, NaN));  // 打印：true
console.log(NaN === NaN);  // 打印：false

2.18.2 Object.assign

对象的合并，将源对象的所有可枚举属性，复制到目标对象
如果参数名相同，后者对象属性值覆盖前者

const config1 = {
    host: 'localhost',
    port: 3306,
    name: 'root'
};
const config2 = {
    host: '111',
    port: 222
};
console.log(Object.assign(config1, config2));
// 打印：{host: "111", port: 222, name: "root"}

2.18.3 Object.setPrototypeOf 设置原型对象

__proto__、setPrototypeOf、 setPrototypeOf 可以直接设置对象的原型
Object.getPrototypeOf

const school = {
    name: 'ab大学'
};
const cities = {
    xiaoqu: ['11', '22', '33', '44']
    };
Object.setPrototypeOf(school, cities);
console.log(Object.getPrototypeOf(school));
console.log(school);

2.19 模块化

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

2.19.1 模块化的好处

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

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

2.19.2 模块化规范产品

ES6 之前的模块化规范有：

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

2.19.3 ES6 模块化语法

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

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

如果需要被引用，那就export暴露数据

分别暴露

// m1.js 文件下
// 分别暴露
export let school = '111';

export function teach() {
    console.log(222);
}

统一暴露

// m2.js 文件下
// 统一暴露
let school = '234';

function findJob() {
    console.log("找工作");
}

// 导出要暴露的数据
export {school, findJob};

默认暴露

// m3.js 文件下
// 默认暴露
export default {
    school: '555',
    change: function() {
        console.log('changer');
    }
}

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

通用的导入方式

<script type="module">
    // 1. 通用的导入方式
    // 引入 m1.js 模块内容
    import * as m1 from "./src/js/m1.js";
    console.log(m1);
    // 引入m2.js 模块内容
    import * as m2 from "./src/js/m2.js";
    console.log(m2);
    // 引入m3.js 模块内容
    import * as m2 from "./src/js/m3.js";
    console.log(m3);
    m3.default.change();
</script>

解构赋值形式

<script type="module">
    // 2. 解构赋值形式
    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";  // 导入默认对象，必须使用别名
</script>

简便形式（针对默认暴露）

<script type="module">
    // 3. 简便形式 针对默认暴露
    import m3 from "./src/js/m3.js";
    console.log(m3);
</script>

2.19.4 浏览器使用ES6模块化方式二

先建一个入口文件

// app.js
// 入口文件

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

console.log(m1);
console.log(m2);
console.log(m3);

在html里面引用这个入口文件

// html
<script src="./src/js/app.js" type="module"></script>

2.19.5 babel对ES6模块化代码转换

html文件引入

<!--
    1. 安装工具 babel-cli babel-preset-env browserify(webpack)
    2. npx babel src/js -d dist/js
    3. 打包 npx browserify dist/js/app.js -o dist/bundle.js
-->
<script src="dist/bundle.js"></script>

命令行指令

1. 安装工具
npm init --yes
npm i babel-cli babel-preset-env browserify -D

// 局部安装选择npx
// 2. 选择文件路径，命令行传参
npx babel -d dist/js --presets=babel-preset-env

// 3. 打包到bundle.js，进行文件转换
npx browserify dis/js/app.js -o dist/bundle.js  // 文件转换

// 全局安装选择babel
babel

2.19.6 ES6模块化引入NPM包

使用npm包

// app.js 文件
// 修改背景颜色为粉色
import $ from 'jquery';  // const $ = require("jquery");
$('body').css('background', 'pink');

// 安装jquery
npm i jquery

// 打包
npx babel -d dist/js --presets=babel-preset-env
// 重新打包
npx browserify dis/js/app.js -o dist/bundle.js

Muko_0x7d2

关注

9
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
第2章 ECMAScript 6 新特性

箭头函数适合与this无关的回调：定时器，数组的方法回调箭头函数不适合与this有关的回调：事件回调，对象的方法// ES5 写法// 手机// 添加方法：通过原型对象去添加方法，这样子来做到重用console.log("我可以打电话");// 实例化对象let Huawei = new Phone('华为', 5999);// ES6 写法// 构造方法名字不能修改// 方法必须使用该语法，不能使用ES5的对象完整形式call() {
复制链接

扫一扫