ES6学习

目录

1.概念

2.ECMAScript和JavaScript关系

3.定义变量

4.定义常量

5.解构赋值

6.模板字符串

7.声明对象简写

8.对象拓展运算符

9.箭头函数

10.ES6模块化规范

10.1 Babel转码

10.2 导出模块

10.3 导入模块

---

1.概念

        ECMAScript6（简称ES6）是JavaScript语言的下一代标准，于2015年6月发布。

2.ECMAScript和JavaScript关系

        ECMAScript是JavaScript的规范。

3.定义变量

• var声明的变量没有局部作用域，let声明的变量有局部作用域。

<script>
    {
        var x = 1
        let y = 2
    }
    console.log(x)
    console.log(y)
</script>

        运行结果：

1 index.html:14:13

Uncaught ReferenceError: y is not defined

• var可以声明多次，let只能声明一次

<script>
    var m = 1;
    var m = 2;
    let n = 3;
    let n = 4;
    console.log(m)
    console.log(n)
</script>

        运行结果如下：

Uncaught SyntaxError: redeclaration of let n

4.定义常量

• 定义常量使用const
• 常量必须初始化赋值
• 常量赋值后，其值不可再被改变

const x = 1

5.解构赋值

• 数组解构

//传统
let a = 1, b = 2, c = 3
console.log(a, b, c)

//ES6
let [x, y, z] = [1, 2, 3]
console.log(x, y, z)

• 对象解构

let user = {name: 'luck', age: 18}
//传统
let name = user.name
let age = user.age
console.log(name, age)

//ES6
//注意：{}中的变量必须是user中的属性
let {name, age} = user
console.log(name, age)

6.模板字符串

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

let name = "luck"
let age = 20
let info = `my name is ${name}, age is ${age+1}`
console.log(info)

        运行结果如下：

    my name is luck, age is 21 

7.声明对象简写

const name = "luck"
const age = 20

//传统
var user1 = {name: name, age: age}
console.log(user1);

//ES6
let user2 = {name, age}
console.log(user2);

        运行结果如下：

Object { name: "luck", age: 20 }

Object { name: "luck", age: 20 }

8.对象拓展运算符

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

//拷贝对象
let person = {name: "luck", age: 20}
let obj1 = {...person}
console.log(obj1);

//合并对象
let name = {name: "luck"}
let age = {age: 20}
let obj2 = {...name, ...age}
console.log(obj2)

        运行结果如下所示：

Object { name: "luck", age: 20 }

Object { name: "luck", age: 20 }

9.箭头函数

• 箭头函数提供更加简洁的书写方式，多用于匿名函数的定义。其语法为：参数=>函数体
• 当箭头函数没有参数或者有多个参数时，需要用括号()括起来
• 当箭头函数体有多行语句，用{}包裹起来
• 当函数体只有一行语句，且需要返回结果时，可以省略{}，结果会自动返回

//传统
function f1(a) { 
    return a;
}
console.log(f1(1));

//ES6
//一个参数，可以简写为：var f2 = a => a
var f2 = a => {
    return a
}
console.log(f2(2))
//多个参数，可以简写为：var f3 = (m,n) => m+n
var f3 = (m, n) => {
    return m+n
}
console.log(f3(3, 3))

        运行结果为：

1

2

6

10.ES6模块化规范

10.1 Babel转码

        babel提供了Babel-cli工具，用于将ES6转换为ES5。

• 安装命令

npm install -g babel-cli

• 查看babel版本：

babel --version

• 编写配置文件（.babelrc）

{
    "presets": ["es2015"],
    "plugins": []
}

•  安装转码器

npm install -D babel-preset-es2015

10.2 导出模块

export default {
    //todo
}

10.3 导入模块

import xx from 'xx'