对象解构是一种快速赋值的方式
代码如下:
// 对象解构是一种快速赋值的方式
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