六、ES6规范

系统管理员 2022-04-02 20:10 281阅读 0赞

#                           ES6规范 #

编程语言JavaScript是ECMAScript的实现和扩展 。ECMAScript是由ECMA（一个类似W3C的标准组织）参与进行标准化的语法规范。ECMAScript定义了：

语言语法 – 语法解析规则、关键字、语句、声明、运算符等。
    类型 – 布尔型、数字、字符串、对象等。
    原型和继承
    内建对象和函数的标准库 – JSON、Math、数组方法、对象自省方法等

ECMAScript标准不定义HTML或CSS的相关功能，也不定义类似DOM（文档对象模型）的Web API，这些都在独立的标准中进行定义。ECMAScript涵盖了各种环境中JS的使用场景，无论是浏览器环境还是类似node.js的非浏览器环境。

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

### 1、Node.js中使用ES6 ###

ES6+ 太棒了,但是很多高级功能node是不支持的,就需要使用babel转换成ES5

（1）babel转换配置,项目根目录添加.babelrc 文件

{ 
      "presets" : ['es2015']
    }

（2）安装es6转换模块

cnpm install babel-preset-es2015 --save-dev

（3）全局安装命令行工具

cnpm install  babel-cli -g

（4）使用

babel-node js文件名

### 2、变量声明let ###

我们都是知道在ES6以前，**var关键字（全局关键字，无论何处，变量都是全局的）声明变量**。无论声明在何处，都会被视为声明在函数的最顶部，这就是**函数变量提升**。例如

function aa() { 
        if(bool) { 
            var test = 'hello man'
        } else { 
            console.log(test)
        }
      }

以上的代码实际上是:

function aa() { 
        var test // 变量提升
        if(bool) { 
            test = 'hello man'
        } else { 
            //此处访问test 值为undefined
            console.log(test)
        }
        //此处访问test 值为undefined
      }

所以不用关心bool是否为true or false。实际上，无论如何test都会被创建声明。

接下来ES6主角登场：

我们通常用let和const来声明，let表示变量、const表示常量。let和const都是块级作用域。怎么理解这个块级作用域？在一个函数内部 ，在一个代码块内部。看以下代码

function aa() { 
        if(bool) { 
           let test = 'hello man'
        } else { 
            //test 在此处访问不到
            console.log(test)
        }
      }

### 3、常量声明 ###

const 用于声明常量，看以下代码

const name = 'lux'
    name = 'joe' //再次赋值此时会报错

### 4、模板字符串 ###

es6模板字符简直是开发者的福音啊，解决了ES5在字符串功能上的痛点。

第一个用途，**基本的字符串格式化（只能使用\`\`字符）**。将表达式嵌入字符串中进行拼接。用$\{\}来界定。

//es5 
        var name = 'lux'
        console.log('hello' + name)
        //es6
        const name = 'lux'
        console.log(`hello ${ name}`) //hello lux

第二个用途，在ES5时我们通过反斜杠()来做多行字符串或者字符串一行行拼接。ES6反引号(\`\`)直接搞定。

// es5
        var msg = "Hi \ man!"
        // es6
        const template = `<div> <span>hello world</span> </div>`

### 5、函数默认参数 ###

ES6为参数提供了默认值。在定义函数时便初始化了这个参数，以便在参数没有被传递进去时使用。

看例子代码

function action(num = 200) { 
            console.log(num)
        }
        action() //200
        action(300) //300

### 6、箭头函数 ###

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。

箭头函数最直观的三个特点。

1不需要function关键字来创建函数

2省略return关键字

3继承当前上下文的 this 关键字

看下面代码（ES6）

(response,message) => { 
        .......
     }

相当于ES5代码

function(response,message){ 
        ......
    }

function add(a,b){ 
        console.log(a+b);
    }
    add(2,3);
    
    //箭头函数
    add2=(a,b)=>{ 
        console.log(a+b);
    }
    
    add2(2,3);
    
    //省略函数名，省略return关键字
    add3=(a,b)=>a+b;
    console.log(add3(2,3));

### 7、对象初始化简写（变量转对象） ###

ES5我们对于对象都是以键值对的形式书写，是有可能出现键值对重名的。例如

function people(name, age) { 
            return { 
                name: name,
                age: age
            };
        }

以上代码可以简写为

function people(name, age) { 
            return { 
                name,
                age
            };
        }

### 8、解构(对象、数组中属性转变量) ###

数组和对象是JS中最常用也是最重要表示形式。为了简化提取信息，ES6新增了解构，这是将一个数据结构分解为更小的部分的过程

ES5我们提取对象中的信息形式如下

const people = { 
            name: 'lux',
            age: 20
        }
        const name = people.name
        const age = people.age
        console.log(name + ' --- ' + age)

是不是觉得很熟悉，没错，在ES6之前我们就是这样获取对象信息的，一个一个获取。现在，ES6的解构能让我们从对象或者数组里取出数据存为变量，例如

//对象
        const people = { 
            name: 'lux',
            age: 20
        }
        const {  name, age } = people
        console.log(`${ name} --- ${ age}`)
        //数组
        const color = ['red', 'blue']
        const [first, second] = color
        console.log(first) //'red'
        console.log(second) //'blue'

### 9、Spread Operator（数据追加的过程） ###

ES6中另外一个好玩的特性就是**Spread Operator 也是三个点儿**…接下来就展示一下它的用途。 **组装对象或者数组**（表示对象、数组的扩展，值的融合）

//数组
        const color = ['red', 'yellow']
        const colorful = [...color, 'green', 'pink']
        console.log(colorful) //[red, yellow, green, pink]
        
        //对象
        const alp = {  fist: 'a', second: 'b'}
        const alphabets = {  ...alp, third: 'c' }
        console.log(alphabets) //{ "fist": "a", "second": "b", "third": "c"

### 6.3.9 import 和 export ###

import导入模块、export导出模块

lib.js

let fn0=function(){ 
        console.log('fn0...');
    }
    export { fn0}

demo9.js

import { fn0} from './lib'
    fn0();

注意：node(v8.x)本身并不支持import关键字，所以我们需要使用babel的命令行工具来执行（配置详见6.2小节内容）

babel-node demo9

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ld2JpZV85MDc0ODY4NTI_size_16_color_FFFFFF_t_70_pic_center][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L25ld2JpZV85MDc0ODY4NTI_size_16_color_FFFFFF_t_70_pic_center]: /images/20220403/fc0435913cca468890f1956d835e8999.png