ES6箭头函数和解构赋值

2018-11-09  本文已影响0人  郑宋君

在es6之前,我们函数都是表达式

var show = function(){}

这种方式书写的,但是在ES6中,我们函数可以使用箭头函数表示

let show = () =>{}

例如

var show = function(){
  console.log('hello world')
}
show()
//hello world

使用箭头函数可以写作

let show = ()=>{
  console..log('hello world')
}
show()
//hello world

其实箭头函数并没有新的内容,只不过是写法改变了
当只有一个参数的时候可以省去圆括号

let show= (str) =>{
  console.log(str)
}
//等价与
let show = str=>{
  console.log(str)
}

当只有一个返回值的时候,return和花括号可以省略

let conStr = str => '你好'+str
console.log(conStr('周杰伦'))
//你好周杰伦

当然es6对函数的传入参数的方式也新增了

//当传入多个值的时候
var show() =(a,b,...arg)=>{
console.log(a)
console.log(b)
console.log(...arg)
}

show(1,2,3,4,5,6,7)
//1
//2
//3,4,5,6,7

...arg可以理解成一堆数拆分或者合并

var arr1 = [1,2,3]
var arr2 = [4,5,6]
var arr = [...arr1,...arr2]  // [1,2,3,4,5,6]

解构赋值
解构赋值有三个原则
1.左右两边结构必须一样
2.右边必须是个东西
3.声明和赋值不能封开(必须在一句话里面完成)

let [a,b,c] = [1,2,3];
console.log(a,b,c)    //1,2,3
let {a,b,c} = {a:1,b:5,c:8};
console.log(a.b,c)   //1,5,8
let [{a,b},[n1,n2,n3],num,str] = [{a:12,b:5},[12,13,45],45,'zheng']
console.log(a,b,n1,n2,n3,num,str)  //12 5 12 13 45 45 "zheng"

上一篇下一篇

猜你喜欢

热点阅读