1.解构赋值
解构赋值: 使用解构简洁语法快速为变量赋值。
-
支持多维解构赋值
1.2数组解构
数组解构是将数组的单元值快速批量赋值给一系列变量的简洁语法
<script>
// 1.取出数组元素 赋值给变量
let arr = [10, 20, 30]
let [n1, n2, n3] = arr
console.log(n1, n2, n3);//10 20 30
// 2.取出变量的值 赋值给数组元素
let num1 = 1
let num2 = 2
let num3 = 3
let num4 = 4
let newArr = [num1, num2, num3, num4]
console.log(newArr)//Array(4) 0: 1 1: 2 2: 3 3: 4 length: 4
</script>
总结:总结：
- 赋值运算符
=左侧的[]用于批量声明变量，右侧数组的单元值将被赋值给左侧的变量 - 变量的顺序对应数组单元值的位置依次进行赋值操作
- 变量的数量大于单元值数量时，多余的变量将被赋值为
undefined - 变量的数量小于单元值数量时，可以通过
...获取剩余单元值，但只能置于最末位 - 允许初始化变量的默认值，且只有单元值为
undefined时默认值才会生效
1.3函数参数解构
函数参数解构: 当函数参数是对象类型,就可以对形参进行解构
<script>
function fun(obj) {//实参给形参赋值
console.log(obj);
//对象结构
let { name, age } = obj
console.log(name)//万叶
console.log(age)//18
}
fun({ name: '万叶', age: 18 })
function fun({ name, age }) {
console.log(name)//万叶
console.log(age)//18
}
fun({ name: '万叶', age: 18 })
</script>
2.箭头函数
2.1箭头函数的语法
箭头函数是一种声明函数的简洁语法，它与普通函数并无本质的区别，差异性更多体现在语法格式上。
<script>
// 引入箭头函数的目的是更简单的函数写法并且不绑定this,箭头函数比普通函数更简单
const fun1 = function () {
console.log(123);
}
// 基本语法
const fun2 = () => {
console.log(12);
}
fun2()
//只有一个参数时可以省略小括号
const fun3 = x => {
console.log(x);
}
fun3(1)
// 只有一行代码时可以省略大括号
const fun4 = x => console.log(x);
fun4(3)
// 只有一行时可以省略 return
const fun5 = (x, y) => x + y
console.log(fun5(3, 5));
//箭头函数可以直接返回一个对象
const fun6 = name => ({
uname: name
})
fun6('万叶')
console.log(fun6('万叶'));
</script>
总结：
- 箭头函数属于表达式函数，因此不存在函数提升
- 箭头函数只有一个参数时可以省略圆括号
() - 箭头函数函数体只有一行代码时可以省略花括号
{}，并自动做为返回值被返回 - 箭头函数中没有
arguments，只能使用...动态获取实参
2.2箭头函数的this
<script>
console.log(this); //window
function fu() {
console.log(this); //window
}
fu()
const obj = {
age: 18,
name: '万叶',
sayHi: function () {
console.log(this); //obj
}
}
obj.sayHi()
// 箭头函数不会创建之间的this,他会从自己的作用域链上一层寻找自己的this
const fun = () => {
console.log(this); //Window
}
fun()
// 对象方法箭头函数
const obj1 = {
age: 18,
name: '万叶',
sayHi: () => {
console.log(this); //Window
}
}
obj1.sayHi()
// 对象常规函数里面包含箭头函数
const obj2 = {
sayHi: function () {
console.log(this) //obj
const fun2 = () => {
console.log(this); //obj
}
fun2()
}
}
obj2.sayHi()
</script>
总结：
- 箭头函数不能修改this
- 箭头函数不能作为构造函数
- 事件函数不能用箭头函数
例如:
let obj = {
name:"111",
eat(){
function fn1(){
console.log(this) //Window
}
fn1()
let fn2 = () => {
console.log(this) //Object
}
fn2()
},
learn:() => {
function fn1(){
console.log(this) //Window
}
fn1()
let fn2 = () => {
console.log(this) //Window
}
fn2()
}
}
obj.eat()
obj.learn()
2.3展开运算符
展开运算符: ...
相当于遍历数组/对象的简写
<script>
let arr1 = [10, 20, 30]
let arr2 = [40, 50, 60]
let arr3 = [70, 80, 90]
console.log(...arr1); //10 20 30
// 连接数组
arr1.push(...arr2, ...arr3)
console.log(arr1)//10 20 30 40 50 60 70 80 90
</script>
