数组的解构赋值

谁践踏了优雅 2022-05-25 10:28 225阅读 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 条评论，225人围观）

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

相关阅读

相关数组的解构

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

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

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

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

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

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

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

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

相关数组的解构赋值

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

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

相关对象的解构赋值

１．对象解构赋值的内部机制：先找到同名属性，然后赋值给相应的变量，实际被赋值的是后者 var {first:baz,last:bar} = {first:"aaa",

曾经终败给现在/ 2022年04月05日 08:52/ 0 赞/ 254 阅读

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

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

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

相关解构赋值

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

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

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

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

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

相关解构赋值

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

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

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

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

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