<!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>
备注:文中多数内容摘自阮一峰老师文章,仅供自我学习查阅。