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

代码如下:

// 对象解构是一种快速赋值的方式
 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为undefined
let { name, age, hobby = '打豆豆', height } = obj
console.log(name, age, hobby, height); //"小昭" 18 "听歌" undefined
// 第二种情况:hobby有默认值,但obj.hobby赋值为undefined
let obj = {
    name: '小昭',
    age: 18,
    hobby: undefined
}
let { name, age, hobby = '打豆豆' } = obj
console.log(name, age, hobby); //"小昭" 18 "打豆豆"

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

对象结构一般用于函数中

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

function person({ 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 = new Set(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 = [...new Set(arr)]
consolo.log(nArr)//[10,20,4,3,40,50]

箭头函数

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

1、把function改成 =>

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

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

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

3、如果参数不是一个(0个或者多个),不能省略小括号

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

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

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

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

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