【ES6复习】解构赋值

栏目: JavaScript · 发布时间: 6年前

内容简介:ES6语法糖:candy:,通过使用数组或者对象字面量的形式从数组和对象中获取属性并赋值给变量。这种方式语言清晰简介,并能够很好的处理默认值。如果解构对象为非可遍历对象,那么将会抛出

ES6语法糖:candy:,通过使用数组或者对象字面量的形式从数组和对象中获取属性并赋值给变量。

这种方式语言清晰简介,并能够很好的处理默认值。

数组的解构赋值

iterable
undefined
undefined
// 传统形式 默认值
let arr = [1, 2, 3];
let a = arr[0];
let b = arr[1];
let c = arr[2];
let d = arr[3] || 4;

// 解构赋值
let [a, b, c] = arr;
// 嵌套操作
let [a, [b], c] = [1, [2], 3];
let [, , c] = [1, 2, 3]; // c=3

// 剩余操作
let [a, ...b] = [1, 2, 3]; // a=1, b=[2,3]

// 解构失败
let [a] = []; // a=undefined

// 默认值 (null !== undefined 所以b未被赋值)
let [a = 4, b = 5, c = 6] = [1, null]; // a=1, b=null, c=6

// 默认值为函数
function foo() {console.log('默认值'); return 100;}
let [a = foo()] = [1]; // a=1 且foo不会被执行

如果解构对象为非可遍历对象,那么将会抛出 TypeError: arr is not iterable 的错误。

注意:warning::非可遍历对象,babel转换时不会报错,但运用时可能会出错。

对象的解构赋值

  • 基本特效和数组相似,但适用于数组和对象。
  • 区别在于数组通过顺序取值,而对象是通过属性名进行取值的。
  • 属性可以重命名。
let { name, age } = { name: "aaa", age: 12 };

// 重命名
let { name:username, age } = { name: "aaa", age: 12 }; // 不会申明name变量

// 嵌套
let person = {
  name: {
        firsetName: '1',
        lastName: '2',
    }
};
let { name: {firsetName} } = person; // 同理不会申明name变量

// 对象解构数据
let {'0':foo} = [22]; // foo=22

对已经申明的变量进行解构赋值:

JavaScript 引擎会将 {x} 理解成一个代码块,从而发生语法错误。数组不存在这种问题

let x;
{x} = {x: 1}; // 语法错误

({x} = {x: 1}); // 使用括号解决这个问题

用途

  • 变量交换

    let a = 1,b = 2;
    [a, b] = [b, a];
    
  • 函数参数对应,并设置默认值

    // 数组
    function f([b, b, c, d = 4]) { ... }
    f([1, 2, 3]);
    
    // 对象
    function f1({a, b, c}) { ... }
    f({a: 1, b: 2, c: 3});
    
  • 问题1

    // ReferenceError: b is not defined
    let [a = b, b = 1] = [];
    
    // 等价于
    let a = [0] || b,
        b = [1] || 1;
    

结合let和const的知识点,由于在使用b时没有申明,所以运行时报错。

如果 [a = 1, b = a] 就不会存在这种问题。


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Sass and Compass in Action

Sass and Compass in Action

Wynn Netherland、Nathan Weizenbaum、Chris Eppstein、Brandon Mathis / Manning Publications / 2013-8-2 / USD 44.99

Written by Sass and Compass creators * Complete Sass language reference * Covers prominent Compass community plug-ins * Innovative approach to creating stylesheets Cascading Style Sheets paint the we......一起来看看 《Sass and Compass in Action》 这本书的介绍吧!

HTML 编码/解码
HTML 编码/解码

HTML 编码/解码

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具