ES6基础知识（解构赋值）

最新推荐文章于 2024-06-14 11:20:36 发布

weixin_30347009

最新推荐文章于 2024-06-14 11:20:36 发布

阅读量44

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/xingxingclassroom/p/10395590.html

版权

<!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

weixin_30347009

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
ES6基础知识（解构赋值）

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equ...
复制链接

扫一扫