<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>ES6解构赋值</title>
</head>
<body>
<script>
/*数组解构赋值*/
// let [a,b,c] = [1,2,3];
// console.log(a+','+b+','+c);//1,2,3
// let [a,b=3] = [111];
// console.log(a);//111
// console.log(b);//3
/*对象解构赋值*/
// let {a,b} = {a:123,b:321};
// console.log(a);//123
// console.log(b);//321
// let {a:name,b:age} = {a:123,b:321};
// console.log(name);//123
// console.log(age);//321
// let {foo:baz} = {foo:123,bar:321};
// console.log(baz); // 123
// console.log(foo); // error: foo is not defined
// const node = {
// loc: {
// start: {
// line: 1,
// column: 5
// }
// }
// };
// let { loc, loc: { start }, loc: { start: { line }} } = node;
// console.log(line); // 1
// console.log(loc); // Object {start: Object}
// console.log(start); // Object {line: 1, column: 5}
// var {x:y=3} = {x:6};
// console.log(y);//6
// var arr = [1,2,3];
// let {0:first,[arr.length - 1]:last} = arr;
// console.log(first);//1
// console.log(last);//3
/*字符串解构赋值*/
// const [a,b,c,d,e] = 'hello';
// console.log(a+','+b+','+c+','+d+','+e);//h,e,l,l,o
// const {length:length} = 'hello';
// console.log(length);//5
/*布尔值数字解构赋值*/
// let {toString:s} = true;
// console.log(s);//ƒ toString() { [native code] }
// let {toString:s} = 123;
// console.log(s);//ƒ toString() { [native code] }
/*函数参数解构赋值*/
// function add([x,y]){
// return x + y;
// }
// console.log(add([1,2]));//3
// let newArr = [[1,2],[3,4]].map(([a,b]) => {
// return a + b;
// });
// console.log(newArr);//(2) [3, 7]
// function add({x=0,y=0} = {}){//上面代码中，函数move的参数是一个对象，通过对这个对象进行解构，得到变量x和y的值。如果解构失败，x和y等于默认值。
// return x + y;
// }
// console.log(add({}));//0
// function add1({x,y} = {x:0,y:0}){//上面代码是为函数move的参数指定默认值，而不是为变量x和y指定默认值，所以会得到与前一种写法不同的结果。
// return x + y;
// }
// console.log(add1({}));//NaN
/*解构赋值用途*/
/*交换变量的值*/
// let x = 1;//上面代码交换变量x和y的值，这样的写法不仅简洁，而且易读，语义非常清晰。
// let y = 2;
// [x,y] = [y,x];
// console.log(x);//2
// console.log(y);//1
/*从函数返回多个值*/
// function rarr(){//函数只能返回一个值，如果要返回多个值，只能将它们放在数组或对象里返回。有了解构赋值，取出这些值就非常方便。
// return [1,2,3];
// }
// let [a,b,c] = rarr();
// function robj(){
// return {
// name:123,
// age:321
// }
// }
// let {name,age} = robj();
/*函数参数的定义*/
// // 参数是一组有次序的值
// function f([x, y, z]) { ... }//解构赋值可以方便地将一组参数与变量名对应起来。
// f([1, 2, 3]);
// // 参数是一组无次序的值
// function f({x, y, z}) { ... }
// f({z: 3, y: 2, x: 1});
/*提取 JSON 数据*/
// let jsonData = {//上面代码可以快速提取 JSON 数据的值。
// name:123,
// age:321,
// school:[116,40]
// }
// let {name,age,school} = jsonData;
// console.log(name);//123
// console.log(age);//321
// console.log(school);//(2) [116, 40]
/*函数参数的默认值*/
// jQuery.ajax = function (url, {//指定参数的默认值，就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
// async = true,
// beforeSend = function () {},
// cache = true,
// complete = function () {},
// crossDomain = false,
// global = true,
// // ... more config
// } = {}) {
// // ... do stuff
// };
/*遍历 Map 结构*/
// const map = new Map();//任何部署了 Iterator 接口的对象，都可以用for...of循环遍历。Map 结构原生支持 Iterator 接口，配合变量的解构赋值，获取键名和键值就非常方便。
// map.set('first','hello');
// map.set('secend','world');
// for(let [key,value] of map){
// console.log(key + value);// firsthello secondworld
// }
// for(let [key] of map){//得到键名
// }
// for(let [,value] of map){//得到键值
// }
/*输入模块的指定方法*/
// const { SourceMapConsumer, SourceNode } = require("source-map");//加载模块时，往往需要指定输入哪些方法。解构赋值使得输入语句非常清晰。
</script>
</body>
</html>
原文地址：https://www.cnblogs.com/xingxingclassroom/p/10395590.html
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。