ES6新特性之对象解构赋值，数组解构赋值，set数据类型，箭头函数详解

对象解构是一种快速赋值的方式

代码如下：

// 对象解构是一种快速赋值的方式let obj={
         name:'小昭',
         age:18,
         hobby:'听歌'}//  下面这句话表示定义了name，age，hobby三个变量，然后把obj对象的的属性一一赋值给三个变量// {name:name}左边name表示obj.name,右边的name表示变量let{ name: name, age: age, hobby: hobby}= obj// 下面一句是上一句的简写方式，也是快速赋值的方式// 注意：变量值一定要与对象属性名一一对应let{ name, age, hobby}= obj
 console.log(name, age, hobby);//'小昭',18,   '听歌'

数组解构也是一种快速赋值的方式，原理与对象结构几乎差不多

代码如下：

// 数组解构的范例let arr=[10,20,30,40,40]let[num1, nm2, num3, num4, num5, num6]= arr//最后num6为何是undefined的，因为num6声明了，但没有赋值，所以输出为undefined
 console.log(num1, nm2, num3, num4, num5, num6);//10,20,30,40,50.undefined

如果对象和数组有默认值，看赋值的对象里面有没有属性值或者数据，如果有的话就改变默认值为赋值的值
代码如下（由于数组与对象一致，就只视例对象）：

let obj={
        name:'小昭',
        age:18,
        hobby:'听歌'}// 因为声明了height变量，但没有赋值，所有height为undefinedlet{ name, age, hobby='打豆豆', height}= obj
console.log(name, age, hobby, height);//"小昭" 18 "听歌" undefined// 第二种情况：hobby有默认值，但obj.hobby赋值为undefinedlet obj={
    name:'小昭',
    age:18,
    hobby:undefined}let{ name, age, hobby='打豆豆'}= obj
console.log(name, age, hobby);//"小昭" 18 "打豆豆"

ps：声明的变量名一定要与要解构对象名一一相对应，否贼无法完成快速赋值

对象结构一般用于函数中

因为当一个函数参数过多加上函数内部代码过多，可能无法找出参数名，所有对象结构很大程度上帮助我们省去很多不必要的麻烦
代码如下：

functionperson({ name, age}){// 函数参数内部执行了赋值操作// 把参数let {name,age,......}=XXX    -函数解构语法，好处是：在函数代码较多中可以很清晰看出形参变量
    console.log('我的名字是'+ name,'年龄是'+ age);}let obj={
    name:'小昭',
    age:18，.......}person(obj)

…符号

作用 :展示数组与对象的各项内容

// 数组let arr=[10,20,30,40]
console.log(...arr);//10 20 30 40

应用场景：判断数组最大值最小值

let arr=[10,20,30,40,50,60]// ...展示数组的各项
console.log(Math.max(...arr));//60
console.log(Math.min(...arr));//10

对象之间的赋值

let obj1={
    name:'小昭',
    height:160,
    weight:'55kg',
    hobby:'learnMoney'}let lunch={
    shucai:'douya',
    rice:'a little',sayHi:()=>{
        console.log('少吃点好嘛');},...obj1}
console.log(lunch);
打印出：{
  shucai:'douya',
  rice:'a little',
  sayHi:[Function: sayHi],
  name:'小昭',
  height:160,
  weight:'55kg',
  hobby:'learnMoney'}

set数据类型

ES5中数据类型有七种，五种值类型string，number，boolean，undefined，null，两种引用类型：Array，function
ES6新添加了一种set数据类型，类似与数组
特点：内部只能保持唯一的变量，相同的变量无法在一起；返回值是一个{}包着的数据
适用场景：数组快速去重

let arr=[10,20,4,3,10,20,40,50,10,20]//分步写let newData=newSet(arr)
console.log(newData);//Set { 10, 20, 4, 3, 40, 50 }let newArr=[...newData]
console.log(newArr);//[10,20,4,3,40,50]// 一步到位的数据去重方法let nArr=[...newSet(arr)]
consolo.log(nArr)//[10,20,4,3,40,50]

箭头函数

箭头函数就是匿名函数的简写

1、把function改成 =>

setTimeout(function(){
    console.log('你好呀');},1000)setTimeout(()=>{
        console.log('初次使用箭头函数，请多多指教呀');},1000)

2、如果形参只有一个可以省略小括号

//声明一个fn的匿名函数letfn=hobby=>{
        console.log('我最喜欢'+ hobby);}// 调用fnfn('敲代码')//我最喜欢敲代码

3、如果参数不是一个（0个或者多个），不能省略小括号

//  无参letfn=()=>{
    console.log('这是一个无参箭头函数');}fn()//这是一个无参箭头函数// 两个参数letfn=(name, age)=>{
    console.log('我的名字是'+ name,'年龄是'+ age);}fn('小昭',18)//我的名字是小昭 年龄是18

4、如果函数只有一句话，可以省略大括号

letfn=()=> console.log('这是一个无参箭头函数');fn()//这是一个无参箭头函数

5、如果函数体只有一句话，并且这句话是return，那此时连return也省了

letsum=(num1, num2)=> num1+ num2
 console.log(sum(10,20));//30