数组的解构赋值

谁践踏了优雅 2022-05-25 10:28 234阅读 0赞

个人习惯在js中这个样子给变量赋值：

< script>

*let* test1 = "test1";

*let* test2 = "test2";

*let* test3 = "test3";

*let* test4 = "test4";

</ script>

在es6中，我们可以这样子实现赋值：

< script>

*let*\[test1,test2,test3,test4\] =\[ "test1", "test2", "test3", "test4"\];

*console*. log(test1);

*console*. log(test2);

*console*. log(test3);

*console*. log(test4);

</ script>

上面这种利用数组进行赋值的方式就是数组解构赋值；

数组中缺少项也是可以进行解构赋值的：

< script>

*let*\[test1,,test3,test4\] =\[ "test1", "test2", "test3", "test4"\];

*console*. log(test1);

// console.log(test2);

*console*. log(test3);

*console*. log(test4);

</ script>

从输出可以看出，是可以进行的；

或者这样的数组也是可以的：

< script>

*let*\[test1,\[test2,test3\],test4\] =\[ "test1",\[ "test2", "test3"\], "test4"\];

*console*. log(test1);

*console*. log(test2);

*console*. log(test3);

*console*. log(test4);

</ script>

对数组进行嵌套然后进行解构赋值；

上面的情况都是左右相互匹配的情况下可以进行，那如果不匹配呢？

看看下面这个：

< script>

*let*\[test1,test2,test3\] =\[ "test1", "test2", "test3", "test4"\];

*console*. log(test1);

*console*. log(test2);

*console*. log(test3);

// console.log(test4);

</ script>

左边有三个变量，右边有四个值，这样是可以进行赋值的；

但是，我们再次修改一下，左边四个变量，右边三个变量会怎么样呢？

< script>

*let*\[test1,test2,test3,test4\] =\[ "test1", "test2", "test3"\];

*console*. log(test1);

*console*. log(test2);

*console*. log(test3);

*console*. log(test4);

</ script>

看看结果：

test1

temp.html:20

test2

temp.html:21

test3

temp.html:22

undefined

最后一个test4并没有赋值成功，我们的解构失败了，而失败的情况下回返回 undefined ;

数组的解构赋值也是可以设置默认值的：

< script>

*let*\[test1 = "test1",test2,test3,test4\] =\[ undefined, "test2", "test3", "test4"\];

*console*. log(test1);

*console*. log(test2);

*console*. log(test3);

*console*. log(test4);

</ script>

为什么设置默认值的变量的对应值写成 undefined 呢，因为只有这个值为undefined，前面的默认值才会起作用；

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关数组的解构

与对象解构的语法相比，数组解构就简单多了，它使用的是数组字面量，且解构操作全部在数组内完成，而不是像对象字面量语法一样使用对象的命名属性。 let list = ['

￡神魔★判官ぃ/ 2023年10月15日 22:54/ 0 赞/ 31 阅读

相关解构赋值用途与解构赋值圆括号问题

圆括号问题对于编译器来说，一个式子到底是模式，还是表达式，没有办法从一开始就知道，必须解析到（或解析不到）等号才能知道。由此带来的问题是，如果模式中出现圆

古城微笑少年丶/ 2023年06月19日 11:25/ 0 赞/ 7 阅读

相关变量的解构赋值→对象的解构赋值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

矫情吗；*/ 2022年10月02日 04:44/ 0 赞/ 289 阅读

相关 ES6——Day2（数组的解构赋值）

1、Destructuring ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这称为“解构”。 2、不完全解构等号左边的模式，只匹配一部分的等

冷不防/ 2022年09月28日 01:21/ 0 赞/ 144 阅读

相关数组的解构赋值

个人习惯在js中这个样子给变量赋值： < script> let test1 = "test1"; let test2 = "test2"; let test3 = "

谁践踏了优雅/ 2022年05月25日 10:28/ 0 赞/ 235 阅读

相关 ES6——数组的解构赋值

> 一、基本用法解构：ES6允许按照一定模式从数组和对象中提取值，然后对变量进行赋值，称之为解构以前，为变量赋值只能直接指定值 let a = 1;

淩亂°似流年/ 2022年03月20日 14:40/ 0 赞/ 193 阅读

相关解构赋值

详解解构赋值什么是解构赋值？传统做法 var array = ['hello', 'JavaScript', 'ES6']; var x =

￡神魔★判官ぃ/ 2022年02月01日 13:11/ 0 赞/ 320 阅读

相关变量的解构赋值→数组的解构赋值

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

逃离我推掉我的手/ 2022年01月12日 18:19/ 0 赞/ 381 阅读

相关解构赋值

[ES 6 : 变量的解构赋值][ES 6 _] 1. 数组的解构赋值 \[ 基本用法 \] 　　按照一定的模式从数组或者对象中取值，对变量进行赋值的过程称为解

ゞ浴缸里的玫瑰/ 2022年01月12日 13:43/ 0 赞/ 301 阅读

相关 ES6 解构赋值详解：对象解构赋值、数组解构赋值

所谓的解构赋值就是：按照一定模式，从数组和对象中提取值，对变量进行赋值（先解析结构再进行赋值）。对象的解构赋值对象是通过属性名进行解构（是用的最多的解构赋值）

迈不过友情╰/ 2021年12月05日 15:09/ 0 赞/ 447 阅读