ES6新特性

ES6新特性

ES6基础

ECMAScript是一套规范，JavaScript是这套标准的实现。

ES标准中不包含DOM和BOM的定义，只涵盖基本数据类型，关键字、语句、运算符、内建对象、内建函数等通用语法。本部分只学习前端开发中ES6的最少必要知识，方便后面项目开发中对代码的理解。

1.let声明变量与var声明变量

let定义变量有他的作用范围，在哪里定义就只能在哪里用。

//创建代码块，定义变量
{
    var a = 10
    let b = 20
}
//在代码块之外输出变量
console.log(a)
console.log(b)

打开浏览器，控制台输出

//var可以声明多次
var m = 1
var m = 2

//let只能声明一次
let a = 1
let a = 2

console.log(m)
console.log(a)

2.const声明变量（只读变量）

//声明之后不允许改变
const PI = 3.1415
PI = 3 //Uncaught TypeError: Assignment to constant variable.

//一旦声明必须初始化
const PI //Uncaught SyntaxError: Missing initializer in const declaration

3.解构赋值

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

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

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

1.数组结构

//数组解构
//传统写法
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)

2.对象解构,我们可以使用对象解构，获取一个指定对象中我们需要的值，但是结构中的值必须是对象中的值

//对象解构
//创建对象
let user = {
    name: 'Helen',
    age: 18,
    msg:'hello'
}

//传统解构
let name1 = user.name
let age1 = user.age
let msg1 = user.msg
console.log(name1,age1,msg1)

//es6解构
let {name,age} = user
console.log(name,age)

控制台输出

Helen 18 hello
Helen 18

4.模板字符串

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

定义多行字符串

//一般情况下定义多行字符串
let str = 'hello,' +
    'how are you!'
console.log(str)

//模板字符串定义多行字符串
let str2 = `hello,
        how are you`
console.log(str2)

控制台输出

hello,how are you!
hello,
how are you

2.字符串中添加表达式，表达式插在${}中

let user = {
    name: '张三',
    age: 20
}

//传统方式拼接表达式
let str1 = 'hello,我叫' + user.name + ',我明年' + user.age +1 + '岁'
console.log(str1)

//es6拼接表达式
let str2 = `hello,我叫${user.name},我明年${user.age + 1}岁`
console.log(str2)

控制台输出

hello,我叫张三,我明年201岁
hello,我叫张三,我明年21岁

在这里可以明显感受到模板字符串的优势

3.模板字符串调用函数

//注意函数需要有返回值
function fun(a,b){
    return a+b
}

let str = `调用表达式${fun(2,4)}`
console.log(str)

控制台输出

调用表达式6

5.对象声明简写

//先定义两个常量
const age = 18
const name = '张三'

//传统方式定义一对象
let user1 = {
    name: name,
    age: age
}
console.log('user1', user1)

//es6定义对象,当对象名和对象值一样的时候可以触发简写形式
let user2 = {
    name,
    age
}
console.log('user2', user2)

控制台输出

user1 {name: ‘张三’, age: 18}

user2 {name: ‘张三’, age: 18}

输出结果是一样的，但是对象的定义过程是不一样的

6.定义方法简写

去掉多余且重复的部分:function，如果有参数，直接写在小括号里面

//传统
const person1= {
    sayHi:function (){
        console.log('good morning!')
    }
}
//调用
person1.sayHi()

//es6
const person2={
    sayHi(){
        console.log('how are you?')
    }
}
//调用
person2.sayHi()

控制台输出

good morning!
how are you?

7.对象拓展运算符

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

7.1拷贝对象

//拷贝对象
let person ={
    name:'张三',
    age:18
}

let someone = {...person}
console.log(someone)

{name: ‘张三’, age: 18}

7.2合并对象

//合并对象
//对象1
let person ={
    name:'张三',
    age:18
}
//对象2
let info={
    msg:'hello',
    hobby:'篮球'
}
//合并对象
let someone = {...person,...info}
console.log(someone)

{name: ‘张三’, age: 18, msg: ‘hello’, hobby: ‘篮球’}

8.箭头函数

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

参数=>函数体，类似于Java的lambda表达式

//传统
let fun = function (a, b) {
    return a + b
}
console.log(fun(4, 5))

//es6箭头函数
let fun2 = (a, b) => a + b


console.log(fun2(7, 8))

注：当函数只有一个参数的时候=>前面的括号也可以省略

当函数体中只有一条return语句的时候，可以省略return关键字，直接写return的值

当函数体中有多条语句的时候=>左边需要用{}包围起来
于Java的lambda表达式

//传统
let fun = function (a, b) {
    return a + b
}
console.log(fun(4, 5))

//es6箭头函数
let fun2 = (a, b) => a + b


console.log(fun2(7, 8))

注：当函数只有一个参数的时候=>前面的括号也可以省略

当函数体中只有一条return语句的时候，可以省略return关键字，直接写return的值

当函数体中有多条语句的时候=>左边需要用{}包围起来