标签：输出 hcq console log JavaScript hzh 解构 2.2 赋值

ES6 允许按照一定模式从数组和对象中提取值，再对变量赋值，这被称为解构( Destructuring ）。在实际的项目开发中，从数组和对象中提取值使用得非常频繁，本任务主要讲解如何从数组和对象中提取值。

在以前的开发中为变量赋值，只能直接指定值 。

示例8

// 传统赋值
let cly = 1;
let hzh = 2;
let hcq = 3;
console.log("把上面的三个数输出：");
console.log([cly, hzh, hcq]);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
把上面的三个数输出：
[ 1, 2, 3 ]

[Done] exited with code=0 in 0.435 seconds

// 在 ES6 的语法中允许这样
let [cly, hzh, hcq] = [1, 2, 3];
console.log("把上面的三个数输出：");
console.log([cly, hzh, hcq]);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
把上面的三个数输出：
[ 1, 2, 3 ]

[Done] exited with code=0 in 0.206 seconds

示例 8 中代码表示可以从数组中提取值，按照对应位置对变量赋值。本质上，这种写法属于“模式匹配”，只要等号两边的模式相同，左边的变量就会被赋予对应的值。

示例 9 是使用嵌套数组进行解构的例子。

示例9

let [hzh, [[hcq], cly]] = [1, [[2],3]];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);
console.log("");
console.log("输出cly：");
console.log("cly = " + cly);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 1

输出hcq：
hcq = 2

输出cly：
cly = 3

[Done] exited with code=0 in 0.171 seconds

如果解构不成功，变量的值就等于 undefined。示例 10 中 hcq 属于解构不成功， hcq 的值会等于 undefined。

示例10

let [hzh, hcq] = ['黄子涵'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = undefined

[Done] exited with code=0 in 0.174 seconds

另一种情况是不完全解构，即等号左边的模式只匹配一部分等号右边的数组。这种情况下，解构依然可以成功 。示例 11 属于不完全解构，但是可以成功 。

示例11

let [hzh, hcq] = ['黄子涵', '黄春钦', '陈兰英'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = 黄春钦

[Done] exited with code=0 in 0.169 seconds

let [hzh, [hcq], cly] = ['黄子涵', ['黄春钦', '黄开卓'], '陈兰英'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);
console.log("");
console.log("输出cly：");
console.log("cly = " + cly);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = 黄春钦

输出cly：
cly = 陈兰英

[Done] exited with code=0 in 0.175 seconds

解构赋值也允许指定默认值。

示例12

let [hzh = '黄子涵'] = [];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

[Done] exited with code=0 in 0.64 seconds

let [hzh, hcq = '黄春钦'] = ['黄子涵'];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = 黄春钦

[Done] exited with code=0 in 0.213 seconds

let [hzh, hcq = '黄春钦'] = ['黄子涵', undefined];
console.log("输出hzh：");
console.log("hzh = " + hzh);
console.log("");
console.log("输出hcq：");
console.log("hcq = " + hcq);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

输出hcq：
hcq = 黄春钦

[Done] exited with code=0 in 0.743 seconds

let [hzh = '黄子涵'] = [undefined];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = 黄子涵

[Done] exited with code=0 in 0.618 seconds

let [hzh = '黄子涵'] = [null];
console.log("输出hzh：");
console.log("hzh = " + hzh);

[Running] node "e:\HMV\JavaScript\JavaScript.js"
输出hzh：
hzh = null

[Done] exited with code=0 in 0.915 seconds

注意

ES6 内部使用严格相等运算符（＝＝＝）来判断一个位置是否有值，所以只有当一个数组成员严格等于 undefined，默认值才会生效。

示例 12 代码中，如果一个数组成员是 null，默认值就不会生效，因为 null 不严格等于 undefined。

标签：输出,hcq,console,log,JavaScript,hzh,解构,2.2,赋值
来源： https://www.cnblogs.com/Huang-zihan/p/16356673.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。