梳理JS 解构赋值

1、忽略值 ignoring values

const [apple, , banana] = ["apple", "watermelon", "banana"];
console.log(apple, banana);

2、分配剩余值

const [apple, ...remains] = ["apple", "watermelon", "banana"];
console.log(remains);
const { apple, ...remains } = {
  apple: 123,
  banana: "香蕉",
  wk: "walker",
};
console.log(remains);

3、组合数组和对象解构

const [, , { name, num }] = [
  { id: 1001, name: "banana", num: 1500 },
  { id: 1001, name: "banana2", num: 8000 },
  { id: 1001, name: "banana3", num: 500 },
];
console.log(name, num);

4、交换数组中的变量

• 一般做法，要引入一个临时的第三个变量来存储要交换其中的一个值。

let array = [100, 1500],
  index1 = 0,
  index2 = 1;
var temp = array[index1];
array[index1] = array[index2];
array[index2] = temp;
console.log(array);

• 解构

const fruites = ["apple", "orange", "pear---3"];
[fruites[2], fruites[1]] = [fruites[1], fruites[2]];
console.log(fruites);`
`let a = 100,
  b = 200;
[a, b] = [b, a];
console.log(a, b);

5、重命名变量

const {
  apple,
  pear,
  baNANA: banana,
} = { apple: "apple", pear: "pear", baNANA: "banana king" };
console.log(banana);

6、默认值

const [apple, watermelon = "watermelon", banana] = ["apple", , "banana"];
console.log(watermelon);

const {
  a,
  b = { wk: "hi walker" },
  c,
} = {
  a: { id: 1001, name: "banana", num: 1500 },
  b: undefined,
  c: { id: 1001, name: "banana3", num: 500 },
};
console.log(b);

7、解构正则表达式

• 正则表达式用于定位字符串中的模式。当在 javascript 中执行正则表达式 (RegExp.exec() ) 时，匹配项将作为字符串数组返回。
• 使用数组解构，您可以直接将 RegExp 匹配解包到所需的变量。在下面的例子中，我们将一个邮件地址分解成不同的部分，并直接将它们分配给变量。

const email = "john.123@gmail.com";
const [originalName, username, address, tld] =
  /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/.exec(email);
console.log(originalName);
console.log(username, address, tld);

8、嵌套解构

const {
  banana,
  fruiteList: [, { apple: nestedApple }],
} = {
  banana: "banana",
  fruiteList: [{ pear: "pear" }, { apple: "apple with nest" }],
};
console.log(nestedApple);

9、动态对象键

• 假设您要解包其键是动态的对象。解构是不可能的，因为您不能确定键名的有效性吗？不！对象键可以在解构时动态分配，提供额外的灵活性。

let fruits = {
  banana: "banana",
  fruiteList: [
    { pear: "pear" },
    { apple: "apple with nest" },
    { banana: "banana" },
  ],
};
const fruitKey = "banana";
const { [fruitKey]: wk } = fruits;
console.log(wk);

10、解构函数参数

const getherry = ({ apple, cherry }) => {
  console.log(cherry);
};
let fruits = { apple: 100, cherry: 150 };
getherry(fruits);