初识 ECMAScript 6

迷南。 2021-07-24 23:03 345阅读 0赞

# 一 ECMAScript 6 #

## 1 什么是 ECMAScript 6 ##

ECMAScript 6.0（简称 ES6）是 JavaScript 语言的下一代标准， 2015 年 6 月正式发布。它的目标，是使得 JavaScript 语言可以用来编写复杂的大型应用程序，成为企业级开发语言。

## 2 ECMAScript 和 JavaScript 的关系 ##

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，需要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，希望这种语言能够成为国际标准。次年，ECMA 发布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的标准，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

因此，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 Jscript 和 ActionScript）。

# 二 基本语法 #

ES6相对之前的版本语法更严格，新增了面向对象的很多特性以及一些高级特性。

## 1 let声明变量 ##

创建 01-let-01.js

// var 声明的变量没有局部作用域
    // let 声明的变量  有局部作用域
    {
        var a = 0
        let b = 1
    }
    
    console.log(a)
    console.log(b)

结果

0
    F:\vue\front\es6_pro\01-let-01.js:7
    console.log(b)
                ^
    
    ReferenceError: b is not defined
    ReferenceError: b is not defined
        at Object.<anonymous> (F:\vue\front\es6_pro\01-let-01.js:7:13)
        at Module._compile (internal/modules/cjs/loader.js:956:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
        at internal/main/run_main_module.js:17:11

创建 01-let-02.js

// var 可以声明多次
    // let 只能声明一次
    var m = 1
    var m = 'hello'
    console.log(m)
    let n = 3
    let n = 4

运行结果

F:\vue\front\es6_pro\01-let-02.js:7
    let n = 4
        ^
    
    SyntaxError: Identifier 'n' has already been declared
        at Module._compile (internal/modules/cjs/loader.js:892:18)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
        at internal/main/run_main_module.js:17:11

创建 01-let-03.js

// var 会变量提升
    // let 不存在变量提升
    console.log(x)  // undefined
    var x = 'apple'
    
    console.log(y)  // ReferenceError: y is not defined
    let y = 'banana'
    
    console.log(a)
    let a = 100
    
    // a is not defined：未定义
    // 只声明未赋值：undefined
    // 五大基本数据类型：number、string、boolean、null、undefined

运行结果

F:\vue\front\es6_pro>node 01-let-03.js
    undefined
    F:\vue\front\es6_pro\01-let-03.js:6
    console.log(y)  // ReferenceError: y is not defined
                ^
    
    ReferenceError: Cannot access 'y' before initialization
        at Object.<anonymous> (F:\vue\front\es6_pro\01-let-03.js:6:13)
        at Module._compile (internal/modules/cjs/loader.js:956:30)
        at Object.Module._extensions..js (internal/modules/cjs/loader.js:973:10)
        at Module.load (internal/modules/cjs/loader.js:812:32)
        at Function.Module._load (internal/modules/cjs/loader.js:724:14)
        at Function.Module.runMain (internal/modules/cjs/loader.js:1025:10)
        at internal/main/run_main_module.js:17:11

## 2 const声明常量（只读变量） ##

创建 02-const.js

// 1、声明之后不允许改变   
    const PI = '3.14'
    PI = '3.19'     // TypeError: Assignment to constant variable.
    console.log(PI)
    
    // 2、一但声明必须初始化，否则会报错
    const MY_AGE  // SyntaxError: Missing initializer in const declaration

## 3 解构赋值 ##

创建 03-解构赋值-数组解构.js

解构赋值是对赋值运算符的扩展。

他是一种针对数组或者对象进行模式匹配，然后对其中的变量进行赋值。

在代码书写上简洁且易读，语义更加清晰明了；也方便了复杂对象中数据字段获取。

//1、数组解构
    let arr = [1, 2, 3]
    // 传统
    let a = arr[0]
    let b = arr[1]
    let c = arr[2]
    console.log(a, b, c)
    // ES6
    let [x, y, z] = arr
    console.log(x, y, z)

运行结果

F:\vue\front\es6_pro>node F:\vue\front\es6_pro\03-解构赋值-数组解构.js
    1 2 3
    1 2 3

创建 03-解构赋值-对象解构.js

// 2、对象解构
    let user = {
        name: 'cakin',
        age: 18
    }
    // 传统
    let name1 = user.name
    let age1 = user.age
    console.log(name1, age1)
    // ES6
    let { name, age } = user //注意：解构的变量必须和user中的属性同名
    console.log(name, age)

运行结果

F:\vue\front\es6_pro>node F:\vue\front\es6_pro\03-解构赋值-对象解构.js
    cakin 18
    cakin 18

## 4 模板字符串 ##

创建 04-模板字符串.js

模板字符串相当于加强版的字符串，用反引号 \`，除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

let name = '希腊之光'
    let age = 99
    let info = '我的名字是：' + name + '，我的年龄是 ' + age + '。'
    console.log(info)
    // 字符串插入变量和表达式。变量名写在 ${} 中，${} 中可以放入 JavaScript 表达式。
    let info1 = `我的名字是：${name}，我的年龄是 ${age}。`
    console.log(info1)
    
    let fun = 'function(){'
        + 'console.log(\'hello\')'
        + '}'
    console.log(fun)
    
    //原样输出
    let fun1 = `function(){
        console.log('hello')
    }`
    console.log(fun1)

运行结果

F:\vue\front\es6_pro>node 04-模板字符串.js
    我的名字是：希腊之光，我的年龄是 99。
    我的名字是：希腊之光，我的年龄是 99。
    function(){console.log('hello')}
    function(){
        console.log('hello')
    }

## 5 声明对象简写 ##

创建 05-声明对象简写.js

let name = '芳芳'
    let age = 18
    // 传统
    let person1 = {
        age: age,
        name: name
    }
    console.log(person1)
    // ES6
    let person2 = {
        age,
        name
    }
    console.log(person2)

运行结果

F:\vue\front\es6_pro>node F:\vue\front\es6_pro\05-声明对象简写.js
    { age: 18, name: '芳芳' }
    { age: 18, name: '芳芳' }

## 6 定义方法简写 ##

创建 06-定义方法简写.js

// 传统
    let person1 = {
        sayHi: function () {
            console.log('Hi')
        }
    }
    person1.sayHi(); // 'Hi'
    // ES6
    let person2 = {
        name: '宏达',
        sayHi() {
            console.log('hi')
        }
    }
    person2.sayHi()

运行结果

F:\vue\front\es6_pro>node 06-定义方法简写.js
    Hi
    hi

## 7 对象拓展运算符 ##

创建 07-对象拓展运算符.js

拓展运算符（...）用于取出参数对象所有可遍历属性然后拷贝到当前对象。

let person = {
        name: '妞妞',
        age: 50
    }
    console.log(person)
    // 对拷拷贝
    let someone = { ...person }
    someone.name = '沙沙'
    console.log(someone)
    console.log(person)
    // 引用赋值
    let someone1 = person
    someone1.name = '沙沙'
    console.log(someone1)
    console.log(person)

运行结果

F:\vue\front\es6_pro>node 07-对象拓展运算符.js
    { name: '妞妞', age: 50 }
    { name: '沙沙', age: 50 }
    { name: '妞妞', age: 50 }
    { name: '沙沙', age: 50 }
    { name: '沙沙', age: 50 }

## 8 函数的默认参数 ##

函数在JavaScript中也是一种数据类型，JavaScript中没有方法的重载

创建 08-函数的默认参数.js

function showInfo(name, age = 25) {
        if (age) {
            console.log('showInfo true' + name + ', ' + age)
        } else {
            console.log('showInfo false' + name)
        }
    }
    showInfo('国哥', 18)
    // 只有在未传递参数，或者参数为 undefined 时，才会使用默认参数
    showInfo('国哥')
    showInfo('国哥', undefined)
    // null 值被认为是有效的值传递。
    showInfo('国哥', null)

运行结果

F:\vue\front\es6_pro>node 08-函数的默认参数.js
    showInfo true国哥, 18
    showInfo true国哥, 25
    showInfo true国哥, 25
    showInfo false国哥

## 9 箭头函数 ##

创建 09-箭头函数.js

箭头函数提供了一种更加简洁的函数书写方式。基本语法是：

参数 => 函数体

箭头函数多用于匿名函数的定义

使用箭头函数

let arr = ["10", "5", "40", "25", "1000"]
    arr.sort()
    console.log(arr)
    //上面的代码没有按照数值的大小对数字进行排序，
    //要实现这一点，就必须使用一个排序函数
    //若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
    //若 a 等于 b，则返回 0。
    //若 a 大于 b，则返回一个大于 0 的值。
    arr.sort(function (a, b) {
        return a - b
    })
    console.log(arr)
    // 使用箭头函数
    arr = arr.sort((a, b) => {
        return a - b
    })
    console.log(arr)
    // 当只有一行语句，并且需要返回结果时，可以省略 {}和return , 结果会自动返回。
    // 当只有一个参数时，可以不使用圆括号
    arr.sort((a, b) => a - b)
    console.log(arr)

运行结果

F:\vue\front\es6_pro>node 09-箭头函数.js
    [ '10', '1000', '25', '40', '5' ]
    [ '5', '10', '25', '40', '1000' ]
    [ '5', '10', '25', '40', '1000' ]
    [ '5', '10', '25', '40', '1000' ]