zoukankan      html  css  js  c++  java
  • ES6变量的解构赋值

    变量的解构赋值

    按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构。

    基本用法

    数组的解构赋值

    • 如果解构不成功,变量的值就等于undefined。
    var [a, b, c, d] = [1, 2, 3];
    // var a = 1;
    // var b = 2;
    // var c = 3;
    // var d = undefined;
    
    let [foo, [[bar], baz]] = [1, [[2], 3]];
    // var a = 1;
    // var b = 2;
    // var c = 3;
    
    let [ , , third] = ["foo", "bar", "baz"];
    // var third = "baz";
    
    let [head, ...tail] = [1, 2, 3, 4];
    // var head // 1
    // var tail // [2, 3, 4]
    
    • 解构赋值允许指定默认值。内部使用严格相等运算符(===),判断一个位置是否有值。
    var [foo = true] = []; // true
    var [x = 1] = [undefined]; // 1
    var [x = 1] = [null]; // null
    
    • 如果等号的右边不是数组(不是可遍历的结构),将会报错。
    let [foo] = 1;
    
    var { foo: baz } = { foo: "aaa", bar: "bbb" };
    const [a, b, c, d, e] = 'hello';
    

    对象的解构赋值

    var { 
        foo, 
        bar 
    } = { 
        foo: 'aaa', 
        bar: 'bbb' 
    };
    // var foo = 'aaa';
    // var bar = 'bbb';
    
    • 如果变量名与属性名不一致,必须写成下面这样。
    let obj = { 
        first: 'hello', 
        last: 'world' 
    };
    let { 
        first: f, 
        last: l
    } = obj;
    // let f = 'hello';
    // let l = 'world';
    
    • 如果要将一个已经声明的变量用于解构赋值,必须非常小心。
    var x;
    {x} = {x: 1}; // error,大括号被解析成代码块
    ({x} = {x: 1}); // right
    

    字符串的解构赋值

    const [a, b, c, d, e] = 'hello';
    // const a = 'h';
    // const b = 'e';
    // ...
    
    • 类似数组的对象都有一个length属性,因此还可以对这个属性解构赋值。
    let {length : len} = 'hello';
    len // 5
    

    数值和布尔值的解构赋值

    • 解构赋值时,如果等号右边是数值和布尔值,则会先转为对象。
    let {toString: s} = 123;
    s === Number.prototype.toString // true
    
    • undefined和null无法转为对象,所以对它们进行解构赋值,都会报错。
    let { prop: x } = undefined; // TypeError
    let { prop: y } = null; // TypeError
    

    函数参数的解构赋值

    function add([x, y]){
      return x + y;
    }
    add([1, 2]); // 3
    
    • 函数参数的解构也可以使用默认值。
    function move({x = 0, y = 0} = {}) {
      return [x, y];
    }
    move({x: 3, y: 8}); // [3, 8]
    move({x: 3}); // [3, 0]
    move({}); // [0, 0]
    move(); // [0, 0]
    

    用途

    交换变量的值

    [x, y] = [y, x];
    

    从函数返回多个值

    import React, {
        Component,
        Dimensions,
        Image,
        View,
        Platform,
        StyleSheet,
        Text,
    } from 'react-native';
    

    解构赋值可以方便地将一组参数与变量名对应起来。

    // 参数是一组有次序的值
    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;
    

    函数参数的默认值

    jQuery.ajax = function (url, {
        async = true,
        beforeSend = function () {},
        cache = true,
        complete = function () {},
        crossDomain = false,
        global = true
    }){};
    
  • 相关阅读:
    超强web页面上绘图...
    jQuery plugins ...
    [转]asp.net文件下载方法...
    SQL SERVER 在做字符串比较时会自动去掉首尾空格?
    原来DataTable的Distinct竟如此简单!
    哎呀!可能有弹出式窗口拦截器生成Gmail无法打开该网页。如果您使用弹出式窗口拦截器,请将其关闭以便打开窗口。
    jquery的val() 的疑惑 ...
    [转].NET程序中打包安装程序中的卸载程序的制作
    小程序跳转页面选择数据
    dokcer kibana
  • 原文地址:https://www.cnblogs.com/ddfe/p/5608142.html
Copyright © 2011-2022 走看看