ES6 - 解构赋值
2018-12-25 本文已影响0人
饮杯梦回酒
导读 :
- 挑干的来说就是提供了一个整体赋值的格式 (用的最多的主要是数组解构 / 对象解构) , 直接上代码看的明明白白。
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
// let a = 5;
// let b = 12;
// let c = 7;
let [a, b, c] = [5, 12, 7]; // 左右两边格式要一样(参数个数), 直接替代上面的定义
console.log(a, b, c); // 打印结果: 5, 12, 7
let d = 5, e = 12; // 交换2数位置
[d, e] = [e, d];
console.log(d, e); // 打印结果: 12, 5
function getPos() {
// xxxxx
return {
left: 10,
top: 20
}
}
let {left, top:t} = getPos(); // window定义过top,所以对top改名为t
console.log(left, t);*/
function getValue({a, b='默认'}) {
console.log(a, b);
}
getValue({a:1, b:2}); // 打印结果: 1, 2
getValue({a:1}); // 打印结果: 1, 默认
</script>
</body>
</html>
注意点:解构赋值中的元素是可以赋初值的!
总结 :
- 解构赋值主要是对数据格式的改变,使我们更容易记住。其主要运用场景有:
- 处理后台传来的JSON数据(通过代码片段中第一个案例的方法提取其中的值)
- 引入模块的指定方法时 : (相当于把require留出的接口值赋值给我们自定义的2个变量中)
const { SourceMapConsumer, SourceNode } = require("source-map");