变量的解构赋值
所谓的解构赋值，就是把 某个对象或者数组中的数据，当作变量，给解放出来，这样，今后就能够当作变量直接使用了!!!；
再也不用每个值一遍遍的用.或者 [] 赋值
解构:将数组的数据或者对象的属性取出部分作为变量
// 对象
const user = { name: '前端拓路者', age: 2, sex:'men' }
// 声明的变量名和对象的key值字段一致，然后只拿我们所需要的
const { name, age } = user
console.log(`${name} : ${age}`) // 前端拓路者 : 2
// 数组
const arr = [1, 2, 3]
const [sb, hb] = arr
//会根据变量的位置，一一对应的赋值给变量
console.log(sb, hb) // 1 2
解构 + 重命名 + 默认值,a:b就是将重命名为b;那么解构赋值过程就有点复杂了,我们来个小栗子吧
let { a: x = 0, b: y = 2, c: z } = { a: "11", y: "22", z: "33" }
// 以下为为方便理解而模拟执行的过程，并非真实处理过程
//前面的a是匹配模式 后面的x才是变量
// 1. 先找到初的变量进行解构赋值
let { a, b, c } = { a: "11", y: "22", x: "33" }
// a => 11 b => 无值undefined c => 无值undefined
// 2. 将声明的字段重命名 [声明的字段 ：重命名后的字段]
let x = a, y = b, c = z
//注意，虽然上步"声明"了a b c，但它们依旧是未定义状态，且打印 它们会抛错 error: (a b c) is not defined
// 3. 判断该变量是否有值，无值时才赋值等号后默认值
let x = a = "11" //有值，不用赋值默认值0
let y = b = "2" //无值，赋值默认值2
let z = c //无值且无默认值 undefined
- 在react的dva框架中我们经常会使用到解构,我们一般会在在
函数的传参中经常使用,话不多说,给个例子吧
const add = (state, { payload: todo }) => {
return state.concat(todo) }
add("1", { payload: "2" })
//调用时 "1"赋值给state payload值为"2"且被重命名为todo
对象的反向解构，当对象中的键和值字段一致时可以只写一个来重新构建一个对象
const name = '拓路者', age = 18
const user = { name, age }
// { name: '拓路者', age: 18 }
// 定义对象方法时，可省去 function 关键字。 app.model({
reducers: {
add() {} // 等同于 add: function() {}
},
effects: {
*addRemote() {} // 等同于 addRemote: function*() {}
},
})
- 函数参数的解构
function add([x=1,y=1]){
// var x = x ||1;
// var y = y ||1;
return x+y
};
add([2,3]);
//[x,y]=[2,3] 2+3=5
//参数对象
function add2({x=0,y=0}){
return x+y
};
add2({x:3,y:4})
//{x=0,y=0} = {x:3,y:4}
//函数参数解构的默认值
function fun({x=0,y=0} = {}){
return [x,y]
};
//{x=0,y=0} = {x:3,y:5}
fun({x:3,y:5}) //[3,5]
fun({x:3}) // [3,0] {x=0,y=0} ={x:3}
fun();//{x=0,y=0} ={} [0,0]
fun({})
//还有这种
function fun2({x,y}={x:0,y:0}){
return [x,y]
}
//{x,y} = {x:3,y:5}
fun2({x:3,y:5}) // [3,5]
fun2({x:3}) // {x,y} = {x:3} [3,undefined]
fun2();//{x,y}={x:0,y:0} [0,0]
fun2({}) //{x,y} = {} [undefined,undefined]
//这里有些面试题就是喜欢搞这些花里胡哨的,上面的例子要自己好好动手试验下是不是,好好理解下
一个函数返回的数组能不能解构呢???
function num(){
return [2,3,4]
};
let [a,b,c] =num();
console.log(a,b,c)
看一下打印结果就知道了
那么我们还要要注意这几点:
- 与数组解构有一个重要的不同，数组的元素是按次序排列的，变量的值由它的位置决定 对象解构是没有次序，变量必须与属性同名
- 如果我们在解构声明变量时，定义了对象中不存在的属性，那么这个变量的值为undefined。我们可以给变量设置默认值，当对象中没有对应的属性时，这个变量的值就是设置的默认值。
如果这些都能理解的话,你在工作中使用解构赋值就能够得心应手了!!!
(免费获取最新完整前端课程关注vx公众号:前端拓路者coder,回复:资料
如果这个文章对你有用的话,欢迎点赞转发关注,让更多的小伙伴看到呀,毕竟分享是一个程序员最基本的美德!!!
如果有不对的请大佬指教)
