zoukankan      html  css  js  c++  java
  • 解构赋值

    // var node = {
    // loc: {
    // start: {
    // line: 1,
    // column: 5
    // }
    // }
    // };

    // var { loc: { start: { line,column }} } = node;//console.log(column)//5
    // var { loc: { start: { line }} } = node;
    // console.log(line) // 1

    //loc // error: loc is undefined
    //start // error: start is undefined

    // 对象的解构也可以指定默认值。默认值生效的条件是,对象的属性值严格等于undefined。
    // var {x = 3} = {};
    // x // 3

    // var {x, y = 5} = {x: 1};
    // x // 1
    // y // 5


    // x:y x是模式,y是变量被赋值
    //var {x:y = 3} = {};
    //console.log(y) // 3
    //console.log(x)//x is not defined

    // x:y x是模式,y是变量默认值不是严格等于undefined所以被赋值5
    // var {x:y = 3} = {x: 5};
    // y // 5

    // var { message: msg = 'Something went wrong' } = {};
    // msg // "Something went wrong"

    // 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
    // 错误的写法
    // var x;
    // {x} = {x: 1};
    // SyntaxError: syntax error
    // 因为JavaScript引擎会将{x}理解成一个代码块,从而发生语法错误。只有不将大括号写在行首,避免JavaScript将其解释为代码块,才能解决这个问题。
    // 正确的写法
    // var x;
    // ({x} = {x: 1});
    // console.log(x)

    // let {length : len} = 'hello';
    // len // 5

    // 函数的参数也可以使用解构赋值。

    // function add([x, y]){
    // return x + y;
    // }

    // //add([1, 2]); // 3
    // console.log(add([1, 2],[3,4]))//3 一样的解构复制 x=1,y=2 没有第二个参数

    // console.log([[1, 2], [3, 4]].map(([a, b]) => a + b))// [ 3, 7 ]

    // 只要有可能,就不要在模式中放置圆括号。

    // (1)变量声明语句中,不能带有圆括号。========var let const
    // 全部报错
    //var [(a)] = [1];

    //var {x: (c)} = {};
    // var ({x: c}) = {};
    // var {(x: c)} = {};
    // var {(x): c} = {};

    // var { o: ({ p: p }) } = { o: { p: 2 } };

    // (2)函数参数中,模式不能带有圆括号。
    // 函数参数也属于变量声明,因此不能带有圆括号。
    // // 报错
    // function f([(z)]) { return z; }
    // (3)赋值语句中,不能将整个模式,或嵌套模式中的一层,放在圆括号之中。
    // 全部报错
    // ({ p: a }) = { p: 42 };
    // ([a]) = [5];


    // 可以使用圆括号的情况只有一种:赋值语句的非模式部分,可以使用圆括号。
    // 因为首先它们都是赋值语句,而不是声明语句;其次它们的圆括号都不属于模式的一部分。
    // [(b)] = [3]; // 正确
    // console.log(b)
    // ({ p: (d) } = {}); // 正确
    // console.log(d)//undefined
    // [(parseInt.prop)] = [3]; // 正确

    // (1)交换变量的值
    // var x=1,y=2;
    // [x, y] = [y, x];
    // console.log(x)//2
    // (2)从函数返回多个值
    // 函数只能返回一个值,如果要返回多个值,只能将它们放在数组或对象里返回。有了解构赋值,取出这些值就非常方便。
    // 返回一个数组

    // function example() {
    // return [1, 2, 3];
    // }
    // var [a, b, c] = example();
    // console.log([a, b, c])//[ 1, 2, 3 ]
    // console.log(a)//1
    // // 返回一个对象

    // function example() {
    // return {
    // foo: 1,
    // bar: 2
    // };
    // }
    // var { foo, bar } = example();
    // console.log(foo)//1
    // console.log({ foo, bar })//{ foo: 1, bar: 2 }

    // 解构赋值可以方便地将一组参数与变量名对应起来。
    // 参数是一组有次序的值
    // function f([x, y, z]) { ... }
    // f([1, 2, 3]);

    // // 参数是一组无次序的值
    // function f({x, y, z}) { ... }
    // f({z: 3, y: 2, x: 1});

    // 解构赋值对提取JSON对象中的数据,尤其有用。
    // var jsonData = {
    // id: 42,
    // status: "OK",
    // data: [867, 5309]
    // };

    // let { id, status, data: number } = jsonData;

    // console.log(id, status, number);
    // 42, "OK", [867, 5309]

    // (5)函数参数的默认值
    // 指定参数的默认值,就避免了在函数体内部再写var foo = config.foo || 'default foo';这样的语句。
    // jQuery.ajax = function (url, {
    // async = true,
    // beforeSend = function () {},
    // cache = true,
    // complete = function () {},
    // crossDomain = false,
    // global = true,
    // // ... more config
    // }) {
    // // ... do stuff
    // };
    // (6)遍历Map结构
    // 任何部署了Iterator接口的对象,都可以用for...of循环遍历。Map结构原生支持Iterator接口,配合变量的解构赋值,获取键名和键值就非常方便。
    // var map = new Map();
    // map.set('first', 'hello');
    // map.set('second', 'world');

    // for (let [key, value] of map) {
    // console.log(key + " is " + value);
    // }
    // // first is hello
    // // second is world
    // 如果只想获取键名,或者只想获取键值,可以写成下面这样。
    // 获取键名
    // for (let [key] of map) {
    // // ...
    // }

    // // 获取键值
    // for (let [,value] of map) {
    // // ...
    // }
    // (7)输入模块的指定方法
    // 加载模块时,往往需要指定输入那些方法。解构赋值使得输入语句非常清晰。
    // const { SourceMapConsumer, SourceNode } = require("source-map");

  • 相关阅读:
    正则去掉 html标签
    app内嵌 h5页面 再滑动的时候 触发击穿底下的一些touchstart事件
    设置按钮不能连续点击并触发点击事件
    使用NPOI导入导出标准Excel
    ASP.NET导出word实例
    常用SQL语句大全总结
    判断以及防止SQL注入
    javascript 正则表达式总结
    前端页面优化技巧
    自我介绍
  • 原文地址:https://www.cnblogs.com/mr-pz/p/5983178.html
Copyright © 2011-2022 走看看