JavaScript ES6学习之解构赋值

最新推荐文章于 2024-05-23 11:01:45 发布

崇志广勤

最新推荐文章于 2024-05-23 11:01:45 发布

阅读量87

点赞数 1

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_47062907/article/details/114852403

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、数组解构

JavaScript ES6允许从数组中提取值，按照对应位置，对变量进行赋值，对象也可以实现解构。如果解构不成功，那么就会出现undifined。
例如：

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<script type="text/javascript"> 
let arr=[1,2,3,4,5];//数组(1,2,3,4,5,6)，这里有5个元素
let [a,b,c,d,e,f,g] = arr;//这有7个
console.log(a);//与数组(1,2,3,4,5,6)一一对应，控制台输出1
console.log(b);//与数组(1,2,3,4,5,6)一一对应，控制台输出2
console.log(c);//与数组(1,2,3,4,5,6)一一对应，控制台输出3
console.log(d);//与数组(1,2,3,4,5,6)一一对应，控制台输出4
console.log(e);//与数组(1,2,3,4,5,6)一一对应，控制台输出5
console.log(f);//控制台输出undifined
console.log(g);///控制台输出undifined
    </script>
</body>
</html>

案例运行结果：

在这里插入图片描述

二、对象解构
按照一定模式，从数组中提取，将提取出来的值赋给另外的变量。

案例代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HOME</title>
</head>
<body>
<script type="text/javascript"> 
let person={name:'chongzhi', age:20, sex:'男'};
let {name,age,sex} = person;
console.log(name);
console.log(age);
console.log(sex);
    </script>
</body>
</html>

案例运行结果：
在这里插入图片描述

崇志广勤

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JavaScript ES6学习之解构赋值

一、数组解构JavaScript ES6允许从数组中提取值，按照对应位置，对变量进行赋值，对象也可以实现解构。如果解构不成功，那么就会出现undifined。例如：案例代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>HOME</title></head><body><script type="te
复制链接

扫一扫