es6 箭头函数 rest参数 扩展运算符

Es6 箭头函数

语法：

1. 普通函数： fn=function(){}
2. 箭头函数： fn=()=>{}

 

特性： 

1. this是静态的，this始终指向函数声明时所在作用域下的this的值（使用call，bind改变指向无效）
2. 不能作为构造实例化对象
3. 不能使用arguments变量
4. 箭头函数简写（ 1，省略小括号，当形参只有一个的时候

                          2，省略花括号，当代码体只有一条语句的时候，此时return必须省略

                            而且语句的执行结果就是函数的返回值

） 

//测试call是否可以改变this指向
function getName(){
    console.log(this.name)
}

let getName2=()=>{
    console.log(this.name)
}

// 设置window对象的this属性
window.name='小红花'
const school={
    name: '菊花'
}

//直接调用
getName()   //结果为小红花
getName2()  // 结果为小红花    因为是在window作用域下


//call方法调用
getName.call(school)   
getName2.call(school)

//再次调用
getName()    // 菊花
getName2()    // 小红花

箭头函数适合场景

适合与this无关的回调，定时器，数组方法的回调

不适合与this有关的回调，事件回调，对象的方法

 

Es6 允许函数有默认值

形参初始值      具有默认值的参数，一般位置要靠后（潜规则）

function add(a,b,c=10){
  return a+b+c
}
let result = add(1,2)
console.log(result)// 13

与解构赋值结合

function connect({host='127.0.0.1',username,password,port}){
    console.log(host)
    console.log(username)
    console.log(password)
    console.log(port)

}
connect({
    host:baidu.com',
    username:'xiaohong',
    password:'123',
    post:336
})

Es6 rest 参数

function date(a,...args){
    console.log(args)
    //打印结果['小明','小黄'],可以用数组方法
}
date('小红','小明','小黄')

Es6  扩展运算符

语法：

const tfboys=['小红','小明','小黄']

function aaa(){
    console.log(arguments)
}

aaa(...tfboys)  // 等价于aaa('小红','小明','小黄')

应用：

// 1 数组的合并
const num=[1,2]
const num1=[4,5]
console.log([...num,...num1])

//2 浅拷贝
const dj=['E','G','M']
const arr=['...dj]
console.log(arr)  // ['E','G','M']

// 3 将伪数组转为真的数组
     //例如获取到的元素集合
    [...伪数组]