20分钟快速学习了解下ES6

了解 ES6

根据维基百科解释“ECMAScript 规范是由 Netscape 的 Brendan Eich 开发的脚本语言的标准化规范；最初命名为 Mocha，然后是 LiveScript，最后是 JavaScript。”

ECMAScript 2015 (ES2015) 是第 6 版，最初称为 ECMAScript 6 (ES6)，它添加了许多新功能，这些新功能后来成为 Web 开发人员工具包的重要组成部分。本文旨在帮助您以轻松易懂的方式了解这些新的 ES6 特性。

ES6 块作用域 let

首先，什么是范围？范围是指来自我们程序不同部分的变量的可访问性。在使用 let 声明变量之前，JavaScript 变量具有全局范围和函数范围（使用 var 声明时）。当使用 let 声明变量时，ES6 为 JavaScript 带来了块级范围。

{    var a = "🍉";    let b = "⛳";}console.log(a);console.log(b);🍉Uncaught ReferenceError: b is not defined

可以看出，我们使用var关键字在block中定义了变量“a”，可以全局访问。所以var声明的变量是全局的，但是，我们希望变量在block中生效，退出block时不可访问。然后，可以使用 ES6 新的块级作用域关键字 let 来声明变量，就像这里的变量 b 一样，会报错说 b 没有定义。

ES6 解构数组

首先，我们定义一个返回数组的函数。然后我们调用该函数并将结果存储在变量 temp 中。要访问每个值，我们必须打印 temp[0]、temp[1]、temp[2]。使用解构，我们可以直接调用早餐函数并在此处分离出变量 a、b 和 c 中的每个单独的值（第一个变量将被分配第一个值，第二个变量将被分配第二个值，依此类推）。最后，我们打印三个变量，看看有没有问题。

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函数返回一个对象。使用解构，我们可以直接检索对象的值并将它们存储在变量 a、b 和 c 中。键值对中的key代表映射的实际对象的键名，value为自定义变量。解构完成后会自动完成赋值，然后调用早餐函数返回对象。然后，打印变量a、b、c，可以看到没有问题。

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

ES6 模板字符串

在使用模板字符串之前，我们使用 + 运算符连接字符串。

取而代之的是，我们现在可以使用 ES6 提供的模板字符串，首先使用 `` 来包裹字符串，当要使用变量时，使用 ${variable}。

let a = '🍉',    b = '🖼️';let c = 'eat watermelon' + a + 'watch TV' + b;console.log(c);let d = `eat watermelon ${a} watch TV ${b}`;console.log(d);eat watermelon🍉watch TV🖼️eat watermelon 🍉 watch TV 🖼️

ES6 检查字符串是否包含其他字符串

使用这些函数，可以轻松检查字符串是否以某物开头，是否以某物结尾，以及是否包含任何字符串等。

let str = 'hello, my name is Tom ❤️';console.log(str.startsWith('hello'));console.log(str.endsWith('❤️'));console.log(str.endsWith('hello'));console.log(str.includes(" "));truetruefalsetrue

ES6 默认参数

在 ES6 中，可以使用默认参数。调用函数时，当参数没有赋值时，会使用设置的默认参数执行。分配参数时，它将使用新分配的值执行，覆盖默认值。使用以下内容：

function say(str) {    console.log(str);}function say1(str = 'hey-hey') {    console.log(str);}say();say1();say1('❤️');undefinedhey-hey❤️

ES6 扩展运算符

使用 ... 扩展元素以便于操作。按如下方式使用：

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

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);f1f2f4

ES6 箭头函数

使用箭头函数可以让代码更简洁，但也要注意箭头函数的局限性，而且箭头函数本身并没有this，this指向父级。

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

ES6 对象表达式

使用 ES6 对象表达式，如果对象属性与值相同，则可以省略值，不写函数也可以写函数。用法如下：

let a = '🌈';let b = '☃️';const obj = {    a: a,    b: b,    say: function () {}}const es6obj = {    a,    b,    say() {}}console.log(obj);console.log(es6obj);{ a: '🌈', b: '☃️', say: [Function: say] }{ a: '🌈', b: '☃️', say: [Function: say] }

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 = 'prince';// It is illegal to use dots to define properties with spaces between them// obj.little name = 'little Prince';obj[a] = 'little Prince';console.log(obj);{ name: 'prince', 'little name': 'little Prince' }

ES6 检查两个值是否相等

使用 === 或 == 比较某些特殊值的结果可能无法满足您的需求。可以用Object.is（第一个值，第二个值）来判断，说不定你会开心 Laughed

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

ES6 复制对象

使用 Object.assign() 将一个对象复制到另一个对象，如下所示：

let obj = {};Object.assign(    // source    obj,    // Copy target object    { a: '☃️' });console.log(obj);{ a: '☃️' }

ES6 设置对象的原型

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

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);1true2true

ES6 原型

使用方法如下。

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);1true2true

ES6 超级

let obj1 = {    get() {        return 1;    }}let test = {    __proto__: obj1,    get() {        return super.get() + ' ☃️';    }}console.log(test.get());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());{ value: '☃️', done: false }{ value: '🤣', done: false }{ value: '🌈', done: false }{ value: undefined, done: true }

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 + 'say hello';    }}let xiaoming = new stu("Tom");console.log(xiaoming.say());Tom say hello

ES6 设置

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

class stu {    constructor(name) {        this.name = name;    }    get() {        return this.name;    }    set(newStr) {        this.name = newStr;    }}let xiaoming = new stu("Tom");console.log(xiaoming.get());xiaoming.set("John")console.log(xiaoming.get());TomJohn

ES6 静态

使用 static 关键字修改的方法可以直接使用，无需实例化对象

class stu {    static say(str) {        console.log(str);    }}stu.say("This is a static method");This is a static method

ES6 扩展

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

class Person {    constructor(name, bir) {        this.name = name;        this.bir = bir;    }    showInfo() {        return 'name：' + this.name + 'Birthday：' + this.bir;    }}class A extends Person {    constructor(name, bir) {        super(name, bir);    }}let zhouql = new A("Tom", "2002-08-24");// Tom itself does not have a showInfo method, it is inherited from Personconsole.log(zhouql.showInfo());Name: Tom Birthday: 2002-08-24

ES6 套装

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

// Create Set collectionlet food = new Set('🍎🥪');// Repeatedly add, only one can enterfood.add('🍉');food.add('🍉');console.log(food);// current collection sizeconsole.log(food.size);// Check if an element exists in a collectionconsole.log(food.has('🍉'));// remove an element from a collectionfood.delete('🥪');console.log(food);// loop through the collectionfood.forEach(f => {    console.log(f);});// empty collectionfood.clear();console.log(food);Set(3) { '🍎', '🥪', '🍉' }3trueSet(2) { '🍎', '🍉' }🍎🍉Set(0) {}

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, 'rice');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);Map(3) { {} => '🍉', [Function: b] => '🥪', 'name' => 'rice' }3🍉Map(2) { {} => '🍉', [Function: b] => '🥪' }true[object Object] + 🍉function () { } + 🥪Map(0) {}

ES6 模块化

使用模块化开发，ES6可以很方便的导入导出一些内容，以及默认导出等细节：

let a = '🍉';let f1 = function (str = 'you write parameters') {    console.log(str);}export { a, f1 };import {a, f1} from './27 module test.js';console.log(a);f1();f1('understood');

总结

以上就是我今天跟你分享的关于ES6的一些内容，希望你能从中学到新的内容，如果你觉得有用的话，请记得点赞我，关注我，并将它分享给你身边做开发的朋友，也许能够帮助到他。