解构-数组解构

·  阅读 365

简单解构

const numbers = ['a', 'b', 'c'];

// 获取前两项
const [n1, n2] = numbers; 
console.log(n1,n2)// 'a' , 'b'

// 获取第一项和第三项
const [n1, , n3] = numbers; 
console.log(n1,n3)// 'a' , 'c'

// 获取第一项和第四项
const [n1, , n3, n4] = numbers; 
console.log(n1,n3,n4)// 'a' , 'c', undefined

 // 给默认值
const [n1, , n3, n4 = 'd'] = numbers; 
console.log(n1,n3,n4)// 'a' , 'c', 'd'
复制代码

嵌套数组解构

// 得到numbers中下标为4的数组中的下标为2的数据,放到变量n中
const [, , , , [, , n]] = numbers;
console.log(n); // 3
复制代码

嵌套对象解构

赋给同名变量

const numbers = ['a', 'b', 'c', 'd', {
    a: 1,
    b: 2
}];
// 得到numbers中下标为4的数组的属性a,赋值给变量a
const [, , , , { a }] = numbers
console.log(a); // 1
复制代码

赋给不同名变量

const numbers = ['a', 'b', 'c', 'd', {
    a: 1,
    b: 2
}];
// 得到numbers中下标为4的数组的属性a,赋值给变量A
const [, , , , { a: A }] = numbers
console.log(A); // 1
复制代码

解构剩余项

const user = {
    name: 'lisa',
    age: 20,
    sex: '女',
    address: {
        province: '江苏',
        city: '无锡'
    }
}

// 解构出name,然后剩余的所有属性,放到一个新的对象中,变量名为obj
// 最后得出
// name:lisa
// obj:{ age: 20,sex: '女', address: {···}}
const { name, ...obj } = user;
console.log(name, obj);
复制代码

解构数组的剩余项

const numbers = [1, 2, 3, 4];
// 得到数组前两项,前两项放到变量a和b中,然后剩余的所有数据放到数组nums中
const [a, b, ...nums] = numbers;
console.log(a, b, nums); // 1, 2, [3, 4]
复制代码

练习

练习-

let a = 1, b = 2;
// 交换变量值
[b, a] = [a, b];
console.log(a, b); // 2  1
复制代码

练习二

const article = {
    title: "文章标题",
    content: "文章内容",
    comments: [{
        content: "评论1",
        user: {
            id: 1,
            name: "用户名1"
        }
    }, {
        content: "评论2",
        user: {
            id: 2,
            name: "用户名2"
        }
    }]
}

//解构出第二条评论的用户名和评论内容
// name:"用户名2"  content:"评论2"
const { comments: [, { content, user: { name } }] } = article;
复制代码
分类:
前端
标签:
分类:
前端
标签: