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

    何为解构赋值?

    解构赋值语法是一个 Javascript 表达式,这使得可以将值从数组属性从对象提取到不同的变量中。

    如果理解起来感觉抽象,直接看下面例子:

    数组解构:

    我们在以前要给变量赋值需要像下面这样写:

    var arr=[1,2.3];
    var a = arr[0];
    var b = arr[1];
    var c = arr[2];

    是不是感觉略繁琐了点?而如果我们用解构赋值的话,可以怎么写呢?看下面代码:

    let [a,b,c] = [1,2,3];
    console.log(a,b,c);

    此时我们可以看出返回结果如下图:

    是不是感觉用起来爽多了?

    为了防止从数组中取出一个值为undefined的对象,可以为这个对象设置默认值。如以下代码:

    let [a = 5, b = 7] = [1];
    console.log(a); // 1
    console.log(b); // 7

    解构函数中,我们可以直接交换变量。以前的话,还需要一个中间值。我们现在就可以直接写成下面这样子了:

    let a = 1;
    let b = 3;
    
    [a, b] = [b, a];
    console.log(a); // 3
    console.log(b); // 1

    如果你想忽略某些值,可以像下面这样子写:

    function f() {
      return [1, 2, 3];
    }
    
    var [a, , b] = f();
    console.log(a); // 1
    console.log(b); // 3

    当解构一个数组时,可以使用剩余模式,将数组剩余部分赋值给一个变量。

    var [a, ...b] = [1, 2, 3];
    console.log(a); // 1
    console.log(b); // [2, 3]

    剩余元素必须是数组的最后一个元素,所以剩余元素后面不能放其他东西了。

    解构对象:

    基本赋值:

    let {name, pass} = {name: 'Maria',pass: 123456}
    console.log(name, pass)

    返回结果如下图:

    对象同样可以赋默认值

    var {x = 10, y = 5} = {x: 3};
    
    console.log(x); // 3
    console.log(y); // 5

    函数参数赋默认值如下:

    function drawChart({size = 'big', cords = { x: 0, y: 0 }, radius = 25}) {
        console.log(size, cords, radius);
    }
    
    drawChart({
        cords: { x: 18, y: 30 },
        radius: 30
    });
  • 相关阅读:
    4月1日作业总结,成绩
    4月8日作业重点及点评
    构建之法 东北师大站 冲刺领跑
    4月1日作业重点及点评
    3月25日作业总结,成绩
    3月18日作业总结,成绩
    3月25日作业重点及点评
    python: 反射机制;
    python: 基本知识(一)
    opencv: 轮廓提取;
  • 原文地址:https://www.cnblogs.com/sese/p/9502026.html
Copyright © 2011-2022 走看看