6.JS学习篇- 数组解构解构&赋值

萍宝贝

于 2024-08-21 11:22:10 发布

阅读量378

点赞数 14

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

本文链接：https://blog.csdn.net/qq_34334992/article/details/141363329

版权

在前端开发中，解构赋值是一种方便的语法，可以从数组或对象中提取值并将其赋给变量。

数组解构

1. 基本用法：在赋值表达式的左侧使用数组字面量，数组字面量中的每个变量名称映射为解构数组的相同索引项,可以从数组中提取特定位置的值并赋给变量。

const [a, b] = [1, 2];，这里 a 的值为 1，b 的值为 2。

2. 忽略某些值:可以使用逗号来忽略数组中的某些值。

const [c,, d] = [3, 4, 5];，这里 c 的值为 3，d 的值为 5。

3. 默认值:可以为变量设置默认值，以防对应位置的数组元素不存在或为 undefined。

const [e = 10, f = 20] = [6];，这里 e 的值为 6，f 的值为 20。

4. 声明分别赋值

1. 先声明后赋值: 使用 let、const 或 var 关键字进行变量声明，然后在后续代码中为变量赋值。

`let num;num = 10;`

2. 好处:

1. 这种方式在某些情况下可以使代码更清晰，特别是当变量的初始值需要经过一些复杂的计算或依赖于其他代码逻辑时。

2. 有助于提高代码的可读性，尤其是在大型项目中，可以让其他开发人员更容易理解变量的用途和初始化过程。

3. 可以在声明变量时不立即确定其值，为后续的逻辑处理留下灵活性。

3. 变量声明与赋值同时进行

1. 声明并赋值：使用 let、const 或 var 关键字声明变量的同时进行赋值。

`let num2 = 20;`

2. 这种方式简洁明了，适用于变量的初始值可以在声明时直接确定的情况。

3. 代码更紧凑，减少了行数。

4. 对于一些简单的变量初始化，能够快速完成，提高开发效率。

4.使用场景

1. 复杂逻辑处理：当变量的初始值需要根据多个条件进行计算，或者依赖于其他函数的返回值时，先声明后赋值更为合适。

let total;
const items = [1, 2, 3, 4, 5];
for (let item of items) {
     total = (total || 0) + item;
}

2. 模块导入和导出：在使用模块系统时，可能会先声明变量，然后在后续代码中从其他模块导入值进行赋值。

import { someFunction } from './otherModule';
let result;
result = someFunction();

3. 函数参数和局部变量：在函数内部，可以根据需要选择声明并赋值或先声明后赋值的方式来处理局部变量。

function processData(data) {
        let processedData;
        if (data.length > 0) {
               processedData = data.map(item => item * 2);
        }
        return processedData;
}

5. 解构默认值

1. 概念：解构默认值则是在解构过程中，为被提取的变量提供一个默认值，以防被提取的值为 undefined 或不存在。

2. 数组解构默认值

1. 基本用法

const arr = [1];
const [a = 2, b = 3] = arr;
console.log(a); // 1
console.log(b); // 3
// 在这个例子中，变量 a 从数组 arr 中提取值，如果 arr 的第一个元素不存在或为
// undefined，则 a 的值为默认值 2。变量 b 同理，
// 如果 arr 的第二个元素不存在或为 undefined，则 b 的值为默认值 3。

2. 嵌套数组的解构默认值

        const nestedArr = [[1], [2]];
        const [[c = 3], [d = 4]] = nestedArr;
        console.log(c); // 1
        console.log(d); // 2
        // 对于嵌套数组，也可以使用解构默认值。
// 如果嵌套数组中的某个子数组的元素不存在或为 undefined，对应的变量将取默认值。

3. 对象解构默认值

1. 基本用法

            const obj = { x: 1 };
            const { x = 2, y = 3 } = obj;
            console.log(x); // 1
            console.log(y); // 3
            // 这里，对象 obj 被解构，变量 x 从 obj 中提取值，
            // 如果 obj 中没有属性 x 或其值为 undefined，
            // 则 x 的值为默认值 2。变量 y 同理，如果 obj 中没有属性 y，则 y 的值为默认值 3。

2. 嵌套对象的结构默认值

            const nestedObj = { a: { b: 1 } };
            const { a: { b = 2 } = {} } = nestedObj;
            console.log(b); // 1
            // 对于嵌套对象，同样可以使用解构默认值。
            // 如果嵌套对象中的某个属性不存在或为 undefined，
            // 对应的变量将取默认值。

4. 解构默认值的用途

1. 函数参数默认值

        function func({ x = 1, y = 2 } = {}) {
            console.log(x, y);
        }
        func(); // 1 2
        func({ x: 3 }); // 3 2
        // 在函数参数中，可以使用对象解构默认值来为参数提供默认值。
        // 如果调用函数时没有传递相应的参数，或者参数中的属性不存在或为 undefined，
        // 则使用默认值。

2. 简化代码

在处理复杂数据结构时，解构默认值可以使代码更加简洁易读。例如，从多个来源获取数据并进行处理时，如果某些数据可能不存在，可以使用解构默认值来避免繁琐的条件判断。

5. 注意事项

1. 解构默认值只在被提取的值为 undefined 时生效。如果被提取的值为 null、false、0 等其他 falsy 值，不会使用默认值。

2. 在使用嵌套解构时，要注意确保每个层级的对象都正确初始化，以避免出现意外的结果。

6. 交换变量值

在前端开发中，有多种方法可以交换两个变量的值。

1. 使用临时变量：这是一种传统的方法，通过引入一个临时变量来暂存其中一个变量的值，然后进行交换。

    let a = 1;
    let b = 2;
    let temp;
    temp = a;
    a = b;
    b = temp;
    console.log(a); // 2
    console.log(b); // 1

2. 利用算术运算：可以使用加法和减法运算来交换两个变量的值，这种方法适用于数字类型的变量。

    let a = 1;
    let b = 2;
    a = a + b; // a 变为 3
    b = a - b; // b 变为 1
    a = a - b; // a 变为 2
    console.log(a); // 2
    console.log(b); // 1

也可以使用乘法或者除法运算，但要注意避免除数为0的情况。

    let a = 2;
    let b = 4;
    a = a * b; // a 变为 8
    b = a / b; // b 变为 2
    a = a / b; // a 变为 4
    console.log(a); // 4
    console.log(b); // 2

3. 利用数组解构：在 ES6 中，可以使用数组解构的方式来简洁地交换两个变量的值。

    let a = 1;
    let b = 2;
    [b, a] = [a, b];
    console.log(a); // 2
    console.log(b); // 1

4. 利用对象解构：类似于数组解构，对象解构也可以实现变量值的交换。

    let a = 1;
    let b = 2;
    ({ a, b } = { b: a, a: b });
    console.log(a); // 2
    console.log(b); // 1

不同的方法适用于不同的场景，可以根据具体情况选择最合适的方式来交换变量值。同时，在进行变量值交换时，要注意变量的类型和可能出现的边界情况，以确保代码的正确性和稳定性。

7. 异或

在前端开发中，异或（XOR）操作可以通过位运算来实现一些特定的功能。

1. 概念：

异或（XOR）是一种逻辑运算，当两个操作数不同时结果为真（1），相同时结果为假（0）。在数学和计算机科学中，异或通常用符号 “⊕” 表示。

2.在 JavaScript 中的异或操作

在 JavaScript 中，可以使用位运算符 “^” 来进行异或操作。

let a = 5; // 二进制表示为 101
let b = 3; // 二进制表示为 011
let result = a ^ b;
console.log(result); // 6，二进制表示为 110

3.异或的应用场景

1. 简单加密和解密

2. 数据校验

8. 解构函数返回的数组

在前端开发中，可以使用解构赋值来处理函数返回的数组。

1. 基本用法

   function getValues() {
     return [10, 20];
   }
   const [value1, value2] = getValues();
   console.log(value1); // 10
   console.log(value2); // 20

在这个例子中，函数getValues返回的数组被解构赋值给变量value1和value2。

2. 忽略某些值

如果只需要函数返回数组中的部分值，可以使用逗号来忽略不需要的值：

   function getValues() {
     return [10, 20, 30];
   }
   const [value1,, value3] = getValues();
   console.log(value1); // 10
   console.log(value3); // 30

这里，中间的值被忽略，只提取了第一个和第三个值。

3. 使用剩余运算符

如果函数返回的数组长度不确定，可以使用剩余运算符（...）来收集剩余的元素：

   function getValues() {
     return [10, 20, 30, 40];
   }
   const [value1, value2,...restValues] = getValues();
   console.log(value1); // 10
   console.log(value2); // 20
   console.log(restValues); // [30, 40]

变量restValues将包含数组中除了前两个值之外的所有剩余元素。

9. 赋值数组剩余值给一个变量

在 JavaScript 中，可以使用扩展运算符（...）将数组的剩余值赋值给一个变量。

1.使用扩展运算符进行数组解构赋值

   const arr = [1, 2, 3, 4, 5];
   const [first, second,...rest] = arr;
   console.log(first); // 1
   console.log(second); // 2
   console.log(rest); // [3, 4, 5]

在这个例子中，变量first和second分别被赋值为数组arr的前两个元素，而变量rest则通过扩展运算符收集了数组中剩余的元素。

2. 处理不同长度的数组

   const shortArr = [1, 2];
   const [firstShort, secondShort,...restShort] = shortArr;
   console.log(firstShort); // 1
   console.log(secondShort); // 2
   console.log(restShort); // []

对于较短的数组，restShort将是一个空数组。

3. 嵌套数组的处理

扩展运算符也可以用于处理嵌套的数组。

   const nestedArr = [1, [2, 3], 4];
   const [firstNested, [secondNested, thirdNested],...restNested] = nestedArr;
   console.log(firstNested); // 1
   console.log(secondNested); // 2
   console.log(thirdNested); // 3
   console.log(restNested); // [4]

4. 实际应用场景

1. 函数参数处理

在函数中，可以使用扩展运算符来接收不定数量的参数，并将它们作为一个数组进行处理。

   function sum(...numbers) {
     return numbers.reduce((total, num) => total + num, 0);
   }
   console.log(sum(1, 2, 3)); // 6
   console.log(sum(4, 5, 6, 7)); // 22

2. 数据处理和操作

当需要对数组进行分割、合并或其他操作时，扩展运算符可以提供方便的方式来处理数组的部分元素和剩余元素。

   const originalArr = [1, 2, 3, 4, 5];
   const [head,...tail] = originalArr;
   console.log(head); // 1
   console.log(tail); // [2, 3, 4, 5]

   const newArr = [head,...tail.map(num => num * 2)];
   console.log(newArr); // [1, 4, 6, 8, 10]

总之，使用扩展运算符将数组的剩余值赋值给一个变量是一种强大而灵活的技术，可以在前端开发中方便地处理各种数组操作。

10. 字符串解构

在前端开发中，虽然不能像对数组或对象那样直接进行传统意义上的解构赋值，但可以通过一些方法实现类似的效果。

1.将字符串转换为数组进行解构

可以使用扩展运算符（...）将字符串转换为字符数组，然后进行解构赋值。

const str = "hello";
const [firstChar,...restChars] = [...str];
console.log(firstChar); // "h"
console.log(restChars); // ["e", "l", "l", "o"]

2.利用正则表达式匹配进行解构

通过正则表达式的匹配结果，可以将字符串的部分内容提取出来并进行类似解构的操作。

const dateStr = "2024-08-21";
const [year, month, day] = dateStr.match(/(\d{4})-(\d{2})-(\d{2})/);
console.log(year); // "2024"
console.log(month); // "08"
console.log(day); // "21"

3.实际应用场景

1.字符串处理和分析

当需要对特定格式的字符串进行分析和提取关键信息时，可以使用上述方法进行类似解构的操作，使代码更加简洁和可读。

例如，解析 URL 字符串中的不同部分：

   const url = "https://www.example.com/page?param=value";
   const [protocol, domainAndPath] = url.split("//");
   const [domain, pageAndParam] = domainAndPath.split("/");
   const [page, paramStr] = pageAndParam.split("?");
   const [paramName, paramValue] = paramStr.split("=");
   console.log(protocol); // "https:"
   console.log(domain); // "www.example.com"
   console.log(page); // "page"
   console.log(paramName); // "param"
   console.log(paramValue); // "value"

2.模板字符串的处理

在处理模板字符串时，可以结合解构赋值来提取其中的变量。

   const name = "John";
   const age = 30;
   const templateStr = `My name is ${name} and I am ${age} years old.`;
   const [intro, namePart, agePart] = templateStr.split(/(My name is )|( and I am )|( years old.)/);
   console.log(namePart.trim()); // "John"
   console.log(agePart.trim()); // "30"

需要注意的是，对字符串进行解构的方法相对较为灵活和特定场景下的应用，不像对数组和对象那样直接和通用。在实际使用中，应根据具体的需求和情况选择合适的方法