es6教程视频（20分钟上手ES6，不会ES6好意思说自己会JS ？）

时间2025-06-14 21:03:31分类IT科技浏览4184

导读：✍🏼作者：周棋洛，大二计算机学生...

✍🏼作者：周棋洛，大二计算机学生

♉星座：金牛座

🏠主页：点击查看更多

🌐关键：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); 🍉 Uncaught ReferenceError: b is not defined

可以看到，我们使用 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); 🍉 🍔 🍕 🍉 🍔 🍕

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); 🍉 🍕 🍔

ES6 模板字符串

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

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

let a = 🍉, b = 🖼️; let c = 今天吃 + a + 吃完看 + b; console.log(c); let d = `今天吃 ${a} 吃完看 ${b}`; console.log(d); 今天吃🍉吃完看🖼️ 今天吃 🍉 吃完看 🖼️

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

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

let str = 你好，我是小周 ❤️; console.log(str.startsWith(你好)); console.log(str.endsWith(❤️)); console.log(str.endsWith(你好)); console.log(str.includes(" ")); true true false true

ES6 默认参数

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

function say(str) { console.log(str); } function say1(str = 嘿嘿) { console.log(str); } say(); say1(); say1(❤️); undefined 嘿嘿 ❤️

ES6 展开操作符

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

let arr = [❤️, 😊, 😍]; console.log(arr); console.log(...arr); let brr = [王子, ...arr]; console.log(brr); console.log(...brr); [ ❤️, 😊, 😍 ] ❤️ 😊 😍 [ 王子, ❤️, 😊, 😍 ] 王子 ❤️ 😊 😍

ES6 剩余操作符

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

function f1(a, b, ...c) { console.log(a, b, c); console.log(a, b, ...c); } f1(🍎,🌈,☃️,㊙️); 🍎 🌈 [ ☃️, ㊙️ ] 🍎 🌈 ☃️ ㊙️

ES6 函数名字

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

function f1() { } console.log(f1.name); let f2 = function () { }; console.log(f2.name); let f3 = function f4() { }; console.log(f3.name); f1 f2 f4

ES6 箭头函数

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

let f1 = a => a; let f2 = (a, b) => { return a + b; } console.log(f1(10)); console.log(f2(10, 10)); 10 20

ES6 对象表达式

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

ES6 恒量

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

const app = [☃️, 🌈]; console.log(...app); app.push(🤣); console.log(...app); app = 10;

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

☃️ 🌈 ☃️ 🌈 🤣 app = 10; ^ TypeError: Assignment to constant variable.

ES6 对象属性名

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

let obj = {}; let a = little name; obj.name = 王子; // 使用点定义属性中间有空格是不合法的 // obj.little name = 小王子; obj[a] = 小王子; console.log(obj); { name: 王子, little name: 小王子 }

ES6 判断两个值是否相等

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

console.log(NaN == NaN); console.log(+0 == -0); console.log(Object.is(NaN, NaN)); console.log(Object.is(+0, -0)); false true true false

ES6 复制对象

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

let obj = {}; Object.assign( // 源 obj, // 复制目标对象 { a: ☃️ } ); console.log(obj); { a: ☃️ }

ES6 设置对象的 prototype

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

ES6 proto

ES6 super

let obj1 = { get() { return 1; } } let test = { __proto__: obj1, get() { return super.get() + ☃️; } } console.log(test.get()); 1 ☃️

ES6 生成迭代器

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

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()); { value: 🌈, done: false } { value: ☃️, done: false } { value: undefined, done: true }

ES6 类

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

class stu { constructor(name) { this.name = name; } say() { return this.name + 说奥里给; } } let xiaoming = new stu("小明"); console.log(xiaoming.say()); 小明说奥里给

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()); 小明大明

ES6 static

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

class stu { static say(str) { console.log(str); } } stu.say("奥里给静态方法"); 奥里给静态方法

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()); 姓名：周棋洛生日：2002-06-01

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); Set(3) { 🍎, 🥪, 🍉 } 3 true Set(2) { 🍎, 🍉 } 🍎 🍉 Set(0) {}

ES6 Map

Map结合存储键值对

ES6 模块化

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

let a = 🍉; let f1 = function (str = 你丫的写参数) { console.log(str); } export { a, f1 }; import {a, f1} from ./27模块测试.js; console.log(a); f1(); f1(知道了);

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

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。