Evan's blog
xugaoyi
1984-01-24
目录

2 语法-1 ES6

# ES6

# 什么是 ES6

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

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

2009年发布改进版ES5，引入了Object.create() (opens new window)、Object.defineProperty() (opens new window)、getters (opens new window)和setters (opens new window)、严格模式 (opens new window)以及JSON (opens new window)对象。

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

# Node.js中使用ES6

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

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

{
  "presets" : ['es2015']
}
1
2
3

（2）安装es6转换模块。但是好像过时了deprecate

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

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

cnpm install  babel-cli -g
1

（4）使用

babel-node js文件名
1

# 变量声明 let

let 关键字可以将变量绑定到所在的任意作用域中，通常是{ }内部。换句话说，let 将其声明的变量隐式地附加在一个已经存在的块作用域。

var foo = true;

if (foo) {
  let bar = foo * 2;
  bar = something( bar ); 
  console.log( bar );
}
console.log( bar ); // ReferenceError
1
2
3
4
5
6
7
8

我们都是知道在ES6以前，var关键字声明变量。无论声明在何处，都会被视为声明在函数的最顶部(不在函数内即在全局作用域的最顶部)。这就是函数变量提升例如

  function aa() {
    if(bool) {
        var test = 'hello man'
    } else {
        console.log(test)
    }
  }
1
2
3
4
5
6
7

以上的代码实际上是:

function aa() {
    var test // 变量提升
    if(bool) {
        test = 'hello man'
    } else {
        //此处访问test 值为undefined
        console.log(test)
    }
    //此处访问test 值为undefined
  }
1
2
3
4
5
6
7
8
9
10

所以不用关心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)
    }
  }
1
2
3
4
5
6
7
8

# 常量声明const

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

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

# 模板字符串

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

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

    //es5 
    var name = 'lux'
    console.log('hello' + name)
    //es6
    const name = 'lux'
    console.log(`hello ${name}`) //hello lux
1
2
3
4
5
6

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

    // es5
    var msg = "Hi \
    man!"
    // es6
    const template = `<div>
        <span>hello world</span>
    </div>`
1
2
3
4
5
6
7

# 函数默认参数

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

看例子代码

    function action(num = 200) {
        console.log(num)
    }
    action() //200
    action(300) //300
1
2
3
4
5

# 箭头函数

ES6很有意思的一部分就是函数的快捷写法。也就是箭头函数。箭头函数最直观的三个特点。

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

2省略return关键字。当大括号中只有一句代码，可以省略大括号和return

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

看下面代码（ES6）

 (response,message) => {
    .......
 }
1
2
3

相当于ES5代码

function(response,message){
    ......
}
1
2
3

# 对象初始化简写

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

function people(name, age) {
    return {
        name: name,
        age: age
    };
}
1
2
3
4
5
6

以上代码可以简写为

function people(name, age) {
    return {
        name,
        age
    };
}
1
2
3
4
5
6

# 解构

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

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

const people = {
    name: 'lux',
    age: 20
}
const name = people.name
const age = people.age
console.log(name + ' --- ' + age)
1
2
3
4
5
6
7

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

//对象
const people = {
    name: 'lux',
    age: 20
}
const { name, age } = people
console.log(`${name} --- ${age}`)
//数组
const color = ['red', 'blue']
const [first, second] = color;//就得用first/second...
console.log(first) //'red'
console.log(second) //'blue'
1
2
3
4
5
6
7
8
9
10
11
12

# 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"
1
2
3
4
5
6
7
8
9

# import 和 export

ES5中导出/导入

exports.add = () =>{
 console.log('hello...add');
}
1
2
3
let {add} = require('./test1');
let test1 = require('./test1');
add();
test1.add();
1
2
3
4

import导入模块、export导出模块（在导出.vue中vue模块时，可以使用export default...）

test1.js

export let add = () =>{
    console.log('hello...add');
}
// export {add as ad};这样统一写也可以，可以起别名
1
2
3
4

test2.js

import {add} from './test1';
import * as test1 from './demo9.js';

add();
test1.add();
1
2
3
4
5

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

babel-node demo9
1

# Promise

Promise 是异步编程的一种解决方案（将异步请求用Promise包裹），比传统的解决方案–回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise。

Promise是ES6提供的用于异步处理的对象，因为axios提交是异步提交，这里使用promise作为返回值。Promise使用方法如下：

Promise对象在处理过程中有三种状态：

  • pending：进行中
  • resolved：操作成功
  • rejected: 操作失败

Promise的构建方法如下：

const promise = new Promise(function(resolve,reject){
    //...TODO...
    if(操作成功){
        resolve(value);
    }else{
        reject(error);
    }
})
1
2
3
4
5
6
7
8

上边的构造方法function(resolve,reject)执行流程如下： 1）方法执行一些业务逻辑。 2）如果操作成功将Promise的状态由pending变为resolved，并将操作结果传出去 3）如果操作失败会将promise的状态由pending变为rejected，并将失败结果传出去。

上边说的操作成功将操作结果传给谁了呢？操作失败将失败结果传给谁了呢？通过promise的then、catch来指定

promise.then(function (result) {
    console.log('操作成功：' + result);
});
promise.catch(function (reason) {
    console.log('操作失败：' + reason);
});
1
2
3
4
5
6

例如：

定义一个方法，返回promise对象

testpromise(i){
    return new Promise((resolve,reject)=>{
        if(i % 2==0){
            resolve('成功了')
        }else{
            reject('拒绝了')
        }
    })
}
1
2
3
4
5
6
7
8
9

调用此方法：向方法传入偶数、奇数进行测试

this.testpromise(3).then(res=>{//在then中对成功结果进行处理
    alert(res)
}).catch(res=>{//在catch中对操作失败结果进行处理
    alert(res)
})
1
2
3
4
5
编辑 (opens new window)
上次更新: 2022/03/23, 17:55:39
2 语法-1 基础语法
2 语法-2 Function

← 2 语法-2 Function→

最近更新
01
重点
04-12
02
搭建项目
04-04
03
TS补充
03-30
更多文章>
Theme by Vdoing | Copyright © 2019-2022 conanan | MIT License