什么是解构赋值

最新推荐文章于 2024-07-14 22:31:26 发布

夜月语

最新推荐文章于 2024-07-14 22:31:26 发布

阅读量275

点赞数 6

文章标签： javascript 前端开发语言 es6

本文链接：https://blog.csdn.net/m0_70530631/article/details/135002478

版权

解构赋值：一种简洁的语法，允许你从数组、对象或者任何可迭代的对象中提取值，并将这些值直接赋给一个或多个变量。解构赋值使得你可以通过一种更易读的方式来处理数据结构，从而提高代码的可维护性和简洁性。（就是将复杂的数据解构为简单数据）

一、在数组中，解构赋值可以这样使用：

二、在对象中，解构赋值可以这样使用：

三、我们还可以设置默认值：

四、字符串的解构赋值：字符串可以被当作具有索引和length属性的类似数组的对象，因此可以进行数组解构。

五、复杂数据的解构赋值：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>解构赋值</title>
</head>
<body>
 <script>
//1、数组解构赋值
    let arr = [1, 2, 3];
    let [a, b, c] = arr; // a = 1, b = 2, c = 3

// 不需要所有的值时，可以使用逗号（,）跳过它们
    let [a, , b] = arr; // a = 1, b = 3

// 如果数组元素不够，剩余部分会是undefined
    let [a, b] = [1]; // a = 1, b = undefined

// 可以用...运算符收集剩余的值
    let [a, ...b] = [1, 2, 3, 4]; // a = 1, b = [2, 3, 4]



//2、对象解构赋值
    let {name, age} = {name: 'John', age: 30};
    console.log(name); // John
    console.log(age); // 30


//3、给解构赋值设置默认值
    let [a = 1, b = 2] = [3];
    console.log(a); // 3
    console.log(b); // 2


//4、字符串的解构赋值
    let str="abcdef";
    const [,,,test1,]=str
    console.log(test1);//d


//5、复杂数据的解构赋值

    const test={
            number:[1,2 ,3],
            test2:{
                name:"张三",
                age:20
            }
        }
     const {number:[a,b,c],test2:{name,age}}=test
     console.log(a);//1
     console.log(age);//20
</script>
</body>
</html>

总的来说，解构赋值是可以帮助你在JavaScript中更加简洁地处理复杂的数据结构,将复杂的数据简单化，提高代码的优化性和简洁性。