前言

下面只是对于后端所需知识 的补充。并非完整的ES6新特性，如有相应需求可查看官网文档进行学习。
由于JS官方文档是全英文的，不方便大家学习。这里给大家提供一个比较友好的中文文档，请点这里caibaojian

表达式

let和const

1
2
let a = 3; //a有作用域范围,且不能再次声明
const b = 5;//const用于定义常量

解构赋值

1
2
3
4
5
6
7
8
9
const arr = [1,2,3]
const[x,y,z] = arr; //将arr的值分别赋予x,y,z
let person = {
    name:'zs',
    age:20
}
let {name:username,age} = person
//这里将person对象的值分别赋予name和age
//且给name取别名为username

字符串相关

字符串扩展

1
2
3
4
5
6
7
let str = "hello.vue"
//是否以...开头
str.startsWith("hello")
//是否以...结尾
str.endsWith(".vue")
//是否包含...
str.includes("e")

字符串模板

1
2
3
4
5
6
7
//可将一大段字符串放在``中
let ss = `<div>
   <span>hello</span>
   </div>
`
//在模板字符串中可用插值语法${JS表达式}
let info = '我是${name},今年${age + 10}'

函数与对象

函数优化

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
//默认值
function fun(a,b = 1){
    return a + b
}
//不定参数
function fun(...values){
    return values.length
}
//箭头函数
//只有一句
var print = (a,b) => console.log(a + b)
//只需返回
var sum = (a,b) => a + b
//一般形式
var normal = (a,b,c) => {
    let sum = a + b + c
    return sum
}
//解构
const person = {
    name:'jack',
    age:20
}
var hello = ({name}) => console.log("hello" + name)

对象优化

灵活利用Object提供的方法，有时候能极大简化代码!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//取key,value,entry
const person = {
    name:'jack',
    age:20
}
Object.keys(person)
Object.values(person)
Object.entries(person)

//合并对象
const one = {a : 1}
const two = {b : 2}
const three = {c : 3}
Object.assign(one,two,three)

//声明对象简写
const age = 23
const name = 'zs'
const person1 = {name: name,age : age}
//变量与对象属性同名,可简写为:
const person2 = {name,age}

//对象函数简写
let person3 = {
    name:'jack',
    eat:function(food){
        console.log(this.name + '吃' + food)    
    }
    
    //箭头函数的this指向windows,不能使用this
    eat2: food => console.log(person.name + '吃' + food)
    
    eat3(food){
        console.log(this.name + '吃' + food)    
    }
}

//拷贝对象
let person1 = {name:'zs',age:15}
let someone = {...person}

//合并对象
let age1 = {age:20}
let name1 = {name:'lisi'}
//像name等属性重名,会被后来的属性覆盖
let p1 = {...age1,...name1}

数组扩展

map和reduce

map用于处理数组，reduce用于计算数组

1
2
3
4
5
6
7
8
9
10
11
12
13
//将arr经过map中的函数处理后返回
let arr = [1,2,5,7,9]
arr = arr.map((item) => {
    item * 2
})

//为arr中的每一个元素执行该函数
//参数1.先前处理的值  参数2.当前处理的值
//参数3.数组下标
let arr = [10,40,-2,5,-1]
arr.reduce((a,b) => {
    return a + b
})

Promise异步编排

发起请求

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let p = new Promise((resolve,reject) => {
    //异步操作
    $.ajax({
        url:'www.xxx.com',
        success:function(data){
            console.log("第一次异步获取的结果" + data)
            resolve(data)        
        }
        error:function(err){
            reject(err)                              
        }    
    })
    
    p.then((obj)=>{
        return new Promise((resolve,reject) => {
            $.ajax({
                url:` www.other.com + ${obj.id}`,
                success:function(data){
                    console.log("第二次异步获取的结果" + data)
                    resolve(data)                
                },
                error:function(err){
                    reject(err)                
                }            
            })
        })
    }).then((obj2)=>{
            //...继续发送异步请求
    }).catch((err)=>{
            
    })
    
})