✍🏼作者：周棋洛，定制网站大二计算机学生
♉星座：金牛座
🏠主页：
🌐关键：ES6 javascript 前端

理解ES6

ECMAScript ，定制网站是由网景公司制定的一种定制网站脚本语言的标准化规范；定制网站最初命名为 Mocha ，定制网站后来改名为 LiveScript ，定制网站最后重命名为 JavaScript
ECMAScript 2015（ES2015），第 6 版，定制网站最早被称作 ECMAScript 6（ES6），定制网站添加了新的特性

定制网站这篇文章就是带大家学习ES6定制网站新增特性的，加油哦

ES6 定制网站定制网站块级作用域 let

首先，定制网站什么是作用域？定制网站作用域简单讲就是声明一个变量，定制网站这个变量的有效范围，在 let 没来之前。js 只有 var 的定制网站全局作用域和 定制网站函数作用域 ，ES6 为 js 带来了块级作用域

{    var a = "🍉";    let b = "⛳";}console.log(a);console.log(b);
1
2
3
4
5
6

🍉Uncaught ReferenceError: b is not defined
1
2

可以看到，我们使用 var 定制网站关键字在块中定义了变量 a，定制网站其实全局可以访问到，所以说，var声明的变量是全局的，但我们想让变量就在块中生效，出了块就访问不了了，这时就可以使用 ES6 新增的块级作用域关键字 let 来声明这个变量 a，当我再次访问，报错了，说 a is not defined ，a 没有定义

ES6 解构数组

如下所示，首先定义了一个函数，返回一个数组，在未使用解构数组前，调用数组并把返回值赋值给 temp ，然后打印 temp 数组，使用了解构数组后，直接定义一个数组变量，然后将函数返回值指向该变量，他会自动把第一项的值赋值给第一个数组变量，第二项赋值给第二个数组变量，以此类推，最后打印三个变量，看到没有问题

function breakfast() {    return ['🍉', '🍔', '🍕'];}var temp = breakfast();console.log(temp[0], temp[1], temp[2]);let [a, b, c] = breakfast();console.log(a, b, c);
1
2
3
4
5
6
7
8

🍉 🍔 🍕🍉 🍔 🍕
1
2

ES6 解构对象

首先 breakfast 函数返回一个对象，使用解构对象，定义对象，键值对中键表示映射的实际对象的键名，值就是自定义变量，解构完成，会自动完成赋值，然后调用 breakfast 函数，返回对象，随后打印变量 a，b，c ，可以看到没问题

function breakfast() {    return { a: '🍉', b: '🍕', c: '🍔' }}let { a: a, b: b, c: c } = breakfast();console.log(a, b, c);
1
2
3
4
5

🍉 🍕 🍔
1

ES6

在使用模板字符串前，我们拼接字符串变量使用 +

使用 ES6 提供的模板字符串，首先使用 `` 把字符串包起来，当要使用变量时 ，使用 ${变量}

let a = '🍉',    b = '🖼️';let c = '今天吃' + a + '吃完看' + b;console.log(c);let d = `今天吃 ${a} 吃完看 ${b}`;console.log(d);
1
2
3
4
5
6
7
8

今天吃🍉吃完看🖼️今天吃 🍉 吃完看 🖼️
1
2

ES6 判断字符串里是否包含其他字符串

使用这些函数，可以轻松的完成是不是以什么开头的字符串，是不是以什么结尾的字符串，是不是包含了什么字符串等的操作

let str = '你好，我是小周 ❤️';console.log(str.startsWith('你好'));console.log(str.endsWith('❤️'));console.log(str.endsWith('你好'));console.log(str.includes(" "));
1
2
3
4
5

truetruefalsetrue
1
2
3
4

ES6 默认参数

ES6里，可以使用默认参数，当调用函数时，没有给参数进行赋值时，就使用设置的默认参数执行，当给参数赋值时，就会使用新赋的值执行，覆盖默认值，使用如下：

function say(str) {    console.log(str);}function say1(str = '嘿嘿') {    console.log(str);}say();say1();say1('❤️');
1
2
3
4
5
6
7
8
9

undefined嘿嘿❤️
1
2
3

ES6 展开操作符

使用 ... 可以展开元素，方便操作，使用如下：

let arr = ['❤️', '😊', '😍'];console.log(arr);console.log(...arr);let brr = ['王子', ...arr];console.log(brr);console.log(...brr);
1
2
3
4
5
6

[ '❤️', '😊', '😍' ]❤️ 😊 😍[ '王子', '❤️', '😊', '😍' ]王子 ❤️ 😊 😍
1
2
3
4

ES6 剩余操作符

... 操作符用在函数参数上，接收一个参数数组，使用如下：

function f1(a, b, ...c) {    console.log(a, b, c);    console.log(a, b, ...c);}f1('🍎','🌈','☃️','㊙️');
1
2
3
4
5

🍎 🌈 [ '☃️', '㊙️' ]🍎 🌈 ☃️ ㊙️
1
2

ES6 函数名字

使用 .name 可以获取函数的名字，具体使用如下：

function f1() { }console.log(f1.name);let f2 = function () { };console.log(f2.name);let f3 = function f4() { };console.log(f3.name);
1
2
3
4
5
6

f1f2f4
1
2
3

ES6

使用箭头函数可以让代码更简洁，但是也要注意箭头函数的局限性，以及箭头函数中自身没有 this，this指向父级

let f1 = a => a;let f2 = (a, b) => {    return a + b;}console.log(f1(10));console.log(f2(10, 10));
1
2
3
4
5
6
7
8

1020
1
2

ES6 对象表达式

使用es6的对象表达式，如果对象属性和值一样，可以省略值，函数写法可以省去function，用法如下：

let a = '㊙️';let b = '☃️';const obj = {    a: a,    b: b,    say: function () {    }}const es6obj = {    a,    b,    say() {    }}console.log(obj);console.log(es6obj);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

{ a: '㊙️', b: '☃️', say: [Function: say] }{ a: '㊙️', b: '☃️', say: [Function: say] }
1
2

ES6 恒量

使用 const 关键字定义衡量，const 限制的是给衡量分配值的动作，并不限制衡量中的值，使用如下：

const app = ['☃️', '🌈'];console.log(...app);app.push('🤣');console.log(...app);app = 10;
1
2
3
4
5

可以看到当再次给衡量分配值就报错了

☃️ 🌈☃️ 🌈 🤣app = 10;    ^TypeError: Assignment to constant variable.
1
2
3
4
5

ES6 对象属性名

使用点定义对象属性时，如果属性名中含有空格字符，是不合法的，语法通不过的，使用 [属性名] 可以完美解决，并且不仅可以直接写明属性名，还可以使用变量来指定，具体使用如下：

let obj = {};let a = 'little name';obj.name = '王子';// 使用点定义属性中间有空格是不合法的// obj.little name = '小王子';obj[a] = '小王子';console.log(obj);
1
2
3
4
5
6
7

{ name: '王子', 'little name': '小王子' }
1

ES6 判断两个值是否相等

一些特殊值使用 === 或 == 进行比较的结果，可能不满足你的需求，这是你可以使用Object.is(第一个值，第二个值) 来进行判断，可能你就开心的笑了

console.log(NaN == NaN);console.log(+0 == -0);console.log(Object.is(NaN, NaN));console.log(Object.is(+0, -0));
1
2
3
4

falsetruetruefalse
1
2
3
4

ES6 复制对象

使用 Object.assign() 可以把一个对象复制到另一个对象，使用如下：

let obj = {};Object.assign(    // 源    obj,    // 复制目标对象    { a: '☃️' });console.log(obj);
1
2
3
4
5
6
7
8

{ a: '☃️' }
1

ES6 设置对象的 prototype

使用es6可以设置对象的 prototype，使用如下：

let obj1 = {    get() {        return 1;    }}let obj2 = {    a: 10,    get() {        return 2;    }}let test = Object.create(obj1);console.log(test.get());console.log(Object.getPrototypeOf(test) === obj1);Object.setPrototypeOf(test, obj2);console.log(test.get());console.log(Object.getPrototypeOf(test) === obj2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

1true2true
1
2
3
4

ES6 proto

let obj1 = {    get() {        return 1;    }}let obj2 = {    a: 10,    get() {        return 2;    }}let test = {    __proto__: obj1}console.log(test.get());console.log(Object.getPrototypeOf(test) === obj1);test.__proto__ = obj2;console.log(test.get());console.log(Object.getPrototypeOf(test) === obj2);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

1true2true
1
2
3
4

ES6 super

let obj1 = {    get() {        return 1;    }}let test = {    __proto__: obj1,    get() {        return super.get() + ' ☃️';    }}console.log(test.get());
1
2
3
4
5
6
7
8
9
10
11
12

1 ☃️
1

ES6 生成迭代器

在学习前，先首写一个迭代器

function die(arr) {    let i = 0;    return {        next() {            let done = (i >= arr.length);            let value = !done ? arr[i++] : undefined;            return {                value: value,                done: done            }        }    }}let arr = ['☃️', '🤣', '🌈'];let dieArr = die(arr);console.log(dieArr.next());console.log(dieArr.next());console.log(dieArr.next());console.log(dieArr.next());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

{ value: '☃️', done: false }{ value: '🤣', done: false }{ value: '🌈', done: false }{ value: undefined, done: true }
1
2
3
4

OK，看看简化的生成器

function* die(arr) {    for (let i = 0; i < arr.length; i++) {        yield arr[i];    }}let test = die(['🌈','☃️']);console.log(test.next());console.log(test.next());console.log(test.next());
1
2
3
4
5
6
7
8
9

{ value: '🌈', done: false }{ value: '☃️', done: false }{ value: undefined, done: true }
1
2
3

ES6 类

使用es6可以快速方便的构建类，好耶

class stu {    constructor(name) {        this.name = name;    }    say() {        return this.name + '说奥里给';    }}let xiaoming = new stu("小明");console.log(xiaoming.say());
1
2
3
4
5
6
7
8
9
10

小明说奥里给
1

ES6 get set

定义get/set方法，用于获取或者修改类的属性

class stu {    constructor(name) {        this.name = name;    }    get() {        return this.name;    }    set(newStr) {        this.name = newStr;    }}let xiaoming = new stu("小明");console.log(xiaoming.get());xiaoming.set("大明")console.log(xiaoming.get());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

小明大明
1
2

ES6 static

使用static关键字修饰的方法，不用实例化对象也可以直接使用

class stu {    static say(str) {        console.log(str);    }}stu.say("奥里给 静态方法");
1
2
3
4
5
6

奥里给 静态方法
1

ES6 extends

使用继承，可以减少代码冗余，比如：

class Person {    constructor(name, bir) {        this.name = name;        this.bir = bir;    }    showInfo() {        return '姓名：' + this.name + '生日：' + this.bir;    }}class A extends Person {    constructor(name, bir) {        super(name, bir);    }}let zhouql = new A("周棋洛", "2002-06-01");// 周棋洛本身是没有showInfo方法的，是继承自Person的console.log(zhouql.showInfo());
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

姓名：周棋洛生日：2002-06-01
1

ES6 Set

Set 集合，与数组不同，Set 集合中不允许有重复元素

// 创建Set集合let food = new Set('🍎🥪');// 重复添加，只有一个能进去food.add('🍉');food.add('🍉');console.log(food);// 当前集合大小console.log(food.size);// 判断集合中是否存在某一元素console.log(food.has('🍉'));// 删除集合中某一元素food.delete('🥪');console.log(food);// 循环遍历集合food.forEach(f => {    console.log(f);});// 清空集合food.clear();console.log(food);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

Set(3) { '🍎', '🥪', '🍉' }3trueSet(2) { '🍎', '🍉' }🍎🍉Set(0) {}
1
2
3
4
5
6
7

ES6 Map

Map结合存储键值对

let food = new Map();let a = {}, b = function () { }, c = "name";food.set(a, '🍉');food.set(b, '🥪');food.set(b, '🥪');food.set(c, '米饭');console.log(food);console.log(food.size);console.log(food.get(a));food.delete(c);console.log(food);console.log(food.has(a));food.forEach((v, k) => {    console.log(`${k} + ${v}`);});food.clear();console.log(food);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Map(3) { {} => '🍉', [Function: b] => '🥪', 'name' => '米饭' }3🍉Map(2) { {} => '🍉', [Function: b] => '🥪' }true[object Object] + 🍉function () { } + 🥪Map(0) {}
1
2
3
4
5
6
7
8

ES6 模块化

使用模块化开发，es6可以方便的导入和导出一些内容，还有默认导出等等细节

let a = '🍉';let f1 = function (str = '你丫的写参数') {    console.log(str);}export { a, f1 };
1
2
3
4
5

import {a, f1} from './27模块测试.js';console.log(a);f1();f1('知道了');
1
2
3
4

---

恭喜你，读完了本篇文章，能力 + 100 ，颜值 + 10，欢迎下次再来。👋 先别走，如果觉得文章写的不错，还请点赞，收藏，关注帅气的博主啊，手动狗头，我会继续努力，原创不易，你的支持就是小周的动力 ☃️